diff --git a/app/client/cypress/support/Pages/DataSources.ts b/app/client/cypress/support/Pages/DataSources.ts
index a0c9033e37..06d78dec1c 100644
--- a/app/client/cypress/support/Pages/DataSources.ts
+++ b/app/client/cypress/support/Pages/DataSources.ts
@@ -101,8 +101,7 @@ export class DataSources {
   _selectedRow = ".tr.selected-row";
   _activeTab = "span:contains('Active')";
   _selectedActiveTab = "li[aria-selected='true'] " + this._activeTab;
-  _contextMenuDatasource = "span[name='comment-context-menu']";
-  _contextMenuDSReviewPage = "span[name='context-menu']";
+  _contextMenuDSReviewPage = "[data-testid='t--context-menu-trigger']";
   _contextMenuDelete = ".t--datasource-option-delete";
   _datasourceCardGeneratePageBtn = ".t--generate-template";
   _queryOption = (option: string) =>
@@ -1000,7 +999,7 @@ export class DataSources {
     };
   }) {
     if (options.limit) {
-      // Select Limit Variable from dropdown
+      // Select Limit variable from dropdown
       cy.get(this._graphqlPagination._limitVariable).click({
         force: true,
       });
@@ -1008,7 +1007,7 @@ export class DataSources {
         .contains(options.limit.variable)
         .click({ force: true });
 
-      // Set the Limit Value as 1
+      // Set the Limit value as 1
       cy.get(this._graphqlPagination._limitValue)
         .first()
         .focus()
@@ -1016,7 +1015,7 @@ export class DataSources {
     }
 
     if (options.offset) {
-      // Select Offset Variable from dropdown
+      // Select Offset vaiable from dropdown
       cy.get(this._graphqlPagination._offsetVariable).click({
         force: true,
       });
@@ -1025,7 +1024,7 @@ export class DataSources {
         .contains(options.offset.variable)
         .click({ force: true });
 
-      // Set the Limit Value as 1
+      // Set the Limit value as 1
       cy.get(this._graphqlPagination._offsetValue)
         .first()
         .focus()
diff --git a/app/client/package.json b/app/client/package.json
index c3d0679b9b..5e1fba4494 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -91,8 +91,8 @@
     "cypress-log-to-output": "^1.1.2",
     "dayjs": "^1.10.6",
     "deep-diff": "^1.0.2",
-    "design-system": "npm:@appsmithorg/design-system@2.1.9",
-    "design-system-old": "npm:@appsmithorg/design-system-old@1.1.7",
+    "design-system": "npm:@appsmithorg/design-system@2.1.10",
+    "design-system-old": "npm:@appsmithorg/design-system-old@1.1.8",
     "downloadjs": "^1.4.7",
     "fast-deep-equal": "^3.1.3",
     "fast-xml-parser": "^3.17.5",
diff --git a/app/client/src/ce/pages/Applications/EmbedSnippetTab.tsx b/app/client/src/ce/pages/Applications/EmbedSnippetTab.tsx
index 9d441b92f9..00cb761602 100644
--- a/app/client/src/ce/pages/Applications/EmbedSnippetTab.tsx
+++ b/app/client/src/ce/pages/Applications/EmbedSnippetTab.tsx
@@ -12,6 +12,7 @@ import { getCurrentApplication } from "selectors/editorSelectors";
 import PrivateEmbeddingContent from "pages/Applications/EmbedSnippet/PrivateEmbeddingContent";
 import PropertyHelpLabel from "pages/Editor/PropertyPane/PropertyHelpLabel";
 import { ADMIN_SETTINGS_PATH } from "constants/routes";
+import _ from "lodash";
 
 export const StyledPropertyHelpLabel = styled(PropertyHelpLabel)`
   .bp3-popover-content > div {
@@ -66,8 +67,21 @@ export function EmbedSnippetTab({
   return <ShareModal />;
 }
 
+// get only the part of the url after the domain name
+export const to = (url: string) => {
+  const path = _.drop(
+    url
+      .toString()
+      .toLowerCase()
+      .replace(/([a-z])?:\/\//, "$1")
+      .split("/"),
+  ).join("/");
+  return `/${path}`;
+};
+
 function ShareModal() {
   const embedSnippet = useUpdateEmbedSnippet();
+
   return (
     <div className="flex flex-col gap-6">
       {embedSnippet.isSuperUser && (
@@ -124,7 +138,7 @@ function ShareModal() {
           data-testid="preview-embed"
           endIcon="share-box-line"
           target={"_blank"}
-          to={embedSnippet.appViewEndPoint}
+          to={to(embedSnippet.appViewEndPoint)}
         >
           {createMessage(IN_APP_EMBED_SETTING.previewEmbeddedApp)}
         </Link>
diff --git a/app/client/src/ce/pages/Home/LeftPaneBottomSection.tsx b/app/client/src/ce/pages/Home/LeftPaneBottomSection.tsx
index 22f81f8a9e..f293420668 100644
--- a/app/client/src/ce/pages/Home/LeftPaneBottomSection.tsx
+++ b/app/client/src/ce/pages/Home/LeftPaneBottomSection.tsx
@@ -44,7 +44,6 @@ export const LeftPaneVersionData = styled.div`
   justify-content: space-between;
   color: var(--ads-v2-color-fg-emphasis);
   font-size: 8px;
-  width: 92%;
   margin-top: ${(props) => props.theme.spaces[3]}px;
 `;
 
diff --git a/app/client/src/components/editorComponents/ActionNameEditor.tsx b/app/client/src/components/editorComponents/ActionNameEditor.tsx
index 7d9004903f..b59a2d5740 100644
--- a/app/client/src/components/editorComponents/ActionNameEditor.tsx
+++ b/app/client/src/components/editorComponents/ActionNameEditor.tsx
@@ -103,6 +103,7 @@ function ActionNameEditor(props: ActionNameEditorProps) {
           <div
             style={{
               display: "flex",
+              alignItems: "center",
             }}
           >
             {currentPlugin && (
diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx
index ac1b19d033..121a7d0509 100644
--- a/app/client/src/components/editorComponents/ApiResponseView.tsx
+++ b/app/client/src/components/editorComponents/ApiResponseView.tsx
@@ -173,7 +173,7 @@ const HelpSection = styled.div`
 `;
 
 const ResponseBodyContainer = styled.div`
-  overflow-y: auto;
+  overflow-y: clip;
   height: 100%;
   display: grid;
 `;
diff --git a/app/client/src/components/editorComponents/Debugger/ErrorLogs/ErrorLogItem.tsx b/app/client/src/components/editorComponents/Debugger/ErrorLogs/ErrorLogItem.tsx
index d89b3bbb6c..389d9f2389 100644
--- a/app/client/src/components/editorComponents/Debugger/ErrorLogs/ErrorLogItem.tsx
+++ b/app/client/src/components/editorComponents/Debugger/ErrorLogs/ErrorLogItem.tsx
@@ -109,6 +109,9 @@ const Wrapper = styled.div<{ collapsed: boolean }>`
     text-decoration-line: underline;
     flex-shrink: 0;
     width: max-content;
+    > span {
+      font-size: 12px;
+    }
   }
 `;
 
diff --git a/app/client/src/components/editorComponents/Debugger/ErrorLogs/components/LogCollapseData.tsx b/app/client/src/components/editorComponents/Debugger/ErrorLogs/components/LogCollapseData.tsx
index 5cd733c954..5e015b20e0 100644
--- a/app/client/src/components/editorComponents/Debugger/ErrorLogs/components/LogCollapseData.tsx
+++ b/app/client/src/components/editorComponents/Debugger/ErrorLogs/components/LogCollapseData.tsx
@@ -38,6 +38,7 @@ const MessageWrapper = styled.div`
 `;
 
 export const JsonWrapper = styled.div`
+  word-break: break-all;
   svg {
     color: ${(props) => props.theme.colors.debugger.jsonIcon} !important;
     height: 12px !important;
diff --git a/app/client/src/components/editorComponents/Debugger/LogItem.tsx b/app/client/src/components/editorComponents/Debugger/LogItem.tsx
index 7d03eb34dc..dc979aa274 100644
--- a/app/client/src/components/editorComponents/Debugger/LogItem.tsx
+++ b/app/client/src/components/editorComponents/Debugger/LogItem.tsx
@@ -123,9 +123,11 @@ const Wrapper = styled.div<{ collapsed: boolean }>`
     margin-left: auto;
     ${getTypographyByKey("btnMedium")};
     color: var(--ads-v2-color-fg-emphasis);
-    text-transform: uppercase;
     cursor: pointer;
     width: max-content;
+    > span {
+      font-size: 12px;
+    }
   }
 `;
 
diff --git a/app/client/src/components/editorComponents/GlobalSearch/SearchBox.tsx b/app/client/src/components/editorComponents/GlobalSearch/SearchBox.tsx
index e001283b30..b8e9788568 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/SearchBox.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/SearchBox.tsx
@@ -66,7 +66,7 @@ const CategoryDisplay = styled.div`
     margin-left: var(--ads-v2-spaces-3);
     transition: 0.2s all ease;
     &:hover {
-      fill: var(--ads-v2-color-bg-muted);
+      fill: var(--ads-v2-color-fg-muted);
     }
   }
 `;
diff --git a/app/client/src/components/editorComponents/GlobalSearch/SearchModal.tsx b/app/client/src/components/editorComponents/GlobalSearch/SearchModal.tsx
index 593ff8cf22..e286b249af 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/SearchModal.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/SearchModal.tsx
@@ -4,6 +4,15 @@ import AnalyticsUtil from "utils/AnalyticsUtil";
 import { ModalBody, ModalContent, Modal } from "design-system";
 
 const StyledDocsSearchModal = styled(ModalContent)`
+  text-rendering: auto;
+  backface-visibility: hidden;
+  -webkit-font-smoothing: subpixel-antialiased;
+  -moz-osx-font-smoothing: auto;
+  width: 500px;
+  &.modal-documentation,
+  &.modal-snippet {
+    width: 785px;
+  }
   .modal-snippet,
   .modal-documentation {
     overflow: hidden;
@@ -37,7 +46,10 @@ function DocsSearchModal({
       }}
       open={modalOpen}
     >
-      <StyledDocsSearchModal data-testid="t--global-search-modal">
+      <StyledDocsSearchModal
+        className={`${className}`}
+        data-testid="t--global-search-modal"
+      >
         <ModalBody className={`${className}`}>{children}</ModalBody>
       </StyledDocsSearchModal>
     </Modal>
diff --git a/app/client/src/components/editorComponents/form/ToggleComponentToJson.tsx b/app/client/src/components/editorComponents/form/ToggleComponentToJson.tsx
index e5269b94af..fdcdd7a190 100644
--- a/app/client/src/components/editorComponents/form/ToggleComponentToJson.tsx
+++ b/app/client/src/components/editorComponents/form/ToggleComponentToJson.tsx
@@ -70,15 +70,18 @@ function ToggleComponentToJsonHandler(props: HandlerProps) {
   return (
     <Tooltip
       content={!!configPropertyPathJsonValue && JS_TOGGLE_DISABLED_MESSAGE}
+      isDisabled={!configPropertyPathJsonValue}
     >
-      <StyledToggleButton
-        data-testid={`t--${props.configProperty}-JS`}
-        icon="js-toggle-v2"
-        isDisabled={!!configPropertyPathJsonValue}
-        isSelected={viewType === ViewTypes.JSON}
-        onClick={handleViewTypeSwitch}
-        size="sm"
-      />
+      <span>
+        <StyledToggleButton
+          data-testid={`t--${props.configProperty}-JS`}
+          icon="js-toggle-v2"
+          isDisabled={!!configPropertyPathJsonValue}
+          isSelected={viewType === ViewTypes.JSON}
+          onClick={handleViewTypeSwitch}
+          size="sm"
+        />
+      </span>
     </Tooltip>
   );
 }
diff --git a/app/client/src/components/utils/formComponents.tsx b/app/client/src/components/utils/formComponents.tsx
index bbf299f22b..da11aba8aa 100644
--- a/app/client/src/components/utils/formComponents.tsx
+++ b/app/client/src/components/utils/formComponents.tsx
@@ -1,28 +1,11 @@
-import { Colors } from "constants/Colors";
-import { Menu, MenuItem } from "design-system-old";
+import { Menu } from "design-system";
 import styled from "styled-components";
 
-export const MenuComponent = styled(Menu)`
-  flex: 0;
-  margin: auto;
-`;
-
 export const MenuWrapper = styled.div`
   display: flex;
   margin: 8px 0px;
 `;
 
-export const RedMenuItem = styled(MenuItem)`
-  &&,
-  && .cs-text {
-    color: ${Colors.DANGER_SOLID};
-  }
-
-  &&,
-  &&:hover {
-    svg,
-    svg path {
-      fill: ${Colors.DANGER_SOLID};
-    }
-  }
+export const StyledMenu = styled(Menu)`
+  flex: 0;
 `;
diff --git a/app/client/src/globalStyles/CodemirrorHintStyles.ts b/app/client/src/globalStyles/CodemirrorHintStyles.ts
index 3005b01627..b1b7d38649 100644
--- a/app/client/src/globalStyles/CodemirrorHintStyles.ts
+++ b/app/client/src/globalStyles/CodemirrorHintStyles.ts
@@ -87,7 +87,6 @@ export const CodemirrorHintStyles = createGlobalStyle<{
         display: flex;
         align-items: center;
         > div {
-          padding: 0 2px;
           img {
             height: 14px;
             width: 14px;
@@ -97,7 +96,7 @@ export const CodemirrorHintStyles = createGlobalStyle<{
       .shortcut {
         font-style: italic;
         font-size: 10px;
-        color: var(--ads-v2-color-fg-subtle);
+        color: var(--ads-v2-color-fg);
       }
     }
 
diff --git a/app/client/src/index.css b/app/client/src/index.css
index e5b81e37b6..69c8e53032 100755
--- a/app/client/src/index.css
+++ b/app/client/src/index.css
@@ -228,10 +228,12 @@ div.bp3-popover-arrow {
 .error-menuitem > .ads-v2-menu__menu-item-children {
   color: var(--ads-v2-color-fg-error) !important;
 }
-.error-menuitem:hover {
+
+.error-menuitem:hover:not([data-disabled]),
+.error-menuitem:focus-visible {
   background-color: var(--ads-v2-color-red-50) !important;
 }
-.error-menuitem:active {
+.error-menuitem:active:not([data-disabled]) {
   background-color: var(--ads-v2-color-red-100) !important;
 }
 .menuitem-nohover:hover {
diff --git a/app/client/src/pages/Applications/ForkApplicationModal.tsx b/app/client/src/pages/Applications/ForkApplicationModal.tsx
index 403e3e3a56..47e8d1a42b 100644
--- a/app/client/src/pages/Applications/ForkApplicationModal.tsx
+++ b/app/client/src/pages/Applications/ForkApplicationModal.tsx
@@ -144,6 +144,7 @@ function ForkApplicationModal(props: ForkApplicationModalProps) {
             <>
               <Select
                 dropdownMatchSelectWidth
+                getPopupContainer={(triggerNode) => triggerNode.parentNode}
                 onSelect={(_, dropdownOption) =>
                   // ignoring this because rc-select label and value types are not compatible
                   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
diff --git a/app/client/src/pages/Applications/ImportApplicationModal.tsx b/app/client/src/pages/Applications/ImportApplicationModal.tsx
index 544b7013d6..a22fb91269 100644
--- a/app/client/src/pages/Applications/ImportApplicationModal.tsx
+++ b/app/client/src/pages/Applications/ImportApplicationModal.tsx
@@ -137,7 +137,12 @@ const CardWrapper = styled.div`
 
 const StatusbarWrapper = styled.div`
   width: 252px;
-  height: 199px;
+  height: 240px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
   .cs-icon {
     margin: auto;
     border-radius: var(--ads-v2-border-radius-circle);
@@ -255,7 +260,10 @@ function ImportApplicationModal(props: ImportApplicationModalProps) {
     <Modal onOpenChange={handleModalClose} open={isModalOpen}>
       <ModalContent
         className={"t--import-application-modal"}
-        style={{ width: "fit-content" }}
+        style={{
+          width: importingApplication ? "40vw" : "fit-content",
+          minWidth: "30vw",
+        }}
       >
         <ModalHeader>
           {createMessage(IMPORT_APPLICATION_MODAL_TITLE)}
diff --git a/app/client/src/pages/Editor/APIEditor/GraphQL/Pagination.tsx b/app/client/src/pages/Editor/APIEditor/GraphQL/Pagination.tsx
index a8e859cbe3..7f82065baa 100644
--- a/app/client/src/pages/Editor/APIEditor/GraphQL/Pagination.tsx
+++ b/app/client/src/pages/Editor/APIEditor/GraphQL/Pagination.tsx
@@ -307,7 +307,7 @@ function PaginationTypeBasedWrapper({
                 name={separateKeyPath}
                 onChange={onSeparateKeyChange}
               >
-                <Text> {separateKeyLabel} </Text>
+                {separateKeyLabel}
               </Checkbox>
             </CheckboxFieldWrapper>
           )}
@@ -379,11 +379,11 @@ function Pagination(props: PaginationProps) {
               value: PaginationType.NONE,
             },
             {
-              label: "Paginate via Limit and Offset",
+              label: "Paginate via limit and offset",
               value: PaginationType.PAGE_NO,
             },
             {
-              label: "Paginate via Cursor based",
+              label: "Paginate via cursor based",
               value: PaginationType.CURSOR,
             },
           ]}
@@ -425,11 +425,11 @@ function Pagination(props: PaginationProps) {
                     label: props.limitBased?.limit?.name,
                     value: props.limitBased?.limit?.name,
                   }}
-                  valueLabel="Limit Value"
+                  valueLabel="Limit value"
                   valuePath={`${PAGINATION_PREFIX}.${LIMITBASED_PREFIX}.${PaginationSubComponent.Limit}.value`}
                   valuePlaceholder="{{Table1.pageSize}}"
                   valueTooltip="Override the value of the limit variable selected i.e. the no of rows returned"
-                  variableLabel="Limit Variable"
+                  variableLabel="Limit variable"
                   variableOptions={variableOptions}
                   variableTooltip="Select the limit variable from the query"
                 />
@@ -461,11 +461,11 @@ function Pagination(props: PaginationProps) {
                     label: props.limitBased?.offset?.name,
                     value: props.limitBased?.offset?.name,
                   }}
-                  valueLabel="Offset Value"
+                  valueLabel="Offset value"
                   valuePath={`${PAGINATION_PREFIX}.${LIMITBASED_PREFIX}.${PaginationSubComponent.Offset}.value`}
                   valuePlaceholder="{{Table1.pageNo * Table1.pageSize}}"
                   valueTooltip="Override the value of the offset variable selected ie the no of rows omitted from the beginning"
-                  variableLabel="Offset Variable"
+                  variableLabel="Offset variable"
                   variableOptions={variableOptions}
                   variableTooltip="Select the offset variable from the query"
                 />
@@ -487,9 +487,9 @@ function Pagination(props: PaginationProps) {
               </Text>
               <PaginationSection>
                 <SubHeading kind="body-m" renderAs={"p"}>
-                  Configure Previous Page
+                  Configure previous page
                 </SubHeading>
-                {/* Previous Limit Value */}
+                {/* Previous Limit value */}
                 <PaginationTypeBasedWrapper
                   actionName={props.actionName}
                   className="t--apiFormPaginationPrevLimit"
@@ -518,11 +518,11 @@ function Pagination(props: PaginationProps) {
                     label: paginationPrev?.limit?.name,
                     value: paginationPrev?.limit?.name,
                   }}
-                  valueLabel="Limit Variable Value"
+                  valueLabel="Limit variable value"
                   valuePath={`${PAGINATION_PREFIX}.${CURSORBASED_PREFIX}.${CURSOR_PREVIOUS_PREFIX}.${PaginationSubComponent.Limit}.value`}
                   valuePlaceholder="{{Table1.pageSize}}"
                   valueTooltip="Override the value for the previous no of rows to be fetched"
-                  variableLabel="Limit Variable Name"
+                  variableLabel="Limit variable name"
                   variableOptions={variableOptions}
                   variableTooltip="Select the variable from the query that holds the last/previous limit value"
                 />
@@ -554,11 +554,11 @@ function Pagination(props: PaginationProps) {
                     label: paginationPrev?.cursor?.name,
                     value: paginationPrev?.cursor?.name,
                   }}
-                  valueLabel="Start Cursor Value"
+                  valueLabel="Start cursor value"
                   valuePath={`${PAGINATION_PREFIX}.${CURSORBASED_PREFIX}.${CURSOR_PREVIOUS_PREFIX}.${PaginationSubComponent.Cursor}.value`}
                   valuePlaceholder="{{Api1.data.previousCursor}}"
                   valueTooltip="Binding the widget action to the previous page activity"
-                  variableLabel="Start Cursor Variable"
+                  variableLabel="Start cursor variable"
                   variableOptions={variableOptions}
                   variableTooltip="Select the variable which holds the before cursor"
                 />
@@ -567,7 +567,7 @@ function Pagination(props: PaginationProps) {
                 <SubHeading kind="body-m" renderAs={"p"}>
                   Configure Next Page
                 </SubHeading>
-                {/* Next Limit Value */}
+                {/* Next Limit value */}
                 <PaginationTypeBasedWrapper
                   actionName={props.actionName}
                   className="t--apiFormPaginationNextLimit"
@@ -606,11 +606,11 @@ function Pagination(props: PaginationProps) {
                   separateKeyLabel="Enable separate value for first limit variable"
                   separateKeyPath={`${PAGINATION_PREFIX}.${CURSORBASED_PREFIX}.${CURSOR_NEXT_PREFIX}.${PaginationSubComponent.Limit}.isSeparate`}
                   separateValueFlag={!!paginationNext?.limit?.isSeparate}
-                  valueLabel="Limit Variable Value"
+                  valueLabel="Limit variable value"
                   valuePath={`${PAGINATION_PREFIX}.${CURSORBASED_PREFIX}.${CURSOR_NEXT_PREFIX}.${PaginationSubComponent.Limit}.value`}
                   valuePlaceholder="{{Table1.pageSize}}"
                   valueTooltip="Override the value for the next no of rows to be fetched"
-                  variableLabel="Limit Variable Name"
+                  variableLabel="Limit variable name"
                   variableOptions={variableOptions}
                   variableTooltip="Select the variable from the query that holds the first/next limit value"
                 />
@@ -642,11 +642,11 @@ function Pagination(props: PaginationProps) {
                     label: paginationNext?.cursor?.name,
                     value: paginationNext?.cursor?.name,
                   }}
-                  valueLabel="End Cursor Value"
+                  valueLabel="End cursor value"
                   valuePath={`${PAGINATION_PREFIX}.${CURSORBASED_PREFIX}.${CURSOR_NEXT_PREFIX}.${PaginationSubComponent.Cursor}.value`}
                   valuePlaceholder="{{Api1.data.nextCursor}}"
                   valueTooltip="Binding the widget action to the next page activity"
-                  variableLabel="End Cursor Variable"
+                  variableLabel="End cursor variable"
                   variableOptions={variableOptions}
                   variableTooltip="Select the variable which holds the after cursor"
                 />
diff --git a/app/client/src/pages/Editor/APIEditor/GraphQL/QueryEditor.tsx b/app/client/src/pages/Editor/APIEditor/GraphQL/QueryEditor.tsx
index d7421327e8..074f1190ee 100644
--- a/app/client/src/pages/Editor/APIEditor/GraphQL/QueryEditor.tsx
+++ b/app/client/src/pages/Editor/APIEditor/GraphQL/QueryEditor.tsx
@@ -9,6 +9,7 @@ import "codemirror-graphql/mode";
 import QueryWrapper from "./QueryWrapperWithCSS";
 import type { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
 import {
+  CodeEditorBorder,
   EditorModes,
   EditorSize,
   TabBehaviour,
@@ -56,6 +57,8 @@ function QueryEditor(props: QueryProps) {
         </Text>
       </QueryHeader>
       <Field
+        border={CodeEditorBorder.NONE}
+        borderLess
         component={LazyCodeEditor}
         evaluatedPopUpLabel="Query"
         {...props}
diff --git a/app/client/src/pages/Editor/APIEditor/GraphQL/VariableEditor.tsx b/app/client/src/pages/Editor/APIEditor/GraphQL/VariableEditor.tsx
index 38294c4434..5335f45a97 100644
--- a/app/client/src/pages/Editor/APIEditor/GraphQL/VariableEditor.tsx
+++ b/app/client/src/pages/Editor/APIEditor/GraphQL/VariableEditor.tsx
@@ -7,7 +7,6 @@ import {
   TabBehaviour,
 } from "components/editorComponents/CodeEditor/EditorConfig";
 import styled from "styled-components";
-import { Colors } from "constants/Colors";
 import { Text, TextType } from "design-system-old";
 import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
 import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
@@ -55,12 +54,13 @@ function VariableEditor(props: VariableProps) {
   return (
     <VariableWrapper className="t--graphql-variable-editor">
       <VariableHeader>
-        <Text color={Colors.GRAY_700} type={TextType.H6}>
+        <Text color={"var(--ads-v2-color-fg)"} type={TextType.H6}>
           Query variables
         </Text>
       </VariableHeader>
       <DynamicTextField
-        border={CodeEditorBorder.ALL_SIDE}
+        border={CodeEditorBorder.NONE}
+        borderLess
         dataTreePath={`${props.actionName}.config.pluginSpecifiedTemplates[1].value`}
         evaluatedPopUpLabel={"Query variables"}
         expected={EXPECTED_VARIABLE}
diff --git a/app/client/src/pages/Editor/DataSourceEditor/DSFormHeader.tsx b/app/client/src/pages/Editor/DataSourceEditor/DSFormHeader.tsx
index 3391f0178d..9e614a0d6b 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/DSFormHeader.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/DSFormHeader.tsx
@@ -1,31 +1,29 @@
 import React, { useState } from "react";
-import { Icon, IconSize } from "design-system-old";
 import FormTitle from "./FormTitle";
 import NewActionButton from "./NewActionButton";
 import { getAssetUrl } from "@appsmith/utils/airgapHelpers";
-import { Position } from "@blueprintjs/core";
-import { Colors } from "constants/Colors";
 import type { Datasource } from "entities/Datasource";
 import {
   CONFIRM_CONTEXT_DELETING,
   CONFIRM_CONTEXT_DELETE,
   CONTEXT_DELETE,
-} from "ce/constants/messages";
-import { createMessage } from "design-system-old/build/constants/messages";
+  createMessage,
+} from "@appsmith/constants/messages";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { useDispatch } from "react-redux";
 import { deleteDatasource } from "actions/datasourceActions";
 import { debounce } from "lodash";
 import type { ApiDatasourceForm } from "entities/Datasource/RestAPIForm";
-import { MenuComponent, RedMenuItem } from "components/utils/formComponents";
+import { MenuWrapper, StyledMenu } from "components/utils/formComponents";
 import styled from "styled-components";
-import { Button } from "design-system";
+import { Button, MenuContent, MenuItem, MenuTrigger } from "design-system";
 import { EDIT } from "ce/constants/messages";
 import { DatasourceEditEntryPoints } from "constants/Datasource";
 
 export const ActionWrapper = styled.div`
   display: flex;
   gap: 16px;
+  align-items: center;
 `;
 
 export const FormTitleContainer = styled.div`
@@ -45,16 +43,6 @@ export const Header = styled.div`
   margin: 0 var(--ads-v2-spaces-7);
 `;
 
-export const EditDatasourceButton = styled(Button)`
-  padding: 10px 20px;
-  &&&& {
-    height: 36px;
-    max-width: 160px;
-    border: 1px solid ${Colors.HIT_GRAY};
-    width: auto;
-  }
-`;
-
 export const PluginImageWrapper = styled.div`
   height: 34px;
   width: 34px;
@@ -123,24 +111,27 @@ export const DSFormHeader = (props: DSFormHeaderProps) => {
 
   const renderMenuOptions = () => {
     return [
-      <RedMenuItem
-        className="t--datasource-option-delete"
-        icon="delete"
-        isLoading={isDeleting}
+      <MenuItem
+        className="t--datasource-option-delete error-menuitem"
+        disabled={isDeleting}
         key={"delete-datasource-button"}
-        onSelect={() => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        onSelect={(e: Event) => {
+          e.preventDefault();
+          e.stopPropagation();
           if (!isDeleting) {
             confirmDelete ? deleteAction() : setConfirmDelete(true);
           }
         }}
-        text={
-          isDeleting
-            ? createMessage(CONFIRM_CONTEXT_DELETING)
-            : confirmDelete
-            ? createMessage(CONFIRM_CONTEXT_DELETE)
-            : createMessage(CONTEXT_DELETE)
-        }
-      />,
+        startIcon="delete-bin-line"
+      >
+        {isDeleting
+          ? createMessage(CONFIRM_CONTEXT_DELETING)
+          : confirmDelete
+          ? createMessage(CONFIRM_CONTEXT_DELETE)
+          : createMessage(CONTEXT_DELETE)}
+      </MenuItem>,
     ];
   };
 
@@ -156,22 +147,29 @@ export const DSFormHeader = (props: DSFormHeaderProps) => {
       {viewMode && (
         <ActionWrapper>
           {canDeleteDatasource && (
-            <MenuComponent
-              menuItemWrapperWidth="160px"
-              onClose={onCloseMenu}
-              position={Position.LEFT}
-              target={
-                <Icon
-                  fillColor={Colors.GRAY2}
-                  name="context-menu"
-                  size={IconSize.XXXL}
-                />
-              }
+            <MenuWrapper
+              className="t--datasource-menu-option"
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
             >
-              {renderMenuOptions()}
-            </MenuComponent>
+              <StyledMenu onOpenChange={onCloseMenu}>
+                <MenuTrigger>
+                  <Button
+                    data-testid="t--context-menu-trigger"
+                    isIconButton
+                    kind="tertiary"
+                    size="md"
+                    startIcon="context-menu"
+                  />
+                </MenuTrigger>
+                <MenuContent style={{ zIndex: 100 }} width="200px">
+                  {renderMenuOptions()}
+                </MenuContent>
+              </StyledMenu>
+            </MenuWrapper>
           )}
-          <EditDatasourceButton
+          <Button
             className="t--edit-datasource"
             kind="secondary"
             onClick={() => {
@@ -182,9 +180,10 @@ export const DSFormHeader = (props: DSFormHeaderProps) => {
                 entryPoint: DatasourceEditEntryPoints.DATASOURCE_FORM_EDIT,
               });
             }}
+            size="md"
           >
             {createMessage(EDIT)}
-          </EditDatasourceButton>
+          </Button>
           <NewActionButton
             datasource={datasource as Datasource}
             disabled={!canCreateDatasourceActions || !isPluginAuthorized}
diff --git a/app/client/src/pages/Editor/DataSourceEditor/index.tsx b/app/client/src/pages/Editor/DataSourceEditor/index.tsx
index 4c632f07f1..2a0f68fc40 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/index.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/index.tsx
@@ -542,7 +542,6 @@ class DatasourceEditorRouter extends React.Component<Props, State> {
       datasource,
       datasourceButtonConfiguration,
       datasourceId,
-      deleteTempDSFromDraft,
       formData,
       history,
       isDeleting,
@@ -628,7 +627,6 @@ class DatasourceEditorRouter extends React.Component<Props, State> {
               <DatasourceAuth
                 datasource={datasource as Datasource}
                 datasourceButtonConfiguration={datasourceButtonConfiguration}
-                deleteTempDSFromDraft={deleteTempDSFromDraft}
                 formData={formData}
                 getSanitizedFormData={memoize(this.getSanitizedData)}
                 isFormDirty={this.props.isFormDirty}
diff --git a/app/client/src/pages/Editor/EditorHeader.tsx b/app/client/src/pages/Editor/EditorHeader.tsx
index 518d14fd08..642424d137 100644
--- a/app/client/src/pages/Editor/EditorHeader.tsx
+++ b/app/client/src/pages/Editor/EditorHeader.tsx
@@ -150,9 +150,11 @@ const AppsmithLink = styled((props) => {
   return <Link {...props} />;
 })`
   height: 24px;
+  min-width: 24px;
   width: 24px;
   display: inline-block;
   img {
+    min-width: 24px;
     width: 24px;
     height: 24px;
   }
@@ -352,7 +354,7 @@ export function EditorHeader(props: EditorHeaderProps) {
                   {pinned && (
                     <Icon
                       className="absolute transition-opacity opacity-0 group-hover:opacity-100"
-                      name="double-arrow-left"
+                      name="menu-fold"
                       onClick={onPin}
                       size="md"
                     />
@@ -360,7 +362,7 @@ export function EditorHeader(props: EditorHeaderProps) {
                   {!pinned && (
                     <Icon
                       className="absolute transition-opacity opacity-0 group-hover:opacity-100"
-                      name="double-arrow-right"
+                      name="menu-unfold"
                       onClick={onPin}
                       size="md"
                     />
@@ -423,7 +425,7 @@ export function EditorHeader(props: EditorHeaderProps) {
         >
           <HelpBar />
         </HeaderSection>
-        <HeaderSection className="gap-x-2">
+        <HeaderSection className="gap-x-1">
           <Boxed
             alternative={<EndTour />}
             step={GUIDED_TOUR_STEPS.BUTTON_ONSUCCESS_BINDING}
diff --git a/app/client/src/pages/Editor/Explorer/Entity/EntityProperties.tsx b/app/client/src/pages/Editor/Explorer/Entity/EntityProperties.tsx
index 1be68934b3..0122fb2580 100644
--- a/app/client/src/pages/Editor/Explorer/Entity/EntityProperties.tsx
+++ b/app/client/src/pages/Editor/Explorer/Entity/EntityProperties.tsx
@@ -36,6 +36,8 @@ const EntityInfoContainer = styled.div`
   max-height: ${BindingContainerMaxHeight}px;
   overflow-y: hidden;
   border-radius: var(--ads-v2-border-radius);
+  border: 1px solid var(--ads-v2-color-border-muted);
+  box-shadow: var(--ads-v2-shadow-popovers);
 `;
 
 const selectEntityInfo = (state: AppState) => state.ui.explorer.entityInfo;
diff --git a/app/client/src/pages/Editor/Explorer/ExplorerIcons.tsx b/app/client/src/pages/Editor/Explorer/ExplorerIcons.tsx
index 6178c576a0..70ed16808c 100644
--- a/app/client/src/pages/Editor/Explorer/ExplorerIcons.tsx
+++ b/app/client/src/pages/Editor/Explorer/ExplorerIcons.tsx
@@ -78,7 +78,7 @@ export const datasourceIcon = (
   />
 );
 
-export const datasourceTableIcon = <Icon name="layout-left-2-line" size="md" />;
+export const datasourceTableIcon = <Icon name="layout-5-line" size="md" />;
 
 export const primaryKeyIcon = <Icon name="key-2-line" size="md" />;
 
@@ -294,7 +294,7 @@ export function JsFileIconV2(
       noBorder={noBorder}
       width={width + "px"}
     >
-      <EntityIcon.textIcon fontSize={height * 3.05}>JS</EntityIcon.textIcon>
+      <Icon name="js-yellow" size="md" />
     </EntityIcon>
   );
 }
diff --git a/app/client/src/pages/Editor/Explorer/JSActions/JSActionEntity.tsx b/app/client/src/pages/Editor/Explorer/JSActions/JSActionEntity.tsx
index 3c9f20e986..6bc7b3285d 100644
--- a/app/client/src/pages/Editor/Explorer/JSActions/JSActionEntity.tsx
+++ b/app/client/src/pages/Editor/Explorer/JSActions/JSActionEntity.tsx
@@ -80,7 +80,7 @@ export const ExplorerJSCollectionEntity = memo(
         className="t--jsaction"
         contextMenu={contextMenu}
         entityId={jsAction.id}
-        icon={JsFileIconV2()}
+        icon={JsFileIconV2(16, 16)}
         key={jsAction.id}
         name={jsAction.name}
         searchKeyword={props.searchKeyword}
diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx
index 25e838ae5a..cd8eb3a699 100644
--- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx
+++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx
@@ -143,7 +143,7 @@ const OptionWrapper = styled.div`
 `;
 // Constants
 
-const datasourceIcon = "layout-left-2-line";
+const datasourceIcon = "layout-5-line";
 const columnIcon = "layout-column-line";
 
 const GENERATE_PAGE_MODE = {
diff --git a/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx b/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx
index 37267ec634..f9fc2f6c9f 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx
@@ -13,13 +13,7 @@ import type { AppState } from "@appsmith/reducers";
 import history from "utils/history";
 import RenderDatasourceInformation from "pages/Editor/DataSourceEditor/DatasourceSection";
 import { getQueryParams } from "utils/URLUtils";
-import {
-  Button,
-  Menu,
-  MenuContent,
-  MenuItem,
-  MenuTrigger,
-} from "design-system";
+import { Button, MenuContent, MenuItem, MenuTrigger } from "design-system";
 import { deleteDatasource } from "actions/datasourceActions";
 import { getGenerateCRUDEnabledPluginMap } from "selectors/entitiesSelector";
 import type { GenerateCRUDEnabledPluginMap, Plugin } from "api/PluginApi";
@@ -49,7 +43,7 @@ import {
   hasManageDatasourcePermission,
 } from "@appsmith/utils/permissionHelpers";
 import { getAssetUrl } from "@appsmith/utils/airgapHelpers";
-import { MenuWrapper } from "components/utils/formComponents";
+import { MenuWrapper, StyledMenu } from "components/utils/formComponents";
 import { DatasourceEditEntryPoints } from "constants/Datasource";
 
 const Wrapper = styled.div`
@@ -73,10 +67,6 @@ const DatasourceCardMainBody = styled.div`
   width: 100%;
 `;
 
-const StyledMenu = styled(Menu)`
-  flex: 0;
-`;
-
 const DatasourceImage = styled.img`
   height: 34px;
   width: auto;
diff --git a/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx b/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx
index 4985e91739..102ab3c8ca 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx
@@ -14,12 +14,12 @@ import type { EventLocation } from "utils/AnalyticsUtil";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { CURL } from "constants/AppsmithActionConstants/ActionConstants";
 import { PluginPackageName, PluginType } from "entities/Action";
-import { Spinner } from "@blueprintjs/core";
 import { getQueryParams } from "utils/URLUtils";
 import { getGenerateCRUDEnabledPluginMap } from "selectors/entitiesSelector";
 import { getIsGeneratePageInitiator } from "utils/GenerateCrudUtil";
 import { curlImportPageURL } from "RouteBuilder";
 import { getAssetUrl } from "@appsmith/utils/airgapHelpers";
+import { Spinner } from "design-system";
 
 const StyledContainer = styled.div`
   flex: 1;
diff --git a/app/client/src/pages/Editor/JSEditor/JSFunctionRun.tsx b/app/client/src/pages/Editor/JSEditor/JSFunctionRun.tsx
index cae9fb2ea0..bdd2e6048f 100644
--- a/app/client/src/pages/Editor/JSEditor/JSFunctionRun.tsx
+++ b/app/client/src/pages/Editor/JSEditor/JSFunctionRun.tsx
@@ -83,9 +83,16 @@ export function JSFunctionRun({
         {options.map((option) => (
           <Option key={option.value}>
             <OptionWrapper>
-              <OptionLabelWrapper>
-                <OptionLabel renderAs="p">{option.label}</OptionLabel>
-              </OptionLabelWrapper>
+              <Tooltip
+                content={option.label}
+                // Here, 18 is the maximum charecter length because the width of this menu does not change
+                isDisabled={(option.label?.length || 0) < 18}
+                placement="right"
+              >
+                <OptionLabelWrapper>
+                  <OptionLabel renderAs="p">{option.label}</OptionLabel>
+                </OptionLabelWrapper>
+              </Tooltip>
               {option.hasCustomBadge && <Tag isClosable={false}>{"Async"}</Tag>}
             </OptionWrapper>
           </Option>
@@ -93,18 +100,21 @@ export function JSFunctionRun({
       </Select>
       <Tooltip
         content={createMessage(NO_JS_FUNCTION_TO_RUN, jsCollection.name)}
+        isDisabled={!showTooltip}
         placement="topRight"
-        visible={showTooltip}
       >
-        <Button
-          className={testLocators.runJSAction}
-          isDisabled={disabled}
-          isLoading={isLoading}
-          onClick={onButtonClick}
-          size="md"
-        >
-          {RUN_BUTTON_DEFAULTS.CTA_TEXT}
-        </Button>
+        {/* this span exists to make the disabled button visible to the tooltip */}
+        <span>
+          <Button
+            className={testLocators.runJSAction}
+            isDisabled={disabled}
+            isLoading={isLoading}
+            onClick={onButtonClick}
+            size="md"
+          >
+            {RUN_BUTTON_DEFAULTS.CTA_TEXT}
+          </Button>
+        </span>
       </Tooltip>
     </DropdownWithCTAWrapper>
   );
diff --git a/app/client/src/pages/Editor/JSEditor/JSObjectNameEditor.tsx b/app/client/src/pages/Editor/JSEditor/JSObjectNameEditor.tsx
index 36ee398c84..532c3ee254 100644
--- a/app/client/src/pages/Editor/JSEditor/JSObjectNameEditor.tsx
+++ b/app/client/src/pages/Editor/JSEditor/JSObjectNameEditor.tsx
@@ -105,6 +105,7 @@ export function JSObjectNameEditor(props: JSObjectNameEditorProps) {
           <div
             style={{
               display: "flex",
+              alignItems: "center",
             }}
           >
             {currentPlugin && (
diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
index b90ca9c4aa..02370d901f 100644
--- a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
@@ -765,16 +765,20 @@ const PropertyControl = memo((props: Props) => {
                 content={JS_TOGGLE_DISABLED_MESSAGE}
                 isDisabled={!isToggleDisabled}
               >
-                <ToggleButton
-                  className={classNames("t--js-toggle", {
-                    "is-active": isDynamic,
-                  })}
-                  icon="js-toggle-v2"
-                  isDisabled={isToggleDisabled}
-                  isSelected={isDynamic}
-                  onClick={() => toggleDynamicProperty(propertyName, isDynamic)}
-                  size="sm"
-                />
+                <span>
+                  <ToggleButton
+                    className={classNames("t--js-toggle", {
+                      "is-active": isDynamic,
+                    })}
+                    icon="js-toggle-v2"
+                    isDisabled={isToggleDisabled}
+                    isSelected={isDynamic}
+                    onClick={() =>
+                      toggleDynamicProperty(propertyName, isDynamic)
+                    }
+                    size="sm"
+                  />
+                </span>
               </Tooltip>
             )}
             {isPropertyDeviatedFromTheme && (
diff --git a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
index fa6114f91a..e438fe7f3a 100644
--- a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
@@ -169,7 +169,6 @@ export const TabbedViewContainer = styled.div`
 `;
 
 const SettingsWrapper = styled.div`
-  /* padding: 16px 30px; */
   ${thinScrollbar};
   height: 100%;
 `;
@@ -177,7 +176,7 @@ const SettingsWrapper = styled.div`
 const ResultsCount = styled.div`
   position: absolute;
   right: ${(props) => props.theme.spaces[17] + 1}px;
-  top: ${(props) => props.theme.spaces[2] + 1}px;
+  top: 9px;
   color: var(--ads-v2-color-fg);
 `;
 
@@ -195,7 +194,7 @@ const SecondaryWrapper = styled.div`
 const HelpSection = styled.div``;
 
 const ResponseContentWrapper = styled.div<{ isError: boolean }>`
-  overflow-y: auto;
+  overflow-y: clip;
   display: grid;
   height: ${(props) => (props.isError ? "" : "100%")};
 
@@ -320,7 +319,8 @@ export const SegmentedControlContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: var(--ads-v2-spaces-4);
-  overflow: scroll;
+  overflow-y: clip;
+  overflow-x: scroll;
 `;
 
 type QueryFormProps = {
diff --git a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
index b6ec42d02e..994835c712 100644
--- a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
+++ b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
@@ -427,9 +427,6 @@ class DatasourceSaaSEditor extends JSONtoForm<Props, State> {
                       datasource={datasource}
                       description={googleSheetsInfoMessage}
                       pageId={pageId}
-                      style={{
-                        marginTop: "16px",
-                      }}
                     />
                   ) : null}
                   {/* This adds error banner for google sheets datasource if the datasource is unauthorised */}
@@ -441,9 +438,6 @@ class DatasourceSaaSEditor extends JSONtoForm<Props, State> {
                       datasource={datasource}
                       description={authErrorMessage}
                       pageId={pageId}
-                      style={{
-                        marginTop: "16px",
-                      }}
                     />
                   ) : null}
                   {!_.isNil(sections)
@@ -459,6 +453,7 @@ class DatasourceSaaSEditor extends JSONtoForm<Props, State> {
                       actionType="authorize"
                       datasource={datasource}
                       description={authErrorMessage}
+                      isInViewMode
                       pageId={pageId}
                     />
                   ) : null}
@@ -479,7 +474,6 @@ class DatasourceSaaSEditor extends JSONtoForm<Props, State> {
               <DatasourceAuth
                 datasource={datasource}
                 datasourceButtonConfiguration={datasourceButtonConfiguration}
-                deleteTempDSFromDraft={deleteTempDSFromDraft}
                 formData={formData}
                 getSanitizedFormData={_.memoize(this.getSanitizedData)}
                 isInsideReconnectModal={isInsideReconnectModal}
diff --git a/app/client/src/pages/Editor/gitSync/Tabs/Deploy.tsx b/app/client/src/pages/Editor/gitSync/Tabs/Deploy.tsx
index 873b02cc67..cd2880f722 100644
--- a/app/client/src/pages/Editor/gitSync/Tabs/Deploy.tsx
+++ b/app/client/src/pages/Editor/gitSync/Tabs/Deploy.tsx
@@ -331,6 +331,7 @@ function Deploy() {
                 placeholder={"Your commit message here"}
                 ref={commitInputRef}
                 renderAs="textarea"
+                size="md"
                 type="text"
                 value={commitMessageDisplay}
               />
diff --git a/app/client/src/pages/Settings/FormGroup/Accordion.tsx b/app/client/src/pages/Settings/FormGroup/Accordion.tsx
index fe9a6fddec..7da0e623d7 100644
--- a/app/client/src/pages/Settings/FormGroup/Accordion.tsx
+++ b/app/client/src/pages/Settings/FormGroup/Accordion.tsx
@@ -8,7 +8,7 @@ import { Icon, Text } from "design-system";
 
 const AccordionWrapper = styled.div`
   margin-top: 40px;
-  max-width: 30rem;
+  max-width: 40rem;
 `;
 
 const AccordionHeader = styled(Text)`
diff --git a/app/client/src/pages/Settings/FormGroup/Button.tsx b/app/client/src/pages/Settings/FormGroup/Button.tsx
index 1c7f3722ef..e5c3dfbcd6 100644
--- a/app/client/src/pages/Settings/FormGroup/Button.tsx
+++ b/app/client/src/pages/Settings/FormGroup/Button.tsx
@@ -8,7 +8,7 @@ import type { SettingComponentProps } from "./Common";
 
 const ButtonWrapper = styled.div`
   width: 357px;
-  margin-top: 3px;
+  margin-bottom: 8px;
 `;
 
 export const StyledButton = styled(Button)`
diff --git a/app/client/src/pages/Settings/FormGroup/Checkbox.tsx b/app/client/src/pages/Settings/FormGroup/Checkbox.tsx
index 2ccf0595d1..cf1869b07a 100644
--- a/app/client/src/pages/Settings/FormGroup/Checkbox.tsx
+++ b/app/client/src/pages/Settings/FormGroup/Checkbox.tsx
@@ -87,7 +87,7 @@ export function CheckboxComponent({ setting }: SettingComponentProps) {
   return (
     <StyledFieldCheckboxGroup>
       <Text
-        className="admin-settings-form-group-label pt-4 pb-2"
+        className="admin-settings-form-group-label pt-2 pb-2"
         color="var(--ads-v2-color-fg)"
         data-testid="admin-settings-form-group-label"
         kind="heading-xs"
diff --git a/app/client/src/pages/Settings/FormGroup/Common.tsx b/app/client/src/pages/Settings/FormGroup/Common.tsx
index c9932dbb8e..2774acaab6 100644
--- a/app/client/src/pages/Settings/FormGroup/Common.tsx
+++ b/app/client/src/pages/Settings/FormGroup/Common.tsx
@@ -12,7 +12,7 @@ type FieldHelperProps = {
 };
 
 export const StyledFormGroup = styled.div`
-  width: 30rem;
+  width: 40rem;
   margin-bottom: ${(props) => props.theme.spaces[7]}px;
   &.t--admin-settings-dropdown {
     div {
diff --git a/app/client/src/pages/Settings/components.tsx b/app/client/src/pages/Settings/components.tsx
index a150994e18..d7205ada58 100644
--- a/app/client/src/pages/Settings/components.tsx
+++ b/app/client/src/pages/Settings/components.tsx
@@ -22,7 +22,7 @@ export const SettingsHeader = styled(Text)`
 export const SettingsSubHeader = styled(Text)``;
 
 export const SettingsFormWrapper = styled.div`
-  max-width: 30rem;
+  max-width: 40rem;
   .openid_tag {
     .${Classes.TAG_REMOVE} {
       display: none;
diff --git a/app/client/src/pages/Templates/ForkTemplate.tsx b/app/client/src/pages/Templates/ForkTemplate.tsx
index 0a0a4f42c1..334542efdc 100644
--- a/app/client/src/pages/Templates/ForkTemplate.tsx
+++ b/app/client/src/pages/Templates/ForkTemplate.tsx
@@ -57,9 +57,10 @@ function ForkTemplate({
       <Modal onOpenChange={closeModal} open={showForkModal}>
         <ModalContent style={{ width: "640px" }}>
           <ModalHeader>{createMessage(CHOOSE_WHERE_TO_FORK)}</ModalHeader>
-          <ModalBody>
+          <ModalBody style={{ overflow: "unset", paddingBottom: "4px" }}>
             <Select
               dropdownMatchSelectWidth
+              getPopupContainer={(triggerNode) => triggerNode.parentNode}
               // TODO: (Albin) Fix this
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
               //@ts-ignore
diff --git a/app/client/src/pages/common/datasourceAuth/AuthMessage.tsx b/app/client/src/pages/common/datasourceAuth/AuthMessage.tsx
index e2c45c7e66..43b7c0b55d 100644
--- a/app/client/src/pages/common/datasourceAuth/AuthMessage.tsx
+++ b/app/client/src/pages/common/datasourceAuth/AuthMessage.tsx
@@ -19,9 +19,11 @@ import {
   createMessage,
 } from "@appsmith/constants/messages";
 
-const StyledAuthMessage = styled.div`
+const StyledAuthMessage = styled.div<{ isInViewMode: boolean }>`
   width: fit-content;
-  margin-bottom: var(--ads-v2-spaces-4);
+  ${(props) =>
+    !props.isInViewMode &&
+    `margin-top: var(--ads-v2-spaces-5);margin-bottom: var(--ads-v2-spaces-4);`}
 `;
 
 type AuthMessageProps = {
@@ -32,6 +34,7 @@ type AuthMessageProps = {
   pageId?: string;
   style?: any;
   calloutType?: CalloutKind;
+  isInViewMode?: boolean;
 };
 
 export default function AuthMessage(props: AuthMessageProps) {
@@ -42,6 +45,7 @@ export default function AuthMessage(props: AuthMessageProps) {
     description,
     pageId,
     style = {},
+    isInViewMode = false,
   } = props;
   const dispatch = useDispatch();
   const pluginType = useSelector((state: AppState) =>
@@ -65,7 +69,7 @@ export default function AuthMessage(props: AuthMessageProps) {
   };
 
   return (
-    <StyledAuthMessage style={style}>
+    <StyledAuthMessage isInViewMode={isInViewMode} style={style}>
       <Callout
         kind={calloutType}
         links={
diff --git a/app/client/src/pages/common/datasourceAuth/index.tsx b/app/client/src/pages/common/datasourceAuth/index.tsx
index 24376d0302..627033ae69 100644
--- a/app/client/src/pages/common/datasourceAuth/index.tsx
+++ b/app/client/src/pages/common/datasourceAuth/index.tsx
@@ -12,7 +12,7 @@ import {
 } from "actions/datasourceActions";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { getCurrentApplicationId } from "selectors/editorSelectors";
-import { useParams, useLocation } from "react-router";
+import { useParams, useLocation, useHistory } from "react-router";
 import type { ExplorerURLParams } from "@appsmith/pages/Editor/Explorer/helpers";
 import type { Datasource } from "entities/Datasource";
 import { AuthType, AuthenticationStatus } from "entities/Datasource";
@@ -30,15 +30,16 @@ import type { ApiDatasourceForm } from "entities/Datasource/RestAPIForm";
 import { TEMP_DATASOURCE_ID } from "constants/Datasource";
 
 import { hasManageDatasourcePermission } from "@appsmith/utils/permissionHelpers";
-import { SHOW_FILE_PICKER_KEY } from "constants/routes";
-import { Colors } from "constants/Colors";
+import { INTEGRATION_TABS, SHOW_FILE_PICKER_KEY } from "constants/routes";
+import { integrationEditorURL } from "RouteBuilder";
+import { getQueryParams } from "utils/URLUtils";
+import type { AppsmithLocationState } from "utils/history";
 import type { PluginType } from "entities/Action";
 
 interface Props {
   datasource: Datasource;
   formData: Datasource | ApiDatasourceForm;
   getSanitizedFormData: () => Datasource;
-  deleteTempDSFromDraft: () => void;
   isInvalid: boolean;
   pageId?: string;
   viewMode?: boolean;
@@ -97,10 +98,11 @@ const SaveButtonContainer = styled.div<{
   justify-content: flex-end;
   gap: 9px;
   padding-right: 20px;
-  flex: 1 1 10%;
   border-top: ${(props) =>
-    props.isInsideReconnectModal ? "none" : `1px solid ${Colors.ALTO}`};
+    props.isInsideReconnectModal ? "none" : "1px solid"};
+  border-color: var(--ads-v2-color-border);
   align-items: center;
+  height: 68px;
 `;
 
 const StyledAuthMessage = styled.div`
@@ -118,7 +120,6 @@ function DatasourceAuth({
     DatasourceButtonTypeEnum.CANCEL,
     DatasourceButtonTypeEnum.SAVE,
   ],
-  deleteTempDSFromDraft,
   formData,
   getSanitizedFormData,
   isInvalid,
@@ -154,6 +155,7 @@ function DatasourceAuth({
   const dispatch = useDispatch();
   const location = useLocation();
   const { pageId: pageIdQuery } = useParams<ExplorerURLParams>();
+  const history = useHistory<AppsmithLocationState>();
 
   const pageId = (pageIdQuery || pageIdProp) as string;
 
@@ -307,8 +309,14 @@ function DatasourceAuth({
           key={buttonType}
           kind="tertiary"
           onClick={() => {
-            if (createMode) deleteTempDSFromDraft();
-            else dispatch(setDatasourceViewMode(true));
+            if (createMode) {
+              const URL = integrationEditorURL({
+                pageId,
+                selectedTab: INTEGRATION_TABS.NEW,
+                params: getQueryParams(),
+              });
+              history.push(URL);
+            } else dispatch(setDatasourceViewMode(true));
           }}
           size="md"
         >
diff --git a/app/client/src/widgets/CanvasResizer.tsx b/app/client/src/widgets/CanvasResizer.tsx
index 4965959cf1..cb199e494a 100644
--- a/app/client/src/widgets/CanvasResizer.tsx
+++ b/app/client/src/widgets/CanvasResizer.tsx
@@ -23,7 +23,7 @@ const AutoLayoutCanvasResizer = styled.div`
   width: 2px;
   height: 100%;
   display: flex;
-  background: #d9d9d9;
+  background: var(--ads-v2-color-border);
   align-items: center;
   justify-content: flex-start;
   margin-left: 2px;
@@ -31,11 +31,11 @@ const AutoLayoutCanvasResizer = styled.div`
   transition: background 300ms ease;
   .canvas-resizer-icon {
     border-left: 2px solid;
-    border-color: #d7d7d7;
+    border-color: var(--ads-v2-color-border);
     transition: border 300ms ease;
     margin-left: 2px;
     & > svg {
-      fill: #d7d7d7;
+      fill: var(--ads-v2-color-border);
       transition: fill 300ms ease;
     }
   }
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index eb7c2e008b..a622c63527 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -9582,8 +9582,8 @@ __metadata:
     cypress-xpath: ^1.6.0
     dayjs: ^1.10.6
     deep-diff: ^1.0.2
-    design-system: "npm:@appsmithorg/design-system@2.1.9"
-    design-system-old: "npm:@appsmithorg/design-system-old@1.1.7"
+    design-system: "npm:@appsmithorg/design-system@2.1.10"
+    design-system-old: "npm:@appsmithorg/design-system-old@1.1.8"
     diff: ^5.0.0
     dotenv: ^8.1.0
     downloadjs: ^1.4.7
@@ -13641,9 +13641,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"design-system-old@npm:@appsmithorg/design-system-old@1.1.7":
-  version: 1.1.7
-  resolution: "@appsmithorg/design-system-old@npm:1.1.7"
+"design-system-old@npm:@appsmithorg/design-system-old@1.1.8":
+  version: 1.1.8
+  resolution: "@appsmithorg/design-system-old@npm:1.1.8"
   dependencies:
     emoji-mart: 3.0.1
   peerDependencies:
@@ -13663,13 +13663,13 @@ __metadata:
     remixicon-react: ^1.0.0
     styled-components: 5.3.6
     tinycolor2: ^1.4.2
-  checksum: ea573987195099e6834a4d32384bd9527d72aa8fbff73286dc498511af2aacf0e24a9356f2925a873d977cae19deb2df63510c3e83e8a4c7146f0f6f5686c15c
+  checksum: 962a596585337ad08db8141a3ad37bf8e7c0819bdea20bcc4fecc63135c454d67a09261af99d323a0adaec6834128bda1e37f4d18b3607acd95d042fc78319ce
   languageName: node
   linkType: hard
 
-"design-system@npm:@appsmithorg/design-system@2.1.9":
-  version: 2.1.9
-  resolution: "@appsmithorg/design-system@npm:2.1.9"
+"design-system@npm:@appsmithorg/design-system@2.1.10":
+  version: 2.1.10
+  resolution: "@appsmithorg/design-system@npm:2.1.10"
   dependencies:
     "@radix-ui/react-dialog": ^1.0.2
     "@radix-ui/react-dropdown-menu": ^2.0.4
@@ -13694,7 +13694,7 @@ __metadata:
     react-dom: ^17.0.2
     react-router-dom: ^5.0.0
     styled-components: ^5.3.6
-  checksum: 8d7b92d70ea3c36ccb0beea90e5dbed8cbd9e5d66d501a3e81899d060853cfb8864ea9208c8dfd1d764528b2d0ab20b6e4101ccd051458c4c0edab236cbef1c9
+  checksum: 3482df69c7e21de7aaa2423fc94a4574cb27aa245ea73da24af1c7237e5b98e89dc8db19336fb3a192c84f936c9e9ce7aba40cc415e88e49832f7a3641e21489
   languageName: node
   linkType: hard