diff --git a/components/Layout/index.jsx b/components/Layout/index.jsx
new file mode 100644
index 0000000..21295cc
--- /dev/null
+++ b/components/Layout/index.jsx
@@ -0,0 +1,45 @@
+import TableOfContents from '@node-core/ui-components/Common/TableOfContents';
+import Article from '@node-core/ui-components/Containers/Article';
+import { Analytics } from '@vercel/analytics/react';
+import { SpeedInsights } from '@vercel/speed-insights/react';
+
+import NavBar from '../Navigation';
+import MetaBar from '../Metabar';
+import SideBar from '../Sidebar';
+
+import Footer from '#theme/Footer';
+
+/**
+ * @typedef {Object} Props
+ * @property {import('@node-core/doc-kit/src/generators/web/ui/types.d.ts').SerializedMetadata} metadata
+ * @property {Array} headings
+ * @property {string} readingTime
+ * @property {import('preact').ComponentChildren} children
+ */
+
+/**
+ * @param {Props} props
+ */
+export default ({ metadata, headings, readingTime, children }) => (
+  <>
+    <Analytics />
+    <SpeedInsights />
+    <NavBar />
+    <Article>
+      <SideBar metadata={metadata} />
+      <div>
+        <div>
+          <TableOfContents headings={headings} summaryTitle="On this page" />
+          <br />
+          <main>{children}</main>
+        </div>
+        <MetaBar
+          metadata={metadata}
+          headings={headings}
+          readingTime={readingTime}
+        />
+      </div>
+    </Article>
+    <Footer />
+  </>
+);
diff --git a/doc-kit.config.mjs b/doc-kit.config.mjs
index 760dd13..7eceff7 100644
--- a/doc-kit.config.mjs
+++ b/doc-kit.config.mjs
@@ -13,18 +13,7 @@ export default {
     editURL: 'https://github.com/nodejs/learn/edit/main/pages{path}.md',
     imports: {
       ...web.defaultConfiguration.imports,
-      '#theme/Navigation': join(
-        import.meta.dirname,
-        'components/Navigation/index.jsx'
-      ),
-      '#theme/Sidebar': join(
-        import.meta.dirname,
-        'components/Sidebar/index.jsx'
-      ),
-      '#theme/Metabar': join(
-        import.meta.dirname,
-        'components/Metabar/index.jsx'
-      ),
+      '#theme/Layout': join(import.meta.dirname, 'components/Layout/index.jsx'),
     },
   },
 };
diff --git a/package-lock.json b/package-lock.json
index 4b44238..1ef9715 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,9 @@
   "packages": {
     "": {
       "dependencies": {
-        "@node-core/ui-components": "^1.6.3"
+        "@node-core/ui-components": "^1.6.3",
+        "@vercel/analytics": "^2.0.1",
+        "@vercel/speed-insights": "^2.0.0"
       },
       "devDependencies": {
         "@eslint/js": "^10.0.1",
@@ -3731,6 +3733,86 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/@vercel/analytics": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-2.0.1.tgz",
+      "integrity": "sha512-MTQG6V9qQrt1tsDeF+2Uoo5aPjqbVPys1xvnIftXSJYG2SrwXRHnqEvVoYID7BTruDz4lCd2Z7rM1BdkUehk2g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@remix-run/react": "^2",
+        "@sveltejs/kit": "^1 || ^2",
+        "next": ">= 13",
+        "nuxt": ">= 3",
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "svelte": ">= 4",
+        "vue": "^3",
+        "vue-router": "^4"
+      },
+      "peerDependenciesMeta": {
+        "@remix-run/react": {
+          "optional": true
+        },
+        "@sveltejs/kit": {
+          "optional": true
+        },
+        "next": {
+          "optional": true
+        },
+        "nuxt": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        },
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vercel/speed-insights": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-2.0.0.tgz",
+      "integrity": "sha512-jwkNcrTeafWxjmWq4AHBaptSqZiJkYU5adLC9QBSqeim0GcqDMgN5Ievh8OG1rJ6W3A4l1oiP7qr9CWxGuzu3w==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@sveltejs/kit": "^1 || ^2",
+        "next": ">= 13",
+        "nuxt": ">= 3",
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "svelte": ">= 4",
+        "vue": "^3",
+        "vue-router": "^4"
+      },
+      "peerDependenciesMeta": {
+        "@sveltejs/kit": {
+          "optional": true
+        },
+        "next": {
+          "optional": true
+        },
+        "nuxt": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        },
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/abbrev": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
diff --git a/package.json b/package.json
index f6c42e5..ca88dbb 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,9 @@
     "typescript-eslint": "^8.57.2"
   },
   "dependencies": {
-    "@node-core/ui-components": "^1.6.3"
+    "@node-core/ui-components": "^1.6.3",
+    "@vercel/analytics": "^2.0.1",
+    "@vercel/speed-insights": "^2.0.0"
   },
   "engines": {
     "node": "24.x"