From b2382826c0ebcc027f5fea3286cd7e417eea5d6a Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Tue, 3 Dec 2024 11:01:15 +0100
Subject: [PATCH 1/9] Feat: check page hostname to toggle trademark elements

---
 .github/workflows/build/action.yml     |  1 -
 README.md                              |  1 -
 src/components/common/Footer/index.tsx |  6 ++++--
 src/components/common/Header/index.tsx | 28 ++++++++++++++++----------
 src/config/constants.ts                |  2 +-
 src/hooks/useIsOfficialHost.ts         |  6 ++++++
 src/pages/cookie.tsx                   |  6 ++++--
 src/pages/imprint.tsx                  |  6 ++++--
 src/pages/licenses.tsx                 |  6 ++++--
 src/pages/privacy.tsx                  |  6 ++++--
 src/pages/terms.tsx                    |  6 ++++--
 11 files changed, 48 insertions(+), 26 deletions(-)
 create mode 100644 src/hooks/useIsOfficialHost.ts

diff --git a/.github/workflows/build/action.yml b/.github/workflows/build/action.yml
index ba6ad94d7e..99a1f8d09d 100644
--- a/.github/workflows/build/action.yml
+++ b/.github/workflows/build/action.yml
@@ -50,7 +50,6 @@ runs:
         NEXT_PUBLIC_WC_PROJECT_ID: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_WC_PROJECT_ID }}
         NEXT_PUBLIC_SAFE_RELAY_SERVICE_URL_PRODUCTION: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_PRODUCTION }}
         NEXT_PUBLIC_SAFE_RELAY_SERVICE_URL_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_STAGING }}
-        NEXT_PUBLIC_IS_OFFICIAL_HOST: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_IS_OFFICIAL_HOST }}
         NEXT_PUBLIC_BLOCKAID_CLIENT_ID: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_BLOCKAID_CLIENT_ID }}
         NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_STAGING }}
         NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_PRODUCTION: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_PRODUCTION }}
