diff --git a/apps/website/gatsby-config.js b/apps/website/gatsby-config.js
index 9ba2c61f8..2b23e9497 100644
--- a/apps/website/gatsby-config.js
+++ b/apps/website/gatsby-config.js
@@ -33,6 +33,7 @@ module.exports = {
   },
   plugins: [
     'gatsby-plugin-pnpm',
+    'gatsby-plugin-layout',
     {
       resolve: '@amazeelabs/gatsby-source-silverback',
       options: {
diff --git a/apps/website/package.json b/apps/website/package.json
index f69977970..79b25bd99 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -16,6 +16,7 @@
     "gatsby-plugin-pnpm": "^1.2.10",
     "gatsby-plugin-robots-txt": "^1.8.0",
     "gatsby-plugin-sitemap": "^6.11.0",
+    "gatsby-plugin-layout": "^4.12.0",
     "netlify-cli": "^15.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
diff --git a/apps/website/src/utils/wrapper.tsx b/apps/website/src/layouts/index.tsx
similarity index 74%
rename from apps/website/src/utils/wrapper.tsx
rename to apps/website/src/layouts/index.tsx
index 8f1b7e2ce..97e0b13f3 100644
--- a/apps/website/src/utils/wrapper.tsx
+++ b/apps/website/src/layouts/index.tsx
@@ -1,7 +1,8 @@
-import { Locale, NavigationFragment } from '@custom/schema';
+import { SilverbackPageContext } from '@amazeelabs/gatsby-source-silverback';
+import { NavigationFragment } from '@custom/schema';
 import { IntlProvider } from '@custom/ui/intl';
 import { Frame } from '@custom/ui/routes/Frame';
-import { graphql, useStaticQuery } from 'gatsby';
+import { graphql, useStaticQuery, WrapPageElementNodeArgs } from 'gatsby';
 import React, { PropsWithChildren } from 'react';
 
 function useFrameQuery() {
@@ -34,15 +35,17 @@ function useFrameQuery() {
   `);
 }
 
-export function Wrapper({
+export default function Layout({
   children,
-  locale = 'en',
-}: PropsWithChildren<{ locale?: Locale }>) {
+  pageContext: { locale },
+}: PropsWithChildren<
+  WrapPageElementNodeArgs<any, SilverbackPageContext>['props']
+>) {
   const data = useFrameQuery();
   const main = locale === 'de' ? data.main_de : data.main_en;
   const footer = locale === 'de' ? data.footer_de : data.footer_en;
   return (
-    <IntlProvider locale={locale}>
+    <IntlProvider locale={locale || 'en'}>
       <Frame
         header={{ mainNavigation: main }}
         footer={{ footerNavigation: footer }}
diff --git a/apps/website/src/pages/404.tsx b/apps/website/src/pages/404.tsx
index b460bca99..e97572c6f 100644
--- a/apps/website/src/pages/404.tsx
+++ b/apps/website/src/pages/404.tsx
@@ -7,7 +7,6 @@ import {
   LanguageNegotiator,
   LanguageNegotiatorContent,
 } from '../utils/language-negotiator';
-import { Wrapper } from '../utils/wrapper';
 
 export const query = graphql`
   query NotFoundPage {
@@ -40,16 +39,14 @@ export function Head() {
 
 export default function Index({ data }: PageProps<NotFoundPageQuery>) {
   return (
-    <Wrapper>
-      <LanguageNegotiator defaultLanguage={'en'}>
-        {data.websiteSettings?.notFoundPage?.translations?.map(
-          ({ locale, ...page }) => (
-            <LanguageNegotiatorContent key={locale} language={locale}>
-              <Page page={page} />
-            </LanguageNegotiatorContent>
-          ),
-        )}
-      </LanguageNegotiator>
-    </Wrapper>
+    <LanguageNegotiator defaultLanguage={'en'}>
+      {data.websiteSettings?.notFoundPage?.translations?.map(
+        ({ locale, ...page }) => (
+          <LanguageNegotiatorContent key={locale} language={locale}>
+            <Page page={page} />
+          </LanguageNegotiatorContent>
+        ),
+      )}
+    </LanguageNegotiator>
   );
 }
diff --git a/apps/website/src/pages/__preview/page.tsx b/apps/website/src/pages/__preview/page.tsx
index bca9a8e80..84a149a79 100644
--- a/apps/website/src/pages/__preview/page.tsx
+++ b/apps/website/src/pages/__preview/page.tsx
@@ -1,16 +1,11 @@
 import React from 'react';
 
 import PagePreview from '../../preview/page';
-import { Wrapper } from '../../utils/wrapper';
 
 export function Head() {
   return <meta title="Page preview" />;
 }
 
 export default function PagePreviewTemplate() {
-  return (
-    <Wrapper>
-      <PagePreview />
-    </Wrapper>
-  );
+  return <PagePreview />;
 }
diff --git a/apps/website/src/pages/content-hub.tsx b/apps/website/src/pages/content-hub.tsx
index 3a21ad8e2..3ffbeac19 100644
--- a/apps/website/src/pages/content-hub.tsx
+++ b/apps/website/src/pages/content-hub.tsx
@@ -1,16 +1,10 @@
 import { ContentHub } from '@custom/ui/routes/ContentHub';
 import React from 'react';
 
-import { Wrapper } from '../utils/wrapper';
-
 export function Head() {
   return <meta title="Page not found" />;
 }
 
 export default function ContentHubPage() {
-  return (
-    <Wrapper>
-      <ContentHub pageSize={6} />
-    </Wrapper>
-  );
+  return <ContentHub pageSize={6} />;
 }
diff --git a/apps/website/src/templates/page.tsx b/apps/website/src/templates/page.tsx
index f4bfe6adf..3fc97cb28 100644
--- a/apps/website/src/templates/page.tsx
+++ b/apps/website/src/templates/page.tsx
@@ -1,11 +1,9 @@
 import { SilverbackPageContext } from '@amazeelabs/gatsby-source-silverback';
-import { Locale, PageFragment } from '@custom/schema';
+import { PageFragment } from '@custom/schema';
 import { Page } from '@custom/ui/routes/Page';
 import { graphql, HeadProps, PageProps } from 'gatsby';
 import React from 'react';
 
-import { Wrapper } from '../utils/wrapper';
-
 export const query = graphql`
   query PageTemplate($remoteId: String!) {
     page(remoteId: { eq: $remoteId }) {
@@ -48,11 +46,6 @@ export function Head({ data }: HeadProps<PageTemplateQuery>) {
 
 export default function PageTemplate({
   data,
-  pageContext,
 }: PageProps<PageTemplateQuery, SilverbackPageContext>) {
-  return (
-    <Wrapper locale={(pageContext.locale || 'en') as Locale}>
-      <Page page={data.page} />
-    </Wrapper>
-  );
+  return <Page page={data.page} />;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 30cc9bc62..bd1c15259 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -192,6 +192,9 @@ importers:
       gatsby:
         specifier: ^5.11.0
         version: 5.11.0(babel-eslint@10.1.0)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)
+      gatsby-plugin-layout:
+        specifier: ^4.12.0
+        version: 4.12.0(gatsby@5.11.0)
       gatsby-plugin-manifest:
         specifier: ^5.11.0
         version: 5.11.0(gatsby@5.11.0)(graphql@16.7.1)
@@ -17419,6 +17422,16 @@ packages:
       '@parcel/transformer-json': 2.8.3(@parcel/core@2.8.3)
     dev: false
 
+  /gatsby-plugin-layout@4.12.0(gatsby@5.11.0):
+    resolution: {integrity: sha512-MTLmay29gGvRu/v/6dNhD7tg2T6AMaUE1HAOGnCFo+oHZFRh7CMdte3RoGZUYi2NT49VPsADsDWI4a0JyI+oRw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      gatsby: ^5.0.0-next
+    dependencies:
+      '@babel/runtime': 7.22.5
+      gatsby: 5.11.0(babel-eslint@10.1.0)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)
+    dev: false
+
   /gatsby-plugin-manifest@5.11.0(gatsby@5.11.0)(graphql@16.7.1):
     resolution: {integrity: sha512-f1ViusTLF3K4fNvn1vIKZwUeP1Bl9ercrhQBe7rBnu9Cl7EWYskH0MSXJfxev29kD7Ag+FTvC2MPObDvi3LFhw==}
     engines: {node: '>=18.0.0'}