diff --git a/src/plugins/data_source_management/opensearch_dashboards.json b/src/plugins/data_source_management/opensearch_dashboards.json
index cfcfdd2ce430..824f9eacc9f6 100644
--- a/src/plugins/data_source_management/opensearch_dashboards.json
+++ b/src/plugins/data_source_management/opensearch_dashboards.json
@@ -5,6 +5,6 @@
   "ui": true,
   "requiredPlugins": ["management", "dataSource", "indexPatternManagement"],
   "optionalPlugins": [],
-  "requiredBundles": ["opensearchDashboardsReact", "dataSource"],
+  "requiredBundles": ["opensearchDashboardsReact", "dataSource", "opensearchDashboardsUtils"],
   "extraPublicDirs": ["public/components/utils"]
 }
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 f99cc6558bca..51fcb0db0857 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
@@ -10,13 +10,13 @@ import { DataSourcePluginSetup } from 'src/plugins/data_source/public';
 import { DataSourceMenu } from './data_source_menu';
 import { DataSourceMenuProps } from './types';
 import { MountPointPortal } from '../../../../opensearch_dashboards_react/public';
-import { applicationService } from '../utils';
+import { getApplication } from '../utils';
 
 export function createDataSourceMenu<T>(
   uiSettings: IUiSettingsClient,
   dataSourcePluginSetup: DataSourcePluginSetup
 ) {
-  const application = applicationService.getApplication();
+  const application = getApplication();
   return (props: DataSourceMenuProps<T>) => {
     const { hideLocalCluster } = dataSourcePluginSetup;
     if (props.setMenuMountPoint) {
diff --git a/src/plugins/data_source_management/public/components/drop_down_header/_drop_down_header.scss b/src/plugins/data_source_management/public/components/drop_down_header/_drop_down_header.scss
deleted file mode 100644
index 2776f358fd48..000000000000
--- a/src/plugins/data_source_management/public/components/drop_down_header/_drop_down_header.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-#invisibleFocusable {
-  opacity: 0;
-}
diff --git a/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.scss b/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.scss
new file mode 100644
index 000000000000..244ca77b90e1
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.scss
@@ -0,0 +1,3 @@
+.dataSourceDropDownHeaderInvisibleFocusable {
+  opacity: 0;
+}
diff --git a/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx b/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx
index 2864bdd9488a..2eb457c47511 100644
--- a/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx
+++ b/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './_drop_down_header.scss';
+import './drop_down_header.scss';
 import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
 import React from 'react';
 import { ApplicationStart } from 'opensearch-dashboards/public';
@@ -32,7 +32,7 @@ export const DataSourceDropDownHeader: React.FC<DataSourceOptionItemProps> = ({
         <EuiFlexItem>
           {dataSourceCounterPrefix} ({dataSourceCounter})
         </EuiFlexItem>
-        <div tabIndex={0} id="invisibleFocusable" />
+        <div tabIndex={0} className="dataSourceDropDownHeaderInvisibleFocusable" />
         <EuiFlexItem grow={false}>
           <EuiLink
             onClick={() =>
diff --git a/src/plugins/data_source_management/public/components/utils.ts b/src/plugins/data_source_management/public/components/utils.ts
index e3e583edbca4..58764d32fdb9 100644
--- a/src/plugins/data_source_management/public/components/utils.ts
+++ b/src/plugins/data_source_management/public/components/utils.ts
@@ -22,6 +22,7 @@ import {
 import { AuthenticationMethodRegistry } from '../auth_registry';
 import { DataSourceOption } from './data_source_selector/data_source_selector';
 import { DataSourceGroupLabelOption } from './data_source_menu/types';
+import { createGetterSetter } from '../../../opensearch_dashboards_utils/public';
 
 export async function getDataSources(savedObjectsClient: SavedObjectsClientContract) {
   return savedObjectsClient
@@ -296,17 +297,4 @@ export const dataSourceOptionGroupLabel = deepFreeze<Readonly<DataSourceOptionGr
   // TODO: add other group labels if needed
 });
 
-const createApplicationService = () => {
-  let application: ApplicationStart;
-
-  return {
-    init(applicationStart: ApplicationStart) {
-      application = applicationStart;
-    },
-    getApplication() {
-      return application;
-    },
-  };
-};
-
-export const applicationService = createApplicationService();
+export const [getApplication, setApplication] = createGetterSetter<ApplicationStart>('Application');
diff --git a/src/plugins/data_source_management/public/plugin.ts b/src/plugins/data_source_management/public/plugin.ts
index 40626f13b450..2461044a680b 100644
--- a/src/plugins/data_source_management/public/plugin.ts
+++ b/src/plugins/data_source_management/public/plugin.ts
@@ -4,7 +4,7 @@
  */
 
 import { DataSourcePluginSetup } from 'src/plugins/data_source/public';
-import { ApplicationStart, CoreSetup, CoreStart, Plugin } from '../../../core/public';
+import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
 
 import { PLUGIN_NAME } from '../common';
 import { createDataSourceSelector } from './components/data_source_selector/create_data_source_selector';
@@ -21,7 +21,7 @@ import { noAuthCredentialAuthMethod, sigV4AuthMethod, usernamePasswordAuthMethod
 import { DataSourceSelectorProps } from './components/data_source_selector/data_source_selector';
 import { createDataSourceMenu } from './components/data_source_menu/create_data_source_menu';
 import { DataSourceMenuProps } from './components/data_source_menu';
-import { applicationService } from './components/utils';
+import { setApplication } from './components/utils';
 
 export interface DataSourceManagementSetupDependencies {
   management: ManagementSetup;
@@ -112,7 +112,7 @@ export class DataSourceManagementPlugin
 
   public start(core: CoreStart) {
     this.started = true;
-    applicationService.init(core.application);
+    setApplication(core.application);
     return {
       getAuthenticationMethodRegistry: () => this.authMethodsRegistry,
     };