diff --git a/README.md b/README.md
index 9daa12ad6d..6befc57202 100644
--- a/README.md
+++ b/README.md
@@ -39,7 +39,6 @@ Here's the list of all the environment variables:
 | `NEXT_PUBLIC_GOOGLE_TAG_MANAGER_LATEST_AUTH`      | Preview GTM key                                                                                                                                                         |
 | `NEXT_PUBLIC_GOOGLE_TAG_MANAGER_LIVE_AUTH`        | Production GTM key                                                                                                                                                      |
 | `NEXT_PUBLIC_SENTRY_DSN`                          | [Sentry](https://sentry.io) id for tracking runtime errors                                                                                                              |
-| `NEXT_PUBLIC_IS_OFFICIAL_HOST`                    | Whether it's the official distribution of the app, or a fork; has legal implications. Set to true only if you also update the legal pages like Imprint and Terms of use |
 | `NEXT_PUBLIC_REDEFINE_API`                        | Redefine API base URL                                                                                                                                                   |
 | `NEXT_PUBLIC_FIREBASE_OPTIONS_PRODUCTION`         | Firebase Cloud Messaging (FCM) `initializeApp` options on production                                                                                                    |
 | `NEXT_PUBLIC_FIREBASE_VAPID_KEY_PRODUCTION`       | FCM vapid key on production                                                                                                                                             |
diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx
index de2d36f115..f01e46dda1 100644
--- a/src/components/common/Footer/index.tsx
+++ b/src/components/common/Footer/index.tsx
@@ -8,7 +8,8 @@ import { AppRoutes } from '@/config/routes'
 import packageJson from '../../../../package.json'
 import ExternalLink from '../ExternalLink'
 import MUILink from '@mui/material/Link'
-import { HELP_CENTER_URL, IS_DEV, IS_OFFICIAL_HOST } from '@/config/constants'
+import { HELP_CENTER_URL } from '@/config/constants'
+import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
 
 const footerPages = [
   AppRoutes.welcome.index,
@@ -32,6 +33,7 @@ const FooterLink = ({ children, href }: { children: ReactNode; href: string }):
 
 const Footer = (): ReactElement | null => {
   const router = useRouter()
+  const isOfficialHost = useIsOfficialHost()
 
   if (!footerPages.some((path) => router.pathname.startsWith(path))) {
     return null
@@ -44,7 +46,7 @@ const Footer = (): ReactElement | null => {
   return (
     <footer className={css.container}>
       <ul>
-        {IS_OFFICIAL_HOST || IS_DEV ? (
+        {isOfficialHost ? (
           <>
             <li>
               <Typography variant="caption">&copy;2022–{new Date().getFullYear()} Core Contributors GmbH</Typography>
diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
index 215ef45aa6..7068980f93 100644
--- a/src/components/common/Header/index.tsx
+++ b/src/components/common/Header/index.tsx
@@ -24,6 +24,7 @@ import { useHasFeature } from '@/hooks/useChains'
 import Track from '@/components/common/Track'
 import { OVERVIEW_EVENTS, OVERVIEW_LABELS } from '@/services/analytics'
 import { useSafeTokenEnabled } from '@/hooks/useSafeTokenEnabled'
+import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
 
 type HeaderProps = {
   onMenuToggle?: Dispatch<SetStateAction<boolean>>
@@ -45,6 +46,7 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
   const isSafeOwner = useIsSafeOwner()
   const router = useRouter()
   const enableWc = useHasFeature(FEATURES.NATIVE_WALLETCONNECT)
+  const isOfficialHost = useIsOfficialHost()
 
   // If on the home page, the logo should link to the Accounts or Welcome page, otherwise to the home page
   const logoHref = getLogoLink(router)
@@ -75,17 +77,21 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
         )}
       </div>
 
-      <div className={classnames(css.element, css.logoMobile)}>
-        <Link href={logoHref} passHref>
-          <SafeLogoMobile alt="Safe logo" />
-        </Link>
-      </div>
-
-      <div className={classnames(css.element, css.hideMobile, css.logo)}>
-        <Link href={logoHref} passHref>
-          <SafeLogo alt="Safe logo" />
-        </Link>
-      </div>
+      {isOfficialHost && (
+        <>
+          <div className={classnames(css.element, css.logoMobile)}>
+            <Link href={logoHref} passHref>
+              <SafeLogoMobile alt="Safe logo" />
+            </Link>
+          </div>
+
+          <div className={classnames(css.element, css.hideMobile, css.logo)}>
+            <Link href={logoHref} passHref>
+              <SafeLogo alt="Safe logo" />
+            </Link>
+          </div>
+        </>
+      )}
 
       {showSafeToken && (
         <div className={classnames(css.element, css.hideMobile)}>
diff --git a/src/config/constants.ts b/src/config/constants.ts
index f596970469..cfda92f56c 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -98,7 +98,7 @@ export const DISCORD_URL = 'https://chat.safe.global'
 export const TWITTER_URL = 'https://twitter.com/safe'
 
 // Legal
-export const IS_OFFICIAL_HOST = process.env.NEXT_PUBLIC_IS_OFFICIAL_HOST === 'true'
+export const OFFICIAL_HOSTS = /(app\.safe\.global|.+\.5afe\.dev|localhost:3000)\//
 
 // Risk mitigation (Blockaid)
 export const BLOCKAID_API = 'https://client.blockaid.io'
diff --git a/src/hooks/useIsOfficialHost.ts b/src/hooks/useIsOfficialHost.ts
new file mode 100644
index 0000000000..5ad2617111
--- /dev/null
+++ b/src/hooks/useIsOfficialHost.ts
@@ -0,0 +1,6 @@
+import { useMemo } from "react"
+import { OFFICIAL_HOSTS } from "@/config/constants"
+
+export const useIsOfficialHost = (): boolean => {
+    return useMemo(() => typeof window === 'undefined' ? true : OFFICIAL_HOSTS.test(window.location.host), [])
+}
diff --git a/src/pages/cookie.tsx b/src/pages/cookie.tsx
index 3d277388ce..ed54e5b45b 100644
--- a/src/pages/cookie.tsx
+++ b/src/pages/cookie.tsx
@@ -3,7 +3,7 @@ import Head from 'next/head'
 import Link from 'next/link'
 import MUILink from '@mui/material/Link'
 import { AppRoutes } from '@/config/routes'
-import { IS_OFFICIAL_HOST } from '@/config/constants'
+import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
 
 const SafeCookiePolicy = () => (
   <div>
@@ -590,13 +590,15 @@ const SafeCookiePolicy = () => (
 )
 
 const CookiePolicy: NextPage = () => {
+  const isOfficialHost = useIsOfficialHost()
+
   return (
     <>
       <Head>
         <title>{'Safe{Wallet} – Cookie policy'}</title>
       </Head>
 
-      <main>{IS_OFFICIAL_HOST && <SafeCookiePolicy />}</main>
+      <main>{isOfficialHost && <SafeCookiePolicy />}</main>
     </>
   )
 }
diff --git a/src/pages/imprint.tsx b/src/pages/imprint.tsx
index fe3ac20373..9424881e73 100644
--- a/src/pages/imprint.tsx
+++ b/src/pages/imprint.tsx
@@ -1,9 +1,9 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import { IS_OFFICIAL_HOST } from '@/config/constants'
 import { Typography } from '@mui/material'
 import Link from 'next/link'
 import MUILink from '@mui/material/Link'
+import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
 
 const SafeImprint = () => (
   <div>
@@ -112,13 +112,15 @@ const SafeImprint = () => (
 )
 
 const Imprint: NextPage = () => {
+  const isOfficialHost = useIsOfficialHost()
+
   return (
     <>
       <Head>
         <title>{'Safe{Wallet} – Imprint'}</title>
       </Head>
 
-      <main>{IS_OFFICIAL_HOST && <SafeImprint />}</main>
+      <main>{isOfficialHost && <SafeImprint />}</main>
     </>
   )
 }
diff --git a/src/pages/licenses.tsx b/src/pages/licenses.tsx
index 7f29e2bb29..d9e770cddf 100644
--- a/src/pages/licenses.tsx
+++ b/src/pages/licenses.tsx
@@ -1,9 +1,9 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import { IS_OFFICIAL_HOST } from '@/config/constants'
 import { Typography, Table, TableBody, TableRow, TableCell, TableHead, TableContainer, Box } from '@mui/material'
 import ExternalLink from '@/components/common/ExternalLink'
 import Paper from '@mui/material/Paper'
+import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
 
 const SafeLicenses = () => (
   <>
@@ -743,13 +743,15 @@ const SafeLicenses = () => (
 )
 
 const Licenses: NextPage = () => {
+  const isOfficialHost = useIsOfficialHost()
+
   return (
     <>
       <Head>
         <title>{'Safe{Wallet} – Licenses'}</title>
       </Head>
 
-      <main>{IS_OFFICIAL_HOST && <SafeLicenses />}</main>
+      <main>{isOfficialHost && <SafeLicenses />}</main>
     </>
   )
 }
diff --git a/src/pages/privacy.tsx b/src/pages/privacy.tsx
index 8bf31ed9e1..d4e2783162 100644
--- a/src/pages/privacy.tsx
+++ b/src/pages/privacy.tsx
@@ -2,21 +2,23 @@ import CustomLink from '@/components/common/CustomLink'
 import type { MDXComponents } from 'mdx/types'
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import { IS_OFFICIAL_HOST } from '@/config/constants'
 import SafePrivacyPolicy from '@/markdown/privacy/privacy.md'
+import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
 
 const overrideComponents: MDXComponents = {
   a: CustomLink,
 }
 
 const PrivacyPolicy: NextPage = () => {
+  const isOfficialHost = useIsOfficialHost()
+
   return (
     <>
       <Head>
         <title>{'Safe{Wallet} – Privacy policy'}</title>
       </Head>
 
-      <main>{IS_OFFICIAL_HOST && <SafePrivacyPolicy components={overrideComponents} />}</main>
+      <main>{isOfficialHost && <SafePrivacyPolicy components={overrideComponents} />}</main>
     </>
   )
 }
diff --git a/src/pages/terms.tsx b/src/pages/terms.tsx
index 8354588ef2..f7fec3d5dc 100644
--- a/src/pages/terms.tsx
+++ b/src/pages/terms.tsx
@@ -1,22 +1,24 @@
 import CustomLink from '@/components/common/CustomLink'
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import { IS_OFFICIAL_HOST } from '@/config/constants'
 import SafeTerms from '@/markdown/terms/terms.md'
 import type { MDXComponents } from 'mdx/types'
+import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
 
 const overrideComponents: MDXComponents = {
   a: CustomLink,
 }
 
 const Terms: NextPage = () => {
+  const isOfficialHost = useIsOfficialHost()
+
   return (
     <>
       <Head>
         <title>{'Safe{Wallet} – Terms'}</title>
       </Head>
 
-      <main>{IS_OFFICIAL_HOST && <SafeTerms components={overrideComponents} />}</main>
+      <main>{isOfficialHost && <SafeTerms components={overrideComponents} />}</main>
     </>
   )
 }

From b7f259bdc669955c0a63808063b4970a2c6e4e2d Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Tue, 3 Dec 2024 11:05:57 +0100
Subject: [PATCH 2/9] Prettier

---
 src/config/constants.ts        | 2 +-
 src/hooks/useIsOfficialHost.ts | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/config/constants.ts b/src/config/constants.ts
index cfda92f56c..0d663d230c 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -98,7 +98,7 @@ export const DISCORD_URL = 'https://chat.safe.global'
 export const TWITTER_URL = 'https://twitter.com/safe'
 
 // Legal
-export const OFFICIAL_HOSTS = /(app\.safe\.global|.+\.5afe\.dev|localhost:3000)\//
+export const OFFICIAL_HOSTS = /app\.safe\.global|.+\.5afe\.dev|localhost:3000/
 
 // Risk mitigation (Blockaid)
 export const BLOCKAID_API = 'https://client.blockaid.io'
diff --git a/src/hooks/useIsOfficialHost.ts b/src/hooks/useIsOfficialHost.ts
index 5ad2617111..a16e432a7e 100644
--- a/src/hooks/useIsOfficialHost.ts
+++ b/src/hooks/useIsOfficialHost.ts
@@ -1,6 +1,6 @@
-import { useMemo } from "react"
-import { OFFICIAL_HOSTS } from "@/config/constants"
+import { useMemo } from 'react'
+import { OFFICIAL_HOSTS } from '@/config/constants'
 
 export const useIsOfficialHost = (): boolean => {
-    return useMemo(() => typeof window === 'undefined' ? true : OFFICIAL_HOSTS.test(window.location.host), [])
+  return useMemo(() => (typeof window === 'undefined' ? true : OFFICIAL_HOSTS.test(window.location.host)), [])
 }

From aff956f96d9ecb525dde2feaa8bef8b483fa2bca Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Tue, 3 Dec 2024 11:33:07 +0100
Subject: [PATCH 3/9] Fix tests

---
 src/components/common/Header/index.test.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/common/Header/index.test.tsx b/src/components/common/Header/index.test.tsx
index d5ee8fca72..53da98fbd1 100644
--- a/src/components/common/Header/index.test.tsx
+++ b/src/components/common/Header/index.test.tsx
@@ -32,6 +32,10 @@ jest.mock(
     },
 )
 
+jest.mock('@/hooks/useIsOfficialHost', () => ({
+  useIsOfficialHost: () => true,
+}))
+
 describe('Header', () => {
   beforeEach(() => {
     jest.resetAllMocks()

From 9472d75836595d0a8f3d34dcc85e0159d93b5cbb Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Tue, 3 Dec 2024 11:37:00 +0100
Subject: [PATCH 4/9] Restore the env var

---
 .github/workflows/build/action.yml | 1 +
 README.md                          | 1 +
 src/config/constants.ts            | 1 +
 src/hooks/useIsOfficialHost.ts     | 7 +++++--
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/build/action.yml b/.github/workflows/build/action.yml
index 99a1f8d09d..ba6ad94d7e 100644
--- a/.github/workflows/build/action.yml
+++ b/.github/workflows/build/action.yml
@@ -50,6 +50,7 @@ runs:
         NEXT_PUBLIC_WC_PROJECT_ID: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_WC_PROJECT_ID }}
         NEXT_PUBLIC_SAFE_RELAY_SERVICE_URL_PRODUCTION: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_PRODUCTION }}
         NEXT_PUBLIC_SAFE_RELAY_SERVICE_URL_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_STAGING }}
+        NEXT_PUBLIC_IS_OFFICIAL_HOST: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_IS_OFFICIAL_HOST }}
         NEXT_PUBLIC_BLOCKAID_CLIENT_ID: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_BLOCKAID_CLIENT_ID }}
         NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_STAGING }}
         NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_PRODUCTION: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_PRODUCTION }}
diff --git a/README.md b/README.md
index 6befc57202..9daa12ad6d 100644
--- a/README.md
+++ b/README.md
@@ -39,6 +39,7 @@ Here's the list of all the environment variables:
 | `NEXT_PUBLIC_GOOGLE_TAG_MANAGER_LATEST_AUTH`      | Preview GTM key                                                                                                                                                         |
 | `NEXT_PUBLIC_GOOGLE_TAG_MANAGER_LIVE_AUTH`        | Production GTM key                                                                                                                                                      |
 | `NEXT_PUBLIC_SENTRY_DSN`                          | [Sentry](https://sentry.io) id for tracking runtime errors                                                                                                              |
+| `NEXT_PUBLIC_IS_OFFICIAL_HOST`                    | Whether it's the official distribution of the app, or a fork; has legal implications. Set to true only if you also update the legal pages like Imprint and Terms of use |
 | `NEXT_PUBLIC_REDEFINE_API`                        | Redefine API base URL                                                                                                                                                   |
 | `NEXT_PUBLIC_FIREBASE_OPTIONS_PRODUCTION`         | Firebase Cloud Messaging (FCM) `initializeApp` options on production                                                                                                    |
 | `NEXT_PUBLIC_FIREBASE_VAPID_KEY_PRODUCTION`       | FCM vapid key on production                                                                                                                                             |
diff --git a/src/config/constants.ts b/src/config/constants.ts
index 0d663d230c..ad98e94c9c 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -98,6 +98,7 @@ export const DISCORD_URL = 'https://chat.safe.global'
 export const TWITTER_URL = 'https://twitter.com/safe'
 
 // Legal
+export const IS_OFFICIAL_HOST = process.env.NEXT_PUBLIC_IS_OFFICIAL_HOST === 'true'
 export const OFFICIAL_HOSTS = /app\.safe\.global|.+\.5afe\.dev|localhost:3000/
 
 // Risk mitigation (Blockaid)
diff --git a/src/hooks/useIsOfficialHost.ts b/src/hooks/useIsOfficialHost.ts
index a16e432a7e..680f049f09 100644
--- a/src/hooks/useIsOfficialHost.ts
+++ b/src/hooks/useIsOfficialHost.ts
@@ -1,6 +1,9 @@
 import { useMemo } from 'react'
-import { OFFICIAL_HOSTS } from '@/config/constants'
+import { IS_OFFICIAL_HOST, OFFICIAL_HOSTS } from '@/config/constants'
 
 export const useIsOfficialHost = (): boolean => {
-  return useMemo(() => (typeof window === 'undefined' ? true : OFFICIAL_HOSTS.test(window.location.host)), [])
+  return useMemo(
+    () => IS_OFFICIAL_HOST && (typeof window === 'undefined' || OFFICIAL_HOSTS.test(window.location.host)),
+    [],
+  )
 }

From bf010125defd22e40752b57e562b7a5e9c8bff77 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Tue, 3 Dec 2024 11:54:16 +0100
Subject: [PATCH 5/9] Logo placeholder

---
 src/components/common/Footer/index.tsx |  2 +-
 src/components/common/Header/index.tsx | 29 ++++++++++++--------------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx
index f01e46dda1..0b6dbea4b5 100644
--- a/src/components/common/Footer/index.tsx
+++ b/src/components/common/Footer/index.tsx
@@ -76,7 +76,7 @@ const Footer = (): ReactElement | null => {
             </li>
           </>
         ) : (
-          <li>{'This is an unofficial distribution of Safe{Wallet}'}</li>
+          <li>This is an unofficial distribution of the app</li>
         )}
 
         <li>
diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
index 7068980f93..e11648a0f6 100644
--- a/src/components/common/Header/index.tsx
+++ b/src/components/common/Header/index.tsx
@@ -4,7 +4,7 @@ import type { Dispatch, SetStateAction } from 'react'
 import { type ReactElement } from 'react'
 import { useRouter } from 'next/router'
 import type { Url } from 'next/dist/shared/lib/router/router'
-import { IconButton, Paper } from '@mui/material'
+import { IconButton, Paper, SvgIcon } from '@mui/material'
 import MenuIcon from '@mui/icons-material/Menu'
 import classnames from 'classnames'
 import css from './styles.module.css'
@@ -15,6 +15,7 @@ import NotificationCenter from '@/components/notification-center/NotificationCen
 import { AppRoutes } from '@/config/routes'
 import SafeLogo from '@/public/images/logo.svg'
 import SafeLogoMobile from '@/public/images/logo-no-text.svg'
+import LogoPlaceholder from '@mui/icons-material/Home'
 import Link from 'next/link'
 import useSafeAddress from '@/hooks/useSafeAddress'
 import BatchIndicator from '@/components/batch/BatchIndicator'
@@ -77,21 +78,17 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
         )}
       </div>
 
-      {isOfficialHost && (
-        <>
-          <div className={classnames(css.element, css.logoMobile)}>
-            <Link href={logoHref} passHref>
-              <SafeLogoMobile alt="Safe logo" />
-            </Link>
-          </div>
-
-          <div className={classnames(css.element, css.hideMobile, css.logo)}>
-            <Link href={logoHref} passHref>
-              <SafeLogo alt="Safe logo" />
-            </Link>
-          </div>
-        </>
-      )}
+      <div className={classnames(css.element, css.logoMobile)}>
+        <Link href={logoHref} passHref>
+          {isOfficialHost ? <SafeLogoMobile alt="Safe logo" /> : null}
+        </Link>
+      </div>
+
+      <div className={classnames(css.element, css.hideMobile, css.logo)}>
+        <Link href={logoHref} passHref>
+          {isOfficialHost ? <SafeLogo alt="Safe logo" /> : <SvgIcon component={LogoPlaceholder} fontSize="large" />}
+        </Link>
+      </div>
 
       {showSafeToken && (
         <div className={classnames(css.element, css.hideMobile)}>

From 76b00bfa05e7679ebe9f0562aa280207d0e82942 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Tue, 3 Dec 2024 13:29:05 +0100
Subject: [PATCH 6/9] Safe{Wallet} -> $BRAND_NAME

---
 .github/workflows/build/action.yml                          | 2 ++
 src/components/address-book/ImportDialog/index.tsx          | 4 ++--
 src/components/common/Header/index.tsx                      | 6 +++---
 src/components/common/Header/styles.module.css              | 1 +
 src/components/common/MetaTags/index.tsx                    | 6 +++---
 src/components/safe-apps/AddCustomAppModal/index.tsx        | 3 ++-
 src/components/safe-apps/AppFrame/index.tsx                 | 3 ++-
 .../safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx      | 3 ++-
 src/components/settings/DataManagement/ImportFileUpload.tsx | 5 +++--
 .../settings/DataManagement/useGlobalImportFileParser.ts    | 2 +-
 src/components/settings/FallbackHandler/index.tsx           | 4 ++--
 src/components/settings/SafeAppsSigningMethod/index.tsx     | 6 +++---
 .../flows/UpsertRecovery/UpsertRecoveryFlowSettings.tsx     | 4 ++--
 src/config/constants.ts                                     | 2 ++
 .../stake/components/StakingConfirmationTx/Deposit.tsx      | 5 ++++-
 .../SwapOrderConfirmationView/OrderFeeConfirmationView.tsx  | 4 ++--
 src/features/swap/index.tsx                                 | 4 ++--
 .../walletconnect/components/WcConnectionForm/index.tsx     | 3 ++-
 .../walletconnect/components/WcLogoHeader/index.tsx         | 3 ++-
 .../components/WcProposalForm/useCompatibilityWarning.ts    | 3 ++-
 src/features/walletconnect/constants.ts                     | 4 +++-
 src/pages/_app.tsx                                          | 4 ++--
 src/pages/_offline.tsx                                      | 3 ++-
 src/pages/addOwner.tsx                                      | 3 ++-
 src/pages/address-book.tsx                                  | 3 ++-
 src/pages/apps/bookmarked.tsx                               | 3 ++-
 src/pages/apps/custom.tsx                                   | 3 ++-
 src/pages/apps/index.tsx                                    | 3 ++-
 src/pages/balances/index.tsx                                | 3 ++-
 src/pages/balances/nfts.tsx                                 | 4 ++--
 src/pages/bridge.tsx                                        | 3 ++-
 src/pages/cookie.tsx                                        | 3 ++-
 src/pages/home.tsx                                          | 3 ++-
 src/pages/imprint.tsx                                       | 3 ++-
 src/pages/licenses.tsx                                      | 5 +++--
 src/pages/new-safe/advanced-create.tsx                      | 3 ++-
 src/pages/new-safe/create.tsx                               | 3 ++-
 src/pages/new-safe/load.tsx                                 | 3 ++-
 src/pages/privacy.tsx                                       | 3 ++-
 src/pages/settings/appearance.tsx                           | 3 ++-
 src/pages/settings/cookies.tsx                              | 3 ++-
 src/pages/settings/data.tsx                                 | 3 ++-
 src/pages/settings/environment-variables.tsx                | 3 ++-
 src/pages/settings/index.tsx                                | 3 ++-
 src/pages/settings/modules.tsx                              | 3 ++-
 src/pages/settings/notifications.tsx                        | 3 ++-
 src/pages/settings/safe-apps/index.tsx                      | 3 ++-
 src/pages/settings/security.tsx                             | 3 ++-
 src/pages/settings/setup.tsx                                | 3 ++-
 src/pages/share/safe-app.tsx                                | 3 ++-
 src/pages/stake.tsx                                         | 3 ++-
 src/pages/swap.tsx                                          | 3 ++-
 src/pages/terms.tsx                                         | 3 ++-
 src/pages/transactions/history.tsx                          | 3 ++-
 src/pages/transactions/messages.tsx                         | 3 ++-
 src/pages/transactions/msg.tsx                              | 3 ++-
 src/pages/transactions/queue.tsx                            | 3 ++-
 src/pages/transactions/tx.tsx                               | 3 ++-
 src/pages/welcome/accounts.tsx                              | 3 ++-
 src/pages/welcome/index.tsx                                 | 3 ++-
 src/services/onboard.ts                                     | 5 +++--
 src/services/safe-wallet-provider/notifications.ts          | 5 +++--
 62 files changed, 132 insertions(+), 76 deletions(-)

diff --git a/.github/workflows/build/action.yml b/.github/workflows/build/action.yml
index ba6ad94d7e..e9b1b583ae 100644
--- a/.github/workflows/build/action.yml
+++ b/.github/workflows/build/action.yml
@@ -51,6 +51,8 @@ runs:
         NEXT_PUBLIC_SAFE_RELAY_SERVICE_URL_PRODUCTION: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_PRODUCTION }}
         NEXT_PUBLIC_SAFE_RELAY_SERVICE_URL_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_STAGING }}
         NEXT_PUBLIC_IS_OFFICIAL_HOST: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_IS_OFFICIAL_HOST }}
