diff --git a/.changeset/fresh-knives-deliver.md b/.changeset/fresh-knives-deliver.md
new file mode 100644
index 00000000000..1ce05a7978f
--- /dev/null
+++ b/.changeset/fresh-knives-deliver.md
@@ -0,0 +1,7 @@
+---
+"@remix-run/dev": minor
+"@remix-run/react": minor
+"@remix-run/server-runtime": minor
+---
+
+Allow an optional `Layout` export from the root route
diff --git a/docs/components/scripts.md b/docs/components/scripts.md
index 97ad3dc0569..7c13fccfda3 100644
--- a/docs/components/scripts.md
+++ b/docs/components/scripts.md
@@ -5,7 +5,7 @@ toc: false
 
 # `<Scripts />`
 
-This component renders the client runtime of your app. You should render it inside the [`<body>`][body-element] of your HTML, usually in `app/root.tsx`.
+This component renders the client runtime of your app. You should render it inside the [`<body>`][body-element] of your HTML, usually in [`app/root.tsx`][root].
 
 ```tsx filename=app/root.tsx lines=[8]
 import { Scripts } from "@remix-run/react";
@@ -24,4 +24,16 @@ export default function Root() {
 
 If you don't render the `<Scripts/>` component, your app will still work like a traditional web app without JavaScript, relying solely on HTML and browser behaviors.
 
+## Props
+
+The `<Scripts>` component can pass through certain attributes to the underlying `<script>` tags such as:
+
+- `<Scripts crossOrigin>` for hosting your static assets on a different server than your app.
+- `<Scripts nonce>` to support a [content security policy for scripts][csp] with [nonce-sources][csp-nonce] for your `<script>` tags.
+
+You cannot pass through attributes such as `async`/`defer`/`src`/`type`/`noModule` because they are managed by Remix internally.
+
 [body-element]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
+[csp]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
+[csp-nonce]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources
+[root]: ../file-conventions/root
diff --git a/docs/file-conventions/root.md b/docs/file-conventions/root.md
index 54293257129..7121ed42e8e 100644
--- a/docs/file-conventions/root.md
+++ b/docs/file-conventions/root.md
@@ -5,11 +5,26 @@ toc: false
 
 # Root Route
 
-FIXME: This is mostly the wrong doc, right code.
+The "root" route (`app/root.tsx`) is the only _required_ route in your Remix application because it is the parent to all routes in your `routes/` directory and is in charge of rendering the root `<html>` document.
 
-These components are to be used once inside your root route (`root.tsx`). They include everything Remix figured out or built in order for your page to render properly.
+Beyond that, it's mostly just like any other route and supports all of the standard route exports:
 
-```tsx
+- [`headers`][headers]
+- [`meta`][meta]
+- [`links`][links]
+- [`loader`][loader]
+- [`clientLoader`][clientloader]
+- [`action`][action]
+- [`clientAction`][clientaction]
+- [`default`][component]
+- [`ErrorBoundary`][errorboundary]
+- [`HydrateFallback`][hydratefallback]
+- [`handle`][handle]
+- [`shouldRevalidate`][shouldrevalidate]
+
+Because the root route manages your document, it is the proper place to render a handful of "document-level" components Remix provides. These components are to be used once inside your root route and they include everything Remix figured out or built in order for your page to render properly.
+
+```tsx filename=app/root.tsx
 import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
 import {
   Links,
@@ -36,14 +51,14 @@ export default function App() {
           content="width=device-width, initial-scale=1"
         />
 
-        {/* All meta exports on all routes will go here */}
+        {/* All `meta` exports on all routes will render here */}
         <Meta />
 
-        {/* All link exports on all routes will go here */}
+        {/* All `link` exports on all routes will render here */}
         <Links />
       </head>
       <body>
-        {/* Child routes go here */}
+        {/* Child routes render here */}
         <Outlet />
 
         {/* Manages scroll position for client-side transitions */}
@@ -64,16 +79,98 @@ export default function App() {
 }
 ```
 
