diff --git a/apps/tx-builder/src/global.ts b/apps/tx-builder/src/global.ts
index db2e0219..31d967e3 100644
--- a/apps/tx-builder/src/global.ts
+++ b/apps/tx-builder/src/global.ts
@@ -1,6 +1,6 @@
 import { createGlobalStyle } from 'styled-components'
-import avertaFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-normal.woff2'
-import avertaBoldFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-bold.woff2'
+import DMSansFont from './assets/fonts/DMSansRegular.woff2'
+import DMSansBoldFont from './assets/fonts/DMSans700.woff2'
 
 const GlobalStyle = createGlobalStyle`
     html {
@@ -17,12 +17,19 @@ const GlobalStyle = createGlobalStyle`
     #root {
         height: 100%;
     }
+    
+    @font-face {
+        font-family: 'DM Sans';
+        font-display: swap;
+        font-weight: 400;
+        src: url(${DMSansFont}) format('woff2');
+    }
 
     @font-face {
-        font-family: 'Averta';
-        src: local('Averta'), local('Averta Bold'),
-        url(${avertaFont}) format('woff2'),
-        url(${avertaBoldFont}) format('woff');
+        font-family: 'DM Sans';
+        font-display: swap;
+        font-weight: bold;
+        src: url(${DMSansBoldFont}) format('woff2');
     }
 
     input:-webkit-autofill,
diff --git a/apps/tx-builder/src/index.tsx b/apps/tx-builder/src/index.tsx
index 13b2b299..32049448 100644
--- a/apps/tx-builder/src/index.tsx
+++ b/apps/tx-builder/src/index.tsx
@@ -1,6 +1,4 @@
 import ReactDOM from 'react-dom'
-import { ThemeProvider } from 'styled-components'
-import { theme } from '@gnosis.pm/safe-react-components'
 import { SafeProvider } from '@safe-global/safe-apps-react-sdk'
 import { BrowserRouter } from 'react-router-dom'
 
@@ -9,19 +7,25 @@ import * as serviceWorker from './serviceWorker'
 import GlobalStyles from './global'
 import App from './App'
 import StoreProvider from './store'
+import SafeThemeProvider from './theme/SafeThemeProvider'
+import { ThemeProvider } from 'styled-components'
 
 ReactDOM.render(
   <>
     <GlobalStyles />
-    <ThemeProvider theme={theme}>
-      <SafeProvider>
-        <StoreProvider>
-          <BrowserRouter basename={process.env.PUBLIC_URL}>
-            <App />
-          </BrowserRouter>
-        </StoreProvider>
-      </SafeProvider>
-    </ThemeProvider>
+    <SafeThemeProvider mode="light">
+      {theme => (
+        <ThemeProvider theme={theme}>
+          <SafeProvider>
+            <StoreProvider>
+              <BrowserRouter basename={process.env.PUBLIC_URL}>
+                <App />
+              </BrowserRouter>
+            </StoreProvider>
+          </SafeProvider>
+        </ThemeProvider>
+      )}
+    </SafeThemeProvider>
   </>,
   document.getElementById('root'),
 )
diff --git a/apps/tx-builder/src/test-utils.tsx b/apps/tx-builder/src/test-utils.tsx
index 4ba6d6db..cc8960fc 100644
--- a/apps/tx-builder/src/test-utils.tsx
+++ b/apps/tx-builder/src/test-utils.tsx
@@ -1,20 +1,24 @@
 import { ReactElement } from 'react'
 import { ThemeProvider } from 'styled-components'
 import { render, RenderResult } from '@testing-library/react'
-import { theme } from '@gnosis.pm/safe-react-components'
 import { SafeProvider } from '@safe-global/safe-apps-react-sdk'
 import { BrowserRouter } from 'react-router-dom'
 import StoreProvider from './store'
+import SafeThemeProvider from './theme/SafeThemeProvider'
 
 const renderWithProviders = (Components: ReactElement): RenderResult => {
   return render(
-    <ThemeProvider theme={theme}>
-      <SafeProvider>
-        <StoreProvider>
-          <BrowserRouter>{Components}</BrowserRouter>
-        </StoreProvider>
-      </SafeProvider>
-    </ThemeProvider>,
+    <SafeThemeProvider mode="light">
+      {theme => (
+        <ThemeProvider theme={theme}>
+          <SafeProvider>
+            <StoreProvider>
+              <BrowserRouter>{Components}</BrowserRouter>
+            </StoreProvider>
+          </SafeProvider>
+        </ThemeProvider>
+      )}
+    </SafeThemeProvider>,
   )
 }