diff --git a/docs/references/react/use-auth.mdx b/docs/references/react/use-auth.mdx
index d4c99a23bd..f05614fa00 100644
--- a/docs/references/react/use-auth.mdx
+++ b/docs/references/react/use-auth.mdx
@@ -82,7 +82,7 @@ The `useAuth()` hook provides access to the current user's authentication state
 
 The following example uses the `useAuth()` hook to fetch data from an external API using a session token. The `getToken()` method is used to retrieve the token.
 
-```tsx {{ filename: 'ExternalDataPage.tsx' }}
+```tsx {{ filename: 'src/pages/ExternalDataPage.tsx' }}
 import { useAuth } from '@clerk/clerk-react'
 
 export default function ExternalDataPage() {
@@ -109,6 +109,10 @@ export default function ExternalDataPage() {
     return <div>Sign in to view this page</div>
   }
 
-  return <div><button onClick={fetchExternalData}>Fetch Data</button></div>
+  return (
+    <div>
+      <button onClick={fetchExternalData}>Fetch Data</button>
+    </div>
+  )
 }
 ```
diff --git a/docs/references/react/use-organization-list.mdx b/docs/references/react/use-organization-list.mdx
index 2efd9b2f0b..dd611b8f63 100644
--- a/docs/references/react/use-organization-list.mdx
+++ b/docs/references/react/use-organization-list.mdx
@@ -215,7 +215,7 @@ const { userMemberships } = useOrganizationList({
 
 The following example demonstrates how to use the `infinite` property to fetch and append new data to the existing list. The `userMemberships` attribute will be populated with the first page of the user's organization memberships. When the "Load more" button is clicked, the `fetchNext` helper function will be called to append the next page of memberships to the list.
 
-```tsx {{ filename: 'app/components/JoinedOrganizations.tsx' }}
+```tsx {{ filename: 'src/components/JoinedOrganizations.tsx' }}
 import { useOrganizationList } from '@clerk/clerk-react'
 import React from 'react'
 
@@ -257,7 +257,7 @@ The following example demonstrates how to use the `fetchPrevious` and `fetchNext
 
 Notice the difference between this example's pagination and the infinite pagination example above.
 
-```tsx {{ filename: 'app/components/UserInvitationsTable.tsx' }}
+```tsx {{ filename: 'src/components/UserInvitationsTable.tsx' }}
 import { useOrganizationList } from '@clerk/clerk-react'
 import React from 'react'
 
diff --git a/docs/references/react/use-reverification.mdx b/docs/references/react/use-reverification.mdx
index f0514aafa8..4361f3cd92 100644
--- a/docs/references/react/use-reverification.mdx
+++ b/docs/references/react/use-reverification.mdx
@@ -54,7 +54,7 @@ The following example demonstrates how to handle scenarios where a user cancels
 
 In the following example, `myFetcher` would be a function in your backend that fetches data from the route that requires reverification. See the [guide on how to require reverification](/docs/guides/reverification) for more information.
 
-```tsx {{ filename: 'MyButton.tsx' }}
+```tsx {{ filename: 'src/components/MyButton.tsx' }}
 import { useReverification } from '@clerk/react'
 
 export function MyButton() {
@@ -77,7 +77,7 @@ When `throwOnCancel` is set to `true`, the fetcher will throw a `ClerkRuntimeErr
 
 In this example, `myFetcher` would be a function in your backend that fetches data from the route that requires reverification. See the [guide on how to require reverification](/docs/guides/reverification) for more information.
 
-```tsx {{ filename: 'MyButton.tsx' }}
+```tsx {{ filename: 'src/components/MyButton.tsx' }}
 import { useReverification } from '@clerk/clerk-react'
 import { isClerkRuntimeError } from '@clerk/clerk-react/errors'
 
diff --git a/docs/references/react/use-sign-in.mdx b/docs/references/react/use-sign-in.mdx
index b598cfb506..13c7b55668 100644
--- a/docs/references/react/use-sign-in.mdx
+++ b/docs/references/react/use-sign-in.mdx
@@ -57,7 +57,7 @@ The `useSignIn()` hook provides access to the [`SignIn`](/docs/references/javasc
 
 The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs/references/javascript/sign-in/sign-in) object, which contains the current sign-in attempt status and methods to create a new sign-in attempt. The `isLoaded` property is used to handle the loading state.
 
-```tsx {{ filename: 'src/components/SignInPage.tsx' }}
+```tsx {{ filename: 'src/pages/SignInPage.tsx' }}
 import { useSignIn } from '@clerk/clerk-react'
 
 export default function SignInPage() {
@@ -68,7 +68,7 @@ export default function SignInPage() {
     return null
   }
 
-  return <div>The current sign in attempt status is {signIn?.status}.</div>
+  return <div>The current sign-in attempt status is {signIn?.status}.</div>
 }
 ```
 
@@ -113,4 +113,4 @@ The `status` property of the `SignIn` object can be one of the following values:
 
 ### Create a custom sign-in flow with `useSignIn()`
 
-The `useSignIn()` hook can also be used to build fully custom sign-in flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-in flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignIn()` hook to create custom flows, see the [custom flow guides](/docs/custom-flows/overview).
\ No newline at end of file
+The `useSignIn()` hook can also be used to build fully custom sign-in flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-in flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignIn()` hook to create custom flows, see the [custom flow guides](/docs/custom-flows/overview).
diff --git a/docs/references/react/use-sign-up.mdx b/docs/references/react/use-sign-up.mdx
index 3090a0f6ae..211c3f985b 100644
--- a/docs/references/react/use-sign-up.mdx
+++ b/docs/references/react/use-sign-up.mdx
@@ -57,10 +57,10 @@ The `useSignUp()` hook provides access to the [`SignUp`](/docs/references/javasc
 
 The following example uses the `useSignUp()` hook to access the [`SignUp`](/docs/references/javascript/sign-up/sign-up) object and check the current status of a sign-up.
 
-```tsx {{ filename: 'src/components/SignUpPage.tsx' }}
+```tsx {{ filename: 'src/pages/SignUpPage.tsx' }}
 import { useSignUp } from '@clerk/clerk-react'
 
-export default function SignUpStep() {
+export default function SignUpPage() {
   const { isLoaded, signUp } = useSignUp()
 
   if (!isLoaded) {
@@ -99,4 +99,4 @@ The `status` property of the `SignUp` object can be one of the following values:
 
 ### Create a custom sign-up flow with `useSignUp()`
 
-The `useSignUp()` hook can also be used to build fully custom sign-up flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-up flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignUp()` hook to create custom flows, see the [custom flow guides](/docs/custom-flows/overview).
\ No newline at end of file
+The `useSignUp()` hook can also be used to build fully custom sign-up flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-up flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignUp()` hook to create custom flows, see the [custom flow guides](/docs/custom-flows/overview).