diff --git a/x-pack/plugins/streams_app/public/components/entity_detail_view/index.tsx b/x-pack/plugins/streams_app/public/components/entity_detail_view/index.tsx
index d2ce4859e66d1..68c5f9d6798ec 100644
--- a/x-pack/plugins/streams_app/public/components/entity_detail_view/index.tsx
+++ b/x-pack/plugins/streams_app/public/components/entity_detail_view/index.tsx
@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiFlexGroup, EuiIcon, EuiLink, EuiPanel } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useStreamsAppBreadcrumbs } from '../../hooks/use_streams_app_breadcrumbs';
@@ -71,31 +71,35 @@ export function EntityDetailViewWithoutParams({
 
   return (
     <EuiFlexGroup direction="column" gutterSize="none">
-      <EuiPanel color="transparent">
-        <EuiLink data-test-subj="streamsEntityDetailViewGoBackHref" href={router.link('/')}>
-          <EuiFlexGroup direction="row" alignItems="center" gutterSize="s">
-            <EuiIcon type="arrowLeft" />
-            {i18n.translate('xpack.streams.entityDetailView.goBackLinkLabel', {
-              defaultMessage: 'Back',
+      <EuiFlexItem grow={false}>
+        <EuiPanel color="transparent">
+          <EuiLink data-test-subj="streamsEntityDetailViewGoBackHref" href={router.link('/')}>
+            <EuiFlexGroup direction="row" alignItems="center" gutterSize="s">
+              <EuiIcon type="arrowLeft" />
+              {i18n.translate('xpack.streams.entityDetailView.goBackLinkLabel', {
+                defaultMessage: 'Back',
+              })}
+            </EuiFlexGroup>
+          </EuiLink>
+        </EuiPanel>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <StreamsAppPageHeader
+          verticalPaddingSize="none"
+          title={<StreamsAppPageHeaderTitle title={entity.displayName} />}
+        >
+          <EntityOverviewTabList
+            tabs={Object.entries(tabMap).map(([tabKey, { label, href }]) => {
+              return {
+                name: tabKey,
+                label,
+                href,
+                selected: selectedTab === tabKey,
+              };
             })}
-          </EuiFlexGroup>
-        </EuiLink>
-      </EuiPanel>
-      <StreamsAppPageHeader
-        verticalPaddingSize="none"
-        title={<StreamsAppPageHeaderTitle title={entity.displayName} />}
-      >
-        <EntityOverviewTabList
-          tabs={Object.entries(tabMap).map(([tabKey, { label, href }]) => {
-            return {
-              name: tabKey,
-              label,
-              href,
-              selected: selectedTab === tabKey,
-            };
-          })}
-        />
-      </StreamsAppPageHeader>
+          />
+        </StreamsAppPageHeader>
+      </EuiFlexItem>
       <StreamsAppPageBody>{selectedTabObject.content}</StreamsAppPageBody>
     </EuiFlexGroup>
   );
diff --git a/x-pack/plugins/streams_app/public/components/stream_detail_enriching/index.tsx b/x-pack/plugins/streams_app/public/components/stream_detail_enriching/index.tsx
new file mode 100644
index 0000000000000..d879142162353
--- /dev/null
+++ b/x-pack/plugins/streams_app/public/components/stream_detail_enriching/index.tsx
@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { StreamDefinition } from '@kbn/streams-plugin/common';
+import React from 'react';
+
+export function StreamDetailEnriching({
+  definition: _definition,
+  refreshDefinition: _refreshDefinition,
+}: {
+  definition?: StreamDefinition;
+  refreshDefinition: () => void;
+}) {
+  return <>{'TODO'}</>;
+}
diff --git a/x-pack/plugins/streams_app/public/components/stream_detail_management/index.tsx b/x-pack/plugins/streams_app/public/components/stream_detail_management/index.tsx
new file mode 100644
index 0000000000000..534d883905b17
--- /dev/null
+++ b/x-pack/plugins/streams_app/public/components/stream_detail_management/index.tsx
@@ -0,0 +1,92 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { StreamDefinition } from '@kbn/streams-plugin/common';
+import { EuiButtonGroup, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { useStreamsAppParams } from '../../hooks/use_streams_app_params';
+import { RedirectTo } from '../redirect_to';
+import { useStreamsAppRouter } from '../../hooks/use_streams_app_router';
+import { StreamDetailRouting } from '../stream_detail_routing';
+import { StreamDetailEnriching } from '../stream_detail_enriching';
+import { StreamDetailSchemaEditor } from '../stream_detail_schema_editor';
+
+type ManagementSubTabs = 'route' | 'enrich' | 'schemaEditor';
+
+function isValidManagementSubTab(value: string): value is ManagementSubTabs {
+  return ['route', 'enrich', 'schemaEditor'].includes(value);
+}
+
+export function StreamDetailManagement({
+  definition,
+  refreshDefinition,
+}: {
+  definition?: StreamDefinition;
+  refreshDefinition: () => void;
+}) {
+  const {
+    path: { key, subtab },
+  } = useStreamsAppParams('/{key}/management/{subtab}');
+  const router = useStreamsAppRouter();
+
+  const tabs = {
+    route: {
+      content: (
+        <StreamDetailRouting definition={definition} refreshDefinition={refreshDefinition} />
+      ),
+      label: i18n.translate('xpack.streams.streamDetailView.routingTab', {
+        defaultMessage: 'Streams Partitioning',
+      }),
+    },
+    enrich: {
+      content: (
+        <StreamDetailEnriching definition={definition} refreshDefinition={refreshDefinition} />
+      ),
+      label: i18n.translate('xpack.streams.streamDetailView.enrichingTab', {
+        defaultMessage: 'Extract field',
+      }),
+    },
+    schemaEditor: {
+      content: (
+        <StreamDetailSchemaEditor definition={definition} refreshDefinition={refreshDefinition} />
+      ),
+      label: i18n.translate('xpack.streams.streamDetailView.schemaEditorTab', {
+        defaultMessage: 'Schema editor',
+      }),
+    },
+  };
+
+  if (!isValidManagementSubTab(subtab)) {
+    return (
+      <RedirectTo path="/{key}/management/{subtab}" params={{ path: { key, subtab: 'route' } }} />
+    );
+  }
+
+  const selectedTabObject = tabs[subtab];
+
+  return (
+    <EuiFlexGroup direction="column" gutterSize="none">
+      <EuiFlexItem grow={false}>
+        <EuiButtonGroup
+          legend="Management tabs"
+          idSelected={subtab}
+          onChange={(optionId) => {
+            router.push('/{key}/management/{subtab}', {
+              path: { key, subtab: optionId },
+              query: {},
+            });
+          }}
+          options={Object.keys(tabs).map((id) => ({
+            id,
+            label: tabs[id as ManagementSubTabs].label,
+          }))}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow>{selectedTabObject.content}</EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/x-pack/plugins/streams_app/public/components/stream_detail_overview/index.tsx b/x-pack/plugins/streams_app/public/components/stream_detail_overview/index.tsx
index 93a573fd4c01f..c051d114317ea 100644
--- a/x-pack/plugins/streams_app/public/components/stream_detail_overview/index.tsx
+++ b/x-pack/plugins/streams_app/public/components/stream_detail_overview/index.tsx
@@ -114,54 +114,58 @@ export function StreamDetailOverview({ definition }: { definition?: StreamDefini
   return (
     <>
       <EuiFlexGroup direction="column">
-        <EuiFlexGroup direction="row" gutterSize="s">
-          <EuiFlexItem grow>
-            <StreamsAppSearchBar
-              onQuerySubmit={({ dateRange }, isUpdate) => {
-                if (!isUpdate) {
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup direction="row" gutterSize="s">
+            <EuiFlexItem grow>
+              <StreamsAppSearchBar
+                onQuerySubmit={({ dateRange }, isUpdate) => {
+                  if (!isUpdate) {
+                    histogramQueryFetch.refresh();
+                    return;
+                  }
+
+                  if (dateRange) {
+                    setTimeRange({ from: dateRange.from, to: dateRange?.to, mode: dateRange.mode });
+                  }
+                }}
+                onRefresh={() => {
                   histogramQueryFetch.refresh();
-                  return;
-                }
-
-                if (dateRange) {
-                  setTimeRange({ from: dateRange.from, to: dateRange?.to, mode: dateRange.mode });
-                }
-              }}
-              onRefresh={() => {
-                histogramQueryFetch.refresh();
-              }}
-              placeholder={i18n.translate(
-                'xpack.streams.entityDetailOverview.searchBarPlaceholder',
-                {
-                  defaultMessage: 'Filter data by using KQL',
-                }
-              )}
-              dateRangeFrom={timeRange.from}
-              dateRangeTo={timeRange.to}
-            />
-          </EuiFlexItem>
-          <EuiButton
-            data-test-subj="streamsDetailOverviewOpenInDiscoverButton"
-            iconType="discoverApp"
-            href={discoverLink}
-            color="text"
-          >
-            {i18n.translate('xpack.streams.streamDetailOverview.openInDiscoverButtonLabel', {
-              defaultMessage: 'Open in Discover',
-            })}
-          </EuiButton>
-        </EuiFlexGroup>
-        <EuiPanel hasShadow={false} hasBorder>
-          <EuiFlexGroup direction="column">
-            <ControlledEsqlChart
-              result={histogramQueryFetch}
-              id="entity_log_rate"
-              metricNames={['metric']}
-              height={200}
-              chartType={'bar'}
-            />
+                }}
+                placeholder={i18n.translate(
+                  'xpack.streams.entityDetailOverview.searchBarPlaceholder',
+                  {
+                    defaultMessage: 'Filter data by using KQL',
+                  }
+                )}
+                dateRangeFrom={timeRange.from}
+                dateRangeTo={timeRange.to}
+              />
+            </EuiFlexItem>
+            <EuiButton
+              data-test-subj="streamsDetailOverviewOpenInDiscoverButton"
+              iconType="discoverApp"
+              href={discoverLink}
+              color="text"
+            >
+              {i18n.translate('xpack.streams.streamDetailOverview.openInDiscoverButtonLabel', {
+                defaultMessage: 'Open in Discover',
+              })}
+            </EuiButton>
           </EuiFlexGroup>
-        </EuiPanel>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiPanel hasShadow={false} hasBorder>
+            <EuiFlexGroup direction="column">
+              <ControlledEsqlChart
+                result={histogramQueryFetch}
+                id="entity_log_rate"
+                metricNames={['metric']}
+                height={200}
+                chartType={'bar'}
+              />
+            </EuiFlexGroup>
+          </EuiPanel>
+        </EuiFlexItem>
       </EuiFlexGroup>
     </>
   );
diff --git a/x-pack/plugins/streams_app/public/components/stream_detail_routing/index.tsx b/x-pack/plugins/streams_app/public/components/stream_detail_routing/index.tsx
new file mode 100644
index 0000000000000..af65c7eab4235
--- /dev/null
+++ b/x-pack/plugins/streams_app/public/components/stream_detail_routing/index.tsx
@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { StreamDefinition } from '@kbn/streams-plugin/common';
+import React from 'react';
+
+export function StreamDetailRouting({
+  definition: _definition,
+  refreshDefinition: _refreshDefinition,
+}: {
+  definition?: StreamDefinition;
+  refreshDefinition: () => void;
+}) {
+  return <>{'TODO'}</>;
+}
diff --git a/x-pack/plugins/streams_app/public/components/stream_detail_schema_editor/index.tsx b/x-pack/plugins/streams_app/public/components/stream_detail_schema_editor/index.tsx
new file mode 100644
index 0000000000000..7d3e9322e8d4f
--- /dev/null
+++ b/x-pack/plugins/streams_app/public/components/stream_detail_schema_editor/index.tsx
@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { StreamDefinition } from '@kbn/streams-plugin/common';
+import React from 'react';
+
+export function StreamDetailSchemaEditor({
+  definition: _definition,
+  refreshDefinition: _refreshDefinition,
+}: {
+  definition?: StreamDefinition;
+  refreshDefinition: () => void;
+}) {
+  return <>{'TODO'}</>;
+}
diff --git a/x-pack/plugins/streams_app/public/components/stream_detail_view/index.tsx b/x-pack/plugins/streams_app/public/components/stream_detail_view/index.tsx
index ebf72a58d32a8..4f213e855c175 100644
--- a/x-pack/plugins/streams_app/public/components/stream_detail_view/index.tsx
+++ b/x-pack/plugins/streams_app/public/components/stream_detail_view/index.tsx
@@ -11,11 +11,13 @@ import { useStreamsAppParams } from '../../hooks/use_streams_app_params';
 import { useStreamsAppFetch } from '../../hooks/use_streams_app_fetch';
 import { useKibana } from '../../hooks/use_kibana';
 import { StreamDetailOverview } from '../stream_detail_overview';
+import { StreamDetailManagement } from '../stream_detail_management';
 
 export function StreamDetailView() {
-  const {
-    path: { key, tab },
-  } = useStreamsAppParams('/{key}/{tab}');
+  const { path } = useStreamsAppParams('/{key}/*');
+
+  const key = path.key;
+  const tab = 'tab' in path ? path.tab : 'management';
 
   const {
     dependencies: {
@@ -25,7 +27,7 @@ export function StreamDetailView() {
     },
   } = useKibana();
 
-  const { value: streamEntity } = useStreamsAppFetch(
+  const { value: streamEntity, refresh } = useStreamsAppFetch(
     ({ signal }) => {
       return streamsRepositoryClient.fetch('GET /api/streams/{id}', {
         signal,
@@ -54,7 +56,7 @@ export function StreamDetailView() {
     },
     {
       name: 'management',
-      content: <></>,
+      content: <StreamDetailManagement definition={streamEntity} refreshDefinition={refresh} />,
       label: i18n.translate('xpack.streams.streamDetailView.managementTab', {
         defaultMessage: 'Management',
       }),
diff --git a/x-pack/plugins/streams_app/public/components/stream_list_view/index.tsx b/x-pack/plugins/streams_app/public/components/stream_list_view/index.tsx
index e0530fc6bf5f0..7ffda5f40295a 100644
--- a/x-pack/plugins/streams_app/public/components/stream_list_view/index.tsx
+++ b/x-pack/plugins/streams_app/public/components/stream_list_view/index.tsx
@@ -6,7 +6,7 @@
  */
 import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFlexGroup, EuiSearchBar } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSearchBar } from '@elastic/eui';
 import { useKibana } from '../../hooks/use_kibana';
 import { useStreamsAppFetch } from '../../hooks/use_streams_app_fetch';
 import { StreamsAppPageHeader } from '../streams_app_page_header';
@@ -36,27 +36,33 @@ export function StreamListView() {
 
   return (
     <EuiFlexGroup direction="column" gutterSize="none">
-      <StreamsAppPageHeader
-        title={
-          <StreamsAppPageHeaderTitle
-            title={i18n.translate('xpack.streams.streamsListViewPageHeaderTitle', {
-              defaultMessage: 'Streams',
-            })}
-          />
-        }
-      />
+      <EuiFlexItem grow={false}>
+        <StreamsAppPageHeader
+          title={
+            <StreamsAppPageHeaderTitle
+              title={i18n.translate('xpack.streams.streamsListViewPageHeaderTitle', {
+                defaultMessage: 'Streams',
+              })}
+            />
+          }
+        />
+      </EuiFlexItem>
       <StreamsAppPageBody>
         <EuiFlexGroup direction="column">
-          <EuiSearchBar
-            query={query}
-            box={{
-              incremental: true,
-            }}
-            onChange={(nextQuery) => {
-              setQuery(nextQuery.queryText);
-            }}
-          />
-          <StreamsTable listFetch={streamsListFetch} query={query} />
+          <EuiFlexItem grow={false}>
+            <EuiSearchBar
+              query={query}
+              box={{
+                incremental: true,
+              }}
+              onChange={(nextQuery) => {
+                setQuery(nextQuery.queryText);
+              }}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow>
+            <StreamsTable listFetch={streamsListFetch} query={query} />
+          </EuiFlexItem>
         </EuiFlexGroup>
       </StreamsAppPageBody>
     </EuiFlexGroup>
diff --git a/x-pack/plugins/streams_app/public/components/streams_app_page_body/index.tsx b/x-pack/plugins/streams_app/public/components/streams_app_page_body/index.tsx
index 0f13dc31e277b..04b44f82df0fd 100644
--- a/x-pack/plugins/streams_app/public/components/streams_app_page_body/index.tsx
+++ b/x-pack/plugins/streams_app/public/components/streams_app_page_body/index.tsx
@@ -17,6 +17,7 @@ export function StreamsAppPageBody({ children }: { children: React.ReactNode })
       className={css`
         border-top: 1px solid ${theme.colors.lightShade};
         border-radius: 0px;
+        display: flex;
       `}
       paddingSize="l"
     >
diff --git a/x-pack/plugins/streams_app/public/components/streams_app_page_template/index.tsx b/x-pack/plugins/streams_app/public/components/streams_app_page_template/index.tsx
index c474f54c22745..942d2937dba81 100644
--- a/x-pack/plugins/streams_app/public/components/streams_app_page_template/index.tsx
+++ b/x-pack/plugins/streams_app/public/components/streams_app_page_template/index.tsx
@@ -35,7 +35,15 @@ export function StreamsAppPageTemplate({ children }: { children: React.ReactNode
         },
       }}
     >
-      <EuiPanel paddingSize="none" color="subdued" hasShadow={false} hasBorder={false}>
+      <EuiPanel
+        paddingSize="none"
+        color="subdued"
+        hasShadow={false}
+        hasBorder={false}
+        className={css`
+          display: flex;
+        `}
+      >
         <EuiSpacer size="m" />
         {children}
       </EuiPanel>
diff --git a/x-pack/plugins/streams_app/public/hooks/use_streams_app_params.ts b/x-pack/plugins/streams_app/public/hooks/use_streams_app_params.ts
index 2931a6fa64f8b..d7a6e175e5491 100644
--- a/x-pack/plugins/streams_app/public/hooks/use_streams_app_params.ts
+++ b/x-pack/plugins/streams_app/public/hooks/use_streams_app_params.ts
@@ -8,7 +8,8 @@ import { type PathsOf, type TypeOf, useParams } from '@kbn/typed-react-router-co
 import type { StreamsAppRoutes } from '../routes/config';
 
 export function useStreamsAppParams<TPath extends PathsOf<StreamsAppRoutes>>(
-  path: TPath
+  path: TPath,
+  optional: boolean = false
 ): TypeOf<StreamsAppRoutes, TPath> {
-  return useParams(path)! as TypeOf<StreamsAppRoutes, TPath>;
+  return useParams(path, optional)! as TypeOf<StreamsAppRoutes, TPath>;
 }
diff --git a/x-pack/plugins/streams_app/public/routes/config.tsx b/x-pack/plugins/streams_app/public/routes/config.tsx
index e3efdc6d871e7..6ae0fec51ad7a 100644
--- a/x-pack/plugins/streams_app/public/routes/config.tsx
+++ b/x-pack/plugins/streams_app/public/routes/config.tsx
@@ -44,6 +44,22 @@ const streamsAppRoutes = {
           '/{key}': {
             element: <RedirectTo path="/{key}/{tab}" params={{ path: { tab: 'overview' } }} />,
           },
+          '/{key}/management': {
+            element: (
+              <RedirectTo
+                path="/{key}/management/{subtab}"
+                params={{ path: { subtab: 'route' } }}
+              />
+            ),
+          },
+          '/{key}/management/{subtab}': {
+            element: <StreamDetailView />,
+            params: t.type({
+              path: t.type({
+                subtab: t.string,
+              }),
+            }),
+          },
           '/{key}/{tab}': {
             element: <StreamDetailView />,
             params: t.type({