-You can pass extra props to `<Scripts />` like `<Scripts crossOrigin />` for hosting your static assets on a different server than your app.
+## Layout Export
+
+Because the root route manages the document for all routes, it also supports an additional optional `Layout` export. You can read the details in this [RFC][layout-rfc] but the layout route serves 2 purposes:
+
+- Avoid duplicating your document/"app shell" across your root component, `HydrateFallback`, and `ErrorBoundary`
+- Avoids React from re-mounting your app shell elements when switching between the root component/`HydrateFallback`/`ErrorBoundary` which can cause a FOUC if React removes and re-adds `<link rel="stylesheet">` tags from your `<Links>` component.
+
+```tsx filename=app/root.tsx lines=[10-31]
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+export function Layout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1"
+        />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {/* children will be the root Component, ErrorBoundary, or HydrateFallback */}
+        {children}
+        <Scripts />
+        <ScrollRestoration />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}
+
+export default function ErrorBoundary() {
+  const error = useRouteError();
 
-The example above renders several `<script />` tags into the resulting HTML. While this usually just works, you might have configured a [content security policy for scripts][csp] that prevents these `<script />` tags from being executed. In particular, to support [content security policies with nonce-sources for scripts][csp-nonce], the `<Scripts />`, `<LiveReload />` and `<ScrollRestoration />` components support a `nonce` property, e.g.`<Script nonce={nonce}/>`. The provided nonce is subsequently passed to the `<script />` tag rendered into the HTML by these components, allowing the scripts to be executed in accordance with your CSP policy.
+  if (isRouteErrorResponse(error)) {
+    return (
+      <>
+        <h1>
+          {error.status} {error.statusText}
+        </h1>
+        <p>{error.data}</p>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <h1>Error!</h1>
+      <p>{error?.message ?? "Unknown error"}</p>
+    </>
+  );
+}
+```
 
 See also:
 
-- [`meta`][meta]
-- [`links`][links]
+- [`<Meta>`][meta-component]
+- [`<Links>`][links-component]
+- [`<Outlet>`][outlet-component]
+- [`<ScrollRestoration>`][scrollrestoration-component]
+- [`<Scripts>`][scripts-component]
+- [`<LiveReload>`][livereload-component]
 
-[csp]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
-[csp-nonce]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources
+[headers]: ../route/headers
 [meta]: ../route/meta
 [links]: ../route/links
+[loader]: ../route/loader
+[clientloader]: ../route/client-loader
+[action]: ../route/action
+[clientaction]: ../route/client-action
+[component]: ../route/component
+[errorboundary]: ../route/error-boundary
+[hydratefallback]: ../route/hydrate-fallback
+[handle]: ../route/handle
+[shouldrevalidate]: ../route/should-revalidate
+[layout-rfc]: https://github.com/remix-run/remix/discussions/8702
+[scripts-component]: ../components/scripts
+[links-component]: ../components/links
+[meta-component]: ../components/meta
+[livereload-component]: ../components/live-reload
+[scrollrestoration-component]: ../components/scroll-restoration
+[outlet-component]: ../components/outlet
diff --git a/integration/client-data-test.ts b/integration/client-data-test.ts
index ddbad1978c4..7f23da815b0 100644
--- a/integration/client-data-test.ts
+++ b/integration/client-data-test.ts
@@ -1,6 +1,6 @@
 import { test, expect } from "@playwright/test";
 
