diff --git a/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx b/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx
index 89a9d6af4ab5..4cd139b52947 100644
--- a/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx
@@ -4,10 +4,25 @@
  */
 
 import { EuiTitle } from '@elastic/eui';
-import React from 'react';
-import { withRouter } from 'react-router-dom';
+import React, { useEffect } from 'react';
+import { i18n } from '@osd/i18n';
+import { ChromeBreadcrumb } from 'src/core/public';
 
-export const DataSourceTable = () => {
+export interface DataSourceTableProps {
+  setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
+}
+
+export const DataSourceTable = ({setBreadcrumbs}: DataSourceTableProps) => {
+  useEffect(() => {
+    setBreadcrumbs([
+      {
+        text: i18n.translate('dataSourceManagement.breadcrumb.index', {
+          defaultMessage: 'Data Sources',
+        }),
+        href: '/',
+      },
+    ]);
+  }, [setBreadcrumbs]);
   return (
     <EuiTitle>
       <h2>{'This is the landing page, going to list data sources here...'}</h2>
@@ -15,4 +30,4 @@ export const DataSourceTable = () => {
   );
 };
 
-export const DataSourceTableWithRouter = withRouter(DataSourceTable);
+export {DataSourceTable as default}
diff --git a/src/plugins/data_source_management/public/components/data_source_table/index.ts b/src/plugins/data_source_management/public/components/data_source_table/index.ts
index 6750808169bb..ad61a7597cbd 100644
--- a/src/plugins/data_source_management/public/components/data_source_table/index.ts
+++ b/src/plugins/data_source_management/public/components/data_source_table/index.ts
@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { DataSourceTableWithRouter } from './data_source_table';
+export { DataSourceTable } from './data_source_table';
diff --git a/src/plugins/data_source_management/public/management_app/mount_management_section.tsx b/src/plugins/data_source_management/public/management_app/mount_management_section.tsx
index 43729ec5a0d1..b600aebb0a79 100644
--- a/src/plugins/data_source_management/public/management_app/mount_management_section.tsx
+++ b/src/plugins/data_source_management/public/management_app/mount_management_section.tsx
@@ -6,6 +6,7 @@
 import { StartServicesAccessor } from 'src/core/public';
 
 import { I18nProvider } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router, Switch } from 'react-router-dom';
@@ -13,15 +14,16 @@ import { ManagementAppMountParams } from '../../../management/public';
 
 import { OpenSearchDashboardsContextProvider } from '../../../opensearch_dashboards_react/public';
 import { CreateDataSourceWizardWithRouter } from '../components/create_data_source_wizard';
-import { DataSourceTableWithRouter } from '../components/data_source_table';
 import { DataSourceManagmentContext } from '../types';
+import DataSourceTable from '../components/data_source_table/data_source_table';
+
 
 export async function mountManagementSection(
   getStartServices: StartServicesAccessor,
   params: ManagementAppMountParams
 ) {
   const [
-    { chrome, application, savedObjects, uiSettings, notifications, overlays, http, docLinks },
+    {chrome, application, savedObjects, uiSettings, notifications, overlays, http, docLinks }
   ] = await getStartServices();
 
   const deps: DataSourceManagmentContext = {
@@ -36,6 +38,14 @@ export async function mountManagementSection(
     setBreadcrumbs: params.setBreadcrumbs,
   };
 
+  /* Browser - Page Title */
+  const title = i18n.translate('dataSourcesManagement.objects.dataSourcesTitle', {
+    defaultMessage: 'Data Sources',
+  });
+  
+  chrome.docTitle.change(title);
+
+
   ReactDOM.render(
     <OpenSearchDashboardsContextProvider services={deps}>
       <I18nProvider>
@@ -45,7 +55,8 @@ export async function mountManagementSection(
               <CreateDataSourceWizardWithRouter />
             </Route>
             <Route path={['/']}>
-              <DataSourceTableWithRouter />
+              <DataSourceTable 
+                setBreadcrumbs={deps.setBreadcrumbs} />
             </Route>
           </Switch>
         </Router>