diff --git a/packages/app-project/src/components/AdminContainer/AdminContainer.spec.js b/packages/app-project/src/components/AdminContainer/AdminContainer.spec.js
index 6d4f9b44e5..b7ab020f02 100644
--- a/packages/app-project/src/components/AdminContainer/AdminContainer.spec.js
+++ b/packages/app-project/src/components/AdminContainer/AdminContainer.spec.js
@@ -34,7 +34,7 @@ describe('Components > AdminContainer', function () {
     it('should render nothing', function () {
       const wrapper = withStore({ project })
       render(<AdminContainer />, { wrapper })
-      const adminToggle = screen.queryByRole('checkbox', { name: 'Admin Mode' })
+      const adminToggle = screen.queryByRole('checkbox', { name: 'AdminCheckbox.label' })
       expect(adminToggle).to.be.null()
     })
   })
@@ -47,7 +47,7 @@ describe('Components > AdminContainer', function () {
       }
       const wrapper = withStore({ project, user })
       render(<AdminContainer />, { wrapper })
-      const adminToggle = screen.queryByRole('checkbox', { name: 'Admin Mode' })
+      const adminToggle = screen.queryByRole('checkbox', { name: 'AdminCheckbox.label' })
       expect(adminToggle).to.be.null()
     })
   })
@@ -61,7 +61,7 @@ describe('Components > AdminContainer', function () {
       }
       const wrapper = withStore({ project, user })
       render(<AdminContainer />, { wrapper })
-      const adminToggle = screen.queryByRole('checkbox', { name: 'Admin Mode' })
+      const adminToggle = screen.queryByRole('checkbox', { name: 'AdminCheckbox.label' })
       expect(adminToggle).to.be.ok()
     })
   })
diff --git a/packages/app-project/src/components/ZooHeaderWrapper/ZooHeaderWrapperContainer.spec.js b/packages/app-project/src/components/ZooHeaderWrapper/ZooHeaderWrapperContainer.spec.js
index c5d03c9430..b8c59a78d3 100644
--- a/packages/app-project/src/components/ZooHeaderWrapper/ZooHeaderWrapperContainer.spec.js
+++ b/packages/app-project/src/components/ZooHeaderWrapper/ZooHeaderWrapperContainer.spec.js
@@ -6,6 +6,7 @@ import { Grommet } from 'grommet'
 import zooTheme from '@zooniverse/grommet-theme'
 import { RouterContext } from 'next/dist/shared/lib/router-context'
 import auth from 'panoptes-client/lib/auth'
+import nock from 'nock'
 import sinon from 'sinon'
 
 import initStore from '@stores'
