diff --git a/app/client/src/components/ads/Tabs.tsx b/app/client/src/components/ads/Tabs.tsx
index c692cbede9..2a52390282 100644
--- a/app/client/src/components/ads/Tabs.tsx
+++ b/app/client/src/components/ads/Tabs.tsx
@@ -117,7 +117,7 @@ const TabTitleWrapper = styled.div`
   display: flex;
   align-items: center;
   .${Classes.ICON} {
-    margin-right: ${(props) => props.theme.spaces[3]}px;
+    margin-right: ${(props) => props.theme.spaces[2]}px;
   }
 `;
 
@@ -126,7 +126,7 @@ export const TabTitle = styled.span`
   font-weight: ${(props) => props.theme.typography.h5.fontWeight};
   line-height: ${(props) => props.theme.typography.h5.lineHeight - 3}px;
   letter-spacing: ${(props) => props.theme.typography.h5.letterSpacing}px;
-  margin: 0 5px;
+  margin: 0;
 `;
 
 export const TabCount = styled.div`
diff --git a/app/client/src/components/utils/CollapseComponent.tsx b/app/client/src/components/utils/CollapseComponent.tsx
index 3f3bcf2d85..198eec7bad 100644
--- a/app/client/src/components/utils/CollapseComponent.tsx
+++ b/app/client/src/components/utils/CollapseComponent.tsx
@@ -7,7 +7,7 @@ const CollapseWrapper = styled.div`
   position: relative;
   margin-top: ${(props) => props.theme.spaces[3]}px;
   .collapse-title {
-    color: ${Colors.CADET_BLUE};
+    color: ${Colors.TROUT_DARK};
     letter-spacing: 0.04em;
     text-transform: uppercase;
     font-weight: 500;
diff --git a/app/client/src/pages/Editor/DataSourceEditor/Connected.tsx b/app/client/src/pages/Editor/DataSourceEditor/Connected.tsx
index f29055c5f5..b5bab0dbdd 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/Connected.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/Connected.tsx
@@ -52,9 +52,12 @@ const ActionButton = styled(Button)`
   padding: 10px 20px;
   &&&& {
     height: 36px;
-    max-width: 120px;
+    //max-width: 120px;
     width: auto;
   }
+  span > svg > path {
+    stroke: white;
+  }
 `;
 
 function Connected() {
@@ -173,6 +176,7 @@ function Connected() {
         <OnboardingIndicator step={OnboardingStep.EXAMPLE_DATABASE} width={120}>
           <ActionButton
             className="t--create-query"
+            icon="plus"
             onClick={isDBDatasource ? createQueryAction : createApiAction}
             text={isDBDatasource ? "New Query" : "New API"}
           />
diff --git a/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx
index abe81c7d95..df1764fbe5 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx
@@ -51,7 +51,13 @@ export const ActionButton = styled(BaseButton)`
 const DBForm = styled.div`
   padding: 20px;
   margin-right: 0px;
-  height: calc(100vh - ${(props) => props.theme.smallHeaderHeight});
+  height: calc(
+    100vh -
+      (
+        ${(props) => props.theme.smallHeaderHeight} +
+          ${(props) => props.theme.backBanner}
+      )
+  );
   overflow: auto;
   .backBtn {
     padding-bottom: 1px;
diff --git a/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx
index 94d78fab91..4d845758d0 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx
@@ -87,7 +87,10 @@ const RestApiForm = styled.div`
   padding: 20px;
   margin-left: 10px;
   margin-right: 0px;
-  height: calc(100vh - ${(props) => props.theme.headerHeight});
+  height: calc(
+    100vh - ${(props) => props.theme.headerHeight} -
+      ${(props) => props.theme.backBanner}
+  );
   overflow: auto;
   .backBtn {
     padding-bottom: 1px;
@@ -145,9 +148,12 @@ const CreateApiButton = styled(AdsButton)`
   padding: 10px 20px;
   &&&& {
     height: 36px;
-    max-width: 120px;
+    //max-width: 120px;
     width: auto;
   }
+  span > svg > path {
+    stroke: white;
+  }
 `;
 
 const StyledButton = styled(Button)`
@@ -333,6 +339,7 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
         <CreateApiButton
           className="t--create-query"
           disabled={this.disableSave()}
+          icon="plus"
           isLoading={isSaving}
           onClick={this.createApiAction}
           text="New API"
diff --git a/app/client/src/pages/Editor/DataSourceEditor/index.tsx b/app/client/src/pages/Editor/DataSourceEditor/index.tsx
index 26aea18af0..be06b120a9 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/index.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/index.tsx
@@ -66,12 +66,10 @@ class DataSourceEditor extends React.Component<Props> {
     }
   }
   handleSubmit = () => {
-    console.log("Handle Submit");
     this.props.submitForm(DATASOURCE_DB_FORM);
   };
 
   handleSave = (formData: Datasource) => {
-    console.log("Handle Save");
     const { applicationId, pageId } = this.props.match.params;
     this.props.updateDatasource(
       formData,
diff --git a/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx b/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx
index a693fc348a..4455f86a2f 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx
@@ -36,9 +36,12 @@ const ActionButton = styled(Button)`
   padding: 10px 20px;
   &&&& {
     height: 36px;
-    max-width: 120px;
+    //max-width: 120px;
     width: auto;
   }
+  span > svg > path {
+    stroke: white;
+  }
 `;
 
 const DatasourceImage = styled.img`
@@ -172,6 +175,7 @@ function DatasourceCard(props: DatasourceCardProps) {
           />
           <ActionButton
             className="t--create-query"
+            icon="plus"
             onClick={() => props.onCreateQuery(datasource)}
             text="New Query"
           />
diff --git a/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx b/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx
index 7ad99c84d2..bec3d4aeb1 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx
@@ -35,7 +35,7 @@ const DatasourceHomePage = styled.div`
 const DatasourceCardsContainer = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 10px;
+  gap: 16px;
   text-align: center;
   min-width: 150px;
   border-radius: 4px;
@@ -46,7 +46,7 @@ const DatasourceCard = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 70px;
+  height: 64px;
   &:hover {
     background: ${Colors.Gallery};
     cursor: pointer;
diff --git a/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx b/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx
index 612e170156..3fc3c78c82 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx
@@ -76,7 +76,7 @@ const NewIntegrationsContainer = styled.div`
   /* padding-bottom: 300px; */
   /* margin-top: 16px; */
   & > div {
-    margin-bottom: 16px;
+    margin-bottom: 20px;
   }
 `;
 
diff --git a/app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx b/app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx
index d26b7234f8..baa7d71240 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx
@@ -8,11 +8,10 @@ import { addMockDatasourceToOrg } from "actions/datasourceActions";
 import { getCurrentOrgId } from "selectors/organizationSelectors";
 
 const MockDataSourceWrapper = styled.div`
-  padding: 5px;
   overflow: auto;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 10px;
+  gap: 16px;
   /* height: calc(
     100vh - ${(props) => props.theme.integrationsPageUnusableHeight}
   ); */
diff --git a/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx b/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx
index 97ada86fe6..405a61f360 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx
@@ -59,7 +59,7 @@ const StyledContainer = styled.div`
 const ApiCardsContainer = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 10px;
+  gap: 16px;
   text-align: center;
   min-width: 150px;
   border-radius: 4px;
@@ -76,7 +76,7 @@ const ApiCard = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 70px;
+  height: 64px;
   &:hover {
     background: ${Colors.Gallery};
     cursor: pointer;
diff --git a/app/client/src/pages/Editor/SaaSEditor/DatasourceCard.tsx b/app/client/src/pages/Editor/SaaSEditor/DatasourceCard.tsx
index 787a576b05..eabd3b0751 100644
--- a/app/client/src/pages/Editor/SaaSEditor/DatasourceCard.tsx
+++ b/app/client/src/pages/Editor/SaaSEditor/DatasourceCard.tsx
@@ -30,6 +30,10 @@ const ActionButton = styled(BaseButton)`
     max-width: 120px;
     width: auto;
   }
+
+  span > svg > path {
+    stroke: white;
+  }
 `;
 
 const DatasourceImage = styled.img`