diff --git a/package.json b/package.json
index f777959d90d98..b40ae76c8e78f 100644
--- a/package.json
+++ b/package.json
@@ -80,6 +80,7 @@
     "@next/swc": "workspace:*",
     "@next/third-parties": "workspace:*",
     "@opentelemetry/api": "1.4.1",
+    "@picocss/pico": "1.5.10",
     "@svgr/webpack": "5.5.0",
     "@swc/cli": "0.1.55",
     "@swc/core": "1.3.55",
diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
index bd25eb2a5f83a..ee67e653f398a 100644
--- a/packages/next/src/server/app-render/app-render.tsx
+++ b/packages/next/src/server/app-render/app-render.tsx
@@ -694,6 +694,7 @@ export async function renderToHTMLOrFlight(
 
       const [NotFound, notFoundStyles] = notFound
         ? await createComponentAndStyles({
+            shouldPreload: true,
             filePath: notFound[1],
             getComponent: notFound[0],
             injectedCSS: injectedCSSWithCurrentLayout,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5a07565659b38..b7c99a0089963 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -86,6 +86,9 @@ importers:
       '@opentelemetry/api':
         specifier: 1.4.1
         version: 1.4.1
+      '@picocss/pico':
+        specifier: 1.5.10
+        version: 1.5.10
       '@svgr/webpack':
         specifier: 5.5.0
         version: 5.5.0
@@ -7255,6 +7258,10 @@ packages:
     engines: {node: '>=8.0.0'}
     dev: true
 
+  /@picocss/pico@1.5.10:
+    resolution: {integrity: sha512-+LafMsrwPxXQMk6sI///TmSInCwwZmq+K7SikyL3N/4GhhwzyPC+TQLUEqmrLyjluR+uIpFFcqjty30Rtr6GxQ==}
+    dev: true
+
   /@pkgr/utils@2.3.1:
     resolution: {integrity: sha512-wfzX8kc1PMyUILA+1Z/EqoE4UCXGy0iRGMhPwdfae1+f0OXlLqCk+By+aMzgJBzR9AzS4CDizioG6Ss1gvAFJw==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
diff --git a/test/e2e/app-dir/app-css/app/navigate/404/page.js b/test/e2e/app-dir/app-css/app/navigate/404/page.js
new file mode 100644
index 0000000000000..ebc0f638b324e
--- /dev/null
+++ b/test/e2e/app-dir/app-css/app/navigate/404/page.js
@@ -0,0 +1,5 @@
+import { notFound } from 'next/navigation'
+
+export default function page() {
+  notFound()
+}
diff --git a/test/e2e/app-dir/app-css/app/navigate/button/not-found-button.js b/test/e2e/app-dir/app-css/app/navigate/button/not-found-button.js
new file mode 100644
index 0000000000000..b6cddc503a5fa
--- /dev/null
+++ b/test/e2e/app-dir/app-css/app/navigate/button/not-found-button.js
@@ -0,0 +1,12 @@
+'use client'
+
+import styles from './not-found-button.module.css'
+import React from 'react'
+
+export const Button = ({ children, ...props }) => {
+  return (
+    <button {...props} className={styles.button}>
+      {children}
+    </button>
+  )
+}
diff --git a/test/e2e/app-dir/app-css/app/navigate/button/not-found-button.module.css b/test/e2e/app-dir/app-css/app/navigate/button/not-found-button.module.css
new file mode 100644
index 0000000000000..05ee13da1c75f
--- /dev/null
+++ b/test/e2e/app-dir/app-css/app/navigate/button/not-found-button.module.css
@@ -0,0 +1,7 @@
+.button {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: rgb(0, 128, 0);
+  color: #fff;
+  padding: 8px 16px;
+}
diff --git a/test/e2e/app-dir/app-css/app/navigate/not-found.js b/test/e2e/app-dir/app-css/app/navigate/not-found.js
new file mode 100644
index 0000000000000..5cbec81b9ec60
--- /dev/null
+++ b/test/e2e/app-dir/app-css/app/navigate/not-found.js
@@ -0,0 +1,22 @@
+'use client'
+import { Button } from './button/not-found-button'
+import { useRouter } from 'next/navigation'
+
+function NotFound() {
+  const router = useRouter()
+  return (
+    <div>
+      <h1>404 - Page Not Found</h1>
+      <Button
+        id="back"
+        onClick={() => {
+          router.push('/navigate')
+        }}
+      >
+        Back
+      </Button>
+    </div>
+  )
+}
+
+export default NotFound
diff --git a/test/e2e/app-dir/app-css/app/navigate/page.js b/test/e2e/app-dir/app-css/app/navigate/page.js
new file mode 100644
index 0000000000000..3fa63bb3c97c3
--- /dev/null
+++ b/test/e2e/app-dir/app-css/app/navigate/page.js
@@ -0,0 +1,20 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { Button as NotFoundButton } from './button/not-found-button'
+
+export default function Page() {
+  const router = useRouter()
+  return (
+    <>
+      <NotFoundButton
+        id="nav-button"
+        onClick={() => {
+          router.push('/navigate/404')
+        }}
+      >
+        Not Found
+      </NotFoundButton>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/app-css/index.test.ts b/test/e2e/app-dir/app-css/index.test.ts
index 457d9790c3ac0..d357ccebb8c99 100644
--- a/test/e2e/app-dir/app-css/index.test.ts
+++ b/test/e2e/app-dir/app-css/index.test.ts
@@ -215,6 +215,35 @@ createNextDescribe(
           )
         })
 
+        it('should load css while navigation between not-found and page', async () => {
+          const browser = await next.browser('/navigate')
+          await check(
+            async () =>
+              await browser.eval(
+                `window.getComputedStyle(document.querySelector('#nav-button')).backgroundColor`
+              ),
+            'rgb(0, 128, 0)'
+          )
+          await browser.elementByCss('#nav-button').click()
+          await browser.waitForElementByCss('#back')
+          await check(
+            async () =>
+              await browser.eval(
+                `window.getComputedStyle(document.querySelector('#back')).backgroundColor`
+              ),
+            'rgb(0, 128, 0)'
+          )
+          await browser.elementByCss('#back').click()
+          await browser.waitForElementByCss('#nav-button')
+          await check(
+            async () =>
+              await browser.eval(
+                `window.getComputedStyle(document.querySelector('#nav-button')).backgroundColor`
+              ),
+            'rgb(0, 128, 0)'
+          )
+        })
+
         it('should include css imported in server not-found.js', async () => {
           const browser = await next.browser('/not-found/servercomponent')
           await check(