diff --git a/CHANGELOG.md b/CHANGELOG.md
index 344a3345b76d..200a8e653248 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -87,6 +87,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multiple Datasource] Add installedPlugins list to data source saved object ([#6348](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6348))
 - [Multiple Datasource] Add default icon in multi-selectable picker ([#6357](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6357))
 - [Multiple Datasource] Add empty state component for no connected data source ([#6499](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6499))
+- [Multiple Datasource] Add popover for empty state and redirect to data source management page([#6514](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6514))
 - [Workspace] Add APIs to support plugin state in request ([#6303](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6303))
 - [Workspace] Filter left nav menu items according to the current workspace ([#6234](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6234))
 - [Multiple Datasource] Add multi data source support to Timeline ([#6385](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6385))
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 37f84bb9c142..63a67964a6ad 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
@@ -403,4 +403,22 @@ describe('DataSourceSelectable', () => {
     expect(onSelectedDataSource).toBeCalledWith([{ id: 'test2', label: 'test2' }]);
     expect(onSelectedDataSource).toHaveBeenCalled();
   });
+  it('should render no data source when no data source filtered out and hide local cluster', async () => {
+    const onSelectedDataSource = jest.fn();
+    const container = render(
+      <DataSourceSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        disabled={false}
+        hideLocalCluster={true}
+        fullWidth={false}
+        selectedOption={[{ id: 'test2' }]}
+        dataSourceFilter={(ds) => false}
+      />
+    );
+    await nextTick();
+    const button = await container.findByTestId('dataSourceEmptyStateHeaderButton');
+    expect(button).toHaveTextContent('No data sources');
+  });
 });
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 6586e7bbdcd5..2259f93fbbec 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
@@ -228,7 +228,12 @@ export class DataSourceSelectable extends React.Component<
 
   render() {
     if (this.state.showEmptyState) {
-      return <NoDataSource />;
+      return (
+        <NoDataSource
+          totalDataSourceCount={this.state.dataSourceOptions.length}
+          application={this.props.application}
+        />
+      );
     }
     if (this.state.showError) {
       return <DataSourceErrorMenu />;
diff --git a/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
index 2132450772c9..954e49247957 100644
--- a/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
@@ -68,125 +68,15 @@ exports[`DataSourceView Should render successfully when provided datasource has
 `;
 
 exports[`DataSourceView Should return error when provided datasource has been filtered out 1`] = `
-<EuiPopover
-  anchorPosition="downLeft"
-  button={
-    <React.Fragment>
-      <EuiButtonEmpty
-        aria-label="dataSourceViewButton"
-        className="dataSourceComponentButtonTitle"
-        data-test-subj="dataSourceViewButton"
-        iconSide="left"
-        iconType="database"
-        onClick={[Function]}
-        size="s"
-      >
-        
-      </EuiButtonEmpty>
-    </React.Fragment>
-  }
-  closePopover={[Function]}
-  display="inlineBlock"
-  hasArrow={true}
-  id="dataSourceViewPopover"
-  isOpen={false}
-  ownFocus={true}
-  panelPaddingSize="none"
->
-  <EuiContextMenuPanel
-    hasFocus={true}
-    items={Array []}
-  >
-    <EuiPanel
-      borderRadius="none"
-      className="dataSourceViewOuiPanel"
-      color="transparent"
-      paddingSize="s"
-    >
-      <DataSourceDropDownHeader
-        totalDataSourceCount={1}
-      />
-    </EuiPanel>
-    <EuiPanel
-      borderRadius="none"
-      color="subdued"
-      paddingSize="xs"
-    >
-      <EuiSelectable
-        compressed={true}
-        data-test-subj="dataSourceView"
-        isPreFiltered={false}
-        options={Array []}
-        renderOption={[Function]}
-        searchable={false}
-        singleSelection={true}
-      >
-        <Component />
-      </EuiSelectable>
-    </EuiPanel>
-  </EuiContextMenuPanel>
-</EuiPopover>
+<NoDataSource
+  totalDataSourceCount={0}
+/>
 `;
 
 exports[`DataSourceView When selected option is local cluster and hide local Cluster is true, should return error 1`] = `
-<EuiPopover
-  anchorPosition="downLeft"
-  button={
-    <React.Fragment>
-      <EuiButtonEmpty
-        aria-label="dataSourceViewButton"
-        className="dataSourceComponentButtonTitle"
-        data-test-subj="dataSourceViewButton"
-        iconSide="left"
-        iconType="database"
-        onClick={[Function]}
-        size="s"
-      >
-        
-      </EuiButtonEmpty>
-    </React.Fragment>
-  }
-  closePopover={[Function]}
-  display="inlineBlock"
-  hasArrow={true}
-  id="dataSourceViewPopover"
-  isOpen={false}
-  ownFocus={true}
-  panelPaddingSize="none"
->
-  <EuiContextMenuPanel
-    hasFocus={true}
-    items={Array []}
-  >
-    <EuiPanel
-      borderRadius="none"
-      className="dataSourceViewOuiPanel"
-      color="transparent"
-      paddingSize="s"
-    >
-      <DataSourceDropDownHeader
-        totalDataSourceCount={1}
-      />
-    </EuiPanel>
-    <EuiPanel
-      borderRadius="none"
-      color="subdued"
-      paddingSize="xs"
-    >
-      <EuiSelectable
-        compressed={true}
-        data-test-subj="dataSourceView"
-        isPreFiltered={false}
-        options={Array []}
-        renderOption={[Function]}
-        searchable={false}
-        singleSelection={true}
-      >
-        <Component />
-      </EuiSelectable>
-    </EuiPanel>
-  </EuiContextMenuPanel>
-</EuiPopover>
+<NoDataSource
+  totalDataSourceCount={0}
+/>
 `;
 
 exports[`DataSourceView should call getDataSourceById when only pass id with no label 1`] = `
diff --git a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.test.tsx b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.test.tsx
index bf9336161186..b675d6836060 100644
--- a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.test.tsx
@@ -136,4 +136,21 @@ describe('DataSourceView', () => {
     button.click();
     expect(container).toMatchSnapshot();
   });
+
+  it('should render no data source when no data source filtered out and hide local cluster', async () => {
+    const onSelectedDataSource = jest.fn();
+    const container = render(
+      <DataSourceView
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        hideLocalCluster={true}
+        fullWidth={false}
+        selectedOption={[{ id: '' }]}
+        dataSourceFilter={(ds) => false}
+      />
+    );
+    const button = await container.findByTestId('dataSourceEmptyStateHeaderButton');
+    expect(button).toHaveTextContent('No data sources');
+  });
 });
diff --git a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
index c967e3021af2..3c816bdb9770 100644
--- a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
@@ -35,10 +35,10 @@ interface DataSourceViewProps {
   fullWidth: boolean;
   selectedOption: DataSourceOption[];
   hideLocalCluster: boolean;
+  application?: ApplicationStart;
   savedObjectsClient?: SavedObjectsClientContract;
   notifications?: ToastsStart;
   uiSettings?: IUiSettingsClient;
-  application?: ApplicationStart;
   dataSourceFilter?: (dataSource: any) => boolean;
   onSelectedDataSources?: (dataSources: DataSourceOption[]) => void;
 }
@@ -93,7 +93,7 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
     ) {
       this.setState({
         selectedOption: [],
-        defaultDataSource,
+        showEmptyState: true,
       });
       if (this.props.onSelectedDataSources) {
         this.props.onSelectedDataSources([]);
@@ -146,7 +146,12 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
 
   render() {
     if (this.state.showEmptyState) {
-      return <NoDataSource />;
+      return (
+        <NoDataSource
+          totalDataSourceCount={this.state.selectedOption.length}
+          application={this.props.application}
+        />
+      );
     }
     if (this.state.showError) {
       return <DataSourceErrorMenu />;
diff --git a/src/plugins/data_source_management/public/components/no_data_source/__snapshots__/no_data_source.test.tsx.snap b/src/plugins/data_source_management/public/components/no_data_source/__snapshots__/no_data_source.test.tsx.snap
index 8c9f1339fed4..28c48cd26ffb 100644
--- a/src/plugins/data_source_management/public/components/no_data_source/__snapshots__/no_data_source.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/no_data_source/__snapshots__/no_data_source.test.tsx.snap
@@ -1,14 +1,169 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`NoDataSource should render correctly with the provided totalDataSourceCount 1`] = `
+<EuiPopover
+  anchorPosition="downLeft"
+  button={
+    <EuiButtonEmpty
+      className="euiHeaderLink"
+      color="primary"
+      data-test-subj="dataSourceEmptyStateHeaderButton"
+      iconSide="left"
+      iconType="alert"
+      onClick={[Function]}
+      size="s"
+    >
+       No data sources
+    </EuiButtonEmpty>
+  }
+  closePopover={[Function]}
+  data-test-subj="dataSourceEmptyStatePopover"
+  display="inlineBlock"
+  hasArrow={true}
+  id="dataSourceEmptyStatePopover"
+  initialFocus=".euiSelectableSearch"
+  isOpen={false}
+  ownFocus={true}
+  panelPaddingSize="none"
+>
+  <EuiContextMenuPanel
+    hasFocus={true}
+    items={Array []}
+  >
+    <EuiPanel
+      className="dataSourceSelectableOuiPanel"
+      color="transparent"
+      paddingSize="s"
+    >
+      <DataSourceDropDownHeader
+        totalDataSourceCount={0}
+      />
+      <EuiHorizontalRule
+        margin="none"
+      />
+      <EuiSpacer
+        size="s"
+      />
+      <EuiPanel
+        className="dataSourceEmptyStatePanel"
+        data-test-subj="datasourceTableEmptyState"
+        hasBorder={false}
+        hasShadow={false}
+      >
+        <EuiText>
+          <FormattedMessage
+            defaultMessage="There is no data sources to display."
+            id="dataSourcesManagement.dataSourceMenu.noData"
+            values={Object {}}
+          />
+        </EuiText>
+        <EuiText>
+          <FormattedMessage
+            defaultMessage="Connect data source to get started"
+            id="dataSourcesManagement.dataSourceMenu.connect"
+            values={Object {}}
+          />
+        </EuiText>
+        <EuiSpacer />
+        <EuiButton
+          data-test-subj="dataSourceEmptyStateManageDataSourceButton"
+          fill={false}
+          iconSide="right"
+          iconType="popout"
+          onClick={[Function]}
+        >
+          <FormattedMessage
+            defaultMessage="Manage data sources"
+            id="dataSourcesManagement.dataSourceMenu.manageDataSource"
+            values={Object {}}
+          />
+        </EuiButton>
+      </EuiPanel>
+    </EuiPanel>
+  </EuiContextMenuPanel>
+</EuiPopover>
+`;
+
 exports[`NoDataSource should render normally 1`] = `
-<EuiButtonEmpty
-  className="euiHeaderLink"
-  color="primary"
-  data-test-subj="dataSourceViewContextMenuHeaderLink"
-  iconSide="left"
-  iconType="alert"
-  size="s"
+<EuiPopover
+  anchorPosition="downLeft"
+  button={
+    <EuiButtonEmpty
+      className="euiHeaderLink"
+      color="primary"
+      data-test-subj="dataSourceEmptyStateHeaderButton"
+      iconSide="left"
+      iconType="alert"
+      onClick={[Function]}
+      size="s"
+    >
+       No data sources
+    </EuiButtonEmpty>
+  }
+  closePopover={[Function]}
+  data-test-subj="dataSourceEmptyStatePopover"
+  display="inlineBlock"
+  hasArrow={true}
+  id="dataSourceEmptyStatePopover"
+  initialFocus=".euiSelectableSearch"
+  isOpen={false}
+  ownFocus={true}
+  panelPaddingSize="none"
 >
-   No data sources
-</EuiButtonEmpty>
+  <EuiContextMenuPanel
+    hasFocus={true}
+    items={Array []}
+  >
+    <EuiPanel
+      className="dataSourceSelectableOuiPanel"
+      color="transparent"
+      paddingSize="s"
+    >
+      <DataSourceDropDownHeader
+        totalDataSourceCount={0}
+      />
+      <EuiHorizontalRule
+        margin="none"
+      />
+      <EuiSpacer
+        size="s"
+      />
+      <EuiPanel
+        className="dataSourceEmptyStatePanel"
+        data-test-subj="datasourceTableEmptyState"
+        hasBorder={false}
+        hasShadow={false}
+      >
+        <EuiText>
+          <FormattedMessage
+            defaultMessage="There is no data sources to display."
+            id="dataSourcesManagement.dataSourceMenu.noData"
+            values={Object {}}
+          />
+        </EuiText>
+        <EuiText>
+          <FormattedMessage
+            defaultMessage="Connect data source to get started"
+            id="dataSourcesManagement.dataSourceMenu.connect"
+            values={Object {}}
+          />
+        </EuiText>
+        <EuiSpacer />
+        <EuiButton
+          data-test-subj="dataSourceEmptyStateManageDataSourceButton"
+          fill={false}
+          iconSide="right"
+          iconType="popout"
+          onClick={[Function]}
+        >
+          <FormattedMessage
+            defaultMessage="Manage data sources"
+            id="dataSourcesManagement.dataSourceMenu.manageDataSource"
+            values={Object {}}
+          />
+        </EuiButton>
+      </EuiPanel>
+    </EuiPanel>
+  </EuiContextMenuPanel>
+</EuiPopover>
 `;
diff --git a/src/plugins/data_source_management/public/components/no_data_source/no_data_source.scss b/src/plugins/data_source_management/public/components/no_data_source/no_data_source.scss
new file mode 100644
index 000000000000..705c6f1e80e9
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/no_data_source/no_data_source.scss
@@ -0,0 +1,3 @@
+.dataSourceEmptyStatePanel {
+  text-align: center;
+}
diff --git a/src/plugins/data_source_management/public/components/no_data_source/no_data_source.test.tsx b/src/plugins/data_source_management/public/components/no_data_source/no_data_source.test.tsx
index 380c6ad77e4f..4fc257e5355a 100644
--- a/src/plugins/data_source_management/public/components/no_data_source/no_data_source.test.tsx
+++ b/src/plugins/data_source_management/public/components/no_data_source/no_data_source.test.tsx
@@ -5,12 +5,58 @@
 
 import { ShallowWrapper, shallow } from 'enzyme';
 import React from 'react';
+import { render } from '@testing-library/react';
 import { NoDataSource } from './no_data_source';
+import { coreMock } from '../../../../../core/public/mocks';
+import { DSM_APP_ID } from '../../plugin';
 
 describe('NoDataSource', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
+  const totalDataSourceCount = 0;
+  const nextTick = () => new Promise((res) => process.nextTick(res));
+
+  it('should render correctly with the provided totalDataSourceCount', () => {
+    const wrapper = shallow(<NoDataSource totalDataSourceCount={totalDataSourceCount} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should display popover when click "No data sources" button', async () => {
+    const applicationMock = coreMock.createStart().application;
+    const container = render(
+      <NoDataSource totalDataSourceCount={totalDataSourceCount} application={applicationMock} />
+    );
+
+    await nextTick();
+
+    const button = await container.findByTestId('dataSourceEmptyStateHeaderButton');
+    button.click();
+
+    expect(container.getByTestId('dataSourceEmptyStatePopover')).toBeVisible();
+  });
+
+  it('should call application.navigateToApp when the "Manage" link is clicked', async () => {
+    const applicationMock = coreMock.createStart().application;
+    const navigateToAppMock = applicationMock.navigateToApp;
+
+    const container = render(
+      <NoDataSource totalDataSourceCount={totalDataSourceCount} application={applicationMock} />
+    );
+
+    await nextTick();
+
+    const button = await container.findByTestId('dataSourceEmptyStateHeaderButton');
+    button.click();
+    const redirectButton = await container.findByTestId(
+      'dataSourceEmptyStateManageDataSourceButton'
+    );
+    redirectButton.click();
+    expect(navigateToAppMock).toHaveBeenCalledWith('management', {
+      path: `opensearch-dashboards/${DSM_APP_ID}`,
+    });
+  });
+
   it('should render normally', () => {
-    component = shallow(<NoDataSource />);
+    component = shallow(<NoDataSource totalDataSourceCount={0} />);
     expect(component).toMatchSnapshot();
   });
 });
diff --git a/src/plugins/data_source_management/public/components/no_data_source/no_data_source.tsx b/src/plugins/data_source_management/public/components/no_data_source/no_data_source.tsx
index 2f9cf8c8415a..36d5b5befcab 100644
--- a/src/plugins/data_source_management/public/components/no_data_source/no_data_source.tsx
+++ b/src/plugins/data_source_management/public/components/no_data_source/no_data_source.tsx
@@ -3,22 +3,124 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 
-import { EuiButtonEmpty } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiContextMenuPanel,
+  EuiHorizontalRule,
+  EuiPanel,
+  EuiPopover,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { ApplicationStart } from 'opensearch-dashboards/public';
+import { FormattedMessage } from 'react-intl';
+import { DataSourceDropDownHeader } from '../drop_down_header';
+import { DSM_APP_ID } from '../../plugin';
 
-export const NoDataSource = () => {
+interface DataSourceDropDownHeaderProps {
+  totalDataSourceCount: number;
+  activeDataSourceCount?: number;
+  application?: ApplicationStart;
+}
+
+export const NoDataSource: React.FC<DataSourceDropDownHeaderProps> = ({
+  activeDataSourceCount,
+  totalDataSourceCount,
+  application,
+}) => {
+  const [showPopover, setShowPopover] = useState<boolean>(false);
   const label = ' No data sources';
-  return (
+  const button = (
     <EuiButtonEmpty
       className="euiHeaderLink"
-      data-test-subj="dataSourceViewContextMenuHeaderLink"
+      data-test-subj="dataSourceEmptyStateHeaderButton"
       iconType="alert"
       iconSide="left"
       size="s"
       color="primary"
+      onClick={() => {
+        setShowPopover(!showPopover);
+      }}
     >
       {label}
     </EuiButtonEmpty>
   );
+
+  const redirectButton = (
+    <EuiButton
+      iconType="popout"
+      iconSide="right"
+      data-test-subj="dataSourceEmptyStateManageDataSourceButton"
+      fill={false}
+      onClick={() =>
+        application?.navigateToApp('management', {
+          path: `opensearch-dashboards/${DSM_APP_ID}`,
+        })
+      }
+    >
+      <FormattedMessage
+        id="dataSourcesManagement.dataSourceMenu.manageDataSource"
+        defaultMessage="Manage data sources"
+      />
+    </EuiButton>
+  );
+  const text = (
+    <>
+      <EuiText>
+        {
+          <FormattedMessage
+            id="dataSourcesManagement.dataSourceMenu.noData"
+            defaultMessage="There is no data sources to display."
+          />
+        }
+      </EuiText>
+
+      <EuiText>
+        {
+          <FormattedMessage
+            id="dataSourcesManagement.dataSourceMenu.connect"
+            defaultMessage="Connect data source to get started"
+          />
+        }
+      </EuiText>
+    </>
+  );
+
+  return (
+    <EuiPopover
+      initialFocus={'.euiSelectableSearch'}
+      id={'dataSourceEmptyStatePopover'}
+      button={button}
+      isOpen={showPopover}
+      closePopover={() => setShowPopover(false)}
+      panelPaddingSize="none"
+      anchorPosition="downLeft"
+      data-test-subj={'dataSourceEmptyStatePopover'}
+    >
+      <EuiContextMenuPanel>
+        <EuiPanel className={'dataSourceSelectableOuiPanel'} color="transparent" paddingSize="s">
+          <DataSourceDropDownHeader
+            activeDataSourceCount={activeDataSourceCount}
+            totalDataSourceCount={totalDataSourceCount}
+            application={application}
+          />
+          <EuiHorizontalRule margin="none" />
+          <EuiSpacer size="s" />
+          <EuiPanel
+            hasBorder={false}
+            hasShadow={false}
+            className="dataSourceEmptyStatePanel"
+            data-test-subj="datasourceTableEmptyState"
+          >
+            {text}
+            <EuiSpacer />
+            {redirectButton}
+          </EuiPanel>
+        </EuiPanel>
+      </EuiContextMenuPanel>
+    </EuiPopover>
+  );
 };