diff --git a/www/src/components/layer-model/component-model/index.js b/www/src/components/layer-model/component-model/index.js
index 377da658df82c..d524ca5091788 100644
--- a/www/src/components/layer-model/component-model/index.js
+++ b/www/src/components/layer-model/component-model/index.js
@@ -9,33 +9,35 @@ import {
   AppLayerContent,
 } from "./component-content-sections"
 
+import { t } from "@lingui/macro"
+
 const layers = [
   {
-    title: `Content`,
+    title: t`Content`,
     icon: `AbstractSymbol`,
     baseColor: `orange`,
     component: ContentLayerContent,
   },
   {
-    title: `Build`,
+    title: t`Build`,
     icon: `AtomicSymbol`,
     baseColor: `green`,
     component: BuildLayerContent,
   },
   {
-    title: `Data`,
+    title: t`Data`,
     icon: `GraphqlLogo`,
     baseColor: `magenta`,
     component: DataLayerContent,
   },
   {
-    title: `View`,
+    title: t`View`,
     icon: `ReactLogo`,
     baseColor: `blue`,
     component: ViewLayerContent,
   },
   {
-    title: `App`,
+    title: t`App`,
     icon: `AppWindow`,
     baseColor: `yellow`,
     component: AppLayerContent,
diff --git a/www/src/components/layer-model/image-model/index.js b/www/src/components/layer-model/image-model/index.js
index a2b6ccef4c182..814060116fe3c 100644
--- a/www/src/components/layer-model/image-model/index.js
+++ b/www/src/components/layer-model/image-model/index.js
@@ -8,27 +8,29 @@ import {
   DisplayLayerContent,
 } from "./image-content-sections"
 
+import { t } from "@lingui/macro"
+
 const layers = [
   {
-    title: `Install`,
+    title: t`Install`,
     icon: `AbstractSymbol`,
     baseColor: `orange`,
     component: InstallLayerContent,
   },
   {
-    title: `Config`,
+    title: t`Config`,
     icon: `AtomicSymbol`,
     baseColor: `green`,
     component: ConfigLayerContent,
   },
   {
-    title: `Query`,
+    title: t`Query`,
     icon: `GraphqlLogo`,
     baseColor: `magenta`,
     component: QueryLayerContent,
   },
   {
-    title: `Display`,
+    title: t`Display`,
     icon: `ReactLogo`,
     baseColor: `blue`,
     component: DisplayLayerContent,
diff --git a/www/src/components/layer-model/layer-model.js b/www/src/components/layer-model/layer-model.js
index e142a4df4407c..d7d0a2e9b5577 100644
--- a/www/src/components/layer-model/layer-model.js
+++ b/www/src/components/layer-model/layer-model.js
@@ -5,7 +5,8 @@ import hex2rgba from "hex2rgba"
 
 import { colors } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 import LayerIcon from "../../assets/icons/layer-icon"
-import { Trans } from "@lingui/macro"
+
+import { withI18n } from "@lingui/react"
 
 const Layer = ({ buttonRef, layer, onClick, selected, index }) => {
   const { baseColor, title, icon } = layer
@@ -52,7 +53,7 @@ const Layer = ({ buttonRef, layer, onClick, selected, index }) => {
             fillColor={selected ? colors[baseColor][70] : colors.grey[50]}
           />
         </span>
-        <span><Trans>{title}</Trans></span>
+        <span>{i18n._(title)}</span>
       </span>
     </button>
   )
@@ -62,6 +63,7 @@ const LayerModel = ({
   layers,
   displayCodeFullWidth = false,
   initialLayer = `Content`,
+  i18n,
 }) => {
   const [selected, setSelected] = useState(initialLayer)
   const [sourceIndex, setSourceIndex] = useState(0)
@@ -137,4 +139,4 @@ const LayerModel = ({
   )
 }
 
-export default LayerModel
+export default withI18n()(LayerModel)