diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
index 317a0d9..7ea79f5 100644
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -2,6 +2,7 @@ import "@/app/globals.css"
 
 import { hasLocale, NextIntlClientProvider } from "next-intl"
 import type { Metadata, Viewport } from "next"
+import { getMessages } from "next-intl/server"
 import { notFound } from "next/navigation"
 
 import LanguageSelector from "@/components/ui/languageSelector"
@@ -9,6 +10,11 @@ import { THEME_COLOR } from "@/components/seo"
 import UmamiAnalytics from "@/components/umamiAnalytics"
 import { routing } from "@/i18n/routing"
 
+// Namespaces used by client components. Server components read their
+// translations on the server, so only these need to be sent to the browser.
+// Add to this list when a client component starts using a new namespace
+const CLIENT_NAMESPACES = ["about", "buttons", "common", "office"]
+
 export const metadata: Metadata = {
   title: "UiO Gaming",
   description:
@@ -41,12 +47,15 @@ export default async function RootLayout({
   // [locale] matches any first path segment, e.g. /favicon.txt or /de
   if (!hasLocale(routing.locales, locale)) notFound()
 
-  const messages = (await import(`../../../messages/${locale}.json`)).default
+  const messages = await getMessages()
+  const clientMessages = Object.fromEntries(
+    CLIENT_NAMESPACES.map(namespace => [namespace, messages[namespace]])
+  )
 
   return (
     <html lang={locale}>
       <body>
-        <NextIntlClientProvider locale={locale} messages={messages}>
+        <NextIntlClientProvider locale={locale} messages={clientMessages}>
           <LanguageSelector />
           <main>{children}</main>
           <UmamiAnalytics />