diff --git a/apps/studio/components/interfaces/Integrations/DataApi/OverviewTab.tsx b/apps/studio/components/interfaces/Integrations/DataApi/OverviewTab.tsx
index 56d230ab946..b2e936b8b0f 100644
--- a/apps/studio/components/interfaces/Integrations/DataApi/OverviewTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/DataApi/OverviewTab.tsx
@@ -1,53 +1,71 @@
-import { useParams } from 'common'
+import { useFlag, useParams } from 'common'
 import { AlertCircle } from 'lucide-react'
 import { Alert_Shadcn_, AlertTitle_Shadcn_, cn } from 'ui'
 import { Admonition } from 'ui-patterns/admonition'
 
 import { IntegrationOverviewTab } from '../Integration/IntegrationOverviewTab'
+import { IntegrationOverviewTabV2 } from '../Integration/IntegrationOverviewTabV2'
 import { DataApiEnableSwitch } from '@/components/interfaces/Settings/API/DataApiEnableSwitch'
 import { DataApiProjectUrlCard } from '@/components/interfaces/Settings/API/DataApiProjectUrlCard'
 import { useIsDataApiEnabled } from '@/hooks/misc/useIsDataApiEnabled'
 import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
 import { IS_PLATFORM, PROJECT_STATUS } from '@/lib/constants'
 
