diff --git a/src/plugins/index_pattern_management/public/management_app/mount_management_section.tsx b/src/plugins/index_pattern_management/public/management_app/mount_management_section.tsx
index 162d1d0876c6..70bdfab469aa 100644
--- a/src/plugins/index_pattern_management/public/management_app/mount_management_section.tsx
+++ b/src/plugins/index_pattern_management/public/management_app/mount_management_section.tsx
@@ -36,6 +36,7 @@ import { i18n } from '@osd/i18n';
 import { I18nProvider } from '@osd/i18n/react';
 import { StartServicesAccessor } from 'src/core/public';
 
+import { EuiPage, EuiPageBody } from '@elastic/eui';
 import { OpenSearchDashboardsContextProvider } from '../../../opensearch_dashboards_react/public';
 import { ManagementAppMountParams } from '../../../management/public';
 import {
@@ -60,7 +61,8 @@ const readOnlyBadge = {
 export async function mountManagementSection(
   getStartServices: StartServicesAccessor<IndexPatternManagementStartDependencies>,
   params: ManagementAppMountParams,
-  getMlCardState: () => MlCardState
+  getMlCardState: () => MlCardState,
+  withPage: boolean = false
 ) {
   const [
     { chrome, application, savedObjects, uiSettings, notifications, overlays, http, docLinks },
@@ -90,26 +92,36 @@ export async function mountManagementSection(
     dataSourceEnabled,
   };
 
+  const router = (
+    <Router history={params.history}>
+      <Switch>
+        <Route path={['/create']}>
+          <CreateIndexPatternWizardWithRouter />
+        </Route>
+        <Route path={['/patterns/:id/field/:fieldName', '/patterns/:id/create-field/']}>
+          <CreateEditFieldContainer />
+        </Route>
+        <Route path={['/patterns/:id']}>
+          <EditIndexPatternContainer />
+        </Route>
+        <Route path={['/']}>
+          <IndexPatternTableWithRouter canSave={canSave} />
+        </Route>
+      </Switch>
+    </Router>
+  );
+  let content = router;
+  if (withPage) {
+    content = (
+      <EuiPage restrictWidth="1200px">
+        <EuiPageBody component="main">{router}</EuiPageBody>
+      </EuiPage>
+    );
+  }
+
   ReactDOM.render(
     <OpenSearchDashboardsContextProvider services={deps}>
-      <I18nProvider>
-        <Router history={params.history}>
-          <Switch>
-            <Route path={['/create']}>
-              <CreateIndexPatternWizardWithRouter />
-            </Route>
-            <Route path={['/patterns/:id/field/:fieldName', '/patterns/:id/create-field/']}>
-              <CreateEditFieldContainer />
-            </Route>
-            <Route path={['/patterns/:id']}>
-              <EditIndexPatternContainer />
-            </Route>
-            <Route path={['/']}>
-              <IndexPatternTableWithRouter canSave={canSave} />
-            </Route>
-          </Switch>
-        </Router>
-      </I18nProvider>
+      <I18nProvider>{content}</I18nProvider>
     </OpenSearchDashboardsContextProvider>,
     params.element
   );
diff --git a/src/plugins/index_pattern_management/public/plugin.ts b/src/plugins/index_pattern_management/public/plugin.ts
index cf68e043b76c..15fd02681c3c 100644
--- a/src/plugins/index_pattern_management/public/plugin.ts
+++ b/src/plugins/index_pattern_management/public/plugin.ts
@@ -29,7 +29,15 @@
  */
 
 import { i18n } from '@osd/i18n';
-import { PluginInitializerContext, CoreSetup, CoreStart, Plugin } from 'src/core/public';
+import {
+  PluginInitializerContext,
+  CoreSetup,
+  CoreStart,
+  Plugin,
+  AppMountParameters,
+  ChromeBreadcrumb,
+  ScopedHistory,
+} from 'src/core/public';
 import { DataPublicPluginStart } from 'src/plugins/data/public';
 import { DataSourcePluginStart } from 'src/plugins/data_source/public';
 import { UrlForwardingSetup } from '../../url_forwarding/public';
@@ -39,7 +47,9 @@ import {
   IndexPatternManagementServiceStart,
 } from './service';
 
-import { ManagementSetup } from '../../management/public';
+import { ManagementAppMountParams, ManagementSetup } from '../../management/public';
+import { DEFAULT_APP_CATEGORIES } from '../../../core/public';
+import { reactRouterNavigate } from '../../opensearch_dashboards_react/public';
 
 export interface IndexPatternManagementSetupDependencies {
   management: ManagementSetup;
@@ -51,7 +61,9 @@ export interface IndexPatternManagementStartDependencies {
   dataSource?: DataSourcePluginStart;
 }
 
-export type IndexPatternManagementSetup = IndexPatternManagementServiceSetup;
+export interface IndexPatternManagementSetup extends IndexPatternManagementServiceSetup {
+  registerLibrarySubApp: () => void;
+}
 
 export type IndexPatternManagementStart = IndexPatternManagementServiceStart;
 
@@ -109,7 +121,55 @@ export class IndexPatternManagementPlugin
       },
     });
 
-    return this.indexPatternManagementService.setup({ httpClient: core.http });
+    const registerLibrarySubApp = () => {
+      // disable it under Dashboards Management
+      opensearchDashboardsSection.getApp(IPM_APP_ID)?.disable();
+      // register it under Library
+      core.application.register({
+        id: IPM_APP_ID,
+        title: sectionsHeader,
+        order: 8100,
+        category: DEFAULT_APP_CATEGORIES.opensearchDashboards,
+        mount: async (params: AppMountParameters) => {
+          const { mountManagementSection } = await import('./management_app');
+
+          const [coreStart] = await core.getStartServices();
+
+          const setBreadcrumbsScope = (
+            crumbs: ChromeBreadcrumb[] = [],
+            appHistory?: ScopedHistory
+          ) => {
+            const wrapBreadcrumb = (item: ChromeBreadcrumb, scopedHistory: ScopedHistory) => ({
+              ...item,
+              ...(item.href ? reactRouterNavigate(scopedHistory, item.href) : {}),
+            });
+
+            coreStart.chrome.setBreadcrumbs([
+              ...crumbs.map((item) => wrapBreadcrumb(item, appHistory || params.history)),
+            ]);
+          };
+
+          const managementParams: ManagementAppMountParams = {
+            element: params.element,
+            history: params.history,
+            setBreadcrumbs: setBreadcrumbsScope,
+            basePath: params.appBasePath,
+          };
+
+          return mountManagementSection(
+            core.getStartServices,
+            managementParams,
+            () => this.indexPatternManagementService.environmentService.getEnvironment().ml(),
+            true
+          );
+        },
+      });
+    };
+
+    return {
+      ...this.indexPatternManagementService.setup({ httpClient: core.http }),
+      registerLibrarySubApp,
+    };
   }
 
   public start(core: CoreStart, plugins: IndexPatternManagementStartDependencies) {