diff --git a/apps/studio/components/interfaces/Integrations/DataApi/DataApiDisabledState.tsx b/apps/studio/components/interfaces/Integrations/DataApi/DataApiDisabledState.tsx
index ba316e61e4e..8e1ef5ffae1 100644
--- a/apps/studio/components/interfaces/Integrations/DataApi/DataApiDisabledState.tsx
+++ b/apps/studio/components/interfaces/Integrations/DataApi/DataApiDisabledState.tsx
@@ -1,7 +1,7 @@
 import { useParams } from 'common'
 import { AlertCircle } from 'lucide-react'
-import Link from 'next/link'
 import { Alert_Shadcn_, AlertDescription_Shadcn_, AlertTitle_Shadcn_ } from 'ui'
+import { InlineLink } from 'components/ui/InlineLink'
 
 interface DataApiDisabledStateProps {
   description: string
@@ -17,12 +17,12 @@ export const DataApiDisabledState = ({ description }: DataApiDisabledStateProps)
         <AlertTitle_Shadcn_>Data API is disabled</AlertTitle_Shadcn_>
         <AlertDescription_Shadcn_>
           Enable the Data API in the{' '}
-          <Link
+          <InlineLink
             href={`/project/${projectRef}/integrations/data_api/overview`}
-            className="text-foreground underline hover:decoration-foreground-muted"
+
           >
             Overview
-          </Link>{' '}
+          </InlineLink>{' '}
           tab to {description}.
         </AlertDescription_Shadcn_>
       </Alert_Shadcn_>