diff --git a/apps/studio/components/interfaces/Organization/ProjectClaim/layout.tsx b/apps/studio/components/interfaces/Organization/ProjectClaim/layout.tsx
index 3f11332c55b..a0157648749 100644
--- a/apps/studio/components/interfaces/Organization/ProjectClaim/layout.tsx
+++ b/apps/studio/components/interfaces/Organization/ProjectClaim/layout.tsx
@@ -4,17 +4,19 @@ import { PropsWithChildren, ReactNode } from 'react'
 import { UserDropdown } from 'components/interfaces/UserDropdown'
 import { FeedbackDropdown } from 'components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown'
 import { BASE_PATH } from 'lib/constants'
-import { Separator } from 'ui'
+import { cn, Separator } from 'ui'
 
 export const ProjectClaimLayout = ({
   children,
   title,
+  className,
 }: PropsWithChildren<{
   title: ReactNode
+  className?: string
 }>) => {
   return (
     <>
-      <div className="flex flex-row justify-between flex-grow mx-auto w-full h-[52px] items-center px-4">
+      <div className="flex flex-row justify-between mx-auto w-full h-[52px] items-center px-4">
         <div className="flex items-center gap-2">
           <span className="sr-only">Supabase</span>
           <Image
@@ -31,8 +33,13 @@ export const ProjectClaimLayout = ({
         </div>
       </div>
       <Separator />
-      <div className="overflow-y-auto max-h-[calc(100vh-70px)] flex justify-center">
-        <div className="w-full max-w-md">{children}</div>
+      <div
+        className={cn(
+          'overflow-y-auto max-h-[calc(100vh-70px)] flex justify-center flex-grow',
+          className
+        )}
+      >
+        <div className="w-full h-full max-w-md">{children}</div>
       </div>
     </>
   )
diff --git a/apps/studio/pages/claim-project.tsx b/apps/studio/pages/claim-project.tsx
index a4851d99da7..f534495011e 100644
--- a/apps/studio/pages/claim-project.tsx
+++ b/apps/studio/pages/claim-project.tsx
@@ -1,3 +1,6 @@
+import Head from 'next/head'
+import { useMemo, useState } from 'react'
+
 import { useParams } from 'common'
 import { ProjectClaimBenefits } from 'components/interfaces/Organization/ProjectClaim/benefits'
 import { ProjectClaimChooseOrg } from 'components/interfaces/Organization/ProjectClaim/choose-org'
@@ -8,10 +11,8 @@ import { useApiAuthorizationQuery } from 'data/api-authorization/api-authorizati
 import { useOrganizationProjectClaimQuery } from 'data/organizations/organization-project-claim-query'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { withAuth } from 'hooks/misc/withAuth'
-import Head from 'next/head'
-import { useMemo, useState } from 'react'
 import type { NextPageWithLayout } from 'types'
-import { Alert } from 'ui'
+import { Admonition } from 'ui-patterns'
 
 const ClaimProjectPage: NextPageWithLayout = () => {
   const { auth_id, token: claimToken } = useParams()
@@ -48,8 +49,8 @@ const ClaimProjectPage: NextPageWithLayout = () => {
 
   if ((selectedOrgSlug && claimToken && isLoadingProjectClaim) || isLoadingRequester) {
     return (
-      <ProjectClaimLayout title="Claim a project">
-        <div className="py-6 space-y-2">
+      <ProjectClaimLayout title="Claim a project" className="py-6">
+        <div className="space-y-2">
           <ShimmeringLoader />
           <ShimmeringLoader className="w-3/4" />
           <ShimmeringLoader className="w-1/2" />
@@ -60,23 +61,16 @@ const ClaimProjectPage: NextPageWithLayout = () => {
 
   if ((selectedOrgSlug && claimToken && isErrorProjectClaim) || isErrorRequester) {
     return (
-      <ProjectClaimLayout title="Claim a project">
-        <div className="py-6">
-          <Alert
-            withIcon
-            variant="warning"
-            title="Failed to retrieve project claim request details"
-          >
-            <p>Please retry your claim request from the requesting app</p>
-            {errorProjectClaim != undefined && (
-              <p className="mt-2">Error: {errorProjectClaim?.message}</p>
-            )}
-            {errorRequester != undefined && (
-              <p className="mt-2">Error: {errorRequester?.message}</p>
-            )}
-            <p>Please go back to the requesting app and try again.</p>
-          </Alert>
-        </div>
+      <ProjectClaimLayout title="Claim a project" className="py-6">
+        <Admonition
+          type="warning"
+          className="mb-0"
+          title="Failed to retrieve project claim request details"
+        >
+          <p>Please retry your claim request from the requesting app</p>
+          {!!errorProjectClaim && <p className="mt-2">Error: {errorProjectClaim?.message}</p>}
+          {!!errorRequester && <p className="mt-2">Error: {errorRequester?.message}</p>}
+        </Admonition>
       </ProjectClaimLayout>
     )
   }
@@ -112,6 +106,7 @@ const ClaimProjectPage: NextPageWithLayout = () => {
       />
     )
   }
+
   return null
 }
 
@@ -120,7 +115,7 @@ ClaimProjectPage.getLayout = (page) => (
     <Head>
       <title>Claim project | Supabase</title>
     </Head>
-    <main className="flex-grow flex flex-col w-full h-full overflow-y-auto">{page}</main>
+    <main className="flex flex-col w-full min-h-screen overflow-y-auto">{page}</main>
   </>
 )