diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index bd59dc83ea..0b1e0305df 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,4 +1,4 @@
-import 'inter-ui'
+import '../src/index.css'
 import { Story } from '@storybook/react/types-6-0'
 import { createWeb3ReactRoot, Web3ReactProvider } from '@web3-react/core'
 import React from 'react'
@@ -6,7 +6,7 @@ import { Provider as StoreProvider } from 'react-redux'
 import { ThemeProvider as SCThemeProvider } from 'styled-components'
 import { NetworkContextName } from '../src/constants/misc'
 import store from '../src/state'
-import { FixedGlobalStyle, theme, ThemedGlobalStyle } from '../src/theme'
+import { theme, ThemedGlobalStyle } from '../src/theme'
 import getLibrary from '../src/utils/getLibrary'
 import * as storybookThemes from './theme'
 
@@ -75,7 +75,6 @@ const withProviders = (Component: Story, context: Record<string, any>) => {
         <Web3ProviderNetwork getLibrary={getLibrary}>
           <StoreProvider store={store}>
             <SCThemeProvider theme={THEME}>
-              <FixedGlobalStyle />
               <ThemedGlobalStyle />
               <main>
                 <Component />
diff --git a/public/index.html b/public/index.html
index 7edc59751e..f41b3ed46b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,7 +28,15 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+
+    <!-- The root is the container of the app -->
+    <div id="root">
+      <!-- Triggers the font to load immediately and then is replaced by the app -->
+      <div style="visibility: hidden">X</div>
+    </div>
+
+    <div id="background-radial-gradient"></div>
+
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/components/ErrorBoundary/index.tsx b/src/components/ErrorBoundary/index.tsx
index 52df7999dd..2f327a4e25 100644
--- a/src/components/ErrorBoundary/index.tsx
+++ b/src/components/ErrorBoundary/index.tsx
@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
 import React, { ErrorInfo } from 'react'
 import store, { AppState } from '../../state'
-import { ExternalLink, ThemedBackground, TYPE } from '../../theme'
+import { ExternalLink, TYPE } from '../../theme'
 import { AutoColumn } from '../Column'
 import styled from 'styled-components/macro'
 import ReactGA from 'react-ga'
@@ -70,7 +70,6 @@ export default class ErrorBoundary extends React.Component<unknown, ErrorBoundar
       const encodedBody = encodeURIComponent(issueBody(error))
       return (
         <FallbackWrapper>
-          <ThemedBackground />
           <BodyWrapper>
             <AutoColumn gap={'md'}>
               <SomethingWentWrongWrapper>
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 35c57bfdd2..69d95631d8 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -3,7 +3,6 @@ import styled, { css } from 'styled-components'
 import { animated, useTransition, useSpring } from 'react-spring'
 import { DialogOverlay, DialogContent } from '@reach/dialog'
 import { isMobile } from 'react-device-detect'
-import '@reach/dialog/styles.css'
 import { transparentize } from 'polished'
 import { useGesture } from 'react-use-gesture'
 
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000000..08afeff2a8
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,46 @@
+@import '~inter-ui';
+@import '~@reach/dialog/styles.css';
+
+* {
+    font-family: 'Inter', sans-serif;
+    box-sizing: border-box;
+}
+
+@supports (font-variation-settings: normal) {
+    * {
+        font-family: 'Inter var', sans-serif;
+    }
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+}
+
+button {
+    user-select: none;
+}
+
+html {
+    font-size: 16px;
+    font-variant: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
+}
+
+#background-radial-gradient {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+    width: 200vw;
+    height: 200vh;
+    mix-blend-mode: color;
+    background: radial-gradient(50% 50% at 50% 50%, #fc077d10 0%, rgba(255, 255, 255, 0) 100%);
+    transform: translate(-50vw, -100vh);
+    z-index: -1;
+}
diff --git a/src/index.tsx b/src/index.tsx
index 9a6448207d..247a13fb93 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,5 @@
+import './index.css'
 import { createWeb3ReactRoot, Web3ReactProvider } from '@web3-react/core'
-import 'inter-ui'
 import React, { StrictMode } from 'react'
 import { isMobile } from 'react-device-detect'
 import ReactDOM from 'react-dom'
@@ -17,7 +17,7 @@ import ListsUpdater from './state/lists/updater'
 import MulticallUpdater from './state/multicall/updater'
 import TransactionUpdater from './state/transactions/updater'
 import UserUpdater from './state/user/updater'
-import ThemeProvider, { FixedGlobalStyle, ThemedGlobalStyle } from './theme'
+import ThemeProvider, { ThemedGlobalStyle } from './theme'
 import getLibrary from './utils/getLibrary'
 
 const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName)
@@ -63,7 +63,6 @@ ReactDOM.render(
     <Provider store={store}>
       <HashRouter>
         <LanguageProvider>
-          <FixedGlobalStyle />
           <Web3ReactProvider getLibrary={getLibrary}>
             <Web3ProviderNetwork getLibrary={getLibrary}>
               <Blocklist>
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index af9e2cda67..38402d98a8 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -28,7 +28,6 @@ import VotePage from './Vote/VotePage'
 import { RedirectDuplicateTokenIdsV2 } from './AddLiquidityV2/redirects'
 import { PositionPage } from './Pool/PositionPage'
 import AddLiquidity from './AddLiquidity'
-import { ThemedBackground } from '../theme'
 import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
 
 const AppWrapper = styled.div`
@@ -83,7 +82,6 @@ export default function App() {
             <Header />
           </HeaderWrapper>
           <BodyWrapper>
-            <ThemedBackground />
             <Popups />
             <Polling />
             <TopLevelModals />
diff --git a/src/theme/index.tsx b/src/theme/index.tsx
index 6ed750cfa9..3bcc6efdfb 100644
--- a/src/theme/index.tsx
+++ b/src/theme/index.tsx
@@ -188,74 +188,13 @@ export const TYPE = {
   },
 }
 
-export const ThemedBackground = styled.div<{ backgroundColor?: string | undefined }>`
-  position: fixed;
-  top: 0;
-  left: calc(-100vw / 2);
-  right: 0;
-  pointer-events: none;
-  /* max-width: 100vw !important; */
-  width: 200vw;
-  height: 200vh;
-  mix-blend-mode: color;
-  background: ${({ backgroundColor }) =>
-    `radial-gradient(50% 50% at 50% 50%, ${
-      backgroundColor ? backgroundColor : '#fc077d10'
-    } 0%, rgba(255, 255, 255, 0) 100%)`};
-  transform: translateY(-100vh);
-  will-change: background;
-  transition: background 450ms ease;
-`
-
-export const FixedGlobalStyle = createGlobalStyle`
-html, input, textarea, button {
-  font-family: 'Inter', sans-serif;
-}
-@supports (font-variation-settings: normal) {
-  html, input, textarea, button {
-    font-family: 'Inter var', sans-serif;
-  }
-}
-
-html,
-body {
-  margin: 0;
-  padding: 0;
-}
-
- a {
-   color: ${colors(false).blue1}; 
- }
-
-* {
-  box-sizing: border-box;
-}
-
-button {
-  user-select: none;
-}
-
-html {
-  font-size: 16px;
-  font-variant: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  font-feature-settings: 'ss01' on, 'ss02' on,  'cv01' on, 'cv03' on;
-  
-}
-`
-
 export const ThemedGlobalStyle = createGlobalStyle`
 html {
   color: ${({ theme }) => theme.text1};
   background-color: ${({ theme }) => theme.bg1};
 }
 
-body {
-  min-height: 100vh;
-  background-position: 0 -30vh;
-  background-repeat: no-repeat;
-
+a {
+ color: ${({ theme }) => theme.blue1}; 
 }
 `
