diff --git a/x-pack/plugins/observability/public/application/index.tsx b/x-pack/plugins/observability/public/application/index.tsx
index 8cfbca37e8d0..d76c033a4175 100644
--- a/x-pack/plugins/observability/public/application/index.tsx
+++ b/x-pack/plugins/observability/public/application/index.tsx
@@ -3,18 +3,31 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { i18n } from '@kbn/i18n';
 import { createHashHistory } from 'history';
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router, Switch } from 'react-router-dom';
-import { i18n } from '@kbn/i18n';
-import { RedirectAppLinks } from '../../../../../src/plugins/kibana_react/public';
 import { AppMountParameters, CoreStart } from '../../../../../src/core/public';
+import { RedirectAppLinks } from '../../../../../src/plugins/kibana_react/public';
 import { EuiThemeProvider } from '../../../../legacy/common/eui_styled_components';
 import { PluginContext } from '../context/plugin_context';
-import { useRouteParams } from '../hooks/use_route_params';
-import { routes } from '../routes';
 import { usePluginContext } from '../hooks/use_plugin_context';
+import { useRouteParams } from '../hooks/use_route_params';
+import { Breadcrumbs, routes } from '../routes';
+
+const observabilityLabelBreadcrumb = {
+  text: i18n.translate('xpack.observability.observability.breadcrumb.', {
+    defaultMessage: 'Observability',
+  }),
+};
+
+function getTitleFromBreadCrumbs(breadcrumbs: Breadcrumbs) {
+  return breadcrumbs
+    .map(({ text }) => text)
+    .reverse()
+    .join(' | ');
+}
 
 const App = () => {
   return (
@@ -25,16 +38,12 @@ const App = () => {
           const route = routes[path];
           const Wrapper = () => {
             const { core } = usePluginContext();
+
+            const breadcrumb = [observabilityLabelBreadcrumb, ...route.breadcrumb];
             useEffect(() => {
-              core.chrome.setBreadcrumbs([
-                {
-                  text: i18n.translate('xpack.observability.observability.breadcrumb.', {
-                    defaultMessage: 'Observability',
-                  }),
-                },
-                ...route.breadcrumb,
-              ]);
-            }, [core]);
+              core.chrome.setBreadcrumbs(breadcrumb);
+              document.title = getTitleFromBreadCrumbs(breadcrumb);
+            }, [core, breadcrumb]);
 
             const { query, path: pathParams } = useRouteParams(route.params);
             return route.handler({ query, path: pathParams });
diff --git a/x-pack/plugins/observability/public/routes/index.tsx b/x-pack/plugins/observability/public/routes/index.tsx
index 10f9b4dc4272..bee6a4dd7133 100644
--- a/x-pack/plugins/observability/public/routes/index.tsx
+++ b/x-pack/plugins/observability/public/routes/index.tsx
@@ -17,6 +17,8 @@ type DecodeParams<TParams extends Params | undefined> = {
   [key in keyof TParams]: TParams[key] extends t.Any ? t.TypeOf<TParams[key]> : never;
 };
 
+export type Breadcrumbs = Array<{ text: string }>;
+
 export interface Params {
   query?: t.HasProps;
   path?: t.HasProps;