diff --git a/public/pages/Main/Main.tsx b/public/pages/Main/Main.tsx
index c2cb4213..654a8356 100644
--- a/public/pages/Main/Main.tsx
+++ b/public/pages/Main/Main.tsx
@@ -28,12 +28,16 @@ import {
   DataSourceSelectableConfig,
   DataSourceViewConfig,
 } from "../../../../../src/plugins/data_source_management/public";
-import { DataSourceMenuProps, DataSourceOption } from "../../../../../src/plugins/data_source_management/public/components/data_source_menu/types";
+import {
+  DataSourceMenuProps,
+  DataSourceOption,
+} from '../../../../../src/plugins/data_source_management/public/components/data_source_menu/types';
 import _ from "lodash";
 import { NotificationService } from '../../services';
 import * as pluginManifest from "../../../opensearch_dashboards.json";
 import { DataSourceAttributes } from "../../../../../src/plugins/data_source/common/data_sources";
 import semver from "semver";
+import { BehaviorSubject } from 'rxjs';
 
 enum Navigation {
   Notifications = 'Notifications',
@@ -76,20 +80,17 @@ export default class Main extends Component<MainProps, MainState> {
 
     if (props.multiDataSourceEnabled) {
       const {
-        dataSourceId = "",
+        dataSourceId,
         dataSourceLabel = ""
       } = queryString.parse(this.props.location.search) as {
         dataSourceId?: string;
         dataSourceLabel?: string;
       };
 
-      if (dataSourceId) {
-        dataSourceObservable.next({ id: dataSourceId, label: dataSourceLabel });
-      }
       this.state = {
         ...initialState,
-        dataSourceId: dataSourceId,
-        dataSourceLabel: dataSourceLabel,
+        dataSourceId,
+        dataSourceLabel,
         dataSourceReadOnly: false,
          /**
          * undefined: need data source picker to help to determine which data source to use.
@@ -108,7 +109,10 @@ export default class Main extends Component<MainProps, MainState> {
   }
 
   componentDidUpdate(prevProps: any, prevState: { dataSourceId: string; }) {
-    if (this.props.multiDataSourceEnabled && (prevState.dataSourceId !== this.state.dataSourceId)) {
+    if (
+      this.props.multiDataSourceEnabled &&
+      prevState.dataSourceId !== this.state.dataSourceId
+    ) {
       // Call setServerFeatures when dataSourceId is updated or dataSourceComponent is loaded
       this.setServerFeatures();
     }
@@ -153,6 +157,10 @@ export default class Main extends Component<MainProps, MainState> {
   }
 
   onSelectedDataSources = (dataSources: DataSourceOption[]) => {
+    if (dataSources.length == 0) {
+      //No datasource selected
+      return;
+    }
     const { id = "", label = "" } = dataSources[0] || {};
     if (this.state.dataSourceId !== id || this.state.dataSourceLabel !== label) {
       this.setState({
diff --git a/public/plugin.ts b/public/plugin.ts
index 6e5c812c..a69162d5 100644
--- a/public/plugin.ts
+++ b/public/plugin.ts
@@ -36,7 +36,16 @@ export class notificationsDashboardsPlugin
   });
 
   private updateDefaultRouteOfManagementApplications: AppUpdater = () => {
-    const hash = `#/?dataSourceId=${dataSourceObservable.value?.id || ""}`;
+    const dataSourceValue = dataSourceObservable.value?.id;
+    let hash = `#/`;
+    /***
+     When data source value is undefined,
+     it means the data source picker has not determined which data source to use(local or default data source)
+     so we should not append any data source id into hash to avoid impacting the data source picker.
+     **/
+    if (dataSourceValue !== undefined) {
+      hash = `#/?dataSourceId=${dataSourceValue}`;
+    }
     return {
       defaultPath: hash,
     };
diff --git a/public/utils/constants.ts b/public/utils/constants.ts
index 8045e7ca..1f249d16 100644
--- a/public/utils/constants.ts
+++ b/public/utils/constants.ts
@@ -91,4 +91,5 @@ const LocalCluster: DataSourceOption = {
   id: "",
 };
 
-export const dataSourceObservable = new BehaviorSubject<DataSourceOption>(LocalCluster);
+// We should use empty object for default value as local cluster may be disabled
+export const dataSourceObservable = new BehaviorSubject<DataSourceOption>({});
diff --git a/server/routes/configRoutes.ts b/server/routes/configRoutes.ts
index eb3a8b71..b1beb36d 100644
--- a/server/routes/configRoutes.ts
+++ b/server/routes/configRoutes.ts
@@ -139,7 +139,7 @@ export function configRoutes(router: IRouter, dataSourceEnabled: boolean) {
         return response.ok({ body: resp });
       } catch (error) {
         return response.custom({
-          statusCode: error.statusCode || 500,
+          statusCode: error.statusCode || 404,
           body: error.message,
         });
       }
@@ -244,7 +244,11 @@ export function configRoutes(router: IRouter, dataSourceEnabled: boolean) {
   router.get(
     {
       path: NODE_API.GET_AVAILABLE_FEATURES,
-      validate: false,
+      validate: dataSourceEnabled ? {
+        query: schema.object({
+          dataSourceId: schema.string(),
+        }),
+      } : false,
     },
     async (context, request, response) => {
       const client = MDSEnabledClientService.getClient(request, context, dataSourceEnabled);
@@ -273,7 +277,7 @@ export function configRoutes(router: IRouter, dataSourceEnabled: boolean) {
         return response.ok({ body: availableFeature });
       } catch (error) {
         return response.custom({
-          statusCode: error.statusCode || 500,
+          statusCode: error.statusCode || 404,
           body: error.message,
         });
       }