diff --git a/thirdeye-ui/src/app/pages/datasources-create-page/datasources-create-page.component.tsx b/thirdeye-ui/src/app/pages/datasources-create-page/datasources-create-page.component.tsx
index 0370288c67..451c1224e4 100644
--- a/thirdeye-ui/src/app/pages/datasources-create-page/datasources-create-page.component.tsx
+++ b/thirdeye-ui/src/app/pages/datasources-create-page/datasources-create-page.component.tsx
@@ -13,7 +13,7 @@
  * the License.
  */
 import { AxiosError } from "axios";
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { DatasourceWizard } from "../../components/datasource-wizard/datasource-wizard.component";
@@ -36,11 +36,39 @@ import {
     getDatasourcesAllPath,
     getDatasourcesViewPath,
 } from "../../utils/routes/routes.util";
+import { useGetRecommendedDatasources } from "../../rest/datasources/datasources.actions";
 
 export const DatasourcesCreatePage: FunctionComponent = () => {
     const navigate = useNavigate();
     const { t } = useTranslation();
     const { notify } = useNotificationProviderV1();
+    const [defaultDatasource, setDefaultDatasource] = useState<Datasource>(
+        createDefaultDatasource()
+    );
+
+    const {
+        recommendedDatasource,
+        getRecommendedDatasource,
+        status: recommendedDatasourcesStatus,
+        errorMessages: recommendedDatasourcesErrormessage,
+    } = useGetRecommendedDatasources();
+
+    useEffect(() => {
+        getRecommendedDatasource();
+    }, []);
+
+    useEffect(() => {
+        recommendedDatasource && setDefaultDatasource(recommendedDatasource);
+    }, [recommendedDatasource]);
+
+    useEffect(() => {
+        notifyIfErrors(
+            recommendedDatasourcesStatus,
+            recommendedDatasourcesErrormessage,
+            notify,
+            t("errors.pinot-instance-not-created")
+        );
+    }, [recommendedDatasourcesStatus]);
 
     const onDatasourceWizardFinish = (
         datasource: Datasource,
@@ -107,7 +135,7 @@ export const DatasourcesCreatePage: FunctionComponent = () => {
 
             <DatasourceWizard
                 isCreate
-                datasource={createDefaultDatasource()}
+                datasource={defaultDatasource}
                 submitBtnLabel={t("label.create-entity", {
                     entity: t("label.datasource"),
                 })}
diff --git a/thirdeye-ui/src/app/pages/welcome-page/create-datasource/onboard-datasource/onboard-datasource-page.component.tsx b/thirdeye-ui/src/app/pages/welcome-page/create-datasource/onboard-datasource/onboard-datasource-page.component.tsx
index 77155388ca..a3abb53b4b 100644
--- a/thirdeye-ui/src/app/pages/welcome-page/create-datasource/onboard-datasource/onboard-datasource-page.component.tsx
+++ b/thirdeye-ui/src/app/pages/welcome-page/create-datasource/onboard-datasource/onboard-datasource-page.component.tsx
@@ -110,7 +110,7 @@ export const WelcomeSelectDatasource: FunctionComponent = () => {
     }, []);
 
     useEffect(() => {
-        if (datasourcesStatus === ActionStatus.Done && isEmpty(datasources)) {
+        if (datasourcesStatus === ActionStatus.Done) {
             getRecommendedDatasource();
         }
     }, [datasourcesStatus, datasources]);
@@ -132,6 +132,7 @@ export const WelcomeSelectDatasource: FunctionComponent = () => {
                     );
                 });
         }
+        recommendedDatasource && setEditedDatasource(recommendedDatasource);
     }, [recommendedDatasource, datasources]);
 
     useEffect(() => {