diff --git a/packages/web/src/app/AppProviders.tsx b/packages/web/src/app/AppProviders.tsx
index 50f80acb7df..201d3266fe4 100644
--- a/packages/web/src/app/AppProviders.tsx
+++ b/packages/web/src/app/AppProviders.tsx
@@ -17,6 +17,7 @@ import { AppContextProvider } from './AppContextProvider'
 import { AudiusQueryProvider } from './AudiusQueryProvider'
 import { useHistoryContext } from './HistoryProvider'
 import { ReduxProvider } from './ReduxProvider'
+import { SvgGradientProvider } from './SvgGradientProvider'
 import { ThemeProvider } from './ThemeProvider'
 import { TrpcProvider } from './TrpcProvider'
 
@@ -49,11 +50,13 @@ export const AppProviders = ({ children }: AppContextProps) => {
                       <ScrollProvider>
                         <RouterContextProvider>
                           <MainContentContextProvider>
-                            <HeaderContextProvider>
-                              <ToastContextProvider>
-                                {children}
-                              </ToastContextProvider>
-                            </HeaderContextProvider>
+                            <SvgGradientProvider>
+                              <HeaderContextProvider>
+                                <ToastContextProvider>
+                                  {children}
+                                </ToastContextProvider>
+                              </HeaderContextProvider>
+                            </SvgGradientProvider>
                           </MainContentContextProvider>
                         </RouterContextProvider>
                       </ScrollProvider>
diff --git a/packages/web/src/app/SvgGradientProvider.tsx b/packages/web/src/app/SvgGradientProvider.tsx
new file mode 100644
index 00000000000..b7d6858793e
--- /dev/null
+++ b/packages/web/src/app/SvgGradientProvider.tsx
@@ -0,0 +1,38 @@
+import { ReactNode } from 'react'
+
+type SvgGradientProviderProps = {
+  children: ReactNode
+}
+
+export const SvgGradientProvider = (props: SvgGradientProviderProps) => {
+  const { children } = props
+
+  return (
+    <>
+      <svg style={{ position: 'fixed', top: '-1000px' }}>
+        <defs>
+          <linearGradient
+            x1='85.847289%'
+            y1='85.847289%'
+            x2='-8.9070096%'
+            y2='8.9070096%'
+            id='linearGradient-1'
+          >
+            <stop stopColor='#832AE7' offset='0%'></stop>
+            <stop stopColor='#922CE9' offset='100%'></stop>
+          </linearGradient>
+          <linearGradient
+            id='matrixHeaderGradient'
+            gradientTransform='rotate(323)'
+            height='100%'
+            width='100%'
+          >
+            <stop offset='0%' stopColor='#4FF069' />
+            <stop offset='100%' stopColor='#09BD51' />
+          </linearGradient>
+        </defs>
+      </svg>
+      {children}
+    </>
+  )
+}