-export const DataApiOverviewTab = () => {
+const DataApiOverview = () => {
   const { ref: projectRef } = useParams()
   const { data: project, isPending: isProjectLoading } = useSelectedProjectQuery()
   const { isEnabled, isPending: isConfigLoading } = useIsDataApiEnabled({ projectRef })
-
   const isLoading = isProjectLoading || isConfigLoading
 
   return (
-    <IntegrationOverviewTab>
-      <div className="px-10 max-w-4xl flex flex-col">
-        {!isProjectLoading && project?.status !== PROJECT_STATUS.ACTIVE_HEALTHY ? (
-          <Alert_Shadcn_ variant="destructive">
-            <AlertCircle size={16} />
-            <AlertTitle_Shadcn_>
-              API settings are unavailable as the project is not active
-            </AlertTitle_Shadcn_>
-          </Alert_Shadcn_>
-        ) : (
-          <>
-            <div
-              className={cn(
-                IS_PLATFORM && (isLoading || !isEnabled) && 'opacity-50 pointer-events-none'
-              )}
-            >
-              <DataApiProjectUrlCard />
-            </div>
-            {IS_PLATFORM ? (
-              <DataApiEnableSwitch />
-            ) : (
-              <Admonition
-                type="default"
-                title="Managed via configuration variables"
-                description="Data API settings are configured via config.toml for CLI and local development, or via docker-compose.yml and .env for self-hosted deployments."
-              />
+    <div className="max-w-4xl flex flex-col">
+      {!isProjectLoading && project?.status !== PROJECT_STATUS.ACTIVE_HEALTHY ? (
+        <Alert_Shadcn_ variant="destructive">
+          <AlertCircle size={16} />
+          <AlertTitle_Shadcn_>
+            API settings are unavailable as the project is not active
+          </AlertTitle_Shadcn_>
+        </Alert_Shadcn_>
+      ) : (
+        <>
+          <div
+            className={cn(
+              IS_PLATFORM && (isLoading || !isEnabled) && 'opacity-50 pointer-events-none'
             )}
-          </>
-        )}
-      </div>
-    </IntegrationOverviewTab>
+          >
+            <DataApiProjectUrlCard />
+          </div>
+          {IS_PLATFORM ? (
+            <DataApiEnableSwitch />
+          ) : (
+            <Admonition
+              type="default"
+              title="Managed via configuration variables"
+              description="Data API settings are configured via config.toml for CLI and local development, or via docker-compose.yml and .env for self-hosted deployments."
+            />
+          )}
+        </>
+      )}
+    </div>
   )
 }
+
+export const DataApiOverviewTab = () => {
+  const isMarketplaceEnabled = useFlag('marketplaceIntegrations')
+
+  if (isMarketplaceEnabled) {
+    return (
+      <IntegrationOverviewTabV2>
+        <DataApiOverview />
+      </IntegrationOverviewTabV2>
+    )
+  } else {
+    return (
+      <IntegrationOverviewTab>
+        <div className="px-10">
+          <DataApiOverview />
+        </div>
+      </IntegrationOverviewTab>
+    )
+  }
+}
diff --git a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTab.tsx b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTab.tsx
index 060612ba1d5..9c94331bf9e 100644
--- a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTab.tsx
@@ -9,7 +9,7 @@ import { BuiltBySection } from './BuildBySection'
 import { MarkdownContent } from './MarkdownContent'
 import { MissingExtensionAlert } from './MissingExtensionAlert'
 
-interface IntegrationOverviewTabProps {
+export interface IntegrationOverviewTabProps {
   actions?: ReactNode
   status?: string | ReactNode
   alert?: ReactNode
diff --git a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabWrapper.tsx b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabWrapper.tsx
new file mode 100644
index 00000000000..075d126cebf
--- /dev/null
+++ b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabWrapper.tsx
@@ -0,0 +1,22 @@
+/**
+ * [Joshen] This is just to dynamically render either the V1 or V2 Overview tab based
+ * on the marketplace feature flag
+ */
+
+import { useFlag } from 'common'
+import { PropsWithChildren } from 'react'
+
+import { IntegrationOverviewTab, IntegrationOverviewTabProps } from './IntegrationOverviewTab'
+import { IntegrationOverviewTabV2 } from './IntegrationOverviewTabV2'
+
+export const IntegrationOverviewTabWrapper = (
+  props: PropsWithChildren<IntegrationOverviewTabProps>
+) => {
+  const isMarketplaceEnabled = useFlag('marketplaceIntegrations')
+
+  if (isMarketplaceEnabled) {
+    return <IntegrationOverviewTabV2>{props.children}</IntegrationOverviewTabV2>
+  } else {
+    return <IntegrationOverviewTab {...props} />
+  }
+}
diff --git a/apps/studio/components/interfaces/Integrations/Landing/Integrations.constants.tsx b/apps/studio/components/interfaces/Integrations/Landing/Integrations.constants.tsx
index 8b3f4568153..eb4a504dd9c 100644
--- a/apps/studio/components/interfaces/Integrations/Landing/Integrations.constants.tsx
+++ b/apps/studio/components/interfaces/Integrations/Landing/Integrations.constants.tsx
@@ -158,8 +158,8 @@ const SUPABASE_INTEGRATIONS: Array<IntegrationDefinition> = [
         case 'overview':
           return dynamic(
             () =>
-              import('components/interfaces/Integrations/Integration/IntegrationOverviewTab').then(
-                (mod) => mod.IntegrationOverviewTab
+              import('components/interfaces/Integrations/Integration/IntegrationOverviewTabWrapper').then(
+                (mod) => mod.IntegrationOverviewTabWrapper
               ),
             {
               loading: Loading,
@@ -201,8 +201,8 @@ const SUPABASE_INTEGRATIONS: Array<IntegrationDefinition> = [
         case 'overview':
           return dynamic(
             () =>
-              import('components/interfaces/Integrations/Integration/IntegrationOverviewTab').then(
-                (mod) => mod.IntegrationOverviewTab
+              import('components/interfaces/Integrations/Integration/IntegrationOverviewTabWrapper').then(
+                (mod) => mod.IntegrationOverviewTabWrapper
               ),
             {
               loading: Loading,
@@ -360,8 +360,8 @@ const SUPABASE_INTEGRATIONS: Array<IntegrationDefinition> = [
         case 'overview':
           return dynamic(
             () =>
-              import('components/interfaces/Integrations/Integration/IntegrationOverviewTab').then(
-                (mod) => mod.IntegrationOverviewTab
+              import('components/interfaces/Integrations/Integration/IntegrationOverviewTabWrapper').then(
+                (mod) => mod.IntegrationOverviewTabWrapper
               ),
             {
               loading: Loading,
diff --git a/apps/studio/static-data/integrations/data_api/overview.md b/apps/studio/static-data/integrations/data_api/overview.md
index 028af1154b6..7f0e6edbc1b 100644
--- a/apps/studio/static-data/integrations/data_api/overview.md
+++ b/apps/studio/static-data/integrations/data_api/overview.md
@@ -1,4 +1,2 @@
 The Supabase Data API exposes REST endpoints for your project's databases, including read replicas
-and load balancers.
-
-Configure the API base URL, custom domains, and PostgREST settings for your project.
+and load balancers. Configure the API base URL, custom domains, and PostgREST settings for your project.