diff --git a/apps/studio/providers/toolbar-wrapper.tsx b/apps/studio/providers/toolbar-wrapper.tsx
new file mode 100644
index 00000000000..9bf41e64126
--- /dev/null
+++ b/apps/studio/providers/toolbar-wrapper.tsx
@@ -0,0 +1,5 @@
+import { VercelToolbar } from '@vercel/toolbar/next'
+
+export default function VercelToolbarWrapper() {
+  return <VercelToolbar />
+}
diff --git a/apps/studio/providers/vercel-toolbar.tsx b/apps/studio/providers/vercel-toolbar.tsx
index 71e26253aae..e73b26c8adb 100644
--- a/apps/studio/providers/vercel-toolbar.tsx
+++ b/apps/studio/providers/vercel-toolbar.tsx
@@ -1,10 +1,9 @@
-import dynamic from 'next/dynamic'
 import { useUser } from 'common'
+import dynamic from 'next/dynamic'
 import { PropsWithChildren } from 'react'
 
-// Dynamically load VercelToolbar
-const VercelToolbar = dynamic<any>(() => import('@vercel/toolbar'), {
-  ssr: false, // Disable SSR for the toolbar
+const VercelToolbar = dynamic(() => import('./toolbar-wrapper'), {
+  loading: () => <></>,
 })
 
 export default function VercelToolbarProvider({ children }: PropsWithChildren<{}>) {
@@ -12,7 +11,6 @@ export default function VercelToolbarProvider({ children }: PropsWithChildren<{}
 
   const isSupabaseTeam =
     user?.email?.includes('@supabase.com') || user?.email?.includes('@supabase.io')
-
   return (
     <>
       {children}