+        NEXT_PUBLIC_BRAND_LOGO: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_BRAND_LOGO }}
+        NEXT_PUBLIC_BRAND_NAME: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_BRAND_NAME }}
         NEXT_PUBLIC_BLOCKAID_CLIENT_ID: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_BLOCKAID_CLIENT_ID }}
         NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_STAGING }}
         NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_PRODUCTION: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_PRODUCTION }}
diff --git a/src/components/address-book/ImportDialog/index.tsx b/src/components/address-book/ImportDialog/index.tsx
index 13262285e7..8f7e47b390 100644
--- a/src/components/address-book/ImportDialog/index.tsx
+++ b/src/components/address-book/ImportDialog/index.tsx
@@ -17,7 +17,7 @@ import ErrorMessage from '@/components/tx/ErrorMessage'
 import { Errors, logError } from '@/services/exceptions'
 import FileUpload, { FileTypes, type FileInfo } from '@/components/common/FileUpload'
 import ExternalLink from '@/components/common/ExternalLink'
-import { HelpCenterArticle } from '@/config/constants'
+import { BRAND_NAME, HelpCenterArticle } from '@/config/constants'
 
 type AddressBookCSVRow = ['address', 'name', 'chainId']
 
@@ -152,7 +152,7 @@ const ImportDialog = ({ handleClose }: { handleClose: () => void }): ReactElemen
         {error && <ErrorMessage>{error}</ErrorMessage>}
 
         <Typography>
-          Only CSV files exported from a {'Safe{Wallet}'} can be imported.
+          Only CSV files exported from a {BRAND_NAME} can be imported.
           <br />
           <ExternalLink
             href={HelpCenterArticle.ADDRESS_BOOK_DATA}
diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
index e11648a0f6..71ba659a05 100644
--- a/src/components/common/Header/index.tsx
+++ b/src/components/common/Header/index.tsx
@@ -4,7 +4,7 @@ import type { Dispatch, SetStateAction } from 'react'
 import { type ReactElement } from 'react'
 import { useRouter } from 'next/router'
 import type { Url } from 'next/dist/shared/lib/router/router'
-import { IconButton, Paper, SvgIcon } from '@mui/material'
+import { IconButton, Paper } from '@mui/material'
 import MenuIcon from '@mui/icons-material/Menu'
 import classnames from 'classnames'
 import css from './styles.module.css'
@@ -15,7 +15,6 @@ import NotificationCenter from '@/components/notification-center/NotificationCen
 import { AppRoutes } from '@/config/routes'
 import SafeLogo from '@/public/images/logo.svg'
 import SafeLogoMobile from '@/public/images/logo-no-text.svg'
-import LogoPlaceholder from '@mui/icons-material/Home'
 import Link from 'next/link'
 import useSafeAddress from '@/hooks/useSafeAddress'
 import BatchIndicator from '@/components/batch/BatchIndicator'
@@ -26,6 +25,7 @@ import Track from '@/components/common/Track'
 import { OVERVIEW_EVENTS, OVERVIEW_LABELS } from '@/services/analytics'
 import { useSafeTokenEnabled } from '@/hooks/useSafeTokenEnabled'
 import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
+import { BRAND_LOGO, BRAND_NAME } from '@/config/constants'
 
 type HeaderProps = {
   onMenuToggle?: Dispatch<SetStateAction<boolean>>
@@ -86,7 +86,7 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
 
       <div className={classnames(css.element, css.hideMobile, css.logo)}>
         <Link href={logoHref} passHref>
-          {isOfficialHost ? <SafeLogo alt="Safe logo" /> : <SvgIcon component={LogoPlaceholder} fontSize="large" />}
+          {isOfficialHost ? <SafeLogo alt={BRAND_NAME} /> : BRAND_LOGO && <img src={BRAND_LOGO} alt={BRAND_NAME} />}
         </Link>
       </div>
 
diff --git a/src/components/common/Header/styles.module.css b/src/components/common/Header/styles.module.css
index 00936f862e..7262107174 100644
--- a/src/components/common/Header/styles.module.css
+++ b/src/components/common/Header/styles.module.css
@@ -40,6 +40,7 @@
   display: none;
 }
 
+.logo img,
 .logo svg,
 .logoMobile svg {
   width: auto;
diff --git a/src/components/common/MetaTags/index.tsx b/src/components/common/MetaTags/index.tsx
index fe590265a5..9f4917274a 100644
--- a/src/components/common/MetaTags/index.tsx
+++ b/src/components/common/MetaTags/index.tsx
@@ -1,10 +1,10 @@
-import { IS_PRODUCTION } from '@/config/constants'
+import { BRAND_NAME, IS_PRODUCTION } from '@/config/constants'
 import { ContentSecurityPolicy, StrictTransportSecurity } from '@/config/securityHeaders'
 import lightPalette from '@/components/theme/lightPalette'
 import darkPalette from '@/components/theme/darkPalette'
 
-const descriptionText = 'Safe{Wallet} is the most trusted smart account wallet on Ethereum with over $100B secured.'
-const titleText = 'Safe{Wallet}'
+const descriptionText = `${BRAND_NAME} is the most trusted smart account wallet on Ethereum with over $100B secured.`
+const titleText = BRAND_NAME
 
 const MetaTags = ({ prefetchUrl }: { prefetchUrl: string }) => (
   <>
diff --git a/src/components/safe-apps/AddCustomAppModal/index.tsx b/src/components/safe-apps/AddCustomAppModal/index.tsx
index 635f30c805..a343fc98a5 100644
--- a/src/components/safe-apps/AddCustomAppModal/index.tsx
+++ b/src/components/safe-apps/AddCustomAppModal/index.tsx
@@ -29,6 +29,7 @@ import { useShareSafeAppUrl } from '@/components/safe-apps/hooks/useShareSafeApp
 
 import css from './styles.module.css'
 import ExternalLink from '@/components/common/ExternalLink'
+import { BRAND_NAME } from '@/config/constants'
 
 type Props = {
   open: boolean
@@ -148,7 +149,7 @@ export const AddCustomAppModal = ({ open, onClose, onSave, safeAppsList }: Props
                             })}
                           />
                         }
