diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
index 351a4b4..52ef2bc 100644
--- a/opensearch_dashboards.json
+++ b/opensearch_dashboards.json
@@ -1,9 +1,14 @@
 {
   "id": "queryWorkbenchDashboards",
-  "version": "3.0.0.0",
-  "opensearchDashboardsVersion": "3.0.0",
+  "version": "2.14.0.0",
+  "opensearchDashboardsVersion": "2.14.0",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["navigation", "opensearchDashboardsReact", "opensearchDashboardsUtils"],
+  "requiredPlugins": [
+    "devTools",
+    "navigation",
+    "opensearchDashboardsReact",
+    "opensearchDashboardsUtils"
+  ],
   "optionalPlugins": ["observabilityDashboards", "dataSource", "dataSourceManagement"]
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index a170532..62a29b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "opensearch-query-workbench",
-  "version": "3.0.0.0",
+  "version": "2.14.0.0",
   "description": "Query Workbench",
   "main": "index.js",
   "license": "Apache-2.0",
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
index 14c8035..b9b9bd7 100644
--- a/public/components/Main/main.tsx
+++ b/public/components/Main/main.tsx
@@ -288,7 +288,7 @@ export class Main extends React.Component<MainProps, MainState> {
       dataSourceOptions: [],
       selectedMDSDataConnectionId: '',
       mdsClusterName: '',
-      flintDataConnections: false
+      flintDataConnections: false,
     };
     this.httpClient = this.props.httpClient;
     this.updateSQLQueries = _.debounce(this.updateSQLQueries, 250).bind(this);
@@ -297,12 +297,6 @@ export class Main extends React.Component<MainProps, MainState> {
   }
 
   componentDidMount() {
-    this.props.setBreadcrumbs([
-      {
-        text: 'Query Workbench',
-        href: '#',
-      },
-    ]);
     this.fetchFlintDataSources();
   }
 
@@ -900,7 +894,7 @@ export class Main extends React.Component<MainProps, MainState> {
       mdsClusterName: clusterName,
       cluster: 'Indexes',
       selectedDatasource: [{ label: 'OpenSearch', key: '' }],
-      isAccelerationFlyoutOpened: false
+      isAccelerationFlyoutOpened: false,
     });
     this.fetchFlintDataSources();
   };
@@ -1018,7 +1012,7 @@ export class Main extends React.Component<MainProps, MainState> {
           />
         )}
         <EuiPage paddingSize="none">
-          <EuiPanel grow={true} style={{marginRight: '10px'}}>
+          <EuiPanel grow={true} style={{ marginRight: '10px' }}>
             <EuiPageSideBar
               style={{
                 maxWidth: '400px',
@@ -1026,10 +1020,12 @@ export class Main extends React.Component<MainProps, MainState> {
                 height: 'calc(100vh - 254px)',
               }}
             >
-              <EuiTitle size='xs'>
-                  <p><b>{this.state.mdsClusterName}</b></p>
-                </EuiTitle>
-                <EuiSpacer size='s'/>
+              <EuiTitle size="xs">
+                <p>
+                  <b>{this.state.mdsClusterName}</b>
+                </p>
+              </EuiTitle>
+              <EuiSpacer size="s" />
               {this.state.flintDataConnections && (
                 <EuiFlexGroup direction="row" gutterSize="s">
                   <EuiFlexItem grow={false}>
diff --git a/public/plugin.ts b/public/plugin.ts
index 03480a9..fd3d55b 100644
--- a/public/plugin.ts
+++ b/public/plugin.ts
@@ -4,39 +4,47 @@
  */
 
 import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public';
-import { DataSourcePluginSetup, DataSourcePluginStart } from '../../../src/plugins/data_source/public';
+import {
+  DataSourcePluginSetup,
+  DataSourcePluginStart,
+} from '../../../src/plugins/data_source/public';
 import { DataSourceManagementPluginSetup } from '../../../src/plugins/data_source_management/public';
+import { DevToolsSetup } from '../../../src/plugins/dev_tools/public';
 import { PLUGIN_NAME } from '../common/constants';
 import { registerObservabilityDependencies } from './dependencies/register_observability_dependencies';
 import { coreRefs } from './framework/core_refs';
 import { AppPluginStartDependencies, WorkbenchPluginSetup, WorkbenchPluginStart } from './types';
 export interface WorkbenchPluginSetupDependencies {
   dataSource: DataSourcePluginSetup;
-  dataSourceManagement: DataSourceManagementPluginSetup
+  dataSourceManagement: DataSourceManagementPluginSetup;
+  devTools: DevToolsSetup;
 }
 
 export interface WorkbenchPluginStartDependencies {
   dataSource: DataSourcePluginStart;
 }
 export class WorkbenchPlugin implements Plugin<WorkbenchPluginSetup, WorkbenchPluginStart> {
-  public setup(core: CoreSetup, {dataSource, dataSourceManagement} : WorkbenchPluginSetupDependencies): WorkbenchPluginSetup {
-    // Register an application into the side navigation menu
-    core.application.register({
+  public setup(
+    core: CoreSetup,
+    { dataSource, dataSourceManagement, devTools }: WorkbenchPluginSetupDependencies
+  ): WorkbenchPluginSetup {
+    devTools.register({
       id: 'opensearch-query-workbench',
       title: PLUGIN_NAME,
-      category: {
-        id: 'opensearch',
-        label: 'OpenSearch Plugins',
-        order: 2000,
-      },
-      order: 1000,
+      enableRouting: true,
+      order: 2,
       async mount(params: AppMountParameters) {
         // Load application bundle
         const { renderApp } = await import('./application');
         // Get start services as specified in opensearch_dashboards.json
         const [coreStart, depsStart] = await core.getStartServices();
         // Render the application
-        return renderApp(coreStart, depsStart as AppPluginStartDependencies, params, dataSourceManagement);
+        return renderApp(
+          coreStart,
+          depsStart as AppPluginStartDependencies,
+          params,
+          dataSourceManagement
+        );
       },
     });