diff --git a/app/client/src/ce/selectors/entitiesSelector.ts b/app/client/src/ce/selectors/entitiesSelector.ts
index eb16e38109..27ecd96ee7 100644
--- a/app/client/src/ce/selectors/entitiesSelector.ts
+++ b/app/client/src/ce/selectors/entitiesSelector.ts
@@ -46,6 +46,7 @@ import { getFormValues } from "redux-form";
 import { TEMP_DATASOURCE_ID } from "constants/Datasource";
 import { MAX_DATASOURCE_SUGGESTIONS } from "pages/Editor/Explorer/hooks";
 import type { Module } from "@appsmith/constants/ModuleConstants";
+import type { Plugin } from "api/PluginApi";
 
 export const getEntities = (state: AppState): AppState["entities"] =>
   state.entities;
@@ -393,15 +394,33 @@ export const getDBPlugins = createSelector(getPlugins, (plugins) =>
 
 // Most popular datasources are hardcoded right now to include these 4 plugins and REST API
 // Going forward we may want to have separate list for each instance based on usage
-export const getMostPopularPlugins = createSelector(getPlugins, (plugins) =>
-  plugins.filter(
-    (plugin) =>
-      plugin.packageName === PluginPackageName.POSTGRES ||
-      plugin.packageName === PluginPackageName.MY_SQL ||
-      plugin.packageName === PluginPackageName.MONGO ||
-      plugin.packageName === PluginPackageName.GOOGLE_SHEETS,
-  ),
-);
+export const getMostPopularPlugins = createSelector(getPlugins, (plugins) => {
+  const popularPlugins: Plugin[] = [];
+
+  const gsheetPlugin = plugins.find(
+    (plugin) => plugin.packageName === PluginPackageName.GOOGLE_SHEETS,
+  );
+  const restPlugin = plugins.find(
+    (plugin) => plugin.packageName === PluginPackageName.REST_API,
+  );
+  const postgresPlugin = plugins.find(
+    (plugin) => plugin.packageName === PluginPackageName.POSTGRES,
+  );
+  const mysqlPlugin = plugins.find(
+    (plugin) => plugin.packageName === PluginPackageName.MY_SQL,
+  );
+  const mongoPlugin = plugins.find(
+    (plugin) => plugin.packageName === PluginPackageName.MONGO,
+  );
+
+  gsheetPlugin && popularPlugins.push(gsheetPlugin);
+  restPlugin && popularPlugins.push(restPlugin);
+  postgresPlugin && popularPlugins.push(postgresPlugin);
+  mysqlPlugin && popularPlugins.push(mysqlPlugin);
+  mongoPlugin && popularPlugins.push(mongoPlugin);
+
+  return popularPlugins;
+});
 
 export const getDBAndRemotePlugins = createSelector(getPlugins, (plugins) =>
   plugins.filter(
diff --git a/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx b/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx
index c2d9252059..ec85cfd280 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx
@@ -258,19 +258,25 @@ class CreateNewDatasourceTab extends React.Component<
           !this.props.currentApplicationIdForCreateNewApp && (
             <AddDatasourceSecurely />
           )}
-        {dataSources.length === 0 &&
-          this.props.mockDatasources.length > 0 &&
-          mockDataSection}
+        {dataSources.length === 0 && this.props.mockDatasources.length > 0 && (
+          <>
+            {mockDataSection}
+            <StyledDivider />
+          </>
+        )}
         {isEnabledForStartWithData && (
-          <CreateNewDatasource
-            active={false}
-            history={history}
-            isCreating={isCreating}
-            location={location}
-            pageId={pageId}
-            showMostPopularPlugins
-            showUnsupportedPluginDialog={this.showUnsupportedPluginDialog}
-          />
+          <>
+            <CreateNewDatasource
+              active={false}
+              history={history}
+              isCreating={isCreating}
+              location={location}
+              pageId={pageId}
+              showMostPopularPlugins
+              showUnsupportedPluginDialog={this.showUnsupportedPluginDialog}
+            />
+            <StyledDivider />
+          </>
         )}
         <CreateNewAPI
           active={false}
diff --git a/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx b/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx
index d63bb1f65a..9625be8702 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx
@@ -25,7 +25,7 @@ import { getAssetUrl } from "@appsmith/utils/airgapHelpers";
 import { ApiCard, API_ACTION, CardContentWrapper } from "./NewApi";
 import type { EventLocation } from "@appsmith/utils/analyticsUtilTypes";
 import { createNewApiAction } from "actions/apiPaneActions";
-import { PluginPackageName } from "entities/Action";
+import { PluginPackageName, PluginType } from "entities/Action";
 import { Spinner } from "design-system";
 import PlusLogo from "assets/images/Plus-logo.svg";
 import {
@@ -225,7 +225,26 @@ class DatasourceHomeScreen extends React.Component<Props> {
       <DatasourceHomePage>
         <DatasourceCardsContainer data-testid="database-datasource-card-container">
           {plugins.map((plugin, idx) => {
-            return (
+            return plugin.type === PluginType.API ? (
+              !!showMostPopularPlugins ? (
+                <ApiCard
+                  className="t--createBlankApiCard create-new-api"
+                  onClick={() => this.handleOnClick()}
+                >
+                  <CardContentWrapper data-testid="newapi-datasource-content-wrapper">
+                    <img
+                      alt="New"
+                      className="curlImage t--plusImage content-icon"
+                      src={PlusLogo}
+                    />
+                    <p className="textBtn">
+                      {createMessage(CREATE_NEW_DATASOURCE_REST_API)}
+                    </p>
+                  </CardContentWrapper>
+                  {isCreating && <Spinner className="cta" size={25} />}
+                </ApiCard>
+              ) : null
+            ) : (
               <DatasourceCard
                 data-testid="database-datasource-card"
                 key={`${plugin.id}_${idx}`}
@@ -252,24 +271,6 @@ class DatasourceHomeScreen extends React.Component<Props> {
               </DatasourceCard>
             );
           })}
-          {!!showMostPopularPlugins ? (
-            <ApiCard
-              className="t--createBlankApiCard create-new-api"
-              onClick={() => this.handleOnClick()}
-            >
-              <CardContentWrapper data-testid="newapi-datasource-content-wrapper">
-                <img
-                  alt="New"
-                  className="curlImage t--plusImage content-icon"
-                  src={PlusLogo}
-                />
-                <p className="textBtn">
-                  {createMessage(CREATE_NEW_DATASOURCE_REST_API)}
-                </p>
-              </CardContentWrapper>
-              {isCreating && <Spinner className="cta" size={25} />}
-            </ApiCard>
-          ) : null}
         </DatasourceCardsContainer>
       </DatasourceHomePage>
     );