diff --git a/config/opensearch_dashboards.yml b/config/opensearch_dashboards.yml
index 40d643b014fd..853a785d26ce 100644
--- a/config/opensearch_dashboards.yml
+++ b/config/opensearch_dashboards.yml
@@ -247,7 +247,7 @@
 # vis_builder.enabled: false
 
 # Set the value of this setting to true to enable multiple data source feature.
-#data_source.enabled: false
+data_source.enabled: true
 # Set the value of this setting to true to hide local cluster in data source feature.
 #data_source.hideLocalCluster: false
 # Set the value of these settings to customize crypto materials to encryption saved credentials
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx b/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx
index 2e76c2cf23c6..484f3e6630d8 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx
@@ -5,17 +5,18 @@
 
 import React from 'react';
 import { EuiHeaderLinks } from '@elastic/eui';
+import { IUiSettingsClient } from 'src/core/public';
 import { DataSourceMenu } from './data_source_menu';
 import { DataSourceMenuProps } from './types';
 import { MountPointPortal } from '../../../../opensearch_dashboards_react/public';
 
-export function createDataSourceMenu<T>() {
+export function createDataSourceMenu<T>(uiSettings: IUiSettingsClient) {
   return (props: DataSourceMenuProps<T>) => {
     if (props.setMenuMountPoint) {
       return (
         <MountPointPortal setMountPoint={props.setMenuMountPoint}>
           <EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs">
-            <DataSourceMenu {...props} />
+            <DataSourceMenu {...props} uiSettings={uiSettings} />
           </EuiHeaderLinks>
         </MountPointPortal>
       );
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx
index b56063e5d25f..b1f7ed1eaadd 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx
@@ -19,7 +19,7 @@ import {
 import { DataSourceSelectable } from '../data_source_selectable';
 
 export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement | null {
-  const { componentType, componentConfig } = props;
+  const { componentType, componentConfig, uiSettings } = props;
 
   function renderDataSourceView(config: DataSourceViewConfig): ReactElement | null {
     const { activeOption, fullWidth, savedObjects, notifications } = config;
@@ -75,6 +75,7 @@ export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement |
         dataSourceFilter={dataSourceFilter}
         hideLocalCluster={hideLocalCluster || false}
         fullWidth={fullWidth}
+        uiSettings={uiSettings}
       />
     );
   }
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/types.ts b/src/plugins/data_source_management/public/components/data_source_menu/types.ts
index 4121edc0c863..ba274f5178de 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/types.ts
+++ b/src/plugins/data_source_management/public/components/data_source_menu/types.ts
@@ -7,6 +7,7 @@ import {
   NotificationsStart,
   SavedObjectsClientContract,
   SavedObject,
+  IUiSettingsClient,
 } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
 
@@ -23,6 +24,7 @@ export interface DataSourceBaseConfig {
 export interface DataSourceMenuProps<T = any> {
   componentType: DataSourceComponentType;
   componentConfig: T;
+  uiSettings?: IUiSettingsClient;
   setMenuMountPoint?: (menuMount: MountPoint | undefined) => void;
 }
 
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
index 2cb8dff8a94d..f76958715e77 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
@@ -35,6 +35,11 @@ exports[`DataSourceSelectable should filter options if configured 1`] = `
     <EuiPanel
       color="transparent"
       paddingSize="s"
+      style={
+        Object {
+          "width": "300px",
+        }
+      }
     >
       <EuiSpacer
         size="s"
@@ -47,6 +52,7 @@ exports[`DataSourceSelectable should filter options if configured 1`] = `
         options={
           Array [
             Object {
+              "checked": "on",
               "id": "",
               "label": "Local cluster",
             },
@@ -60,6 +66,7 @@ exports[`DataSourceSelectable should filter options if configured 1`] = `
             },
           ]
         }
+        renderOption={[Function]}
         searchProps={
           Object {
             "placeholder": "Search",
@@ -110,6 +117,11 @@ exports[`DataSourceSelectable should render normally with local cluster is hidde
     <EuiPanel
       color="transparent"
       paddingSize="s"
+      style={
+        Object {
+          "width": "300px",
+        }
+      }
     >
       <EuiSpacer
         size="s"
@@ -120,6 +132,7 @@ exports[`DataSourceSelectable should render normally with local cluster is hidde
         isPreFiltered={false}
         onChange={[Function]}
         options={Array []}
+        renderOption={[Function]}
         searchProps={
           Object {
             "placeholder": "Search",
@@ -150,7 +163,7 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd
         onClick={[Function]}
         size="s"
       >
-        Local cluster
+        
       </EuiButtonEmpty>
     </React.Fragment>
   }
@@ -170,6 +183,11 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd
     <EuiPanel
       color="transparent"
       paddingSize="s"
+      style={
+        Object {
+          "width": "300px",
+        }
+      }
     >
       <EuiSpacer
         size="s"
@@ -180,6 +198,7 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd
         isPreFiltered={false}
         onChange={[Function]}
         options={Array []}
+        renderOption={[Function]}
         searchProps={
           Object {
             "placeholder": "Search",
@@ -264,6 +283,7 @@ Object {
                 <div>
                   <div
                     class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow"
+                    style="width: 300px;"
                   >
                     <div
                       class="euiSpacer euiSpacer--s"
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
index 86a40e24a5c2..bbbd40c85857 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
@@ -11,6 +11,7 @@ import { DataSourceSelectable } from './data_source_selectable';
 import { AuthType } from '../../types';
 import { getDataSourcesWithFieldsResponse, mockResponseForSavedObjectsCalls } from '../../mocks';
 import { render } from '@testing-library/react';
+import * as utils from '../utils';
 
 describe('DataSourceSelectable', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
@@ -109,6 +110,7 @@ describe('DataSourceSelectable', () => {
 
   it('should callback if changed state', async () => {
     const onSelectedDataSource = jest.fn();
+    spyOn(utils, 'getDefaultDataSource').and.returnValue([{ id: 'test2', label: 'test2' }]);
     const container = mount(
       <DataSourceSelectable
         savedObjectsClient={client}
@@ -125,7 +127,7 @@ describe('DataSourceSelectable', () => {
     const containerInstance = container.instance();
 
     containerInstance.onChange([{ id: 'test2', label: 'test2' }]);
-    expect(onSelectedDataSource).toBeCalledTimes(0);
+    expect(onSelectedDataSource).toBeCalledTimes(1);
     expect(containerInstance.state).toEqual({
       dataSourceOptions: [
         {
@@ -133,11 +135,12 @@ describe('DataSourceSelectable', () => {
           label: 'test2',
         },
       ],
+      defaultDataSource: null,
       isPopoverOpen: false,
       selectedOption: [
         {
-          id: '',
-          label: 'Local cluster',
+          id: 'test2',
+          label: 'test2',
         },
       ],
     });
@@ -151,6 +154,7 @@ describe('DataSourceSelectable', () => {
           label: 'test2',
         },
       ],
+      defaultDataSource: null,
       isPopoverOpen: false,
       selectedOption: [
         {
@@ -160,7 +164,9 @@ describe('DataSourceSelectable', () => {
         },
       ],
     });
+
     expect(onSelectedDataSource).toBeCalledWith([{ id: 'test2', label: 'test2' }]);
-    expect(onSelectedDataSource).toBeCalledTimes(1);
+    expect(onSelectedDataSource).toHaveBeenCalled();
+    expect(utils.getDefaultDataSource).toHaveBeenCalled();
   });
 });
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
index e0fccf9aa226..3c52f0982d20 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
@@ -12,9 +12,16 @@ import {
   EuiButtonEmpty,
   EuiSelectable,
   EuiSpacer,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiBadge,
 } from '@elastic/eui';
-import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public';
-import { getDataSourcesWithFields } from '../utils';
+import {
+  IUiSettingsClient,
+  SavedObjectsClientContract,
+  ToastsStart,
+} from 'opensearch-dashboards/public';
+import { getDataSourcesWithFields, getDefaultDataSource } from '../utils';
 import { LocalCluster } from '../data_source_selector/data_source_selector';
 import { SavedObject } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
@@ -29,16 +36,18 @@ interface DataSourceSelectableProps {
   fullWidth: boolean;
   selectedOption?: DataSourceOption[];
   dataSourceFilter?: (dataSource: SavedObject<DataSourceAttributes>) => boolean;
+  uiSettings?: IUiSettingsClient;
 }
 
 interface DataSourceSelectableState {
   dataSourceOptions: SelectedDataSourceOption[];
   isPopoverOpen: boolean;
   selectedOption?: SelectedDataSourceOption[];
+  defaultDataSource: string | null;
 }
 
 interface SelectedDataSourceOption extends DataSourceOption {
-  checked?: boolean;
+  checked?: string;
 }
 
 export class DataSourceSelectable extends React.Component<
@@ -53,11 +62,8 @@ export class DataSourceSelectable extends React.Component<
     this.state = {
       dataSourceOptions: [],
       isPopoverOpen: false,
-      selectedOption: this.props.selectedOption
-        ? this.props.selectedOption
-        : this.props.hideLocalCluster
-        ? []
-        : [LocalCluster],
+      selectedOption: [],
+      defaultDataSource: null,
     };
 
     this.onChange.bind(this);
@@ -77,35 +83,60 @@ export class DataSourceSelectable extends React.Component<
 
   async componentDidMount() {
     this._isMounted = true;
+    let filteredDataSources: Array<SavedObject<DataSourceAttributes>> = [];
+    let dataSourceOptions: DataSourceOption[] = [];
     getDataSourcesWithFields(this.props.savedObjectsClient, ['id', 'title', 'auth.type'])
       .then((fetchedDataSources) => {
         if (fetchedDataSources?.length) {
-          let filteredDataSources: Array<SavedObject<DataSourceAttributes>> = [];
+          filteredDataSources = fetchedDataSources;
+          // Filter the existing datasource by the filter function provided.
           if (this.props.dataSourceFilter) {
             filteredDataSources = fetchedDataSources.filter((ds) =>
               this.props.dataSourceFilter!(ds)
             );
           }
 
-          if (filteredDataSources.length === 0) {
-            filteredDataSources = fetchedDataSources;
-          }
-
-          const dataSourceOptions = filteredDataSources
+          dataSourceOptions = filteredDataSources
             .map((dataSource) => ({
               id: dataSource.id,
               label: dataSource.attributes?.title || '',
             }))
             .sort((a, b) => a.label.toLowerCase().localeCompare(b.label.toLowerCase()));
-          if (!this.props.hideLocalCluster) {
-            dataSourceOptions.unshift(LocalCluster);
-          }
+        }
 
-          if (!this._isMounted) return;
+        // Add local cluster to the list of data sources if it is not hidden.
+        if (!this.props.hideLocalCluster) {
+          dataSourceOptions.unshift(LocalCluster);
+        }
+
+        if (!this._isMounted) return;
+        const defaultDataSource = this.props.uiSettings?.get('defaultDataSource', null) ?? null;
+        const selectedDataSource = getDefaultDataSource(
+          filteredDataSources,
+          LocalCluster,
+          this.props.uiSettings,
+          this.props.hideLocalCluster,
+          this.props.selectedOption
+        );
+        if (selectedDataSource.length === 0) {
+          this.props.notifications.addWarning('No connected data source available.');
+        } else {
+          const updatedDataSourceOptions: SelectedDataSourceOption[] = dataSourceOptions.map(
+            (option) => {
+              if (option.id === selectedDataSource[0].id) {
+                return { ...option, checked: 'on' };
+              } else {
+                return option;
+              }
+            }
+          );
           this.setState({
             ...this.state,
-            dataSourceOptions,
+            dataSourceOptions: updatedDataSourceOptions,
+            selectedOption: selectedDataSource,
+            defaultDataSource,
           });
+          this.props.onSelectedDataSources(selectedDataSource);
         }
       })
       .catch(() => {
@@ -168,7 +199,7 @@ export class DataSourceSelectable extends React.Component<
         data-test-subj={'dataSourceSelectableContextMenuPopover'}
       >
         <EuiContextMenuPanel>
-          <EuiPanel color="transparent" paddingSize="s">
+          <EuiPanel color="transparent" paddingSize="s" style={{ width: '300px' }}>
             <EuiSpacer size="s" />
             <EuiSelectable
               aria-label="Search"
@@ -180,6 +211,16 @@ export class DataSourceSelectable extends React.Component<
               onChange={(newOptions) => this.onChange(newOptions)}
               singleSelection={true}
               data-test-subj={'dataSourceSelectable'}
+              renderOption={(option) => (
+                <EuiFlexGroup alignItems="center">
+                  <EuiFlexItem grow={1}>{option.label}</EuiFlexItem>
+                  {option.id === this.state.defaultDataSource && (
+                    <EuiFlexItem grow={false}>
+                      <EuiBadge iconSide="left">Default</EuiBadge>
+                    </EuiFlexItem>
+                  )}
+                </EuiFlexGroup>
+              )}
             >
               {(list, search) => (
                 <>
diff --git a/src/plugins/data_source_management/public/components/utils.ts b/src/plugins/data_source_management/public/components/utils.ts
index 50960936e222..6cfaaa9a081a 100644
--- a/src/plugins/data_source_management/public/components/utils.ts
+++ b/src/plugins/data_source_management/public/components/utils.ts
@@ -16,7 +16,7 @@ import {
   noAuthCredentialAuthMethod,
 } from '../types';
 import { AuthenticationMethodRegistry } from '../auth_registry';
-import { DataSourceOption } from './data_source_selector/data_source_selector';
+import { DataSourceOption } from './data_source_menu/types';
 
 export async function getDataSources(savedObjectsClient: SavedObjectsClientContract) {
   return savedObjectsClient
diff --git a/src/plugins/data_source_management/public/plugin.ts b/src/plugins/data_source_management/public/plugin.ts
index c6a978ae7b61..d07911dacfc4 100644
--- a/src/plugins/data_source_management/public/plugin.ts
+++ b/src/plugins/data_source_management/public/plugin.ts
@@ -104,7 +104,7 @@ export class DataSourceManagementPlugin
       registerAuthenticationMethod,
       ui: {
         DataSourceSelector: createDataSourceSelector(uiSettings),
-        getDataSourceMenu: <T>() => createDataSourceMenu<T>(),
+        getDataSourceMenu: <T>() => createDataSourceMenu<T>(uiSettings),
       },
     };
   }