diff --git a/studio/components/layouts/SettingsLayout/SettingsLayout.tsx b/studio/components/layouts/SettingsLayout/SettingsLayout.tsx
index e022350f037..cb18b1b291e 100644
--- a/studio/components/layouts/SettingsLayout/SettingsLayout.tsx
+++ b/studio/components/layouts/SettingsLayout/SettingsLayout.tsx
@@ -9,10 +9,11 @@ import { useRouter } from 'next/router'
 
 interface Props {
   title?: string
+  className?: string
   children: ReactNode
 }
 
-const SettingsLayout: FC<Props> = ({ title, children }) => {
+const SettingsLayout: FC<Props> = ({ title, className = "", children }) => {
   const { ui } = useStore()
   const projectRef = ui.selectedProject?.ref ?? 'default'
 
@@ -25,7 +26,7 @@ const SettingsLayout: FC<Props> = ({ title, children }) => {
       product="Settings"
       productMenu={<ProductMenu page={page} menu={generateSettingsMenu(projectRef)} />}
     >
-      <main style={{ maxHeight: '100vh' }} className="flex-1 overflow-y-auto">
+      <main style={{ maxHeight: '100vh' }} className={"flex-1 overflow-y-auto " + className}>
         {children}
       </main>
     </BaseLayout>