diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
index 3782a0f5..b83543fc 100644
--- a/opensearch_dashboards.json
+++ b/opensearch_dashboards.json
@@ -14,4 +14,4 @@
   ],
   "server": true,
   "ui": true
-}
\ No newline at end of file
+}
diff --git a/public/components/MDSEnabledComponent/MDSEnabledComponent.tsx b/public/components/MDSEnabledComponent/MDSEnabledComponent.tsx
index 79522bc1..c47f5cc1 100644
--- a/public/components/MDSEnabledComponent/MDSEnabledComponent.tsx
+++ b/public/components/MDSEnabledComponent/MDSEnabledComponent.tsx
@@ -1,8 +1,6 @@
-import React, { useContext, useEffect } from "react";
+import React from "react";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../services/DataSourceMenuContext";
-import { useHistory } from "react-router";
-import queryString from "query-string";
-import { MainContext } from '../../pages/Main/Main';
+import _ from 'lodash'
 
 export default class MDSEnabledComponent<
   Props extends DataSourceMenuProperties,
@@ -34,5 +32,3 @@ export function isDataSourceChanged(prevProps, currentProps) {
 export function isDataSourceError(error) {
   return (error.body && error.body.message && error.body.message.includes("Data Source Error"));
 }
-
-
diff --git a/public/pages/Main/Main.tsx b/public/pages/Main/Main.tsx
index dff7c78f..7e156aeb 100644
--- a/public/pages/Main/Main.tsx
+++ b/public/pages/Main/Main.tsx
@@ -94,51 +94,52 @@ export default class Main extends Component<MainProps, MainState> {
   }
 
   async componentDidMount() {
+    this.setServerFeatures();
+  }
 
-    const services = this.getServices(this.props.http) // Assuming this.context holds the value provided by ServicesContext
+  componentDidUpdate(prevProps, prevState) {
+    if (this.props.multiDataSourceEnabled && (prevState.dataSourceId !== this.state.dataSourceId)) {
+      // Call setServerFeatures when dataSourceId is updated or dataSourceComponent is loaded
+      this.setServerFeatures();
+    }
+  }
+
+ async setServerFeatures() : Promise<void> {
+    const services = this.getServices(this.props.http);
     const serverFeatures = await services.notificationService.getServerFeatures();
+    const defaultConfigTypes = [
+      'slack',
+      'chime',
+      'microsoft_teams',
+      'webhook',
+      'email',
+      'sns',
+      'smtp_account',
+      'ses_account',
+      'email_group',
+    ];
 
-    if (serverFeatures != null) {
-      const { availableChannels, availableConfigTypes, tooltipSupport } = serverFeatures;
-      const { dataSourceId = "", dataSourceLabel = "" } = this.state;
-      const dataSourceReadOnly = false;
-      const dataSourceLoading = this.props.multiDataSourceEnabled;
+    let newState = {
+      dataSourceId: this.state.dataSourceId || '',
+      dataSourceLabel: this.state.dataSourceLabel || '',
+      dataSourceReadOnly: false,
+      dataSourceLoading: this.state.dataSourceLoading,
+      availableChannels: this.props.multiDataSourceEnabled ? CHANNEL_TYPE : defaultConfigTypes,
+      availableConfigTypes: defaultConfigTypes,
+      tooltipSupport: false,
+    };
 
-      this.setState({
-        dataSourceId,
-        dataSourceLabel,
-        dataSourceReadOnly,
-        dataSourceLoading,
+    if (serverFeatures) {
+      const { availableChannels, availableConfigTypes, tooltipSupport } = serverFeatures;
+      newState = {
+        ...newState,
         availableChannels,
         availableConfigTypes,
-        tooltipSupport
-      });
-    } else {
-      const { dataSourceId = "", dataSourceLabel = "" } = this.state;
-      const dataSourceReadOnly = false;
-      const dataSourceLoading = this.props.multiDataSourceEnabled;
-      const defaultConfigTypes = [
-        'slack',
-        'chime',
-        'microsoft_teams',
-        'webhook',
-        'email',
-        'sns',
-        'smtp_account',
-        'ses_account',
-        'email_group',
-      ];
-
-      this.setState({
-        dataSourceId,
-        dataSourceLabel,
-        dataSourceReadOnly,
-        dataSourceLoading,
-        availableChannels: this.props.multiDataSourceEnabled ? CHANNEL_TYPE : defaultConfigTypes,
-        availableConfigTypes: defaultConfigTypes,
-        tooltipSupport: false
-      });
+        tooltipSupport,
+      };
     }
+
+    this.setState(newState);
   }
 
   onSelectedDataSources = (dataSources: DataSourceOption[]) => {
diff --git a/public/services/NotificationService.ts b/public/services/NotificationService.ts
index aa3c317d..40363bb5 100644
--- a/public/services/NotificationService.ts
+++ b/public/services/NotificationService.ts
@@ -13,7 +13,6 @@ import {
   SenderType,
   SESSenderItemType,
 } from '../../models/interfaces';
-import { CHANNEL_TYPE } from '../../common/constants';
 import {
   configListToChannels,
   configListToRecipientGroups,
@@ -248,9 +247,8 @@ export default class NotificationService {
 
   getServerFeatures = async () => {
     try {
-      const response = await this.httpClient.get(
-        NODE_API.GET_AVAILABLE_FEATURES
-      );
+      const query = this.multiDataSourceEnabled ? { dataSourceId: this.dataSourceId } : undefined;
+      const response = await this.httpClient.get(NODE_API.GET_AVAILABLE_FEATURES, { query });
       return response;
     } catch (error) {
       console.error('error fetching available features', error);