-import { ServerMode } from "../packages/remix-server-runtime/mode.js";
+import { ServerMode } from "../build/node_modules/@remix-run/server-runtime/dist/mode.js";
 import {
   createAppFixture,
   createFixture,
diff --git a/integration/root-route-test.ts b/integration/root-route-test.ts
index c85979c25b8..e3ab456f368 100644
--- a/integration/root-route-test.ts
+++ b/integration/root-route-test.ts
@@ -1,5 +1,6 @@
 import { test, expect } from "@playwright/test";
 
+import { ServerMode } from "../build/node_modules/@remix-run/server-runtime/dist/mode.js";
 import {
   createAppFixture,
   createFixture,
@@ -12,7 +13,11 @@ test.describe("root route", () => {
   let fixture: Fixture;
   let appFixture: AppFixture;
 
-  test.beforeAll(async () => {
+  test.afterAll(() => {
+    appFixture.close();
+  });
+
+  test("matches the sole root route on /", async ({ page }) => {
     fixture = await createFixture({
       files: {
         "app/root.tsx": js`
@@ -28,18 +33,83 @@ test.describe("root route", () => {
         `,
       },
     });
-
     appFixture = await createAppFixture(fixture);
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/");
+    await page.waitForSelector("h1");
+    expect(await app.getHtml("h1")).toMatch("Hello Root!");
   });
 
-  test.afterAll(() => {
-    appFixture.close();
-  });
-
-  test("matches the sole root route on /", async ({ page }) => {
+  test("renders the Layout around the component", async ({ page }) => {
+    fixture = await createFixture({
+      files: {
+        "app/root.tsx": js`
+          export function Layout({ children }) {
+            return (
+              <html>
+                <head>
+                  <title>Layout Title</title>
+                </head>
+                <body>
+                  {children}
+                </body>
+              </html>
+            );
+          }
+          export default function Root() {
+            return <h1>Hello Root!</h1>;
+          }
+        `,
+      },
+    });
+    appFixture = await createAppFixture(fixture);
     let app = new PlaywrightFixture(appFixture, page);
     await app.goto("/");
     await page.waitForSelector("h1");
+    expect(await app.getHtml("title")).toMatch("Layout Title");
     expect(await app.getHtml("h1")).toMatch("Hello Root!");
   });
+
+  test("renders the Layout around the ErrorBoundary", async ({ page }) => {
+    let oldConsoleError;
+    oldConsoleError = console.error;
+    console.error = () => {};
+
+    fixture = await createFixture(
+      {
+        files: {
+          "app/root.tsx": js`
+          import { useRouteError } from '@remix-run/react';
+          export function Layout({ children }) {
+            return (
+              <html>
+                <head>
+                  <title>Layout Title</title>
+                </head>
+                <body>
+                  {children}
+                </body>
+              </html>
+            );
+          }
+          export default function Root() {
+            throw new Error('broken render')
+          }
+          export function ErrorBoundary() {
+            return <p>{useRouteError().message}</p>;
+          }
+        `,
+        },
+      },
+      ServerMode.Development
+    );
+    appFixture = await createAppFixture(fixture, ServerMode.Development);
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/");
+    await page.waitForSelector("p");
+    expect(await app.getHtml("title")).toMatch("Layout Title");
+    expect(await app.getHtml("p")).toMatch("broken render");
+
+    console.error = oldConsoleError;
+  });
 });
diff --git a/packages/remix-dev/vite/plugin.ts b/packages/remix-dev/vite/plugin.ts
index e901947013c..6703d9483d6 100644
--- a/packages/remix-dev/vite/plugin.ts
+++ b/packages/remix-dev/vite/plugin.ts
@@ -59,6 +59,7 @@ const CLIENT_ROUTE_EXPORTS = [
   "ErrorBoundary",
   "handle",
   "HydrateFallback",
+  "Layout",
   "links",
   "meta",
   "shouldRevalidate",
diff --git a/packages/remix-react/routeModules.ts b/packages/remix-react/routeModules.ts
index 27a4a5793a1..415ce60b7bd 100644
--- a/packages/remix-react/routeModules.ts
+++ b/packages/remix-react/routeModules.ts
@@ -24,6 +24,7 @@ export interface RouteModule {
   clientLoader?: ClientLoaderFunction;
   ErrorBoundary?: ErrorBoundaryComponent;
   HydrateFallback?: HydrateFallbackComponent;
+  Layout?: LayoutComponent;
   default: RouteComponent;
   handle?: RouteHandle;
   links?: LinksFunction;
@@ -72,6 +73,13 @@ export type ErrorBoundaryComponent = ComponentType;
  */
 export type HydrateFallbackComponent = ComponentType;
 
+/**
+ * Optional, root-only `<Route Layout>` component to wrap the root content in.
+ * Useful for defining the <html>/<head>/<body> document shell shared by the
+ * Component, HydrateFallback, and ErrorBoundary
+ */
+export type LayoutComponent = ComponentType;
+
 /**
  * A function that defines `<link>` tags to be inserted into the `<head>` of
  * the document on route transitions.
diff --git a/packages/remix-react/routes.tsx b/packages/remix-react/routes.tsx
index 0170c8edc04..22671a29f01 100644
--- a/packages/remix-react/routes.tsx
+++ b/packages/remix-react/routes.tsx
@@ -68,6 +68,60 @@ function groupRoutesByParentId(manifest: RouteManifest<EntryRoute>) {
   return routes;
 }
 
+function getRouteComponents(
+  route: EntryRoute,
+  routeModule: RouteModule,
+  isSpaMode: boolean
+) {
+  let Component = getRouteModuleComponent(routeModule);
+  // HydrateFallback can only exist on the root route in SPA Mode
+  let HydrateFallback =
+    routeModule.HydrateFallback && (!isSpaMode || route.id === "root")
+      ? routeModule.HydrateFallback
+      : route.id === "root"
+      ? RemixRootDefaultHydrateFallback
+      : undefined;
+  let ErrorBoundary = routeModule.ErrorBoundary
+    ? routeModule.ErrorBoundary
+    : route.id === "root"
+    ? () => <RemixRootDefaultErrorBoundary error={useRouteError()} />
+    : undefined;
+
+  if (route.id === "root" && routeModule.Layout) {
+    return {
+      ...(Component
+        ? {
+            element: React.createElement(
+              routeModule.Layout,
+              null,
+              React.createElement(Component)
+            ),
+          }
+        : { Component }),
+      ...(ErrorBoundary
+        ? {
+            errorElement: React.createElement(
+              routeModule.Layout,
+              null,
+              React.createElement(ErrorBoundary)
+            ),
+          }
+        : { ErrorBoundary }),
+      ...(HydrateFallback
+        ? {
+            hydrateFallbackElement: React.createElement(
+              routeModule.Layout,
+              null,
+              React.createElement(HydrateFallback)
+            ),
+          }
+        : { HydrateFallback }),
+    };
+  }
+
+  return { Component, ErrorBoundary, HydrateFallback };
+}
+
 export function createServerRoutes(
   manifest: RouteManifest<EntryRoute>,
   routeModules: RouteModules,
@@ -86,21 +140,10 @@ export function createServerRoutes(
       routeModule,
       "No `routeModule` available to create server routes"
     );
+
     let dataRoute: DataRouteObject = {
+      ...getRouteComponents(route, routeModule, isSpaMode),
       caseSensitive: route.caseSensitive,
-      Component: getRouteModuleComponent(routeModule),
-      // HydrateFallback can only exist on the root route in SPA Mode
-      HydrateFallback:
-        routeModule.HydrateFallback && (!isSpaMode || route.id === "root")
-          ? routeModule.HydrateFallback
-          : route.id === "root"
-          ? RemixRootDefaultHydrateFallback
-          : undefined,
-      ErrorBoundary: routeModule.ErrorBoundary
-        ? routeModule.ErrorBoundary
-        : route.id === "root"
-        ? () => <RemixRootDefaultErrorBoundary error={useRouteError()} />
-        : undefined,
       id: route.id,
       index: route.index,
       path: route.path,
@@ -246,19 +289,7 @@ export function createClientRoutes(
       // Use critical path modules directly
       Object.assign(dataRoute, {
         ...dataRoute,
-        Component: getRouteModuleComponent(routeModule),
-        // HydrateFallback can only exist on the root route in SPA Mode
-        HydrateFallback:
-          routeModule.HydrateFallback && (!isSpaMode || route.id === "root")
-            ? routeModule.HydrateFallback
-            : route.id === "root"
-            ? RemixRootDefaultHydrateFallback
-            : undefined,
-        ErrorBoundary: routeModule.ErrorBoundary
-          ? routeModule.ErrorBoundary
-          : route.id === "root"
-          ? () => <RemixRootDefaultErrorBoundary error={useRouteError()} />
-          : undefined,
+        ...getRouteComponents(route, routeModule, isSpaMode),
         handle: routeModule.handle,
         shouldRevalidate: needsRevalidation
           ? wrapShouldRevalidateForHdr(
@@ -420,6 +451,8 @@ export function createClientRoutes(
           hasErrorBoundary: lazyRoute.hasErrorBoundary,
           shouldRevalidate: lazyRoute.shouldRevalidate,
           handle: lazyRoute.handle,
+          // No need to wrap these in layout since the root route is never
+          // loaded via route.lazy()
           Component: lazyRoute.Component,
           ErrorBoundary: lazyRoute.ErrorBoundary,
         };
diff --git a/packages/remix-server-runtime/routeModules.ts b/packages/remix-server-runtime/routeModules.ts
index 7a027b9fc8d..58e0ce2f7d0 100644
--- a/packages/remix-server-runtime/routeModules.ts
+++ b/packages/remix-server-runtime/routeModules.ts
@@ -254,6 +254,7 @@ export interface EntryRouteModule {
   clientLoader?: ClientLoaderFunction;
   ErrorBoundary?: any; // Weakly typed because server-runtime is not React-aware
   HydrateFallback?: any; // Weakly typed because server-runtime is not React-aware
+  Layout?: any; // Weakly typed because server-runtime is not React-aware
   default: any; // Weakly typed because server-runtime is not React-aware
   handle?: RouteHandle;
   links?: LinksFunction;
diff --git a/templates/arc/app/root.tsx b/templates/arc/app/root.tsx
index 65d89ed3100..4a3b08a8d0e 100644
--- a/templates/arc/app/root.tsx
+++ b/templates/arc/app/root.tsx
@@ -13,7 +13,7 @@ export const links: LinksFunction = () => [
   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
 ];
 
-export default function App() {
+export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -24,7 +24,7 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Outlet />
+        {children}
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
@@ -32,3 +32,7 @@ export default function App() {
     </html>
   );
 }
+
+export default function App() {
+  return <Outlet />;
+}
diff --git a/templates/cloudflare-pages/app/root.tsx b/templates/cloudflare-pages/app/root.tsx
index 68397b09d47..88c1bf8aa07 100644
--- a/templates/cloudflare-pages/app/root.tsx
+++ b/templates/cloudflare-pages/app/root.tsx
@@ -13,7 +13,7 @@ export const links: LinksFunction = () => [
   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
 ];
 
-export default function App() {
+export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -23,7 +23,7 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Outlet />
+        {children}
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
@@ -31,3 +31,7 @@ export default function App() {
     </html>
   );
 }
+
+export default function App() {
+  return <Outlet />;
+}
diff --git a/templates/cloudflare-workers/app/root.tsx b/templates/cloudflare-workers/app/root.tsx
index 68397b09d47..88c1bf8aa07 100644
--- a/templates/cloudflare-workers/app/root.tsx
+++ b/templates/cloudflare-workers/app/root.tsx
@@ -13,7 +13,7 @@ export const links: LinksFunction = () => [
   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
 ];
 
-export default function App() {
+export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -23,7 +23,7 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Outlet />
+        {children}
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
@@ -31,3 +31,7 @@ export default function App() {
     </html>
   );
 }
+
+export default function App() {
+  return <Outlet />;
+}
diff --git a/templates/deno/app/root.tsx b/templates/deno/app/root.tsx
index 60ddcdf8f82..dcc040c13d0 100644
--- a/templates/deno/app/root.tsx
+++ b/templates/deno/app/root.tsx
@@ -14,7 +14,7 @@ export const links: LinksFunction = () => [
   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
 ];
 
-export default function App() {
+export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -24,7 +24,7 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Outlet />
+        {children}
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
@@ -32,3 +32,7 @@ export default function App() {
     </html>
   );
 }
+
+export default function App() {
+  return <Outlet />;
+}
diff --git a/templates/express/app/root.tsx b/templates/express/app/root.tsx
index b46b8fb15bc..ce47ad99ed3 100644
--- a/templates/express/app/root.tsx
+++ b/templates/express/app/root.tsx
@@ -13,7 +13,7 @@ export const links: LinksFunction = () => [
   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
 ];
 
-export default function App() {
+export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -23,7 +23,7 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Outlet />
+        {children}
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
@@ -31,3 +31,7 @@ export default function App() {
     </html>
   );
 }
+
+export default function App() {
+  return <Outlet />;
+}
diff --git a/templates/fly/app/root.tsx b/templates/fly/app/root.tsx
index b46b8fb15bc..ce47ad99ed3 100644
--- a/templates/fly/app/root.tsx
+++ b/templates/fly/app/root.tsx
@@ -13,7 +13,7 @@ export const links: LinksFunction = () => [
   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
 ];
 
-export default function App() {
+export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -23,7 +23,7 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Outlet />
+        {children}
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
@@ -31,3 +31,7 @@ export default function App() {
     </html>
   );
 }
+
+export default function App() {
+  return <Outlet />;
+}
diff --git a/templates/remix-javascript/app/root.jsx b/templates/remix-javascript/app/root.jsx
index b2badce9519..86228f2a719 100644
--- a/templates/remix-javascript/app/root.jsx
+++ b/templates/remix-javascript/app/root.jsx
@@ -12,7 +12,8 @@ export const links = () => [
   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
 ];
 
-export default function App() {
+// eslint-disable-next-line react/prop-types
+export function Layout({ children }) {
   return (
     <html lang="en">
       <head>
@@ -22,7 +23,7 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Outlet />
+        {children}
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
@@ -30,3 +31,7 @@ export default function App() {
     </html>
   );
 }
+
+export default function App() {
+  return <Outlet />;
+}
diff --git a/templates/remix/app/root.tsx b/templates/remix/app/root.tsx
index b46b8fb15bc..ce47ad99ed3 100644
--- a/templates/remix/app/root.tsx
+++ b/templates/remix/app/root.tsx
@@ -13,7 +13,7 @@ export const links: LinksFunction = () => [
   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
 ];
 
-export default function App() {
+export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -23,7 +23,7 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Outlet />
+        {children}
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
@@ -31,3 +31,7 @@ export default function App() {
     </html>
   );
 }
+
+export default function App() {
+  return <Outlet />;
+}
diff --git a/templates/spa/app/root.tsx b/templates/spa/app/root.tsx
index 823009773bf..d92eb90604e 100644
--- a/templates/spa/app/root.tsx
+++ b/templates/spa/app/root.tsx
@@ -6,7 +6,7 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 
-export default function App() {
+export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -16,7 +16,7 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Outlet />
+        {children}
         <ScrollRestoration />
         <Scripts />
       </body>
@@ -24,19 +24,10 @@ export default function App() {
   );
 }
 
+export default function App() {
+  return <Outlet />;
+}
+
 export function HydrateFallback() {
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        <p>Loading...</p>
-        <Scripts />
-      </body>
-    </html>
-  );
+  return <p>Loading...</p>;
 }
diff --git a/templates/unstable-vite-cloudflare/app/root.tsx b/templates/unstable-vite-cloudflare/app/root.tsx
index e31409ca31d..e82f26fd179 100644
--- a/templates/unstable-vite-cloudflare/app/root.tsx
+++ b/templates/unstable-vite-cloudflare/app/root.tsx
@@ -6,7 +6,7 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 
-export default function App() {
+export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -16,10 +16,14 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Outlet />
+        {children}
         <ScrollRestoration />
         <Scripts />
       </body>
     </html>
   );
 }
+
+export default function App() {
+  return <Outlet />;
+}
diff --git a/templates/unstable-vite-express/app/root.tsx b/templates/unstable-vite-express/app/root.tsx
index e31409ca31d..e82f26fd179 100644
--- a/templates/unstable-vite-express/app/root.tsx
+++ b/templates/unstable-vite-express/app/root.tsx
@@ -6,7 +6,7 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 
-export default function App() {
+export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -16,10 +16,14 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Outlet />
+        {children}
         <ScrollRestoration />
         <Scripts />
       </body>
     </html>
   );
 }
+
+export default function App() {
+  return <Outlet />;
+}
diff --git a/templates/unstable-vite/app/root.tsx b/templates/unstable-vite/app/root.tsx
index e31409ca31d..e82f26fd179 100644
--- a/templates/unstable-vite/app/root.tsx
+++ b/templates/unstable-vite/app/root.tsx
@@ -6,7 +6,7 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 
-export default function App() {
+export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -16,10 +16,14 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Outlet />
+        {children}
         <ScrollRestoration />
         <Scripts />
       </body>
     </html>
   );
 }
+
+export default function App() {
+  return <Outlet />;
+}