@@ -23,6 +24,20 @@ describe('Component > ZooHeaderWrapperContainer', function () {
   }
 
   beforeEach(function () {
+    nock('https://talk-staging.zooniverse.org')
+    .get('/notifications')
+    .query(true)
+    .reply(200, {})
+    .get('/conversations')
+    .query(true)
+    .reply(200, {})
+    // TODO: Recent Talk subjects are using the Panoptes client instead of the Talk API client.
+    nock('https://panoptes-staging.zooniverse.org/api')
+    .persist()
+    .get('/comments')
+    .query(true)
+    .reply(200, { comments: [] })
+
     sinon.stub(auth, 'signOut').callsFake(() => Promise.resolve())
     window.sessionStorage.setItem("subjectsSeenThisSession", JSON.stringify(["1234/5678"]))
     const snapshot = {
@@ -55,7 +70,7 @@ describe('Component > ZooHeaderWrapperContainer', function () {
         </Provider>
       </RouterContext.Provider>
     )
-    siteMenu = screen.getByRole('navigation', { name: 'Site' })
+    siteMenu = screen.getByRole('navigation', { name: 'ZooHeader.ariaLabel' })
   })
 
   afterEach(function () {
@@ -92,7 +107,7 @@ describe('Component > ZooHeaderWrapperContainer', function () {
 
     it('should navigate to ./?login=true', async function () {
       const user = userEvent.setup({ delay: null })
-      signInButton = screen.getByRole('button', { name: 'Sign In' })
+      signInButton = screen.getByRole('button', { name: 'ZooHeader.SignedOutUserNavigation.signIn' })
       await user.click(signInButton)
       expect(pageURL.toString()).to.equal('https://localhost/?login=true')
     })
@@ -107,7 +122,7 @@ describe('Component > ZooHeaderWrapperContainer', function () {
 
     it('should navigate to ./?register=true', async function () {
       const user = userEvent.setup({ delay: null })
-      registerButton = screen.getByRole('button', { name: 'Register' })
+      registerButton = screen.getByRole('button', { name: 'ZooHeader.SignedOutUserNavigation.register' })
       await user.click(registerButton)
       expect(pageURL.toString()).to.equal('https://localhost/?register=true')
     })
diff --git a/packages/app-project/src/screens/ProjectHomePage/ProjectHomePage.spec.js b/packages/app-project/src/screens/ProjectHomePage/ProjectHomePage.spec.js
index 64314ea94f..c912d75bd3 100644
--- a/packages/app-project/src/screens/ProjectHomePage/ProjectHomePage.spec.js
+++ b/packages/app-project/src/screens/ProjectHomePage/ProjectHomePage.spec.js
@@ -72,7 +72,7 @@ describe('Component > ProjectHomePage', function () {
     render(<ProjectHomePage />, { wrapper: withStore(snapshot) })
     homePage = screen.getByTestId('project-home-page')
     const zooFooter = within(homePage).getByRole('contentinfo')
-    adminToggle = within(zooFooter).queryByRole('checkbox', { name: 'Admin Mode' })
+    adminToggle = within(zooFooter).queryByRole('checkbox', { name: 'AdminCheckbox.label' })
   })
 
   after(function () {
@@ -142,7 +142,7 @@ describe('Component > ProjectHomePage', function () {
       render(<ProjectHomePage />, { wrapper: withStore(snapshot) })
       homePage = screen.getByTestId('project-home-page')
       const zooFooter = within(homePage).getByRole('contentinfo')
-      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'Admin Mode' })
+      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'AdminCheckbox.label' })
     })
 
     it('should not have a border', function () {
@@ -182,7 +182,7 @@ describe('Component > ProjectHomePage', function () {
       render(<ProjectHomePage />, { wrapper: withStore(snapshot) })
       homePage = screen.getByTestId('project-home-page')
       const zooFooter = within(homePage).getByRole('contentinfo')
-      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'Admin Mode' })
+      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'AdminCheckbox.label' })
     })
 
     after(function () {
diff --git a/packages/app-project/src/shared/components/StandardLayout/StandardLayout.spec.js b/packages/app-project/src/shared/components/StandardLayout/StandardLayout.spec.js
index 5d84e96acd..7f8151057f 100644
--- a/packages/app-project/src/shared/components/StandardLayout/StandardLayout.spec.js
+++ b/packages/app-project/src/shared/components/StandardLayout/StandardLayout.spec.js
@@ -56,7 +56,7 @@ describe('Component > StandardLayout', function () {
     render(<StandardLayout />, { wrapper: withStore(snapshot)})
     zooHeader = screen.getByRole('banner')
     zooFooter = screen.getByRole('contentinfo')
-    adminToggle = within(zooFooter).queryByRole('checkbox', { name: 'Admin Mode' })
+    adminToggle = within(zooFooter).queryByRole('checkbox', { name: 'AdminCheckbox.label' })
   })
 
   after(function () {
@@ -157,7 +157,7 @@ describe('Component > StandardLayout', function () {
       render(<StandardLayout />, { wrapper: withStore(snapshot)})
       zooHeader = screen.getByRole('banner')
       zooFooter = screen.getByRole('contentinfo')
-      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'Admin Mode' })
+      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'AdminCheckbox.label' })
     })
 
     it('should show the admin toggle', function () {
@@ -192,7 +192,7 @@ describe('Component > StandardLayout', function () {
       projectPage = screen.getByTestId('project-page')
       zooHeader = screen.getByRole('banner')
       zooFooter = screen.getByRole('contentinfo')
-      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'Admin Mode' })
+      adminToggle = within(zooFooter).getByRole('checkbox', { name: 'AdminCheckbox.label' })
     })
 
     after(function () {
diff --git a/packages/lib-classifier/package.json b/packages/lib-classifier/package.json
index 9a64761f0d..0abfd61e88 100644
--- a/packages/lib-classifier/package.json
+++ b/packages/lib-classifier/package.json
@@ -32,10 +32,8 @@
     "graphql": "~16.6.0",
     "graphql-request": "~5.0.0",
     "hash.js": "~1.1.7",
-    "i18next": "~22.0.1",
     "lodash": "~4.17.11",
     "mobx-utils": "~6.0.4",
-    "react-i18next": "~12.0.0",
     "react-player": "~2.11.0",
     "swr": "~1.3.0",
     "valid-url": "~1.0.9"
@@ -44,10 +42,12 @@
     "@zooniverse/grommet-theme": "3.x.x",
     "@zooniverse/panoptes-js": "~0.2.0",
     "@zooniverse/react-components": "~1.x.x",
-    "grommet": "~2.17.x",
+    "grommet": "~2.x.x",
     "grommet-icons": "~4.x.x",
+    "i18next": "22.x.x",
     "react": ">= 16.14",
     "react-dom": ">= 16.14",
+    "react-i18next": "12.x.x",
     "styled-components": "~5.x.x"
   },
   "devDependencies": {
@@ -86,6 +86,7 @@
     "grommet": "~2.27.0",
     "grommet-icons": "~4.8.0",
     "html-webpack-plugin": "~5.5.0",
+    "i18next": "~22.0.1",
     "ignore-styles": "~5.0.1",
     "jsdom": "~20.0.0",
     "mobx": "~6.7.0",
@@ -101,6 +102,7 @@
     "query-string": "~7.1.0",
     "react": "~17.0.2",
     "react-dom": "~17.0.2",
+    "react-i18next": "~12.0.0",
     "rosie": "~2.1.0",
     "sinon": "~14.0.0",
     "sinon-chai": "~3.7.0",
diff --git a/packages/lib-classifier/src/components/Classifier/components/MetaTools/MetaTools.spec.js b/packages/lib-classifier/src/components/Classifier/components/MetaTools/MetaTools.spec.js
index 1cd4c74f85..7eab9f4b01 100644
--- a/packages/lib-classifier/src/components/Classifier/components/MetaTools/MetaTools.spec.js
+++ b/packages/lib-classifier/src/components/Classifier/components/MetaTools/MetaTools.spec.js
@@ -43,7 +43,7 @@ describe('Components > MetaTools', function () {
         name: 'MetaTools.MetadataButton.label'
       })
       favourite = screen.getByRole('checkbox', {
-        name: 'Add to favorites'
+        name: 'FavouritesButton.add'
       })
       hidePreviousMarks = screen.queryByRole('checkbox', {
         name: 'FormView MetaTools.HidePreviousMarksDrawingButton.hide'
@@ -92,7 +92,7 @@ describe('Components > MetaTools', function () {
         name: 'MetaTools.MetadataButton.label'
       })
       favourite = screen.getByRole('checkbox', {
-        name: 'Add to favorites'
+        name: 'FavouritesButton.add'
       })
       hidePreviousMarks = screen.getByRole('checkbox', {
         name: 'FormView MetaTools.HidePreviousMarksDrawingButton.hide'
@@ -142,7 +142,7 @@ describe('Components > MetaTools', function () {
         name: 'MetaTools.MetadataButton.label'
       })
       favourite = screen.getByRole('checkbox', {
-        name: 'Add to favorites'
+        name: 'FavouritesButton.add'
       })
       hidePreviousMarks = screen.queryByRole('checkbox', {
         name: 'FormView MetaTools.HidePreviousMarksDrawingButton.hide'
@@ -193,7 +193,7 @@ describe('Components > MetaTools', function () {
         name: 'MetaTools.MetadataButton.label'
       })
       favourite = screen.getByRole('checkbox', {
-        name: 'Added to favorites'
+        name: 'FavouritesButton.remove'
       })
       hidePreviousMarks = screen.queryByRole('checkbox', {
         name: 'FormView MetaTools.HidePreviousMarksDrawingButton.hide'
diff --git a/packages/lib-classifier/src/components/Classifier/components/ModalTutorial/ModalTutorial.spec.js b/packages/lib-classifier/src/components/Classifier/components/ModalTutorial/ModalTutorial.spec.js
index 6261ea04b8..29208e3c3c 100644
--- a/packages/lib-classifier/src/components/Classifier/components/ModalTutorial/ModalTutorial.spec.js
+++ b/packages/lib-classifier/src/components/Classifier/components/ModalTutorial/ModalTutorial.spec.js
@@ -116,7 +116,7 @@ describe('ModalTutorial', function () {
           wrapper: withStore(store)
         }
       )
-      const closeButton = screen.getByRole('button', { name: 'Close' })
+      const closeButton = screen.getByRole('button', { name: 'CloseButton.close' })
       await user.click(closeButton)
       const upp = store.userProjectPreferences.active
       expect(upp?.preferences.tutorials_completed_at[tutorial.id]).to.equal(seen)
@@ -136,7 +136,7 @@ describe('ModalTutorial', function () {
       )
       let tutorialTitle = screen.getByRole('heading', { level: 2, name: 'ModalTutorial.title' })
       expect(tutorialTitle).to.be.ok()
-      const closeButton = screen.getByRole('button', { name: 'Close' })
+      const closeButton = screen.getByRole('button', { name: 'CloseButton.close' })
       await user.click(closeButton)
       tutorialTitle = screen.queryByRole('heading', { level: 2, name: 'ModalTutorial.title' })
       expect(tutorialTitle).to.be.null()
diff --git a/packages/lib-classifier/webpack.dist.js b/packages/lib-classifier/webpack.dist.js
index 327e41df0c..dd15e15c40 100644
--- a/packages/lib-classifier/webpack.dist.js
+++ b/packages/lib-classifier/webpack.dist.js
@@ -28,8 +28,10 @@ module.exports = {
     '@zooniverse/react-components',
     'grommet',
     'grommet-icons',
+    'i18next',
     'react',
     'react-dom',
+    'react-i18next',
     'styled-components'
   ],
   mode: 'production',
diff --git a/packages/lib-react-components/package.json b/packages/lib-react-components/package.json
index 4b8c62b28c..2fee7f1540 100644
--- a/packages/lib-react-components/package.json
+++ b/packages/lib-react-components/package.json
@@ -16,16 +16,12 @@
     "test:ci": "mocha --config ./test/.mocharc.json --reporter=min \"./src/**/*.spec.js\""
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "~6.2.0",
     "@fortawesome/free-regular-svg-icons": "~6.2.0",
     "@fortawesome/free-solid-svg-icons": "~6.2.0",
-    "@fortawesome/react-fontawesome": "~0.2.0",
     "@tippyjs/react": "~4.2.6",
     "formik": "~2.2.9",
-    "i18next": "~22.0.1",
-    "mime-types": "~2.1.21",
+    "mime": "~3.0.0",
     "prop-types": "~15.8.1",
-    "react-i18next": "~12.0.0",
     "react-resize-detector": "~7.1.1",
     "react-rnd": "10.3.7",
     "remark": "~12.0.1",
@@ -39,10 +35,12 @@
   },
   "peerDependencies": {
     "@zooniverse/grommet-theme": "3.x.x",
-    "grommet": "2.17.x",
+    "grommet": "2.x.x",
     "grommet-icons": "4.x.x",
+    "i18next": "22.x.x",
     "react": ">= 16.14",
     "react-dom": ">= 16.14",
+    "react-i18next": "12.x.x",
     "styled-components": "5.x.x"
   },
   "devDependencies": {
@@ -75,6 +73,7 @@
     "enzyme": "~3.11.0",
     "grommet": "~2.27.0",
     "grommet-icons": "~4.8.0",
+    "i18next": "~22.0.1",
     "jsdom": "~20.0.0",
     "lodash": "~4.17.11",
     "mocha": "~10.1.0",
@@ -83,6 +82,7 @@
     "polished": "~4.2.2",
     "react": "~17.0.2",
     "react-dom": "~17.0.2",
+    "react-i18next": "~12.0.0",
     "rehype-stringify": "~8.0.0",
     "remark-rehype": "~8.1.0",
     "sinon": "~14.0.0",
@@ -92,6 +92,7 @@
     "style-loader": "~3.3.1",
     "styled-components": "~5.3.3",
     "webpack": "~5.75.0",
+    "webpack-bundle-analyzer": "~4.6.1",
     "webpack-cli": "~5.0.0"
   },
   "engines": {
diff --git a/packages/lib-react-components/src/Media/Media.js b/packages/lib-react-components/src/Media/Media.js
index dc29e1bbdf..9beecf2964 100644
--- a/packages/lib-react-components/src/Media/Media.js
+++ b/packages/lib-react-components/src/Media/Media.js
@@ -1,12 +1,13 @@
 import React from 'react'
-import mime from 'mime-types'
+import mime from 'mime/lite'
 import Audio from './components/Audio'
 import ThumbnailImage from './components/ThumbnailImage'
 import Video from './components/Video'
 import { propTypes, defaultProps } from './helpers/mediaPropTypes'
 
+
 export default function Media (props) {
-  const mimeType = mime.lookup(props.src)
+  const mimeType = mime.getType(props.src)
 
   if (mimeType && mimeType.includes('image')) {
     return (
diff --git a/packages/lib-react-components/src/ZooFooter/ZooFooter.stories.js b/packages/lib-react-components/src/ZooFooter/ZooFooter.stories.js
index 9120b9cc2e..59d3295ec8 100644
--- a/packages/lib-react-components/src/ZooFooter/ZooFooter.stories.js
+++ b/packages/lib-react-components/src/ZooFooter/ZooFooter.stories.js
@@ -1,7 +1,7 @@
 import { linkTo } from '@storybook/addon-links';
 import zooTheme from '@zooniverse/grommet-theme';
 import { Box, Grommet } from 'grommet';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import React from 'react';
 
 import ZooFooter from './ZooFooter';
diff --git a/packages/lib-react-components/src/ZooFooter/helpers/zipLabelsAndUrls/zipLabelsAndUrls.js b/packages/lib-react-components/src/ZooFooter/helpers/zipLabelsAndUrls/zipLabelsAndUrls.js
index 5b7d51904b..028c1865a8 100644
--- a/packages/lib-react-components/src/ZooFooter/helpers/zipLabelsAndUrls/zipLabelsAndUrls.js
+++ b/packages/lib-react-components/src/ZooFooter/helpers/zipLabelsAndUrls/zipLabelsAndUrls.js
@@ -1,4 +1,4 @@
-import { zipWith } from 'lodash'
+import zipWith from 'lodash/zipWith'
 
 export default function zipLabelsAndUrls (labels, urls) {
   return zipWith(labels, urls, zipFunction)
diff --git a/packages/lib-react-components/src/ZooHeader/ZooHeader.stories.js b/packages/lib-react-components/src/ZooHeader/ZooHeader.stories.js
index e685537e4b..6d5ed1d76b 100644
--- a/packages/lib-react-components/src/ZooHeader/ZooHeader.stories.js
+++ b/packages/lib-react-components/src/ZooHeader/ZooHeader.stories.js
@@ -76,13 +76,15 @@ export function SignedIn() {
   )
 }
 
-export function SignedInNarrowWindowView() {
+export function SignedInNarrowWindowView({ unreadMessages, unreadNotifications }) {
   return(
     <Grommet theme={zooTheme} full>
       <ZooHeader
         isAdmin
         signIn={signIn}
         signOut={signOut}
+        unreadMessages={unreadMessages}
+        unreadNotifications={unreadNotifications}
         user={{
           admin: true,
           display_name: 'Zoo Tester',
@@ -92,6 +94,10 @@ export function SignedInNarrowWindowView() {
     </Grommet>
   )
 }
+SignedInNarrowWindowView.args = {
+  unreadNotifications: 0,
+  unreadMessages: 3
+}
 
 SignedInNarrowWindowView.parameters = {
   viewport: {
diff --git a/packages/lib-react-components/src/ZooHeader/components/SignedInUserNavigation/SignedInUserNavigation.js b/packages/lib-react-components/src/ZooHeader/components/SignedInUserNavigation/SignedInUserNavigation.js
index 14e36bfd16..4d9140729c 100644
--- a/packages/lib-react-components/src/ZooHeader/components/SignedInUserNavigation/SignedInUserNavigation.js
+++ b/packages/lib-react-components/src/ZooHeader/components/SignedInUserNavigation/SignedInUserNavigation.js
@@ -1,18 +1,44 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Box } from 'grommet'
+import { Blank } from 'grommet-icons'
 import { useTranslation } from 'react-i18next'
 import '../../../translations/i18n'
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBell as fasBell, faEnvelope as fasEnvelope } from '@fortawesome/free-solid-svg-icons'
-import { faBell as farBell, faEnvelope as farEnvelope } from '@fortawesome/free-regular-svg-icons'
+import { faBell as fasBell } from '@fortawesome/free-solid-svg-icons/faBell'
+import { faBell as farBell } from '@fortawesome/free-regular-svg-icons/faBell'
+import { faEnvelope as fasEnvelope } from '@fortawesome/free-solid-svg-icons/faEnvelope'
+import { faEnvelope as farEnvelope } from '@fortawesome/free-regular-svg-icons/faEnvelope'
+import styled from 'styled-components'
 
 import NarrowMainNavMenu from '../NarrowMainNavMenu'
 import NavListItem from '../NavListItem'
 import UserMenu from '../UserMenu'
 import { getHost } from '../../helpers'
 
+const StyledBlank = styled(Blank)`
+  height: 1em;
+  vertical-align: -0.125em;
+`
+function FontAwesomeIcon({ color, icon, title }) {
+  const [width, height, aliases, unicode, path] = icon.icon
+  return (
+    <StyledBlank
+      role='img'
+      aria-label={title}
+      aria-hidden='false'
+      color={color}
+      viewBox={`0 0 ${width} ${height}`}
+    >
+      <path
+        strokeWidth='1'
+        fill='currentColor'
+        d={path}
+      />
+    </StyledBlank>
+  )
+}
+
 export default function SignedInUserNavigation({
   adminNavLinkLabel,
   adminNavLinkURL,
diff --git a/packages/lib-react-components/src/helpers/pxToRem.js b/packages/lib-react-components/src/helpers/pxToRem.js
index 09dbfcebf7..ee5576b4de 100644
--- a/packages/lib-react-components/src/helpers/pxToRem.js
+++ b/packages/lib-react-components/src/helpers/pxToRem.js
@@ -1,13 +1,14 @@
-import _ from 'lodash'
+import isNumber from 'lodash/isNumber'
+import round from 'lodash/round'
 
 const BASE_FONT_SIZE = 15
 
 function pxToRem (px) {
-  if (!_.isNumber(px)) {
+  if (!isNumber(px)) {
     throw new TypeError('Argument for pxToRem must be an integer or float.')
   }
 
-  const converted = _.round((px / BASE_FONT_SIZE), 9)
+  const converted = round((px / BASE_FONT_SIZE), 9)
   return `${converted}rem`
 }
 
diff --git a/packages/lib-react-components/test/setup.js b/packages/lib-react-components/test/setup.js
index 99069d777d..b3abe06697 100644
--- a/packages/lib-react-components/test/setup.js
+++ b/packages/lib-react-components/test/setup.js
@@ -36,6 +36,8 @@ class ResizeObserver {
 }
 
 window.ResizeObserver = ResizeObserver
+window.scrollTo = () => true
+
 global.window = window
 global.document = window.document
 global.Image = window.Image
diff --git a/packages/lib-react-components/webpack.dist.js b/packages/lib-react-components/webpack.dist.js
index c3074c41ff..913089a9a3 100644
--- a/packages/lib-react-components/webpack.dist.js
+++ b/packages/lib-react-components/webpack.dist.js
@@ -1,3 +1,4 @@
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 const path = require('path')
 
@@ -25,8 +26,10 @@ module.exports = {
     '@zooniverse/grommet-theme': '@zooniverse/grommet-theme',
     grommet: 'grommet',
     'grommet-icons': 'grommet-icons',
+    i18next: 'i18next',
     react: 'react',
     'react-dom': 'react-dom',
+    'react-18next': 'react-i18next',
     'styled-components': 'styled-components'
   },
   output: {
@@ -39,6 +42,8 @@ module.exports = {
     globalObject: `typeof self !== 'undefined' ? self : this`
   },
   plugins: [
+    // uncomment this to build with the bundle analyser.
+    // new BundleAnalyzerPlugin(),
     new CleanWebpackPlugin()
   ],
   resolve: {
diff --git a/yarn.lock b/yarn.lock
index 96a1c5c90e..b32cc5831e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1293,13 +1293,6 @@
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz#411e02a820744d3f7e0d8d9df9d82b471beaa073"
   integrity sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ==
 
-"@fortawesome/fontawesome-svg-core@~6.2.0":
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz#e87e905e444b5e7b715af09b64d27b53d4c8f9d9"
-  integrity sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "6.2.1"
-
 "@fortawesome/free-regular-svg-icons@~6.2.0":
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.2.1.tgz#650e56d937755a8341f2eef258ecb6f95458820f"
@@ -1314,13 +1307,6 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "6.2.1"
 
-"@fortawesome/react-fontawesome@~0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
-  integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
-  dependencies:
-    prop-types "^15.8.1"
-
 "@gar/promisify@^1.0.1", "@gar/promisify@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -2649,6 +2635,11 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@polka/url@^1.0.0-next.20":
+  version "1.0.0-next.21"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
+  integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
+
 "@popperjs/core@^2.9.0":
   version "2.11.6"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
@@ -4888,7 +4879,7 @@ acorn-walk@^7.2.0:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
-acorn-walk@^8.0.2:
+acorn-walk@^8.0.0, acorn-walk@^8.0.2:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
   integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
@@ -4903,7 +4894,7 @@ acorn@^7.4.0, acorn@^7.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.1.0, acorn@^8.5.0, acorn@^8.7.1, acorn@^8.8.0:
+acorn@^8.0.4, acorn@^8.1.0, acorn@^8.5.0, acorn@^8.7.1, acorn@^8.8.0:
   version "8.8.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
   integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
@@ -6640,6 +6631,11 @@ commander@^6.2.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
 
+commander@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
 commander@^8.3.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
@@ -8055,7 +8051,7 @@ dotenv@~16.0.1:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07"
   integrity sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==
 
-duplexer@^0.1.1:
+duplexer@^0.1.1, duplexer@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
   integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
@@ -9828,6 +9824,13 @@ grommet@~2.27.0:
     markdown-to-jsx "^7.1.5"
     prop-types "^15.8.1"
 
+gzip-size@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
+  integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==
+  dependencies:
+    duplexer "^0.1.2"
+
 handle-thing@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
@@ -12227,7 +12230,7 @@ mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
-mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.30, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.21, mime-types@~2.1.24, mime-types@~2.1.34:
+mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.30, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24, mime-types@~2.1.34:
   version "2.1.35"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
@@ -12244,6 +12247,11 @@ mime@2.6.0, mime@^2.4.4:
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.6.0.tgz#a2a682a95cd4d0cb1d6257e28f83da7e35800367"
   integrity sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==
 
+mime@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-3.0.0.tgz#b374550dca3a0c18443b0c950a6a58f1931cf7a7"
+  integrity sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==
+
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@@ -12535,6 +12543,11 @@ move-concurrently@^1.0.1:
     rimraf "^2.5.4"
     run-queue "^1.0.3"
 
+mrmime@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"
+  integrity sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -13303,6 +13316,11 @@ open@^8.0.9, open@^8.4.0:
     is-docker "^2.1.1"
     is-wsl "^2.2.0"
 
+opener@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
+  integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
+
 optionator@^0.8.1:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
@@ -15756,6 +15774,15 @@ sinon@~14.0.0:
     nise "^5.1.2"
     supports-color "^7.2.0"
 
+sirv@^1.0.7:
+  version "1.0.19"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.19.tgz#1d73979b38c7fe91fcba49c85280daa9c2363b49"
+  integrity sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==
+  dependencies:
+    "@polka/url" "^1.0.0-next.20"
+    mrmime "^1.0.0"
+    totalist "^1.0.0"
+
 sisteransi@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@@ -16765,6 +16792,11 @@ toidentifier@1.0.1:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
   integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
+totalist@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
+  integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
+
 tough-cookie@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.2.tgz#e53e84b85f24e0b65dd526f46628db6c85f6b874"
@@ -17468,6 +17500,21 @@ webidl-conversions@^7.0.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
   integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
 
+webpack-bundle-analyzer@~4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.6.1.tgz#bee2ee05f4ba4ed430e4831a319126bb4ed9f5a6"
+  integrity sha512-oKz9Oz9j3rUciLNfpGFjOb49/jEpXNmWdVH8Ls//zNcnLlQdTGXQQMsBbb/gR7Zl8WNLxVCq+0Hqbx3zv6twBw==
+  dependencies:
+    acorn "^8.0.4"
+    acorn-walk "^8.0.0"
+    chalk "^4.1.0"
+    commander "^7.2.0"
+    gzip-size "^6.0.0"
+    lodash "^4.17.20"
+    opener "^1.5.2"
+    sirv "^1.0.7"
+    ws "^7.3.1"
+
 webpack-cli@~5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-5.0.0.tgz#bd380a9653e0cd1a08916c4ff1adea17201ef68f"
@@ -17882,7 +17929,17 @@ write-pkg@^4.0.0:
     type-fest "^0.4.1"
     write-json-file "^3.2.0"
 
-ws@^8.2.3, ws@^8.4.2, ws@^8.9.0:
+ws@^7.3.1:
+  version "7.5.9"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
+  integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
+
+ws@^8.2.3, ws@^8.4.2:
+  version "8.8.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.8.1.tgz#5dbad0feb7ade8ecc99b830c1d77c913d4955ff0"
+  integrity sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==
+
+ws@^8.9.0:
   version "8.9.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.9.0.tgz#2a994bb67144be1b53fe2d23c53c028adeb7f45e"
   integrity sha512-Ja7nszREasGaYUYCI2k4lCKIRTt+y7XuqVoHR44YpI49TtryyqbqvDMn5eqfW7e6HzTukDRIsXqzVHScqRcafg==