diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index bcdf88c..e38694c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata, Viewport } from "next";
+import { headers } from "next/headers";
 import { Inter } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 import { NextIntlClientProvider } from "next-intl";
@@ -44,6 +45,11 @@ export default async function RootLayout({
 }>) {
   const locale = await getLocale();
   const messages = await getMessages();
+  // Set by Clerk's contentSecurityPolicy strict mode (src/proxy.ts) — needed
+  // here because next-themes renders its FOUC-prevention script as a raw
+  // inline <script>, which Next.js's automatic nonce application does not
+  // cover (that only applies to scripts Next.js itself generates).
+  const nonce = (await headers()).get("x-nonce") ?? undefined;
 
   return (
     <html
@@ -52,7 +58,13 @@ export default async function RootLayout({
       className={`${inter.variable} h-full antialiased font-sans`}
     >
       <body className="min-h-full flex flex-col">
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+          nonce={nonce}
+        >
           <NextIntlClientProvider locale={locale} messages={messages}>
             <TRPCReactProvider>
               <ActivePetProvider>
diff --git a/src/proxy.ts b/src/proxy.ts
index 67bf666..c6ed37c 100644
--- a/src/proxy.ts
+++ b/src/proxy.ts
@@ -137,6 +137,21 @@ export default clerkMiddleware(
     // the eval source is confirmed fixed and remove this line.
     contentSecurityPolicy: {
       reportOnly: false,
+      // strict: true drops http:/https: from script-src and adds
+      // 'strict-dynamic' + a per-request nonce instead (CSP3 best practice —
+      // Mozilla Observatory flags http:/https:/unsafe-inline as "overly
+      // broad"). Clerk forwards the resulting Content-Security-Policy header
+      // (with the nonce) on both the response AND the request it passes
+      // downstream (see setRequestHeadersOnNextResponse in
+      // @clerk/nextjs/.../clerkMiddleware.js), which is exactly what
+      // Next.js's own automatic nonce application reads during SSR — so
+      // Next's framework scripts and page bundles get noticed for free.
+      // 'unsafe-inline' stays in the header text as a spec-mandated fallback
+      // for pre-CSP3 browsers; browsers that understand 'strict-dynamic'
+      // ignore it. Any hand-written inline <script> (e.g. next-themes'
+      // FOUC-prevention script in layout.tsx) needs its own nonce prop —
+      // see RootLayout.
+      strict: true,
       reportTo: "/api/csp-report",
       directives: {
         "script-src": ["unsafe-eval", "'report-sample'"],