diff --git a/apps/studio/providers/vercel-toolbar.tsx b/apps/studio/providers/vercel-toolbar.tsx
index 1184fed372f..719c3294cca 100644
--- a/apps/studio/providers/vercel-toolbar.tsx
+++ b/apps/studio/providers/vercel-toolbar.tsx
@@ -1,13 +1,21 @@
-import { VercelToolbar } from '@vercel/toolbar/next'
+import dynamic from 'next/dynamic'
 import { useUser } from 'common'
-
 import { PropsWithChildren } from 'react'
 
+// Dynamically import VercelToolbar to load it only when required
+const VercelToolbar = dynamic(
+  () => import('@vercel/toolbar/next').then((mod) => mod.VercelToolbar),
+  {
+    ssr: false, // Disable SSR for this component
+  }
+)
+
 export default function VercelToolbarProvider({ children }: PropsWithChildren<{}>) {
   const user = useUser()
 
   const isSupabaseTeam =
     user?.email?.includes('@supabase.com') || user?.email?.includes('@supabase.io')
+
   return (
     <>
       {children}