-                        label="This Safe App is not part of Safe{Wallet} and I agree to use it at my own risk."
+                        label={`This Safe App is not part of ${BRAND_NAME} and I agree to use it at my own risk.`}
                         sx={{ mt: 2 }}
                       />
 
diff --git a/src/components/safe-apps/AppFrame/index.tsx b/src/components/safe-apps/AppFrame/index.tsx
index 7e10c614cf..bdcbe5fe1f 100644
--- a/src/components/safe-apps/AppFrame/index.tsx
+++ b/src/components/safe-apps/AppFrame/index.tsx
@@ -29,6 +29,7 @@ import { useCustomAppCommunicator } from '@/hooks/safe-apps/useCustomAppCommunic
 import { useSanctionedAddress } from '@/hooks/useSanctionedAddress'
 import BlockedAddress from '@/components/common/BlockedAddress'
 import { isSafePassApp } from '@/features/walletconnect/services/utils'
+import { BRAND_NAME } from '@/config/constants'
 
 const UNKNOWN_APP_NAME = 'Unknown Safe App'
 
@@ -132,7 +133,7 @@ const AppFrame = ({ appUrl, allowedFeaturesList, safeAppFromManifest, isNativeEm
     <>
       {!isNativeEmbed && (
         <Head>
-          <title>{`Safe{Wallet} - Safe Apps${remoteApp ? ' - ' + remoteApp.name : ''}`}</title>
+          <title>{`${BRAND_NAME} - Safe Apps${remoteApp ? ' - ' + remoteApp.name : ''}`}</title>
         </Head>
       )}
 
diff --git a/src/components/safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx b/src/components/safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx
index 43d453ba8b..55d76db4e5 100644
--- a/src/components/safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx
+++ b/src/components/safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx
@@ -1,6 +1,7 @@
 import Typography from '@mui/material/Typography'
 import PagePlaceholder from '@/components/common/PagePlaceholder'
 import AddCustomAppIcon from '@/public/images/apps/add-custom-app.svg'
+import { BRAND_NAME } from '@/config/constants'
 
 const SafeAppsZeroResultsPlaceholder = ({ searchQuery }: { searchQuery: string }) => {
   return (
@@ -16,7 +17,7 @@ const SafeAppsZeroResultsPlaceholder = ({ searchQuery }: { searchQuery: string }
           }}
         >
           No Safe Apps found matching <strong>{searchQuery}</strong>. Connect to dApps that haven&apos;t yet been
-          integrated with the {'Safe{Wallet}'} using WalletConnect.
+          integrated with the {BRAND_NAME} using WalletConnect.
         </Typography>
       }
     />
diff --git a/src/components/settings/DataManagement/ImportFileUpload.tsx b/src/components/settings/DataManagement/ImportFileUpload.tsx
index 4167e9fef6..e123b0e37f 100644
--- a/src/components/settings/DataManagement/ImportFileUpload.tsx
+++ b/src/components/settings/DataManagement/ImportFileUpload.tsx
@@ -5,6 +5,7 @@ import type { Dispatch, SetStateAction } from 'react'
 
 import FileUpload, { FileTypes } from '@/components/common/FileUpload'
 import InfoIcon from '@/public/images/notifications/info.svg'
+import { BRAND_NAME } from '@/config/constants'
 
 const AcceptedMimeTypes = {
   'application/json': ['.json'],
@@ -52,7 +53,7 @@ export const ImportFileUpload = ({
 
   return (
     <>
-      <Typography>Import {'Safe{Wallet}'} data by uploading a file in the area below.</Typography>
+      <Typography>Import {BRAND_NAME} data by uploading a file in the area below.</Typography>
 
       <FileUpload
         fileType={FileTypes.JSON}
@@ -74,7 +75,7 @@ export const ImportFileUpload = ({
             mr: 0.5,
           }}
         />
-        Only JSON files exported from the {'Safe{Wallet}'} can be imported.
+        Only JSON files exported from the {BRAND_NAME} can be imported.
       </Typography>
     </>
   )
diff --git a/src/components/settings/DataManagement/useGlobalImportFileParser.ts b/src/components/settings/DataManagement/useGlobalImportFileParser.ts
index b12ad7a79b..4e7df34d99 100644
--- a/src/components/settings/DataManagement/useGlobalImportFileParser.ts
+++ b/src/components/settings/DataManagement/useGlobalImportFileParser.ts
@@ -17,7 +17,7 @@ export const enum SAFE_EXPORT_VERSION {
 }
 
 export enum ImportErrors {
-  INVALID_VERSION = 'The file is not a Safe{Wallet} export.',
+  INVALID_VERSION = 'The file is not a valid export.',
   INVALID_JSON_FORMAT = 'The JSON format is invalid.',
   NO_IMPORT_DATA_FOUND = 'This file contains no importable data.',
 }
diff --git a/src/components/settings/FallbackHandler/index.tsx b/src/components/settings/FallbackHandler/index.tsx
index 1fa5e4f582..9c2c26054a 100644
--- a/src/components/settings/FallbackHandler/index.tsx
+++ b/src/components/settings/FallbackHandler/index.tsx
@@ -8,7 +8,7 @@ import type { ReactElement } from 'react'
 
 import EthHashInfo from '@/components/common/EthHashInfo'
 import useSafeInfo from '@/hooks/useSafeInfo'
-import { HelpCenterArticle } from '@/config/constants'
+import { BRAND_NAME, HelpCenterArticle } from '@/config/constants'
 import ExternalLink from '@/components/common/ExternalLink'
 import { useTxBuilderApp } from '@/hooks/safe-apps/useTxBuilderApp'
 import { useCurrentChain } from '@/hooks/useChains'
@@ -43,7 +43,7 @@ export const FallbackHandler = (): ReactElement | null => {
 
   const warning = !hasFallbackHandler ? (
     <>
-      The {'Safe{Wallet}'} may not work correctly as no fallback handler is currently set.
+      The {BRAND_NAME} may not work correctly as no fallback handler is currently set.
       {txBuilder && (
         <>
           {' '}
diff --git a/src/components/settings/SafeAppsSigningMethod/index.tsx b/src/components/settings/SafeAppsSigningMethod/index.tsx
index 21e21f880b..9b196b6430 100644
--- a/src/components/settings/SafeAppsSigningMethod/index.tsx
+++ b/src/components/settings/SafeAppsSigningMethod/index.tsx
@@ -3,7 +3,7 @@ import { SETTINGS_EVENTS, trackEvent } from '@/services/analytics'
 import { useAppDispatch, useAppSelector } from '@/store'
 import { selectOnChainSigning, setOnChainSigning } from '@/store/settingsSlice'
 import { FormControlLabel, Checkbox, Paper, Typography, FormGroup, Grid } from '@mui/material'
-import { HelpCenterArticle } from '@/config/constants'
+import { BRAND_NAME, HelpCenterArticle } from '@/config/constants'
 
 export const SafeAppsSigningMethod = () => {
   const onChainSigning = useAppSelector(selectOnChainSigning)
@@ -36,8 +36,8 @@ export const SafeAppsSigningMethod = () => {
               mb: 2,
             }}
           >
-            This setting determines how the {'Safe{Wallet}'} will sign message requests from Safe Apps. Gasless,
-            off-chain signing is used by default. Learn more about message signing{' '}
+            This setting determines how the {BRAND_NAME} will sign message requests from Safe Apps. Gasless, off-chain
+            signing is used by default. Learn more about message signing{' '}
             <ExternalLink href={HelpCenterArticle.SIGNED_MESSAGES}>here</ExternalLink>.
           </Typography>
           <FormGroup>
diff --git a/src/components/tx-flow/flows/UpsertRecovery/UpsertRecoveryFlowSettings.tsx b/src/components/tx-flow/flows/UpsertRecovery/UpsertRecoveryFlowSettings.tsx
index 430e996b83..b3f6b20b0c 100644
--- a/src/components/tx-flow/flows/UpsertRecovery/UpsertRecoveryFlowSettings.tsx
+++ b/src/components/tx-flow/flows/UpsertRecovery/UpsertRecoveryFlowSettings.tsx
@@ -30,7 +30,7 @@ import useSafeInfo from '@/hooks/useSafeInfo'
 import InfoIcon from '@/public/images/notifications/info.svg'
 import { RecovererWarning } from './RecovererSmartContractWarning'
 import ExternalLink from '@/components/common/ExternalLink'
-import { HelpCenterArticle, HelperCenterArticleTitles } from '@/config/constants'
+import { BRAND_NAME, HelpCenterArticle, HelperCenterArticleTitles } from '@/config/constants'
 import { TOOLTIP_TITLES } from '../../common/constants'
 import Track from '@/components/common/Track'
 import type { RecoveryStateItem } from '@/features/recovery/services/recovery-state'
@@ -281,7 +281,7 @@ export function UpsertRecoveryFlowSettings({
           <TxCard>
             <FormControlLabel
               data-testid="warning-section"
-              label="I understand that the Recoverer will be able to initiate recovery of this Safe Account and that I will only be informed within the Safe{Wallet}."
+              label={`I understand that the Recoverer will be able to initiate recovery of this Safe Account and that I will only be informed within the ${BRAND_NAME}.`}
               control={<Checkbox checked={understandsRisk} onChange={(_, checked) => setUnderstandsRisk(checked)} />}
               sx={{ pl: 2 }}
             />
diff --git a/src/config/constants.ts b/src/config/constants.ts
index ad98e94c9c..a4b4034c53 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -100,6 +100,8 @@ export const TWITTER_URL = 'https://twitter.com/safe'
 // Legal
 export const IS_OFFICIAL_HOST = process.env.NEXT_PUBLIC_IS_OFFICIAL_HOST === 'true'
 export const OFFICIAL_HOSTS = /app\.safe\.global|.+\.5afe\.dev|localhost:3000/
+export const BRAND_NAME = process.env.NEXT_PUBLIC_BRAND_NAME || (IS_OFFICIAL_HOST ? 'Safe{Wallet}' : 'Wallet fork')
+export const BRAND_LOGO = process.env.NEXT_PUBLIC_BRAND_LOGO || ''
 
 // Risk mitigation (Blockaid)
 export const BLOCKAID_API = 'https://client.blockaid.io'
diff --git a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
index da3859f2b8..aa0723349e 100644
--- a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
+++ b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
@@ -7,6 +7,7 @@ import { formatDurationFromMilliseconds, formatVisualAmount, maybePlural } from
 import { formatCurrency } from '@/utils/formatNumber'
 import StakingStatus from '@/features/stake/components/StakingStatus'
 import { InfoTooltip } from '@/features/stake/components/InfoTooltip'
+import { BRAND_NAME } from '@/config/constants'
 
 type StakingOrderConfirmationViewProps = {
   order: NativeStakingDepositConfirmationView | StakingTxDepositInfo
@@ -55,7 +56,9 @@ const StakingConfirmationTxDeposit = ({ order, isTxDetails }: StakingOrderConfir
         title={
           <>
             Fee
-            <InfoTooltip title="The widget fee incurred here is charged by Kiln for the operation of this widget. The fee is calculated automatically. Part of the fee will contribute to a license fee that supports the Safe Community. Neither the Safe Ecosystem Foundation nor Safe{Wallet} operates the Kiln Widget and/or Kiln." />
+            <InfoTooltip
+              title={`The widget fee incurred here is charged by Kiln for the operation of this widget. The fee is calculated automatically. Part of the fee will contribute to a license fee that supports the Safe Community. Neither the Safe Ecosystem Foundation nor ${BRAND_NAME} operates the Kiln Widget and/or Kiln.`}
+            />
           </>
         }
       >
diff --git a/src/features/swap/components/SwapOrderConfirmationView/OrderFeeConfirmationView.tsx b/src/features/swap/components/SwapOrderConfirmationView/OrderFeeConfirmationView.tsx
index 8fcf7d3db9..d54fa80bb9 100644
--- a/src/features/swap/components/SwapOrderConfirmationView/OrderFeeConfirmationView.tsx
+++ b/src/features/swap/components/SwapOrderConfirmationView/OrderFeeConfirmationView.tsx
@@ -1,7 +1,7 @@
 import type { SwapOrderConfirmationView, TwapOrderConfirmationView } from '@safe-global/safe-gateway-typescript-sdk'
 import { getOrderFeeBps } from '@/features/swap/helpers/utils'
 import { DataRow } from '@/components/common/Table/DataRow'
-import { HelpCenterArticle } from '@/config/constants'
+import { BRAND_NAME, HelpCenterArticle } from '@/config/constants'
 import { HelpIconTooltip } from '@/features/swap/components/HelpIconTooltip'
 import MUILink from '@mui/material/Link'
 
@@ -24,7 +24,7 @@ export const OrderFeeConfirmationView = ({
           <>
             The tiered widget fee incurred here is charged by CoW Protocol for the operation of this widget. The fee is
             automatically calculated into this quote. Part of the fee will contribute to a license fee that supports the
-            Safe Community. Neither the Safe Ecosystem Foundation nor {`Safe{Wallet}`} operate the CoW Swap Widget
+            Safe Community. Neither the Safe Ecosystem Foundation nor {`${BRAND_NAME}`} operate the CoW Swap Widget
             and/or CoW Swap.
             <MUILink href={HelpCenterArticle.SWAP_WIDGET_FEES} target="_blank" rel="noopener noreferrer">
               Learn more
diff --git a/src/features/swap/index.tsx b/src/features/swap/index.tsx
index 12735115ba..2a23081533 100644
--- a/src/features/swap/index.tsx
+++ b/src/features/swap/index.tsx
@@ -40,6 +40,7 @@ import { FEATURES } from '@/utils/chains'
 import { useGetIsSanctionedQuery } from '@/store/api/ofac'
 import { skipToken } from '@reduxjs/toolkit/query/react'
 import { getKeyWithTrueValue } from '@/utils/helpers'
+import { BRAND_NAME } from '@/config/constants'
 
 const BASE_URL = typeof window !== 'undefined' && window.location.origin ? window.location.origin : ''
 
@@ -148,8 +149,7 @@ const SwapWidget = ({ sell }: Params) => {
     },
     content: {
       feeLabel: 'Widget Fee',
-      feeTooltipMarkdown:
-        'The [tiered widget fee](https://help.safe.global/en/articles/178530-how-does-the-widget-fee-work-for-native-swaps) incurred here is charged by CoW Protocol for the operation of this widget. The fee is automatically calculated into this quote. Part of the fee will contribute to a license fee that supports the Safe Community. Neither the Safe Ecosystem Foundation nor Safe{Wallet} operate the CoW Swap Widget and/or CoW Swap',
+      feeTooltipMarkdown: `The [tiered widget fee](https://help.safe.global/en/articles/178530-how-does-the-widget-fee-work-for-native-swaps) incurred here is charged by CoW Protocol for the operation of this widget. The fee is automatically calculated into this quote. Part of the fee will contribute to a license fee that supports the Safe Community. Neither the Safe Ecosystem Foundation nor ${BRAND_NAME} operate the CoW Swap Widget and/or CoW Swap`,
     },
   })
 
diff --git a/src/features/walletconnect/components/WcConnectionForm/index.tsx b/src/features/walletconnect/components/WcConnectionForm/index.tsx
index 7cdbdd79d8..399892b6bb 100644
--- a/src/features/walletconnect/components/WcConnectionForm/index.tsx
+++ b/src/features/walletconnect/components/WcConnectionForm/index.tsx
@@ -12,6 +12,7 @@ import css from './styles.module.css'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import Track from '@/components/common/Track'
 import { WALLETCONNECT_EVENTS } from '@/services/analytics/events/walletconnect'
+import { BRAND_NAME } from '@/config/constants'
 
 const WC_HINTS_KEY = 'wcHints'
 
@@ -60,7 +61,7 @@ export const WcConnectionForm = ({ sessions, uri }: { sessions: SessionTypes.Str
           }}
         >
           {safeLoaded
-            ? `Paste the pairing code below to connect to your Safe{Wallet} via WalletConnect`
+            ? `Paste the pairing code below to connect to your ${BRAND_NAME} via WalletConnect`
             : `Please open one of your Safe Accounts to connect to via WalletConnect`}
         </Typography>
 
diff --git a/src/features/walletconnect/components/WcLogoHeader/index.tsx b/src/features/walletconnect/components/WcLogoHeader/index.tsx
index fa128879f5..78c8373b67 100644
--- a/src/features/walletconnect/components/WcLogoHeader/index.tsx
+++ b/src/features/walletconnect/components/WcLogoHeader/index.tsx
@@ -3,6 +3,7 @@ import type { ReactElement } from 'react'
 import WalletConnect from '@/public/images/common/walletconnect.svg'
 import Alert from '@/public/images/notifications/alert.svg'
 import css from './styles.module.css'
+import { BRAND_NAME } from '@/config/constants'
 
 const WcLogoHeader = ({ errorMessage }: { errorMessage?: string }): ReactElement => {
   return (
@@ -19,7 +20,7 @@ const WcLogoHeader = ({ errorMessage }: { errorMessage?: string }): ReactElement
           mb: 0.5,
         }}
       >
-        {errorMessage || 'Connect dApps to Safe{Wallet}'}
+        {errorMessage || `Connect dApps to ${BRAND_NAME}`}
       </Typography>
     </>
   )
diff --git a/src/features/walletconnect/components/WcProposalForm/useCompatibilityWarning.ts b/src/features/walletconnect/components/WcProposalForm/useCompatibilityWarning.ts
index 7e7093165b..84bd2e40ba 100644
--- a/src/features/walletconnect/components/WcProposalForm/useCompatibilityWarning.ts
+++ b/src/features/walletconnect/components/WcProposalForm/useCompatibilityWarning.ts
@@ -5,6 +5,7 @@ import useChains from '@/hooks/useChains'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { capitalize } from '@/utils/formatters'
 import { getPeerName, isBlockedBridge, isWarnedBridge } from '@/features/walletconnect/services/utils'
+import { BRAND_NAME } from '@/config/constants'
 
 const NAME_FALLBACK = 'this dApp'
 const NAME_PLACEHOLDER = '%%name%%'
@@ -13,7 +14,7 @@ const CHAIN_PLACEHOLDER = '%%chain%%'
 const Warnings: Record<string, { severity: AlertColor; message: string }> = {
   BLOCKED_BRIDGE: {
     severity: 'error',
-    message: `${NAME_PLACEHOLDER} is a bridge that is incompatible with Safe{Wallet} — the bridged funds will be lost. Consider using a different bridge.`,
+    message: `${NAME_PLACEHOLDER} is a bridge that is incompatible with ${BRAND_NAME} — the bridged funds will be lost. Consider using a different bridge.`,
   },
   WARNED_BRIDGE: {
     severity: 'warning',
diff --git a/src/features/walletconnect/constants.ts b/src/features/walletconnect/constants.ts
index 26f0e7ee7a..03ae788421 100644
--- a/src/features/walletconnect/constants.ts
+++ b/src/features/walletconnect/constants.ts
@@ -1,3 +1,5 @@
+import { BRAND_NAME } from '@/config/constants'
+
 export const SAFE_COMPATIBLE_METHODS = [
   'eth_accounts',
   'net_version',
@@ -31,7 +33,7 @@ export const SAFE_COMPATIBLE_METHODS = [
 export const SAFE_COMPATIBLE_EVENTS = ['chainChanged', 'accountsChanged']
 
 export const SAFE_WALLET_METADATA = {
-  name: 'Safe{Wallet}',
+  name: BRAND_NAME,
   url: 'https://app.safe.global',
   description: 'Smart contract wallet for Ethereum',
   icons: ['https://app.safe.global/images/logo-round.svg'],
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 6ff90ba635..94f5d8bd6d 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -12,7 +12,7 @@ import { setBaseUrl as setNewGatewayBaseUrl } from '@safe-global/safe-client-gat
 import { CacheProvider, type EmotionCache } from '@emotion/react'
 import SafeThemeProvider from '@/components/theme/SafeThemeProvider'
 import '@/styles/globals.css'
-import { IS_PRODUCTION, GATEWAY_URL_STAGING, GATEWAY_URL_PRODUCTION } from '@/config/constants'
+import { IS_PRODUCTION, GATEWAY_URL_STAGING, GATEWAY_URL_PRODUCTION, BRAND_NAME } from '@/config/constants'
 import { makeStore, useHydrateStore } from '@/store'
 import PageLayout from '@/components/common/PageLayout'
 import useLoadableStores from '@/hooks/useLoadableStores'
@@ -116,7 +116,7 @@ const WebCoreApp = ({
   return (
     <Provider store={reduxStore}>
       <Head>
-        <title key="default-title">{'Safe{Wallet}'}</title>
+        <title key="default-title">{BRAND_NAME}</title>
         <MetaTags prefetchUrl={GATEWAY_URL} />
       </Head>
 
diff --git a/src/pages/_offline.tsx b/src/pages/_offline.tsx
index 4ff520c244..a8e870b6cb 100644
--- a/src/pages/_offline.tsx
+++ b/src/pages/_offline.tsx
@@ -2,12 +2,13 @@ import { Box, Paper, Typography } from '@mui/material'
 import WifiOffIcon from '@mui/icons-material/WifiOff'
 import type { NextPage } from 'next'
 import Head from 'next/head'
+import { BRAND_NAME } from '@/config/constants'
 
 const Offline: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Offline'}</title>
+        <title>{`${BRAND_NAME} – Offline`}</title>
       </Head>
       <main>
         <Box
diff --git a/src/pages/addOwner.tsx b/src/pages/addOwner.tsx
index 016286c181..cc1052036f 100644
--- a/src/pages/addOwner.tsx
+++ b/src/pages/addOwner.tsx
@@ -5,6 +5,7 @@ import { useContext, useEffect } from 'react'
 import { TxModalContext } from '@/components/tx-flow'
 import { AddOwnerFlow } from '@/components/tx-flow/flows'
 import { AppRoutes } from '@/config/routes'
+import { BRAND_NAME } from '@/config/constants'
 
 const AddOwner: NextPage = () => {
   const router = useRouter()
@@ -23,7 +24,7 @@ const AddOwner: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Add Signer'}</title>
+        <title>{`${BRAND_NAME} – Add Signer`}</title>
       </Head>
     </>
   )
diff --git a/src/pages/address-book.tsx b/src/pages/address-book.tsx
index d1eefe0dfa..744fea1f46 100644
--- a/src/pages/address-book.tsx
+++ b/src/pages/address-book.tsx
@@ -1,12 +1,13 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import AddressBookTable from '@/components/address-book/AddressBookTable'
+import { BRAND_NAME } from '@/config/constants'
 
 const AddressBook: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Address book'}</title>
+        <title>{`${BRAND_NAME} – Address book`}</title>
       </Head>
 
       <AddressBookTable />
diff --git a/src/pages/apps/bookmarked.tsx b/src/pages/apps/bookmarked.tsx
index 55e77b66a4..34e6571602 100644
--- a/src/pages/apps/bookmarked.tsx
+++ b/src/pages/apps/bookmarked.tsx
@@ -3,6 +3,7 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import { AppRoutes } from '@/config/routes'
+import { BRAND_NAME } from '@/config/constants'
 
 const BookmarkedSafeApps: NextPage = () => {
   const router = useRouter()
@@ -14,7 +15,7 @@ const BookmarkedSafeApps: NextPage = () => {
 
   return (
     <Head>
-      <title>{'Safe{Wallet} – Safe Apps'}</title>
+      <title>{`${BRAND_NAME} – Safe Apps`}</title>
     </Head>
   )
 }
diff --git a/src/pages/apps/custom.tsx b/src/pages/apps/custom.tsx
index eafcae0e1d..01224eeb6f 100644
--- a/src/pages/apps/custom.tsx
+++ b/src/pages/apps/custom.tsx
@@ -9,6 +9,7 @@ import SafeAppsSDKLink from '@/components/safe-apps/SafeAppsSDKLink'
 import { RemoveCustomAppModal } from '@/components/safe-apps/RemoveCustomAppModal'
 import type { SafeAppData } from '@safe-global/safe-gateway-typescript-sdk'
 import { SAFE_APPS_LABELS } from '@/services/analytics'
+import { BRAND_NAME } from '@/config/constants'
 
 const CustomSafeApps: NextPage = () => {
   // TODO: create a custom hook instead of use useSafeApps
@@ -30,7 +31,7 @@ const CustomSafeApps: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Custom Safe Apps'}</title>
+        <title>{`${BRAND_NAME} – Custom Safe Apps`}</title>
       </Head>
 
       <SafeAppsSDKLink />
diff --git a/src/pages/apps/index.tsx b/src/pages/apps/index.tsx
index 72252d4f67..85c87216fa 100644
--- a/src/pages/apps/index.tsx
+++ b/src/pages/apps/index.tsx
@@ -15,6 +15,7 @@ import SafeAppsFilters from '@/components/safe-apps/SafeAppsFilters'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
 import { SAFE_APPS_LABELS } from '@/services/analytics'
+import { BRAND_NAME } from '@/config/constants'
 
 const SafeApps: NextPage = () => {
   const router = useRouter()
@@ -50,7 +51,7 @@ const SafeApps: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Safe Apps'}</title>
+        <title>{`${BRAND_NAME} – Safe Apps`}</title>
       </Head>
 
       <SafeAppsSDKLink />
diff --git a/src/pages/balances/index.tsx b/src/pages/balances/index.tsx
index a1ee8db0ee..993e61d1ca 100644
--- a/src/pages/balances/index.tsx
+++ b/src/pages/balances/index.tsx
@@ -14,6 +14,7 @@ import TokenListSelect from '@/components/balances/TokenListSelect'
 import StakingBanner from '@/components/dashboard/StakingBanner'
 import useIsStakingBannerEnabled from '@/features/stake/hooks/useIsStakingBannerEnabled'
 import { Box } from '@mui/material'
+import { BRAND_NAME } from '@/config/constants'
 
 const Balances: NextPage = () => {
   const { error } = useBalances()
@@ -24,7 +25,7 @@ const Balances: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Assets'}</title>
+        <title>{`${BRAND_NAME} – Assets`}</title>
       </Head>
       <AssetsHeader>
         <HiddenTokenButton showHiddenAssets={showHiddenAssets} toggleShowHiddenAssets={toggleShowHiddenAssets} />
diff --git a/src/pages/balances/nfts.tsx b/src/pages/balances/nfts.tsx
index fcf5976766..e8e2fa77ce 100644
--- a/src/pages/balances/nfts.tsx
+++ b/src/pages/balances/nfts.tsx
@@ -5,7 +5,7 @@ import { Grid, Skeleton, Typography } from '@mui/material'
 import AssetsHeader from '@/components/balances/AssetsHeader'
 import NftCollections from '@/components/nfts/NftCollections'
 import SafeAppCard from '@/components/safe-apps/SafeAppCard'
-import { SafeAppsTag } from '@/config/constants'
+import { BRAND_NAME, SafeAppsTag } from '@/config/constants'
 import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
 
 // `React.memo` requires a `displayName`
@@ -57,7 +57,7 @@ const NFTs: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – NFTs'}</title>
+        <title>{`${BRAND_NAME} – NFTs`}</title>
       </Head>
 
       <AssetsHeader />
diff --git a/src/pages/bridge.tsx b/src/pages/bridge.tsx
index 34a04320ce..26a76ab6d9 100644
--- a/src/pages/bridge.tsx
+++ b/src/pages/bridge.tsx
@@ -2,12 +2,13 @@ import Head from 'next/head'
 import type { NextPage } from 'next'
 
 import { Bridge } from '@/features/bridge/components/Bridge'
+import { BRAND_NAME } from '@/config/constants'
 
 const BridgePage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Bridge'}</title>
+        <title>{`${BRAND_NAME} – Bridge`}</title>
       </Head>
       <Bridge />
     </>
diff --git a/src/pages/cookie.tsx b/src/pages/cookie.tsx
index ed54e5b45b..5bdcbdd7c6 100644
--- a/src/pages/cookie.tsx
+++ b/src/pages/cookie.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link'
 import MUILink from '@mui/material/Link'
 import { AppRoutes } from '@/config/routes'
 import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
+import { BRAND_NAME } from '@/config/constants'
 
 const SafeCookiePolicy = () => (
   <div>
@@ -595,7 +596,7 @@ const CookiePolicy: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Cookie policy'}</title>
+        <title>{`${BRAND_NAME} – Cookie policy`}</title>
       </Head>
 
       <main>{isOfficialHost && <SafeCookiePolicy />}</main>
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 62590cca4c..9abd21109a 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -2,12 +2,13 @@ import type { NextPage } from 'next'
 import Head from 'next/head'
 
 import Dashboard from '@/components/dashboard'
+import { BRAND_NAME } from '@/config/constants'
 
 const Home: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Dashboard'}</title>
+        <title>{`${BRAND_NAME} – Dashboard`}</title>
       </Head>
 
       <main>
diff --git a/src/pages/imprint.tsx b/src/pages/imprint.tsx
index 9424881e73..d2492221c7 100644
--- a/src/pages/imprint.tsx
+++ b/src/pages/imprint.tsx
@@ -4,6 +4,7 @@ import { Typography } from '@mui/material'
 import Link from 'next/link'
 import MUILink from '@mui/material/Link'
 import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
+import { BRAND_NAME } from '@/config/constants'
 
 const SafeImprint = () => (
   <div>
@@ -117,7 +118,7 @@ const Imprint: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Imprint'}</title>
+        <title>{`${BRAND_NAME} – Imprint`}</title>
       </Head>
 
       <main>{isOfficialHost && <SafeImprint />}</main>
diff --git a/src/pages/licenses.tsx b/src/pages/licenses.tsx
index d9e770cddf..1bf2f0f78e 100644
--- a/src/pages/licenses.tsx
+++ b/src/pages/licenses.tsx
@@ -4,6 +4,7 @@ import { Typography, Table, TableBody, TableRow, TableCell, TableHead, TableCont
 import ExternalLink from '@/components/common/ExternalLink'
 import Paper from '@mui/material/Paper'
 import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
+import { BRAND_NAME } from '@/config/constants'
 
 const SafeLicenses = () => (
   <>
@@ -34,7 +35,7 @@ const SafeLicenses = () => (
         }}
       >
         This page contains a list of attribution notices for third party software that may be contained in portions of
-        the {'Safe{Wallet}'}. We thank the open source community for all of their contributions.
+        the {BRAND_NAME}. We thank the open source community for all of their contributions.
       </Typography>
       <Typography
         variant="h2"
@@ -748,7 +749,7 @@ const Licenses: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Licenses'}</title>
+        <title>{`${BRAND_NAME} – Licenses`}</title>
       </Head>
 
       <main>{isOfficialHost && <SafeLicenses />}</main>
diff --git a/src/pages/new-safe/advanced-create.tsx b/src/pages/new-safe/advanced-create.tsx
index a3a1b54d10..76248ff466 100644
--- a/src/pages/new-safe/advanced-create.tsx
+++ b/src/pages/new-safe/advanced-create.tsx
@@ -2,12 +2,13 @@ import Head from 'next/head'
 import type { NextPage } from 'next'
 
 import AdvancedCreateSafe from '@/components/new-safe/create/AdvancedCreateSafe'
+import { BRAND_NAME } from '@/config/constants'
 
 const Open: NextPage = () => {
   return (
     <main>
       <Head>
-        <title>{'Safe{Wallet} – Advanced Safe creation'}</title>
+        <title>{`${BRAND_NAME} – Advanced Safe creation`}</title>
       </Head>
 
       <AdvancedCreateSafe />
diff --git a/src/pages/new-safe/create.tsx b/src/pages/new-safe/create.tsx
index d8f53e2c55..77c85474af 100644
--- a/src/pages/new-safe/create.tsx
+++ b/src/pages/new-safe/create.tsx
@@ -2,12 +2,13 @@ import Head from 'next/head'
 import type { NextPage } from 'next'
 
 import CreateSafe from '@/components/new-safe/create'
+import { BRAND_NAME } from '@/config/constants'
 
 const Open: NextPage = () => {
   return (
     <main>
       <Head>
-        <title>{'Safe{Wallet} – Create Safe Account'}</title>
+        <title>{`${BRAND_NAME} – Create Safe Account`}</title>
       </Head>
 
       <CreateSafe />
diff --git a/src/pages/new-safe/load.tsx b/src/pages/new-safe/load.tsx
index 427436f417..22155d9bcf 100644
--- a/src/pages/new-safe/load.tsx
+++ b/src/pages/new-safe/load.tsx
@@ -2,6 +2,7 @@ import type { NextPage } from 'next'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import LoadSafe, { loadSafeDefaultData } from '@/components/new-safe/load'
+import { BRAND_NAME } from '@/config/constants'
 
 const Load: NextPage = () => {
   const router = useRouter()
@@ -11,7 +12,7 @@ const Load: NextPage = () => {
   return (
     <main>
       <Head>
-        <title>{'Safe{Wallet} – Add Safe Account'}</title>
+        <title>{`${BRAND_NAME} – Add Safe Account`}</title>
       </Head>
 
       {safeAddress ? (
diff --git a/src/pages/privacy.tsx b/src/pages/privacy.tsx
index d4e2783162..f9adfcd54f 100644
--- a/src/pages/privacy.tsx
+++ b/src/pages/privacy.tsx
@@ -4,6 +4,7 @@ import type { NextPage } from 'next'
 import Head from 'next/head'
 import SafePrivacyPolicy from '@/markdown/privacy/privacy.md'
 import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
+import { BRAND_NAME } from '@/config/constants'
 
 const overrideComponents: MDXComponents = {
   a: CustomLink,
@@ -15,7 +16,7 @@ const PrivacyPolicy: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Privacy policy'}</title>
+        <title>{`${BRAND_NAME} – Privacy policy`}</title>
       </Head>
 
       <main>{isOfficialHost && <SafePrivacyPolicy components={overrideComponents} />}</main>
diff --git a/src/pages/settings/appearance.tsx b/src/pages/settings/appearance.tsx
index 6832244d2d..ad1b9ee02e 100644
--- a/src/pages/settings/appearance.tsx
+++ b/src/pages/settings/appearance.tsx
@@ -9,6 +9,7 @@ import SettingsHeader from '@/components/settings/SettingsHeader'
 import { trackEvent, SETTINGS_EVENTS } from '@/services/analytics'
 import { useDarkMode } from '@/hooks/useDarkMode'
 import ExternalLink from '@/components/common/ExternalLink'
+import { BRAND_NAME } from '@/config/constants'
 
 const Appearance: NextPage = () => {
   const dispatch = useAppDispatch()
@@ -32,7 +33,7 @@ const Appearance: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings – Appearance'}</title>
+        <title>{`${BRAND_NAME} – Settings – Appearance`}</title>
       </Head>
       <SettingsHeader />
       <main>
diff --git a/src/pages/settings/cookies.tsx b/src/pages/settings/cookies.tsx
index 301a969e55..a5769aad06 100644
--- a/src/pages/settings/cookies.tsx
+++ b/src/pages/settings/cookies.tsx
@@ -3,12 +3,13 @@ import SettingsHeader from '@/components/settings/SettingsHeader'
 import { Grid, Paper, Typography } from '@mui/material'
 import type { NextPage } from 'next'
 import Head from 'next/head'
+import { BRAND_NAME } from '@/config/constants'
 
 const Cookies: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings – Cookies'}</title>
+        <title>{`${BRAND_NAME} – Settings – Cookies`}</title>
       </Head>
       <SettingsHeader />
       <main>
diff --git a/src/pages/settings/data.tsx b/src/pages/settings/data.tsx
index 65d1e44b9f..42df732cce 100644
--- a/src/pages/settings/data.tsx
+++ b/src/pages/settings/data.tsx
@@ -1,5 +1,6 @@
 import DataManagement from '@/components/settings/DataManagement'
 import SettingsHeader from '@/components/settings/SettingsHeader'
+import { BRAND_NAME } from '@/config/constants'
 import type { NextPage } from 'next'
 import Head from 'next/head'
 
@@ -7,7 +8,7 @@ const Data: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings – Data'}</title>
+        <title>{`${BRAND_NAME} – Settings – Data`}</title>
       </Head>
 
       <SettingsHeader />
diff --git a/src/pages/settings/environment-variables.tsx b/src/pages/settings/environment-variables.tsx
index 1e46bfa953..d0c92b9d69 100644
--- a/src/pages/settings/environment-variables.tsx
+++ b/src/pages/settings/environment-variables.tsx
@@ -2,12 +2,13 @@ import type { NextPage } from 'next'
 import Head from 'next/head'
 import SettingsHeader from '@/components/settings/SettingsHeader'
 import EnvironmentVariables from '@/components/settings/EnvironmentVariables'
+import { BRAND_NAME } from '@/config/constants'
 
 const EnvironmentVariablesPage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings – Environment variables'}</title>
+        <title>{`${BRAND_NAME} – Settings – Environment variables`}</title>
       </Head>
 
       <SettingsHeader />
diff --git a/src/pages/settings/index.tsx b/src/pages/settings/index.tsx
index 1605ff955b..adf1af6a03 100644
--- a/src/pages/settings/index.tsx
+++ b/src/pages/settings/index.tsx
@@ -3,6 +3,7 @@ import type { NextPage } from 'next'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { generalSettingsNavItems, settingsNavItems } from '@/components/sidebar/SidebarNavigation/config'
+import { BRAND_NAME } from '@/config/constants'
 
 const Settings: NextPage = () => {
   const router = useRouter()
@@ -17,7 +18,7 @@ const Settings: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings'}</title>
+        <title>{`${BRAND_NAME} – Settings`}</title>
       </Head>
     </>
   )
diff --git a/src/pages/settings/modules.tsx b/src/pages/settings/modules.tsx
index a25bbada52..cffebc4ca8 100644
--- a/src/pages/settings/modules.tsx
+++ b/src/pages/settings/modules.tsx
@@ -5,12 +5,13 @@ import SafeModules from '@/components/settings/SafeModules'
 import TransactionGuards from '@/components/settings/TransactionGuards'
 import SettingsHeader from '@/components/settings/SettingsHeader'
 import { FallbackHandler } from '@/components/settings/FallbackHandler'
+import { BRAND_NAME } from '@/config/constants'
 
 const Modules: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings – Modules'}</title>
+        <title>{`${BRAND_NAME} – Settings – Modules`}</title>
       </Head>
 
       <SettingsHeader />
diff --git a/src/pages/settings/notifications.tsx b/src/pages/settings/notifications.tsx
index 66dc3cda37..d6c3760779 100644
--- a/src/pages/settings/notifications.tsx
+++ b/src/pages/settings/notifications.tsx
@@ -5,6 +5,7 @@ import SettingsHeader from '@/components/settings/SettingsHeader'
 import { PushNotifications } from '@/components/settings/PushNotifications'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
+import { BRAND_NAME } from '@/config/constants'
 
 const NotificationsPage: NextPage = () => {
   const isNotificationFeatureEnabled = useHasFeature(FEATURES.PUSH_NOTIFICATIONS)
@@ -16,7 +17,7 @@ const NotificationsPage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings – Notifications'}</title>
+        <title>{`${BRAND_NAME} – Settings – Notifications`}</title>
       </Head>
 
       <SettingsHeader />
diff --git a/src/pages/settings/safe-apps/index.tsx b/src/pages/settings/safe-apps/index.tsx
index 3cb576210a..71c2a17f4b 100644
--- a/src/pages/settings/safe-apps/index.tsx
+++ b/src/pages/settings/safe-apps/index.tsx
@@ -4,12 +4,13 @@ import Head from 'next/head'
 import SafeAppsPermissions from '@/components/settings/SafeAppsPermissions'
 import SettingsHeader from '@/components/settings/SettingsHeader'
 import { SafeAppsSigningMethod } from '@/components/settings/SafeAppsSigningMethod'
+import { BRAND_NAME } from '@/config/constants'
 
 const SafeAppsPermissionsPage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings – Safe Apps'}</title>
+        <title>{`${BRAND_NAME} – Settings – Safe Apps`}</title>
       </Head>
 
       <SettingsHeader />
diff --git a/src/pages/settings/security.tsx b/src/pages/settings/security.tsx
index 1931fc7145..c6f93543b7 100644
--- a/src/pages/settings/security.tsx
+++ b/src/pages/settings/security.tsx
@@ -3,12 +3,13 @@ import Head from 'next/head'
 
 import SettingsHeader from '@/components/settings/SettingsHeader'
 import SecurityLogin from '@/components/settings/SecurityLogin'
+import { BRAND_NAME } from '@/config/constants'
 
 const SecurityPage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings – Security'}</title>
+        <title>{`${BRAND_NAME} – Settings – Security`}</title>
       </Head>
 
       <SettingsHeader />
diff --git a/src/pages/settings/setup.tsx b/src/pages/settings/setup.tsx
index 60338a6c79..d8e25b87e1 100644
--- a/src/pages/settings/setup.tsx
+++ b/src/pages/settings/setup.tsx
@@ -9,6 +9,7 @@ import useSafeInfo from '@/hooks/useSafeInfo'
 import SettingsHeader from '@/components/settings/SettingsHeader'
 import ProposersList from 'src/components/settings/ProposersList'
 import SpendingLimits from '@/components/settings/SpendingLimits'
+import { BRAND_NAME } from '@/config/constants'
 
 const Setup: NextPage = () => {
   const { safe, safeLoaded } = useSafeInfo()
@@ -19,7 +20,7 @@ const Setup: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Settings – Setup'}</title>
+        <title>{`${BRAND_NAME} – Settings – Setup`}</title>
       </Head>
       <SettingsHeader />
       <main>
diff --git a/src/pages/share/safe-app.tsx b/src/pages/share/safe-app.tsx
index 3cfe2f7d1f..054474e039 100644
--- a/src/pages/share/safe-app.tsx
+++ b/src/pages/share/safe-app.tsx
@@ -3,6 +3,7 @@ import { Box, CircularProgress } from '@mui/material'
 import { useSafeAppUrl } from '@/hooks/safe-apps/useSafeAppUrl'
 import { SafeAppLanding } from '@/components/safe-apps/SafeAppLandingPage'
 import { useCurrentChain } from '@/hooks/useChains'
+import { BRAND_NAME } from '@/config/constants'
 
 const ShareSafeApp = () => {
   const appUrl = useSafeAppUrl()
@@ -11,7 +12,7 @@ const ShareSafeApp = () => {
   return (
     <>
       <Head>
-        <title>{`Safe{Wallet} – Safe Apps`}</title>
+        <title>{`${BRAND_NAME} – Safe Apps`}</title>
       </Head>
       <main>
         {appUrl && chain ? (
diff --git a/src/pages/stake.tsx b/src/pages/stake.tsx
index 9e563bf8d0..b06e81d477 100644
--- a/src/pages/stake.tsx
+++ b/src/pages/stake.tsx
@@ -4,6 +4,7 @@ import dynamic from 'next/dynamic'
 import { Typography } from '@mui/material'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
+import { BRAND_NAME } from '@/config/constants'
 
 const LazyStakePage = dynamic(() => import('@/features/stake/components/StakePage'), { ssr: false })
 
@@ -13,7 +14,7 @@ const StakePage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Stake'}</title>
+        <title>{`${BRAND_NAME} – Stake`}</title>
       </Head>
       {isFeatureEnabled === true ? (
         <LazyStakePage />
diff --git a/src/pages/swap.tsx b/src/pages/swap.tsx
index d374e81f1f..942cc7fd09 100644
--- a/src/pages/swap.tsx
+++ b/src/pages/swap.tsx
@@ -5,6 +5,7 @@ import dynamic from 'next/dynamic'
 import { Typography } from '@mui/material'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
+import { BRAND_NAME } from '@/config/constants'
 
 // Cow Swap expects native token addresses to be in the format '0xeeee...eeee'
 const adjustEthAddress = (address: string) => {
@@ -33,7 +34,7 @@ const SwapPage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Swap'}</title>
+        <title>{`${BRAND_NAME} – Swap`}</title>
       </Head>
       <main style={{ height: 'calc(100vh - 52px)' }}>
         {isFeatureEnabled === true ? (
diff --git a/src/pages/terms.tsx b/src/pages/terms.tsx
index f7fec3d5dc..c8805f925c 100644
--- a/src/pages/terms.tsx
+++ b/src/pages/terms.tsx
@@ -4,6 +4,7 @@ import Head from 'next/head'
 import SafeTerms from '@/markdown/terms/terms.md'
 import type { MDXComponents } from 'mdx/types'
 import { useIsOfficialHost } from '@/hooks/useIsOfficialHost'
+import { BRAND_NAME } from '@/config/constants'
 
 const overrideComponents: MDXComponents = {
   a: CustomLink,
@@ -15,7 +16,7 @@ const Terms: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Terms'}</title>
+        <title>{`${BRAND_NAME} – Terms`}</title>
       </Head>
 
       <main>{isOfficialHost && <SafeTerms components={overrideComponents} />}</main>
diff --git a/src/pages/transactions/history.tsx b/src/pages/transactions/history.tsx
index b014bbe90f..d0049972d6 100644
--- a/src/pages/transactions/history.tsx
+++ b/src/pages/transactions/history.tsx
@@ -11,6 +11,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import TxFilterForm from '@/components/transactions/TxFilterForm'
 import TrustedToggle from '@/components/transactions/TrustedToggle'
 import { useTxFilter } from '@/utils/tx-history-filter'
+import { BRAND_NAME } from '@/config/constants'
 
 const History: NextPage = () => {
   const [filter] = useTxFilter()
@@ -25,7 +26,7 @@ const History: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Transaction history'}</title>
+        <title>{`${BRAND_NAME} – Transaction history`}</title>
       </Head>
       <TxHeader>
         <TrustedToggle />
diff --git a/src/pages/transactions/messages.tsx b/src/pages/transactions/messages.tsx
index 01ec4892af..e39e0659a3 100644
--- a/src/pages/transactions/messages.tsx
+++ b/src/pages/transactions/messages.tsx
@@ -10,6 +10,7 @@ import SignedMessagesHelpLink from '@/components/transactions/SignedMessagesHelp
 import { AppRoutes } from '@/config/routes'
 import { useCurrentChain } from '@/hooks/useChains'
 import { hasFeature } from '@/utils/chains'
+import { BRAND_NAME } from '@/config/constants'
 
 const Messages: NextPage = () => {
   const chain = useCurrentChain()
@@ -26,7 +27,7 @@ const Messages: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Messages'}</title>
+        <title>{`${BRAND_NAME} – Messages`}</title>
       </Head>
 
       <TxHeader>
diff --git a/src/pages/transactions/msg.tsx b/src/pages/transactions/msg.tsx
index 82cd4e62e4..6ece3d1d41 100644
--- a/src/pages/transactions/msg.tsx
+++ b/src/pages/transactions/msg.tsx
@@ -3,12 +3,13 @@ import Head from 'next/head'
 
 import Typography from '@mui/material/Typography'
 import SingleMsg from '@/components/safe-messages/SingleMsg'
+import { BRAND_NAME } from '@/config/constants'
 
 const SingleTransaction: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Message details'}</title>
+        <title>{`${BRAND_NAME} – Message details`}</title>
       </Head>
       <main>
         <Typography
diff --git a/src/pages/transactions/queue.tsx b/src/pages/transactions/queue.tsx
index cc44deaf1b..60ebc2d665 100644
--- a/src/pages/transactions/queue.tsx
+++ b/src/pages/transactions/queue.tsx
@@ -8,6 +8,7 @@ import { Box } from '@mui/material'
 import { BatchExecuteHoverProvider } from '@/components/transactions/BatchExecuteButton/BatchExecuteHoverProvider'
 import { usePendingTxsQueue, useShowUnsignedQueue } from '@/hooks/usePendingTxs'
 import RecoveryList from '@/features/recovery/components/RecoveryList'
+import { BRAND_NAME } from '@/config/constants'
 
 const Queue: NextPage = () => {
   const showPending = useShowUnsignedQueue()
@@ -15,7 +16,7 @@ const Queue: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Transaction queue'}</title>
+        <title>{`${BRAND_NAME} – Transaction queue`}</title>
       </Head>
       <BatchExecuteHoverProvider>
         <TxHeader>
diff --git a/src/pages/transactions/tx.tsx b/src/pages/transactions/tx.tsx
index 61d4207550..e972e88be4 100644
--- a/src/pages/transactions/tx.tsx
+++ b/src/pages/transactions/tx.tsx
@@ -3,12 +3,13 @@ import Head from 'next/head'
 
 import SingleTx from '@/components/transactions/SingleTx'
 import Typography from '@mui/material/Typography'
+import { BRAND_NAME } from '@/config/constants'
 
 const SingleTransaction: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Transaction details'}</title>
+        <title>{`${BRAND_NAME} – Transaction details`}</title>
       </Head>
       <main>
         <Typography
diff --git a/src/pages/welcome/accounts.tsx b/src/pages/welcome/accounts.tsx
index 3cb3983d41..8223ec6b53 100644
--- a/src/pages/welcome/accounts.tsx
+++ b/src/pages/welcome/accounts.tsx
@@ -1,12 +1,13 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import MyAccounts from '@/features/myAccounts'
+import { BRAND_NAME } from '@/config/constants'
 
 const Accounts: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – My accounts'}</title>
+        <title>{`${BRAND_NAME} – My accounts`}</title>
       </Head>
 
       <MyAccounts />
diff --git a/src/pages/welcome/index.tsx b/src/pages/welcome/index.tsx
index 6a6506b4d6..0fa8cb46f1 100644
--- a/src/pages/welcome/index.tsx
+++ b/src/pages/welcome/index.tsx
@@ -1,12 +1,13 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import NewSafe from '@/components/welcome/NewSafe'
+import { BRAND_NAME } from '@/config/constants'
 
 const Welcome: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Welcome'}</title>
+        <title>{`${BRAND_NAME} – Welcome`}</title>
       </Head>
 
       <NewSafe />
diff --git a/src/services/onboard.ts b/src/services/onboard.ts
index cc37f1f136..7ed0c0bb30 100644
--- a/src/services/onboard.ts
+++ b/src/services/onboard.ts
@@ -4,6 +4,7 @@ import { getAllWallets } from '@/hooks/wallets/wallets'
 import { getRpcServiceUrl } from '@/hooks/wallets/web3'
 import type { EnvState } from '@/store/settingsSlice'
 import { numberToHex } from '@/utils/hex'
+import { BRAND_NAME } from '@/config/constants'
 
 let onboard: OnboardAPI | null = null
 
@@ -42,9 +43,9 @@ export const createOnboard = (
     },
 
     appMetadata: {
-      name: 'Safe{Wallet}',
+      name: BRAND_NAME,
       icon: location.origin + '/images/logo-round.svg',
-      description: 'Safe{Wallet} – smart contract wallet for Ethereum (ex-Gnosis Safe multisig)',
+      description: `${BRAND_NAME} – smart contract wallet for Ethereum (ex-Gnosis Safe multisig)`,
     },
 
     connect: {
diff --git a/src/services/safe-wallet-provider/notifications.ts b/src/services/safe-wallet-provider/notifications.ts
index c57452f856..feabdc19d7 100644
--- a/src/services/safe-wallet-provider/notifications.ts
+++ b/src/services/safe-wallet-provider/notifications.ts
@@ -1,3 +1,4 @@
+import { BRAND_NAME } from '@/config/constants'
 import type { AppInfo } from '.'
 
 export const showNotification = (title: string, options?: NotificationOptions) => {
@@ -27,13 +28,13 @@ export const NotificationMessages: Record<
   SIGNATURE_REQUEST: (appInfo: AppInfo) => ({
     title: 'Signature request',
     options: {
-      body: `${appInfo.name} wants you to sign a message. Open the Safe{Wallet} to continue.`,
+      body: `${appInfo.name} wants you to sign a message. Open the ${BRAND_NAME} to continue.`,
     },
   }),
   TRANSACTION_REQUEST: (appInfo: AppInfo) => ({
     title: 'Transaction request',
     options: {
-      body: `${appInfo.name} wants to submit a transaction. Open the Safe{Wallet} to continue.`,
+      body: `${appInfo.name} wants to submit a transaction. Open the ${BRAND_NAME} to continue.`,
     },
   }),
 }

From 1a1e7b8ab1581a6ba6339c93dde8ac06625ea3c5 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Thu, 5 Dec 2024 13:11:56 +0100
Subject: [PATCH 7/9] Update readme

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 9daa12ad6d..aa1ff55334 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,9 @@ Here's the list of all the environment variables:
 
 | Env variable                                      | Description                                                                                                                                                             |
 | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `NEXT_PUBLIC_BRAND_NAME`                          | The name of the app, defaults to "Wallet fork"                                                              |
+| `NEXT_PUBLIC_BRAND_LOGO`                          | The URL of the app logo displayed in the header                                                             |
+
 | `NEXT_PUBLIC_INFURA_TOKEN`                        | [Infura](https://docs.infura.io/infura/networks/ethereum/how-to/secure-a-project/project-id) RPC API token                                                              |
 | `NEXT_PUBLIC_SAFE_APPS_INFURA_TOKEN`              | Infura token for Safe Apps, falls back to `NEXT_PUBLIC_INFURA_TOKEN`                                                                                                    |
 | `NEXT_PUBLIC_IS_PRODUCTION`                       | Set to `true` to build a minified production app                                                                                                                        |

From 5ac8a82e327cfed29b83a8b72ee6dfcacbd24dde Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Thu, 5 Dec 2024 14:13:39 +0100
Subject: [PATCH 8/9] NEXT_PUBLIC_IS_OFFICIAL_HOST for tests

---
 .github/workflows/unit-tests.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/unit-tests.yml b/.github/workflows/unit-tests.yml
index 54aed48787..66fc0c6b23 100644
--- a/.github/workflows/unit-tests.yml
+++ b/.github/workflows/unit-tests.yml
@@ -31,3 +31,5 @@ jobs:
           package-manager: yarn
           test-script: yarn test:ci
           github-token: ${{ secrets.GITHUB_TOKEN }}
+        env:
+          NEXT_PUBLIC_IS_OFFICIAL_HOST: true

From 4c54e2b2443f5b9f8ea20e5258e850cfe62d11eb Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:22:03 +0100
Subject: [PATCH 9/9] Prettier

---
 src/components/settings/SafeAppsSigningMethod/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/settings/SafeAppsSigningMethod/index.tsx b/src/components/settings/SafeAppsSigningMethod/index.tsx
index fb045e88a8..c4b25059ab 100644
--- a/src/components/settings/SafeAppsSigningMethod/index.tsx
+++ b/src/components/settings/SafeAppsSigningMethod/index.tsx
@@ -25,7 +25,7 @@ export const SafeAppsSigningMethod = () => {
         </Grid>
 
         <Grid item xs>
-          <Typography  mb={2}>
+          <Typography mb={2}>
             This setting determines how the {BRAND_NAME} will sign message requests from Safe Apps. Gasless, off-chain
             signing is used by default. Learn more about message signing{' '}
             <ExternalLink href={HelpCenterArticle.SIGNED_MESSAGES}>here</ExternalLink>.