diff --git a/apps/studio/components/layouts/DefaultLayout.tsx b/apps/studio/components/layouts/DefaultLayout.tsx
index 1bf21f72f49..a397f020c8a 100644
--- a/apps/studio/components/layouts/DefaultLayout.tsx
+++ b/apps/studio/components/layouts/DefaultLayout.tsx
@@ -4,6 +4,8 @@ import { PropsWithChildren, ReactNode } from 'react'
 import { LayoutHeader } from './ProjectLayout/LayoutHeader'
 import NavigationBar from './ProjectLayout/NavigationBar/NavigationBar'
 import MobileNavigationBar from './ProjectLayout/NavigationBar/MobileNavigationBar'
+import { ProjectContextProvider } from './ProjectLayout/ProjectContext'
+import { useParams } from 'common'
 
 export interface DefaultLayoutProps {
   title?: string
@@ -16,25 +18,28 @@ export interface DefaultLayoutProps {
 }
 
 const DefaultLayout = ({ children, showProductMenu }: PropsWithChildren<DefaultLayoutProps>) => {
+  const { ref } = useParams()
   return (
     <>
-      <AppBannerContextProvider>
-        <div className="flex flex-col h-screen w-screen">
-          {/* Top Banner */}
-          <AppBannerWrapper />
-          <div className="flex-shrink-0">
-            <MobileNavigationBar />
-            <LayoutHeader showProductMenu={showProductMenu} />
+      <ProjectContextProvider projectRef={ref}>
+        <AppBannerContextProvider>
+          <div className="flex flex-col h-screen w-screen">
+            {/* Top Banner */}
+            <AppBannerWrapper />
+            <div className="flex-shrink-0">
+              <MobileNavigationBar />
+              <LayoutHeader showProductMenu={showProductMenu} />
+            </div>
+            {/* Main Content Area */}
+            <div className="flex flex-1 w-full overflow-y-hidden">
+              {/* Sidebar */}
+              <NavigationBar />
+              {/* Main Content */}
+              <div className="flex-grow h-full overflow-y-auto">{children}</div>
+            </div>
           </div>
-          {/* Main Content Area */}
-          <div className="flex flex-1 w-full overflow-y-hidden">
-            {/* Sidebar */}
-            <NavigationBar />
-            {/* Main Content */}
-            <div className="flex-grow h-full overflow-y-auto">{children}</div>
-          </div>
-        </div>
-      </AppBannerContextProvider>
+        </AppBannerContextProvider>
+      </ProjectContextProvider>
     </>
   )
 }
diff --git a/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx b/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
index f4d06e49826..64add79fe34 100644
--- a/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
@@ -128,121 +128,119 @@ const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<ProjectLayout
 
     return (
       <>
-        <ProjectContextProvider projectRef={projectRef}>
-          <Head>
-            <title>
-              {title
-                ? `${title} | Supabase`
-                : selectedTable
-                  ? `${selectedTable} | ${projectName} | ${organizationName} | Supabase`
-                  : projectName
-                    ? `${projectName} | ${organizationName} | Supabase`
-                    : organizationName
-                      ? `${organizationName} | Supabase`
-                      : 'Supabase'}
-            </title>
-            <meta name="description" content="Supabase Studio" />
-          </Head>
-          <div className="flex flex-row h-full w-full">
-            <ResizablePanelGroup className="" direction="horizontal" autoSaveId="project-layout">
-              {showProductMenu && productMenu && (
-                <ResizablePanel
-                  order={1}
-                  maxSize={33}
-                  defaultSize={1}
-                  id="panel-left"
-                  className={cn(
-                    'hidden md:block',
-                    'transition-all duration-[120ms]',
-                    sideBarIsOpen
-                      ? resizableSidebar
-                        ? 'min-w-64 max-w-[32rem]'
-                        : 'min-w-64 max-w-64'
-                      : 'w-0 flex-shrink-0 max-w-0'
-                  )}
-                >
-                  {sideBarIsOpen && (
-                    <AnimatePresence initial={false}>
-                      <motion.div
-                        initial={{ width: 0, opacity: 0, height: '100%' }}
-                        animate={{ width: 'auto', opacity: 1, height: '100%' }}
-                        exit={{ width: 0, opacity: 0, height: '100%' }}
-                        className="h-full"
-                        transition={{ duration: 0.12 }}
-                      >
-                        <MenuBarWrapper
-                          isLoading={isLoading}
-                          isBlocking={isBlocking}
-                          productMenu={productMenu}
-                        >
-                          <ProductMenuBar title={product}>{productMenu}</ProductMenuBar>
-                        </MenuBarWrapper>
-                      </motion.div>
-                    </AnimatePresence>
-                  )}
-                </ResizablePanel>
-              )}
-              {showProductMenu && productMenu && sideBarIsOpen && (
-                <ResizableHandle
-                  withHandle
-                  disabled={resizableSidebar ? false : true}
-                  className="hidden md:block"
-                />
-              )}
-              <ResizablePanel order={2} id="panel-right" className="h-full flex flex-col w-full">
-                <ResizablePanelGroup
-                  className="h-full w-full overflow-x-hidden flex-1 flex flex-row gap-0"
-                  direction="horizontal"
-                  autoSaveId="project-layout-content"
-                >
-                  <ResizablePanel
-                    id="panel-content"
-                    className={cn('w-full xl:min-w-[600px] bg-dash-sidebar')}
-                  >
-                    <main
-                      className="h-full flex flex-col flex-1 w-full overflow-y-auto overflow-x-hidden"
-                      ref={ref}
+        <Head>
+          <title>
+            {title
+              ? `${title} | Supabase`
+              : selectedTable
+                ? `${selectedTable} | ${projectName} | ${organizationName} | Supabase`
+                : projectName
+                  ? `${projectName} | ${organizationName} | Supabase`
+                  : organizationName
+                    ? `${organizationName} | Supabase`
+                    : 'Supabase'}
+          </title>
+          <meta name="description" content="Supabase Studio" />
+        </Head>
+        <div className="flex flex-row h-full w-full">
+          <ResizablePanelGroup className="" direction="horizontal" autoSaveId="project-layout">
+            {showProductMenu && productMenu && (
+              <ResizablePanel
+                order={1}
+                maxSize={33}
+                defaultSize={1}
+                id="panel-left"
+                className={cn(
+                  'hidden md:block',
+                  'transition-all duration-[120ms]',
+                  sideBarIsOpen
+                    ? resizableSidebar
+                      ? 'min-w-64 max-w-[32rem]'
+                      : 'min-w-64 max-w-64'
+                    : 'w-0 flex-shrink-0 max-w-0'
+                )}
+              >
+                {sideBarIsOpen && (
+                  <AnimatePresence initial={false}>
+                    <motion.div
+                      initial={{ width: 0, opacity: 0, height: '100%' }}
+                      animate={{ width: 'auto', opacity: 1, height: '100%' }}
+                      exit={{ width: 0, opacity: 0, height: '100%' }}
+                      className="h-full"
+                      transition={{ duration: 0.12 }}
                     >
-                      {showPausedState ? (
-                        <div className="mx-auto my-16 w-full h-full max-w-7xl flex items-center">
-                          <div className="w-full">
-                            <ProjectPausedState product={product} />
-                          </div>
-                        </div>
-                      ) : (
-                        <ContentWrapper isLoading={isLoading} isBlocking={isBlocking}>
-                          <ResourceExhaustionWarningBanner />
-                          {children}
-                        </ContentWrapper>
-                      )}
-                    </main>
-                  </ResizablePanel>
-                  {isClient && aiAssistantPanel.open && (
-                    <>
-                      <ResizableHandle withHandle />
-                      <ResizablePanel
-                        id="panel-assistant"
-                        className={cn(
-                          'border-l xl:border-l-0 bg fixed z-40 md:absolute md:z-0 right-0 top-0 md:top-[48px] bottom-0 xl:relative xl:top-0',
-                          'w-screen h-[100dvh] md:h-auto md:w-auto md:min-w-[400px] max-w-[500px]',
-                          '2xl:min-w-[500px] 2xl:max-w-[600px]'
-                        )}
+                      <MenuBarWrapper
+                        isLoading={isLoading}
+                        isBlocking={isBlocking}
+                        productMenu={productMenu}
                       >
-                        <AIAssistantPanel />
-                      </ResizablePanel>
-                    </>
-                  )}
-                </ResizablePanelGroup>
+                        <ProductMenuBar title={product}>{productMenu}</ProductMenuBar>
+                      </MenuBarWrapper>
+                    </motion.div>
+                  </AnimatePresence>
+                )}
               </ResizablePanel>
-            </ResizablePanelGroup>
-          </div>
-          <EnableBranchingModal />
-          <AISettingsModal />
-          <ProjectAPIDocs />
-          <MobileSheetNav open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
-            {productMenu}
-          </MobileSheetNav>
-        </ProjectContextProvider>
+            )}
+            {showProductMenu && productMenu && sideBarIsOpen && (
+              <ResizableHandle
+                withHandle
+                disabled={resizableSidebar ? false : true}
+                className="hidden md:block"
+              />
+            )}
+            <ResizablePanel order={2} id="panel-right" className="h-full flex flex-col w-full">
+              <ResizablePanelGroup
+                className="h-full w-full overflow-x-hidden flex-1 flex flex-row gap-0"
+                direction="horizontal"
+                autoSaveId="project-layout-content"
+              >
+                <ResizablePanel
+                  id="panel-content"
+                  className={cn('w-full xl:min-w-[600px] bg-dash-sidebar')}
+                >
+                  <main
+                    className="h-full flex flex-col flex-1 w-full overflow-y-auto overflow-x-hidden"
+                    ref={ref}
+                  >
+                    {showPausedState ? (
+                      <div className="mx-auto my-16 w-full h-full max-w-7xl flex items-center">
+                        <div className="w-full">
+                          <ProjectPausedState product={product} />
+                        </div>
+                      </div>
+                    ) : (
+                      <ContentWrapper isLoading={isLoading} isBlocking={isBlocking}>
+                        <ResourceExhaustionWarningBanner />
+                        {children}
+                      </ContentWrapper>
+                    )}
+                  </main>
+                </ResizablePanel>
+                {isClient && aiAssistantPanel.open && (
+                  <>
+                    <ResizableHandle withHandle />
+                    <ResizablePanel
+                      id="panel-assistant"
+                      className={cn(
+                        'border-l xl:border-l-0 bg fixed z-40 md:absolute md:z-0 right-0 top-0 md:top-[48px] bottom-0 xl:relative xl:top-0',
+                        'w-screen h-[100dvh] md:h-auto md:w-auto md:min-w-[400px] max-w-[500px]',
+                        '2xl:min-w-[500px] 2xl:max-w-[600px]'
+                      )}
+                    >
+                      <AIAssistantPanel />
+                    </ResizablePanel>
+                  </>
+                )}
+              </ResizablePanelGroup>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
+        <EnableBranchingModal />
+        <AISettingsModal />
+        <ProjectAPIDocs />
+        <MobileSheetNav open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+          {productMenu}
+        </MobileSheetNav>
       </>
     )
   }