diff --git a/apps/docs/components/GuidesSidebar.tsx b/apps/docs/components/GuidesSidebar.tsx
index 203ba9fedaefe..a247ca6e9121b 100644
--- a/apps/docs/components/GuidesSidebar.tsx
+++ b/apps/docs/components/GuidesSidebar.tsx
@@ -76,7 +76,7 @@ function AiTools({ className }: { className?: string }) {
         <button
           tabIndex={0}
           onClick={copyMarkdown}
-          className="flex items-center gap-1.5 text-xs text-foreground-lighter hover:text-foreground text-left transition-colors"
+          className="flex cursor-pointer items-center gap-1.5 text-xs text-foreground-lighter hover:text-foreground text-left transition-colors"
         >
           {copied ? (
             <Check size={14} strokeWidth={1.5} className="text-brand" />
diff --git a/apps/docs/content/guides/local-development/cli/getting-started.mdx b/apps/docs/content/guides/local-development/cli/getting-started.mdx
index 18e38612983fe..5ec58c4015bde 100644
--- a/apps/docs/content/guides/local-development/cli/getting-started.mdx
+++ b/apps/docs/content/guides/local-development/cli/getting-started.mdx
@@ -29,6 +29,7 @@ The rest of this page writes examples as `supabase <command>`; translate them to
   size="small"
   type="underlined"
   defaultActiveId="npm"
+  queryGroup="platform"
 >
 <TabPanel id="npm" label="npm">
 
@@ -104,6 +105,7 @@ Pre-release CLI builds ship from the development branch (`X.Y.Z-beta.N` versions
   size="small"
   type="underlined"
   defaultActiveId="npm"
+  queryGroup="platform"
 >
 <TabPanel id="npm" label="npm">
 
@@ -160,8 +162,24 @@ When a new [version](https://github.com/supabase/cli/releases) is released, you
   scrollable
   size="small"
   type="underlined"
-  defaultActiveId="macos"
+  defaultActiveId="npm"
+  queryGroup="platform"
 >
+<TabPanel id="npm" label="npm">
+
+If you have installed the CLI as dev dependency via [npm](https://www.npmjs.com/package/supabase), you can update it with:
+
+```sh
+npm update supabase --save-dev
+```
+
+Beta channel (`supabase@beta`):
+
+```sh
+npm update supabase@beta --save-dev
+```
+
+</TabPanel>
 <TabPanel id="macos" label="macOS">
 
 ```sh
@@ -202,7 +220,7 @@ Beta channel:
 brew upgrade supabase-beta
 ```
 
-#### Linux package manager
+#### Linux packages
 
 1. Download the latest package from the [Supabase CLI releases page](https://github.com/supabase/cli/releases/latest)
 2. Install the package using the same commands as the [initial installation](#linux-packages):
@@ -210,21 +228,6 @@ brew upgrade supabase-beta
    - `sudo dpkg -i <...>.deb`
    - `sudo rpm -i <...>.rpm`
 
-</TabPanel>
-<TabPanel id="npm" label="npm">
-
-If you have installed the CLI as dev dependency via [npm](https://www.npmjs.com/package/supabase), you can update it with:
-
-```sh
-npm update supabase --save-dev
-```
-
-Beta channel (`supabase@beta`):
-
-```sh
-npm update supabase@beta --save-dev
-```
-
 </TabPanel>
 </Tabs>
 
diff --git a/apps/docs/features/ui/CodeBlock/CodeBlock.client.tsx b/apps/docs/features/ui/CodeBlock/CodeBlock.client.tsx
index 982d576bffd9e..2db18ab15c46b 100644
--- a/apps/docs/features/ui/CodeBlock/CodeBlock.client.tsx
+++ b/apps/docs/features/ui/CodeBlock/CodeBlock.client.tsx
@@ -113,7 +113,7 @@ export function CodeCopyButton({ className, content }: { className?: string; con
             onClick={handleCopy}
             onBlur={resetStatus}
             className={cn(
-              'border rounded-md p-1',
+              'cursor-pointer border rounded-md p-1',
               copied && 'bg-selection',
               'hover:bg-selection transition',
               className
@@ -163,7 +163,7 @@ export function CodeBlockControls({ content }: { content: string }) {
           <button
             tabIndex={0}
             onClick={toggleWrap}
-            className={cn('border rounded-md p-1', 'hover:bg-selection transition')}
+            className={cn('cursor-pointer border rounded-md p-1', 'hover:bg-selection transition')}
             aria-label={isWrapped ? 'Disable word wrap' : 'Enable word wrap'}
           >
             {isWrapped ? (
diff --git a/apps/docs/features/ui/PromptPanel.tsx b/apps/docs/features/ui/PromptPanel.tsx
index 9c3e5d23d53da..56424f6eea8d8 100644
--- a/apps/docs/features/ui/PromptPanel.tsx
+++ b/apps/docs/features/ui/PromptPanel.tsx
@@ -192,7 +192,7 @@ function CopyButton({ label, value }: { label: string; value: string }) {
           setCopied(true)
         })
       }}
-      className="rounded-sm p-1.5 text-foreground-muted transition-colors hover:bg-surface-200 hover:text-foreground focus-ring"
+      className="cursor-pointer rounded-sm p-1.5 text-foreground-muted transition-colors hover:bg-surface-200 hover:text-foreground focus-ring"
       aria-label={copied ? `${label} copied` : `Copy ${label}`}
       title={copied ? 'Copied' : 'Copy to clipboard'}
     >
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
index 0288f218f3342..f6e775cc08a96 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
@@ -3,7 +3,7 @@ import dayjs from 'dayjs'
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import { useCallback, useState } from 'react'
-import { useForm, type SubmitHandler } from 'react-hook-form'
+import { useForm, useWatch, type SubmitHandler } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -70,9 +70,9 @@ export const NewScopedTokenSheet = ({
   const track = useTrack()
   const { mutate: createAccessToken, isPending } = useAccessTokenCreateMutation()
 
-  const resourceAccess = form.watch('resourceAccess')
-  const expiresAt = form.watch('expiresAt')
-  const permissionRows = form.watch('permissionRows') || []
+  const resourceAccess = useWatch({ control: form.control, name: 'resourceAccess' })
+  const expiresAt = useWatch({ control: form.control, name: 'expiresAt' })
+  const permissionRows = useWatch({ control: form.control, name: 'permissionRows' }) || []
 
   const onSubmit: SubmitHandler<TokenFormValues> = async (values) => {
     if (!permissionRows || permissionRows.length === 0) {
diff --git a/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx b/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx
index d421f5ffc2d32..c7c8d4d5d79b1 100644
--- a/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { SupportCategories } from '@supabase/shared-types/out/constants'
 import { LOCAL_STORAGE_KEYS, safeLocalStorage } from 'common'
 import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -63,7 +63,7 @@ export const DeleteAccountButton = () => {
     resolver: zodResolver(FormSchema),
     defaultValues: { account: '' },
   })
-  const { account } = form.watch()
+  const account = useWatch({ control: form.control, name: 'account' })
 
   const { mutate: submitSupportTicket, isPending } = useSendSupportTicketMutation({
     onSuccess: () => {
diff --git a/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx b/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx
index f188769bf9fa1..76e20fc13da23 100644
--- a/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx
+++ b/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useParams } from 'common'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -99,7 +99,10 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
     defaultValues,
   })
 
-  const { lint_name, assigned_to, is_disabled } = form.watch()
+  const [lint_name, assigned_to, is_disabled] = useWatch({
+    control: form.control,
+    name: ['lint_name', 'assigned_to', 'is_disabled'],
+  })
 
   const onSubmit: SubmitHandler<z.infer<typeof FormSchema>> = async (values) => {
     if (!projectRef) return console.error('Project ref is required')
@@ -200,7 +203,7 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
                   <Admonition showIcon={false} type="default">
                     {generateRuleDescription({
                       name: lint_name,
-                      disabled: is_disabled,
+                      disabled: is_disabled ?? defaultValues.is_disabled,
                       member: members.find((x) => x.gotrue_id === assigned_to),
                     })}
                   </Admonition>
diff --git a/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx b/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx
index 94c27c95537d2..d56eee4efd6d9 100644
--- a/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { useEffect } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import { Button, Card, CardContent, CardFooter, Form, FormControl, FormField, Switch } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
@@ -69,7 +69,9 @@ export const AuditLogsForm = () => {
     defaultValues: { AUDIT_LOG_DISABLE_POSTGRES: false },
   })
   const { isDirty } = form.formState
-  const { AUDIT_LOG_DISABLE_POSTGRES: formValueDisablePostgres } = form.watch()
+  const { AUDIT_LOG_DISABLE_POSTGRES: formValueDisablePostgres } = useWatch({
+    control: form.control,
+  })
   const currentlyDisabled = authConfig?.AUDIT_LOG_DISABLE_POSTGRES ?? false
   const isDisabling = !currentlyDisabled && formValueDisablePostgres
 
diff --git a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx
index f470b23d02c46..4f81a929d4745 100644
--- a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx
@@ -4,7 +4,7 @@ import { useParams } from 'common'
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Alert,
@@ -82,6 +82,10 @@ export const BasicAuthSettingsForm = () => {
     },
   })
   const { isDirty } = form.formState
+  const externalAnonymousUsersEnabled = useWatch({
+    control: form.control,
+    name: 'EXTERNAL_ANONYMOUS_USERS_ENABLED',
+  })
 
   useEffect(() => {
     if (authConfig) {
@@ -250,7 +254,7 @@ export const BasicAuthSettingsForm = () => {
                     )}
                   />
 
-                  {form.watch('EXTERNAL_ANONYMOUS_USERS_ENABLED') && (
+                  {externalAnonymousUsersEnabled && (
                     <Alert
                       className="flex w-full items-center justify-between mt-4"
                       variant="warning"
@@ -291,23 +295,22 @@ export const BasicAuthSettingsForm = () => {
                     </Alert>
                   )}
 
-                  {!authConfig?.SECURITY_CAPTCHA_ENABLED &&
-                    form.watch('EXTERNAL_ANONYMOUS_USERS_ENABLED') && (
-                      <Alert className="mt-4">
-                        <WarningIcon />
-                        <AlertTitle>
-                          We highly recommend{' '}
-                          <InlineLink href={`/project/${projectRef}/auth/protection`}>
-                            enabling captcha
-                          </InlineLink>{' '}
-                          for anonymous sign-ins
-                        </AlertTitle>
-                        <AlertDescription>
-                          This will prevent potential abuse on sign-ins which may bloat your
-                          database and incur costs for monthly active users (MAU)
-                        </AlertDescription>
-                      </Alert>
-                    )}
+                  {!authConfig?.SECURITY_CAPTCHA_ENABLED && externalAnonymousUsersEnabled && (
+                    <Alert className="mt-4">
+                      <WarningIcon />
+                      <AlertTitle>
+                        We highly recommend{' '}
+                        <InlineLink href={`/project/${projectRef}/auth/protection`}>
+                          enabling captcha
+                        </InlineLink>{' '}
+                        for anonymous sign-ins
+                      </AlertTitle>
+                      <AlertDescription>
+                        This will prevent potential abuse on sign-ins which may bloat your database
+                        and incur costs for monthly active users (MAU)
+                      </AlertDescription>
+                    </Alert>
+                  )}
                 </CardContent>
                 <CardContent>
                   <FormField
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
index e3eeeb8abb2b0..a8a2da6979f31 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import type { editor } from 'monaco-editor'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import ReactMarkdown from 'react-markdown'
 import { toast } from 'sonner'
 import {
@@ -199,7 +199,7 @@ export const TemplateEditor = ({ template, isReadOnly = false }: TemplateEditorP
   }
 
   // Check if form values have changed
-  const formValues = form.watch()
+  const formValues = useWatch({ control: form.control })
   const baselineValues = INITIAL_VALUES
   const baselineBodyValue = (authConfig && authConfig[messageSlug]) ?? ''
   const hasCustomTemplate =
diff --git a/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx b/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
index 4495b281c8c91..aff0fed04211e 100644
--- a/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
+++ b/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
@@ -8,7 +8,7 @@ import {
 import { useParams } from 'common'
 import randomBytes from 'randombytes'
 import { useEffect, useMemo } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -167,7 +167,10 @@ export const CreateHookSheet = ({
   })
 
   const isDirty = form.formState.isDirty
-  const { postgresValues, hookType, selectedType, enabled } = form.watch()
+  const [postgresValues, hookType, selectedType, enabled] = useWatch({
+    control: form.control,
+    name: ['postgresValues', 'hookType', 'selectedType', 'enabled'],
+  })
   const {
     confirmOnClose,
     handleOpenChange,
diff --git a/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx
index 1bcc5c588aa28..6b052ea6d88b0 100644
--- a/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { useEffect, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Alert,
@@ -170,6 +170,7 @@ export const MfaAuthSettingsForm = () => {
     },
   })
   const { reset: resetPhoneForm } = phoneForm
+  const mfaPhoneValue = useWatch({ control: phoneForm.control, name: 'MFA_PHONE' })
 
   const securityForm = useForm<SecurityFormValues>({
     resolver: zodResolver(securitySchema),
@@ -329,8 +330,7 @@ export const MfaAuthSettingsForm = () => {
     )
   }
 
-  const phoneMFAIsEnabled =
-    phoneForm.watch('MFA_PHONE') === 'Enabled' || phoneForm.watch('MFA_PHONE') === 'Verify Enabled'
+  const phoneMFAIsEnabled = mfaPhoneValue === 'Enabled' || mfaPhoneValue === 'Verify Enabled'
   const hasUpgradedPhoneMFA =
     authConfig && !authConfig.MFA_PHONE_VERIFY_ENABLED && phoneMFAIsEnabled
 
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx
index a44a80a8d7c30..2e506ce920568 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx
@@ -8,7 +8,7 @@ import { useParams } from 'common'
 import { Storage } from 'icons'
 import { ImageOff, Trash2, X } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -111,6 +111,8 @@ export const CreateOrUpdateOAuthAppSheet = ({
     defaultValues: initialValues,
   })
 
+  const clientType = useWatch({ control: form.control, name: 'client_type' })
+
   const { hostEndpoint: clientEndpoint } = useProjectApiUrl({ projectRef })
 
   const { mutate: createOAuthApp, isPending: isCreating } = useOAuthServerAppCreateMutation({
@@ -481,7 +483,7 @@ export const CreateOrUpdateOAuthAppSheet = ({
                   )}
                 />
 
-                {form.watch('client_type') === 'confidential' && (
+                {clientType === 'confidential' && (
                   <FormField
                     control={form.control}
                     name="token_endpoint_auth_method"
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
index bb6c43430e32f..e296531688de6 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -187,6 +187,12 @@ export const OAuthServerSettingsForm = () => {
     setShowDisableOAuthServerConfirmation(false)
   }
 
+  const oauthServerEnabled = useWatch({ control: form.control, name: 'OAUTH_SERVER_ENABLED' })
+  const authorizationPath = useWatch({
+    control: form.control,
+    name: 'OAUTH_SERVER_AUTHORIZATION_PATH',
+  })
+
   if (isPermissionsLoaded && !canReadConfig) {
     return <NoPermission resourceText="view OAuth server settings" />
   }
@@ -234,7 +240,7 @@ export const OAuthServerSettingsForm = () => {
                     )}
                   />
                 </CardContent>
-                {form.watch('OAUTH_SERVER_ENABLED') && (
+                {oauthServerEnabled && (
                   <>
                     <CardContent>
                       <FormItemLayout
@@ -279,9 +285,11 @@ export const OAuthServerSettingsForm = () => {
                       />
                       {(() => {
                         const siteUrl = authConfig?.SITE_URL?.trim()
-                        const authorizationPath =
-                          form.watch('OAUTH_SERVER_AUTHORIZATION_PATH')?.trim() || '/oauth/consent'
-                        const authorizationUrl = siteUrl ? `${siteUrl}${authorizationPath}` : ''
+                        const resolvedAuthorizationPath =
+                          authorizationPath?.trim() || '/oauth/consent'
+                        const authorizationUrl = siteUrl
+                          ? `${siteUrl}${resolvedAuthorizationPath}`
+                          : ''
 
                         return (
                           <Admonition
@@ -362,7 +370,7 @@ export const OAuthServerSettingsForm = () => {
           </Form>
         </PageSectionContent>
       </PageSection>
-      {isSuccess && authConfig?.OAUTH_SERVER_ENABLED && form.watch('OAUTH_SERVER_ENABLED') && (
+      {isSuccess && authConfig?.OAUTH_SERVER_ENABLED && oauthServerEnabled && (
         <OAuthEndpointsTable isLoading={isPending} />
       )}
 
diff --git a/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx b/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx
index 9f4982269d27f..cf8bf6df0a210 100644
--- a/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -112,7 +112,7 @@ export const PerformanceSettingsForm = () => {
     },
   })
 
-  const chosenUnit = databaseForm.watch('DB_MAX_POOL_SIZE_UNIT')
+  const chosenUnit = useWatch({ control: databaseForm.control, name: 'DB_MAX_POOL_SIZE_UNIT' })
 
   const onSubmitRequestDurationForm = (values: any) => {
     if (!project?.ref) return console.error('Project ref is required')
diff --git a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
index ba2dba4f67686..f19337225165b 100644
--- a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
+++ b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import Link from 'next/link'
 import { useEffect } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -147,6 +147,13 @@ export const RateLimits = () => {
     },
   })
 
+  const rateLimitTokenRefresh = useWatch({
+    control: rateLimitForm.control,
+    name: 'RATE_LIMIT_TOKEN_REFRESH',
+  })
+  const rateLimitVerify = useWatch({ control: rateLimitForm.control, name: 'RATE_LIMIT_VERIFY' })
+  const rateLimitOtp = useWatch({ control: rateLimitForm.control, name: 'RATE_LIMIT_OTP' })
+
   const onSubmitRateLimitForm = (data: z.infer<typeof RateLimitFormSchema>) => {
     if (!projectRef) return console.error('Project ref is required')
 
@@ -390,9 +397,9 @@ export const RateLimits = () => {
                             </TooltipContent>
                           )}
                         </Tooltip>
-                        {rateLimitForm.watch('RATE_LIMIT_TOKEN_REFRESH') > 0 && (
+                        {rateLimitTokenRefresh > 0 && (
                           <p className="text-foreground-lighter text-sm mt-2">
-                            {rateLimitForm.watch('RATE_LIMIT_TOKEN_REFRESH') * 12} requests per hour
+                            {rateLimitTokenRefresh * 12} requests per hour
                           </p>
                         )}
                       </FormItemLayout>
@@ -438,9 +445,9 @@ export const RateLimits = () => {
                             </TooltipContent>
                           )}
                         </Tooltip>
-                        {rateLimitForm.watch('RATE_LIMIT_VERIFY') > 0 && (
+                        {rateLimitVerify > 0 && (
                           <p className="text-foreground-lighter text-sm mt-2">
-                            {rateLimitForm.watch('RATE_LIMIT_VERIFY') * 12} requests per hour
+                            {rateLimitVerify * 12} requests per hour
                           </p>
                         )}
                       </FormItemLayout>
@@ -533,9 +540,9 @@ export const RateLimits = () => {
                             </TooltipContent>
                           )}
                         </Tooltip>
-                        {rateLimitForm.watch('RATE_LIMIT_OTP') > 0 && (
+                        {rateLimitOtp > 0 && (
                           <p className="text-foreground-lighter text-sm mt-2">
-                            {rateLimitForm.watch('RATE_LIMIT_OTP') * 12} requests per hour
+                            {rateLimitOtp * 12} requests per hour
                           </p>
                         )}
                       </FormItemLayout>
diff --git a/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx b/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx
index 7e7cffa8b6cf0..a13134d3d2b76 100644
--- a/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx
+++ b/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { Label } from '@ui/components/shadcn/ui/label'
 import { useParams } from 'common'
 import { useEffect } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -89,7 +89,7 @@ export const AddNewURLModal = ({ visible, allowList, onClose }: AddNewURLModalPr
     resolver: zodResolver(formSchema),
     defaultValues: initialValues,
   })
-  const urls = form.watch('urls')
+  const urls = useWatch({ control: form.control, name: 'urls' })
 
   const onSubmit = (data: z.infer<typeof formSchema>) => {
     const payload = parseRedirectUrls(
diff --git a/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx b/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
index 997cec88e847d..b3827866156ae 100644
--- a/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
+++ b/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { useEffect, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -100,13 +100,17 @@ type SmtpFormValues = z.infer<typeof smtpSchema>
 
 export const SmtpForm = () => {
   const { ref: projectRef } = useParams()
-  const { data: authConfig, error: authConfigError, isError } = useAuthConfigQuery({ projectRef })
+  const {
+    data: authConfig,
+    error: authConfigError,
+    isError,
+    isSuccess,
+  } = useAuthConfigQuery({ projectRef })
   const { data: selectedProject } = useSelectedProjectQuery()
 
   const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation()
   const { mutateAsync: resetAuthTemplate } = useAuthTemplateResetMutation()
 
-  const [enableSmtp, setEnableSmtp] = useState(false)
   const [showDisableConfirmation, setShowDisableConfirmation] = useState(false)
   const [pendingValues, setPendingValues] = useState<SmtpFormValues | null>(null)
 
@@ -150,6 +154,8 @@ export const SmtpForm = () => {
   })
 
   const { isDirty } = form.formState
+  const smtpHost = useWatch({ control: form.control, name: 'SMTP_HOST' })
+  const enableSmtp = useWatch({ control: form.control, name: 'ENABLE_SMTP' })
 
   const doUpdate = ({
     values,
@@ -235,27 +241,16 @@ export const SmtpForm = () => {
     })
   }
 
-  // Update form values when auth config is loaded
   useEffect(() => {
-    if (authConfig) {
+    if (isSuccess) {
       const formValues = generateFormValues(authConfig)
       form.reset({
         ...formValues,
         ENABLE_SMTP: isSmtpEnabled(authConfig),
       } as SmtpFormValues)
-      setEnableSmtp(isSmtpEnabled(authConfig))
     }
-  }, [authConfig, form])
-
-  // Update enableSmtp state when the form field changes
-  useEffect(() => {
-    const subscription = form.watch((value, { name }) => {
-      if (name === 'ENABLE_SMTP') {
-        setEnableSmtp(value.ENABLE_SMTP as boolean)
-      }
-    })
-    return () => subscription.unsubscribe()
-  }, [form])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSuccess, form])
 
   if (isError) {
     return (
@@ -305,6 +300,7 @@ export const SmtpForm = () => {
                     >
                       <FormControl>
                         <Switch
+                          aria-label="Toggle SMTP"
                           checked={field.value}
                           onCheckedChange={field.onChange}
                           disabled={!canUpdateConfig}
@@ -395,7 +391,7 @@ export const SmtpForm = () => {
                           )}
                         />
 
-                        {form.watch('SMTP_HOST')?.endsWith('.gmail.com') && (
+                        {smtpHost?.endsWith('.gmail.com') && (
                           <Admonition
                             type="warning"
                             title="Check your SMTP provider"
@@ -523,7 +519,6 @@ export const SmtpForm = () => {
                       variant="default"
                       onClick={() => {
                         form.reset()
-                        setEnableSmtp(isSmtpEnabled(authConfig))
                       }}
                     >
                       Cancel
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx
index d8b184185af08..47fb516c3101c 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useParams } from 'common'
 import { Trash } from 'lucide-react'
 import { useEffect } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -90,7 +90,7 @@ export const CreateAwsCognitoAuthIntegrationDialog = ({
     })
   }
 
-  const awsRegion = form.watch('awsRegion')
+  const awsRegion = useWatch({ control: form.control, name: 'awsRegion' })
 
   return (
     <Dialog open={visible} onOpenChange={() => onClose()}>
diff --git a/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx b/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx
index cc928dff45a30..ddc0b42d28a46 100644
--- a/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useParams } from 'common'
 import dayjs from 'dayjs'
 import { useEffect } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -61,7 +61,7 @@ export const BanUserModal = ({ visible, user, onClose }: BanUserModalProps) => {
     defaultValues,
   })
 
-  const { value, unit } = form.watch()
+  const [value, unit] = useWatch({ control: form.control, name: ['value', 'unit'] })
   const bannedUntil = dayjs().add(Number(value), unit).format('DD MMM YYYY HH:mm (ZZ)')
 
   const onSubmit = (data: FormType) => {
diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
index cd4037b16a5fd..c2b2e72f3c342 100644
--- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
@@ -14,7 +14,7 @@ import {
 import { Form } from '@ui/components/shadcn/ui/form'
 import { Check, ChevronsUpDown, HelpCircle } from 'lucide-react'
 import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -140,7 +140,10 @@ export const NewPaymentMethodElement = forwardRef(
       form.setValue('tax_id_name', name)
     }
 
-    const { tax_id_name, tax_id_value: rawTaxIdValue } = form.watch()
+    const [tax_id_name, rawTaxIdValue] = useWatch({
+      control: form.control,
+      name: ['tax_id_name', 'tax_id_value'],
+    })
     const taxIdValue = rawTaxIdValue?.trim() ?? ''
     const selectedTaxId = TAX_IDS.find((option) => option.name === tax_id_name)
 
diff --git a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
index 31a46cc055105..1f50e17d6d6e7 100644
--- a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
@@ -8,7 +8,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Badge,
@@ -112,7 +112,10 @@ export const CreateBranchModal = () => {
     defaultValues: { branchName: '', gitBranchName: '', withData: false },
   })
 
-  const { withData, gitBranchName } = form.watch()
+  const [withData, gitBranchName] = useWatch({
+    control: form.control,
+    name: ['withData', 'gitBranchName'],
+  })
   const debouncedGitBranchName = useDebounce(gitBranchName, 500)
 
   const {
diff --git a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
index 3a142bfdb1760..b16f953cf4502 100644
--- a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
+++ b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useMemo } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Badge,
@@ -106,7 +106,7 @@ export const EnableExtensionModal = ({
     resolver: zodResolver(FormSchema),
     defaultValues,
   })
-  const { schema } = form.watch()
+  const schema = useWatch({ control: form.control, name: 'schema' })
 
   const onSubmit = async (values: z.infer<typeof FormSchema>) => {
     if (project === undefined) return console.error('Project is required')
diff --git a/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx b/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
index c40a04a07e036..ba9e7d8b7fd0f 100644
--- a/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
@@ -3,7 +3,7 @@ import { acceptUntrustedSql, untrustedSql } from '@supabase/pg-meta/src/pg-forma
 import { isEmpty, isNull, keyBy, mapValues, partition } from 'lodash'
 import { Plus, Trash } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
-import { SubmitHandler, useFieldArray, useForm } from 'react-hook-form'
+import { SubmitHandler, useFieldArray, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -91,7 +91,7 @@ export const CreateFunction = ({
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
   })
-  const { type, language } = form.watch()
+  const [type, language] = useWatch({ control: form.control, name: ['type', 'language'] })
 
   const { confirmOnClose, handleOpenChange, modalProps } = useConfirmOnClose({
     checkIsDirty: () => form.formState.isDirty,
diff --git a/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/index.tsx b/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/index.tsx
index 4e59521d12b8c..e24db3b43745e 100644
--- a/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/index.tsx
+++ b/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/index.tsx
@@ -14,7 +14,7 @@ import { useQueryClient } from '@tanstack/react-query'
 import { useParams } from 'common'
 import { isEqual } from 'lodash'
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -130,7 +130,10 @@ export const PolicyEditorPanel = memo(function ({
     defaultValues,
   })
 
-  const { name, table, behavior, command, roles } = form.watch()
+  const [name, table, behavior, command, roles] = useWatch({
+    control: form.control,
+    name: ['name', 'table', 'behavior', 'command', 'roles'],
+  })
   const supportWithCheck = ['update', 'all'].includes(command)
   const isRenamingPolicy = selectedPolicy !== undefined && name !== selectedPolicy.name
 
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/Fields.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/Fields.tsx
index dff62c342a4b4..4c66ffe335275 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/Fields.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/Fields.tsx
@@ -1,7 +1,7 @@
 import { useParams } from 'common'
 import { Eye, EyeOff, Loader2 } from 'lucide-react'
 import { useState } from 'react'
-import type { UseFormReturn } from 'react-hook-form'
+import { useWatch, type UseFormReturn } from 'react-hook-form'
 import {
   Button,
   FormControl,
@@ -61,7 +61,10 @@ export const AnalyticsBucketFields = ({
   editMode: boolean
   onSelectNewBucket: () => void
 }) => {
-  const { warehouseName, s3AccessKeyId, namespace } = form.watch()
+  const [warehouseName, s3AccessKeyId, namespace] = useWatch({
+    control: form.control,
+    name: ['warehouseName', 's3AccessKeyId', 'namespace'],
+  })
   const [showCatalogToken, setShowCatalogToken] = useState(false)
   const [showSecretAccessKey, setShowSecretAccessKey] = useState(false)
 
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx
index e124836790115..629633df830ad 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx
@@ -1,6 +1,6 @@
 import { Check, Database, Eye, EyeOff, Loader2, Plus, SlidersHorizontal } from 'lucide-react'
 import { useMemo, useState } from 'react'
-import type { UseFormReturn } from 'react-hook-form'
+import { useWatch, type UseFormReturn } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -108,7 +108,10 @@ const DuckLakeModeSelector = ({
 }
 
 const DuckLakeSupabaseFields = ({ form }: { form: UseFormReturn<DestinationPanelSchemaType> }) => {
-  const { ducklakeStorageProjectRef } = form.watch()
+  const ducklakeStorageProjectRef = useWatch({
+    control: form.control,
+    name: 'ducklakeStorageProjectRef',
+  })
 
   const [showNewBucketDialog, setShowNewBucketDialog] = useState(false)
   const [newBucketName, setNewBucketName] = useState('')
@@ -642,7 +645,8 @@ export const DuckLakeFields = ({
   form: UseFormReturn<DestinationPanelSchemaType>
   editMode: boolean
 }) => {
-  const ducklakeMode = (form.watch('ducklakeMode') ?? DUCKLAKE_MODE_SUPABASE) as DucklakeMode
+  const ducklakeMode = (useWatch({ control: form.control, name: 'ducklakeMode' }) ??
+    DUCKLAKE_MODE_SUPABASE) as DucklakeMode
   // The platform API resolves "Use Supabase" config into a flat catalog URL + provisioned S3
   // credentials before persisting, so an existing destination can only be edited as custom
   // parameters — the original project selections aren't recoverable.
@@ -776,7 +780,10 @@ const BucketSelection = ({
   value: string | undefined
   onChange: (value: string) => void
 }) => {
-  const { ducklakeStorageProjectRef } = form.watch()
+  const ducklakeStorageProjectRef = useWatch({
+    control: form.control,
+    name: 'ducklakeStorageProjectRef',
+  })
 
   const {
     data: bucketsData,
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx
index 912156d765b7a..e0ac6818d71be 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx
@@ -1,6 +1,6 @@
 import { useParams } from 'common'
 import { useMemo } from 'react'
-import type { UseFormReturn } from 'react-hook-form'
+import { useWatch, type UseFormReturn } from 'react-hook-form'
 import { FormControl, FormField } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -20,7 +20,7 @@ export const PublicationSelection = ({
   onSelectNewPublication,
 }: PublicationSelectionProps) => {
   const { ref: projectRef } = useParams()
-  const { publicationName } = form.watch()
+  const publicationName = useWatch({ control: form.control, name: 'publicationName' })
 
   const sourceId = useReplicationSourceId({ projectRef })
 
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/TableCopySelection.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/TableCopySelection.tsx
index 2db3fed60bafc..3aff0d660c37c 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/TableCopySelection.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/TableCopySelection.tsx
@@ -1,6 +1,6 @@
 import { useParams } from 'common'
 import { useMemo } from 'react'
-import type { UseFormReturn } from 'react-hook-form'
+import { useWatch, type UseFormReturn } from 'react-hook-form'
 import { FormControl, FormField, Select, SelectContent, SelectItem, SelectTrigger } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -32,7 +32,10 @@ export const TableCopySelection = ({ form, editMode }: TableCopySelectionProps)
   const { ref: projectRef } = useParams()
   const sourceId = useReplicationSourceId({ projectRef })
 
-  const { publicationName, tableSyncCopyMode, tableSyncCopyTableIds } = form.watch()
+  const [publicationName, tableSyncCopyMode, tableSyncCopyTableIds] = useWatch({
+    control: form.control,
+    name: ['publicationName', 'tableSyncCopyMode', 'tableSyncCopyTableIds'],
+  })
 
   const {
     data: publications = [],
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
index 079ac93f64d7c..69644ce02b035 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
@@ -4,7 +4,7 @@ import { useParams } from 'common'
 import { AnimatePresence, motion } from 'framer-motion'
 import { Loader2 } from 'lucide-react'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { AWS_REGIONS } from 'shared-data'
 import { toast } from 'sonner'
 import {
@@ -259,7 +259,7 @@ export const DestinationForm = ({
     defaultValues,
   })
 
-  const { publicationName } = form.watch()
+  const publicationName = useWatch({ control: form.control, name: 'publicationName' })
 
   const publicationNames = useMemo(() => publications?.map((pub) => pub.name) ?? [], [publications])
   const isSelectedPublicationMissing =
diff --git a/apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx b/apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx
index 8ae2a45bffb9f..edce0bf639924 100644
--- a/apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx
+++ b/apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import type { PGTrigger } from '@supabase/pg-meta'
 import { Terminal } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -136,7 +136,10 @@ export const TriggerSheet = ({
     resolver: zodResolver(FormSchema),
     defaultValues,
   })
-  const { function_name, function_schema } = form.watch()
+  const [function_name, function_schema] = useWatch({
+    control: form.control,
+    name: ['function_name', 'function_schema'],
+  })
 
   const { confirmOnClose, handleOpenChange, modalProps } = useConfirmOnClose({
     checkIsDirty: () => form.formState.isDirty,
diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
index e6fb89e3de59c..b019b69a5f76b 100644
--- a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useEffect, useRef, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { CloudProvider } from 'shared-data'
 import { toast } from 'sonner'
 import { Button, cn, Form } from 'ui'
@@ -158,7 +158,7 @@ export function DiskManagementForm({ chartsClassName }: { chartsClassName?: stri
     reValidateMode: 'onChange',
   })
 
-  const { computeSize: modifiedComputeSize } = form.watch()
+  const modifiedComputeSize = useWatch({ control: form.control, name: 'computeSize' })
 
   const isSuccess =
     isAddonsSuccess &&
@@ -195,8 +195,8 @@ export function DiskManagementForm({ chartsClassName }: { chartsClassName?: stri
     !isSpendCapEnabled &&
     RESTRICTED_COMPUTE_FOR_THROUGHPUT_ON_GP3.includes(modifiedComputeSize)
 
-  const watchedTotalSize = form.watch('totalSize') ?? 0
-  const watchedStorageType = form.watch('storageType')
+  const watchedTotalSize = useWatch({ control: form.control, name: 'totalSize' }) ?? 0
+  const watchedStorageType = useWatch({ control: form.control, name: 'storageType' })
   // Minimum disk size where the platform API will accept an IOPS payload (500 IOPS/GB rule).
   const minDiskSizeForCustomIops = calculateDiskSizeRequiredForIopsWithGp3(
     DISK_LIMITS[DiskType.GP3].minIops
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx b/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx
index 6e626f6b2045c..d5651c249dff7 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'common'
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import {
   FormControl,
   FormField,
@@ -26,7 +26,10 @@ export const AutoScaleFields = ({ form }: AutoScaleFieldProps) => {
     setValue,
     formState: { errors },
   } = form
-  const { totalSize, growthPercent, maxSizeGb, minIncrementGb } = form.watch()
+  const [totalSize, growthPercent, maxSizeGb, minIncrementGb] = useWatch({
+    control,
+    name: ['totalSize', 'growthPercent', 'maxSizeGb', 'minIncrementGb'],
+  })
 
   const { isError } = useDiskAutoscaleCustomConfigQuery({ projectRef })
 
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx
index 8d96b14e7a149..d0568f8dfa4c2 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx
@@ -2,7 +2,7 @@ import { SupportCategories } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { CpuIcon, Lock, Microchip } from 'lucide-react'
 import { useMemo } from 'react'
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import {
   cn,
   FormField,
@@ -57,7 +57,7 @@ export function ComputeSectionBillingBadge({
   beforePrice,
   afterPrice,
 }: ComputeSectionBillingBadgeProps) {
-  const computeSize = form.watch('computeSize')
+  const computeSize = useWatch({ control: form.control, name: 'computeSize' })
   const { showMicroUpgradeBadge } = useShowMicroUpgradeBadge()
 
   return (
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx
index 5af294822c29c..b315674dec306 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'common'
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import {
   Button,
   FormControl,
@@ -27,11 +27,11 @@ type IOPSFieldProps = {
 
 export function IOPSField({ form, disableInput }: IOPSFieldProps) {
   const { ref: projectRef } = useParams()
-  const { control, formState, setValue, trigger, getValues, watch } = form
+  const { control, formState, setValue, trigger, getValues } = form
 
-  const watchedStorageType = watch('storageType')
-  const watchedComputeSize = watch('computeSize')
-  const watchedIOPS = watch('provisionedIOPS') ?? 0
+  const watchedStorageType = useWatch({ control, name: 'storageType' })
+  const watchedComputeSize = useWatch({ control, name: 'computeSize' })
+  const watchedIOPS = useWatch({ control, name: 'provisionedIOPS' }) ?? 0
 
   const { isError } = useDiskAttributesQuery({ projectRef })
 
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx
index 9b07712f8fb88..fe0548e246cbc 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx
@@ -1,7 +1,7 @@
 import { useParams } from 'common'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useEffect } from 'react'
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import {
   FormControl,
   FormField,
@@ -29,11 +29,11 @@ type ThroughputFieldProps = {
 export function ThroughputField({ form, disableInput }: ThroughputFieldProps) {
   const { ref: projectRef } = useParams()
 
-  const { control, formState, setValue, getValues, watch } = form
+  const { control, formState, setValue, getValues } = form
 
-  const watchedStorageType = watch('storageType')
-  const watchedTotalSize = watch('totalSize')
-  const watchedComputeSize = watch('computeSize')
+  const watchedStorageType = useWatch({ control, name: 'storageType' })
+  const watchedTotalSize = useWatch({ control, name: 'totalSize' })
+  const watchedComputeSize = useWatch({ control, name: 'computeSize' })
   const throughput_mbps = formState.defaultValues?.throughput
 
   useDiskAttributesQuery({ projectRef })
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx
index 2bd6436943dc1..302830f12a387 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx
@@ -1,6 +1,6 @@
 import { AnimatePresence, motion } from 'framer-motion'
 import { ReactNode } from 'react'
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import { COMPUTE_BASELINE_IOPS, COMPUTE_MAX_IOPS } from 'shared-data'
 import { Admonition } from 'ui-patterns/Admonition'
 
@@ -21,9 +21,10 @@ export function ComputeSizeRecommendationSection({
   actions,
   form,
 }: ComputeSizeRecommendationSectionProps) {
-  const { watch } = form
-  const computeSize = watch('computeSize')
-  const iops = watch('provisionedIOPS')
+  const [computeSize, iops] = useWatch({
+    control: form.control,
+    name: ['computeSize', 'provisionedIOPS'],
+  })
 
   const computeSizeRecommendedForIops = calculateComputeSizeRequiredForIops(iops)
   const maxIopsForComputeSize = calculateMaxIopsForComputeSize(computeSize ?? 'ci_micro')
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx
index b5787f9f6574c..8f9bc873187f0 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx
@@ -4,7 +4,7 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { Info } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { useMemo } from 'react'
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import { Badge, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 import { DiskStorageSchemaType } from '../DiskManagement.schema'
@@ -22,7 +22,7 @@ interface DiskSpaceBarProps {
 export const DiskSpaceBar = ({ form }: DiskSpaceBarProps) => {
   const { ref } = useParams()
   const { resolvedTheme } = useTheme()
-  const { formState, watch } = form
+  const { formState } = form
   const isDarkMode = resolvedTheme?.includes('dark')
   const { data: project } = useSelectedProjectQuery()
 
@@ -55,7 +55,7 @@ export const DiskSpaceBar = ({ form }: DiskSpaceBarProps) => {
   }, [diskUtil, diskBreakdown])
 
   const showNewSize = formState.dirtyFields.totalSize !== undefined && diskBreakdown
-  const newTotalSize = watch('totalSize')
+  const newTotalSize = useWatch({ control: form.control, name: 'totalSize' })
 
   const totalSize = formState.defaultValues?.totalSize || 0
   const usedSizeTotal = Math.round(((diskBreakdownBytes?.totalUsedBytes ?? 0) / GB) * 100) / 100
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx
index 3b8da212df0ae..d78185919f3a3 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx
@@ -1,6 +1,6 @@
 import { AnimatePresence, motion } from 'framer-motion'
 import { ReactNode } from 'react'
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import { Admonition } from 'ui-patterns/Admonition'
 
 import { DiskStorageSchemaType } from '../DiskManagement.schema'
@@ -13,10 +13,10 @@ export function DiskTypeRecommendationSection({
   actions?: ReactNode
   form: UseFormReturn<DiskStorageSchemaType>
 }) {
-  const { watch } = form
-
-  const totalSize = watch('totalSize')
-  const storageType = watch('storageType')
+  const [totalSize, storageType] = useWatch({
+    control: form.control,
+    name: ['totalSize', 'storageType'],
+  })
   const isVisible = storageType === DiskType.GP3 && totalSize > DISK_LIMITS[DiskType.GP3].maxStorage
   const io2Option = DISK_TYPE_OPTIONS.find((option) => option.type === DiskType.IO2)
 
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx
index 1a719dc33da15..44280555658ad 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { BookOpen, Loader2, Plus, Send, X } from 'lucide-react'
 import { useState } from 'react'
-import { useFieldArray, useForm } from 'react-hook-form'
+import { useFieldArray, useForm, useWatch } from 'react-hook-form'
 import {
   Badge,
   Button,
@@ -139,7 +139,7 @@ const EdgeFunctionTesterSheetContent = ({ visible, onClose }: EdgeFunctionTester
       queryParams: [{ key: '', value: '' }],
     },
   })
-  const { method } = form.watch()
+  const method = useWatch({ control: form.control, name: 'method' })
 
   const {
     fields: headerFields,
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx
index b7fa1e6b9284d..2d9d4dea79a15 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx
@@ -1,6 +1,6 @@
 import { motion } from 'framer-motion'
 import { useEffect, useState } from 'react'
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import {
   Accordion,
   AccordionContent,
@@ -69,7 +69,7 @@ export const CronJobScheduleSection = ({ form, supportsSeconds }: CronJobSchedul
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedValue, useNaturalLanguage])
 
-  const schedule = form.watch('schedule')
+  const schedule = useWatch({ control: form.control, name: 'schedule' })
   const scheduleString = formatScheduleString(schedule)
 
   return (
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx
index a58c636f2e46f..931be8d92ee4c 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx
@@ -1,4 +1,4 @@
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import { FormField, SheetSection } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
@@ -11,7 +11,7 @@ interface SqlFunctionSectionProps {
 }
 
 export const SqlFunctionSection = ({ form }: SqlFunctionSectionProps) => {
-  const schema = form.watch('values.schema')
+  const schema = useWatch({ control: form.control, name: 'values.schema' })
 
   return (
     <SheetSection className="flex flex-col gap-3 2xl:flex-row 2xl:[&>div]:w-full">
diff --git a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PartitionConfigFields.tsx b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PartitionConfigFields.tsx
index 7b1a007860c16..27e76d8e26917 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PartitionConfigFields.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PartitionConfigFields.tsx
@@ -1,4 +1,4 @@
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import {
   FormField,
   InputGroup,
@@ -13,7 +13,7 @@ import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { CreateQueueForm } from './CreateQueueSheet.schema'
 
 export function PartitionConfigFields({ form }: { form: UseFormReturn<CreateQueueForm> }) {
-  const queueType = form.watch('values.type')
+  const queueType = useWatch({ control: form.control, name: 'values.type' })
 
   if (queueType !== 'partitioned') return null
 
diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx
index d6f2349c6d094..05abb2f494713 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { QUEUES_SCHEMA } from '@supabase/pg-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import { Button, Form, FormControl, FormField, FormItem, Switch } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
@@ -48,7 +48,7 @@ export const QueuesSettings = () => {
     defaultValues: { enable: false },
   })
   const { formState } = form
-  const { enable } = form.watch()
+  const enable = useWatch({ control: form.control, name: 'enable' })
 
   const { data: queueTables } = useTablesQuery({
     projectRef: project?.ref,
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/CreateIcebergWrapperSheet.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/CreateIcebergWrapperSheet.tsx
index 93991554b4128..1a908dae33e59 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/CreateIcebergWrapperSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/CreateIcebergWrapperSheet.tsx
@@ -144,7 +144,7 @@ export const CreateIcebergWrapperSheet = ({
     resolver: zodResolver(formSchema),
     defaultValues: INITIAL_VALUES,
   })
-  const { resetField, formState, setError, watch } = form
+  const { resetField, formState, setError } = form
   const { isDirty, isSubmitting } = formState
 
   useEffect(() => {
@@ -153,21 +153,23 @@ export const CreateIcebergWrapperSheet = ({
 
   const currentTarget = useRef<FormSchema['target']>(INITIAL_VALUES.target)
   useEffect(() => {
-    const subscription = watch((values) => {
-      if (!values.target || values.target === currentTarget.current) return
-      currentTarget.current = values.target
+    return form.subscribe({
+      name: 'target',
+      formState: { values: true },
+      callback: ({ values }) => {
+        if (!values.target || values.target === currentTarget.current) return
+        currentTarget.current = values.target
 
-      const fields = targetFields[values.target]
-      if (!fields) return
+        const fields = targetFields[values.target]
+        if (!fields) return
 
-      wrapperMeta.server.options.forEach((option) => {
-        // @ts-expect-error Can't reconcile with form schema
-        resetField(option.name, { defaultValue: option.defaultValue ?? '' })
-      })
+        wrapperMeta.server.options.forEach((option) => {
+          // @ts-expect-error Can't reconcile with form schema
+          resetField(option.name, { defaultValue: option.defaultValue ?? '' })
+        })
+      },
     })
-
-    return () => subscription.unsubscribe()
-  }, [resetField, watch, wrapperMeta])
+  }, [form, resetField, wrapperMeta])
 
   const onSubmit: SubmitHandler<FormSchema> = async (values) => {
     const foundSchema = schemas?.find((s) => s.name === values.target_schema)
diff --git a/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx b/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
index 4bbcfbdd78a17..88f761879cd2f 100644
--- a/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
+++ b/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { IS_PLATFORM } from 'common'
 import Link from 'next/link'
 import { ReactNode, useEffect, useMemo, useRef } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -393,8 +393,8 @@ export function LogDrainDestinationSheetForm({
     values: formValues,
   })
 
-  const type = form.watch('type')
-  const tls = form.watch('tls')
+  const type = useWatch({ control: form.control, name: 'type' })
+  const tls = useWatch({ control: form.control, name: 'tls' })
 
   useEffect(() => {
     if (mode === 'create' && !open) {
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx
index e992caf60f00e..01190934173d9 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx
@@ -6,7 +6,7 @@ import type {
 } from '@stripe/stripe-js'
 import { Check, ChevronsUpDown, Info, X } from 'lucide-react'
 import { useEffect, useId, useMemo, useRef, useState } from 'react'
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import {
   Button,
   cn,
@@ -78,7 +78,7 @@ export const BillingCustomerDataForm = ({
     form.setValue('tax_id_value', '', { shouldDirty: true })
   }
 
-  const { tax_id_name } = form.watch()
+  const tax_id_name = useWatch({ control: form.control, name: 'tax_id_name' })
   const selectedTaxId = TAX_IDS.find((option) => option.name === tax_id_name)
 
   const availableTaxIds = useMemo(() => {
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
index 31a0e5566f508..6e3a172b0d4fb 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Form, FormControl, FormField } from '@ui/components/shadcn/ui/form'
 import { useParams } from 'common'
 import { useEffect } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import { FormMessage, Input } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -61,7 +61,10 @@ const BillingEmail = () => {
       additionalBillingEmails: billingCustomer?.additional_emails ?? [],
     },
   })
-  const { additionalBillingEmails } = form.watch()
+  const additionalBillingEmails = useWatch({
+    control: form.control,
+    name: 'additionalBillingEmails',
+  })
   const { errors } = form.formState
   const additionalEmailsError = errors.additionalBillingEmails ?? []
 
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx
index b08a50d3d00d8..d92d9651af283 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx
@@ -8,7 +8,7 @@ import { useDebounce } from '@uidotdev/usehooks'
 import { AlertCircle, Info } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Alert,
@@ -104,7 +104,7 @@ export const CreditTopUp = ({ slug }: { slug: string | undefined }) => {
   const debouncedAddress = useDebounce(billingAddress, 1000)
   const debouncedTaxId = useDebounce(billingTaxId, 1000)
 
-  const watchedAmount = form.watch('amount')
+  const watchedAmount = useWatch({ control: form.control, name: 'amount' })
   const debouncedAmount = useDebounce(watchedAmount, 1000)
   const parsedAmount = Number(debouncedAmount)
   const validAmount =
diff --git a/apps/studio/components/interfaces/Organization/CloudMarketplace/NewAwsMarketplaceOrgForm.tsx b/apps/studio/components/interfaces/Organization/CloudMarketplace/NewAwsMarketplaceOrgForm.tsx
index b9b232ab63772..1f372319b835a 100644
--- a/apps/studio/components/interfaces/Organization/CloudMarketplace/NewAwsMarketplaceOrgForm.tsx
+++ b/apps/studio/components/interfaces/Organization/CloudMarketplace/NewAwsMarketplaceOrgForm.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { Form } from 'ui'
 
 import {
@@ -28,7 +28,7 @@ export const NewAwsMarketplaceOrgForm = ({ onSubmit }: Props) => {
     },
   })
 
-  const kind = form.watch('kind')
+  const kind = useWatch({ control: form.control, name: 'kind' })
 
   return (
     <Form {...form}>
diff --git a/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx b/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
index 64443884b40cf..f8028027a289b 100644
--- a/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
+++ b/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
@@ -9,7 +9,7 @@ import { useTheme } from 'next-themes'
 import { useRouter } from 'next/router'
 import { parseAsBoolean, parseAsString, useQueryStates } from 'nuqs'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -201,8 +201,8 @@ export const NewOrgForm = ({
     setLatestTaxId(taxId)
   }, [])
 
-  const selectedPlan = form.watch('plan')
-  const selectedSpendCap = form.watch('spend_cap')
+  const selectedPlan = useWatch({ control: form.control, name: 'plan' })
+  const selectedSpendCap = useWatch({ control: form.control, name: 'spend_cap' })
 
   useEffect(() => {
     if (selectedPlan === 'FREE' || !setupIntent) {
@@ -445,7 +445,7 @@ export const NewOrgForm = ({
           <div className="divide-y divide-border-muted">
             <OrganizationDetailsFields
               control={form.control}
-              kind={form.watch('kind')}
+              kind={useWatch({ control: form.control, name: 'kind' })}
               renderFieldWrapper={(children, field) => (
                 <Panel.Content key={field}>{children}</Panel.Content>
               )}
@@ -494,7 +494,7 @@ export const NewOrgForm = ({
               </Panel.Content>
             )}
 
-            {form.watch('plan') === 'PRO' && (
+            {selectedPlan === 'PRO' && (
               <>
                 <Panel.Content className="border-b border-panel-border-interior-light dark:border-panel-border-interior-dark">
                   <FormField
@@ -535,7 +535,7 @@ export const NewOrgForm = ({
               </>
             )}
 
-            {setupIntent && form.watch('plan') !== 'FREE' && (
+            {setupIntent && selectedPlan !== 'FREE' && (
               <Panel.Content className="pt-5">
                 <Elements stripe={stripePromise} options={stripeOptionsPaymentMethod}>
                   <NewPaymentMethodElement
diff --git a/apps/studio/components/interfaces/Organization/SSO/JoinOrganizationOnSignup.tsx b/apps/studio/components/interfaces/Organization/SSO/JoinOrganizationOnSignup.tsx
index bf794b9297d27..28848039ddfb4 100644
--- a/apps/studio/components/interfaces/Organization/SSO/JoinOrganizationOnSignup.tsx
+++ b/apps/studio/components/interfaces/Organization/SSO/JoinOrganizationOnSignup.tsx
@@ -1,4 +1,4 @@
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import {
   FormControl,
   FormField,
@@ -19,7 +19,7 @@ export const JoinOrganizationOnSignup = ({
 }: {
   form: ReturnType<typeof useForm<SSOConfigFormSchema>>
 }) => {
-  const joinOrgOnSignup = form.watch('joinOrgOnSignup')
+  const joinOrgOnSignup = useWatch({ control: form.control, name: 'joinOrgOnSignup' })
 
   return (
     <div className="space-y-4">
diff --git a/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx b/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx
index 614282dc5a178..6b0c41936ea9d 100644
--- a/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx
+++ b/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useFlag } from 'common'
 import { Trash } from 'lucide-react'
 import { useEffect, useEffectEvent, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import { Button, Card, CardContent, CardFooter, Form, FormControl, FormField, Switch } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
@@ -129,8 +129,8 @@ export const SSOConfig = () => {
     defaultValues,
   })
 
-  const isSSOEnabled = form.watch('enabled')
-  const enableSpInitiated = form.watch('enableSpInitiated')
+  const isSSOEnabled = useWatch({ control: form.control, name: 'enabled' })
+  const enableSpInitiated = useWatch({ control: form.control, name: 'enableSpInitiated' })
 
   const { mutate: createSSOConfig, isPending: isCreating } = useSSOConfigCreateMutation({
     onSuccess: () => {
@@ -314,7 +314,7 @@ export const SSOConfig = () => {
                           )}
                         />
 
-                        {form.watch('enableSpInitiated') && (
+                        {enableSpInitiated && (
                           <Admonition
                             type="note"
                             title="Understanding SSO login flows"
@@ -346,7 +346,7 @@ export const SSOConfig = () => {
                         )}
                       </CardContent>
 
-                      {form.watch('enableSpInitiated') && (
+                      {enableSpInitiated && (
                         <CardContent>
                           <SSODomains form={form} />
                         </CardContent>
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
index aae070a349596..fc5722bc5f0da 100644
--- a/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
+++ b/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { UserPlus } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -151,7 +151,10 @@ export const InviteMemberButton = () => {
     defaultValues,
   })
 
-  const { applyToOrg, projectRef, email } = form.watch()
+  const [applyToOrg, projectRef, email] = useWatch({
+    control: form.control,
+    name: ['applyToOrg', 'projectRef', 'email'],
+  })
 
   const emailCount = parseEmails(email ?? '').length
 
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx
index 5ba618c8ccfa5..e9791b6b9c75e 100644
--- a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { ChevronDown } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import {
   Accordion,
   AccordionContent,
@@ -196,8 +196,8 @@ export const PlatformWebhooksEndpointSheet = ({
     onClose,
   })
 
-  const subscribeAll = form.watch('subscribeAll')
-  const selectedEventTypes = form.watch('eventTypes')
+  const subscribeAll = useWatch({ control: form.control, name: 'subscribeAll' })
+  const selectedEventTypes = useWatch({ control: form.control, name: 'eventTypes' })
   const groupedEventTypes = useMemo(
     () => buildEventTypeGroups(scope, eventTypes),
     [scope, eventTypes]
diff --git a/apps/studio/components/interfaces/ProjectCreation/PostgresVersionSelector.tsx b/apps/studio/components/interfaces/ProjectCreation/PostgresVersionSelector.tsx
index b8b459649bdc3..1eae5e0d9ff05 100644
--- a/apps/studio/components/interfaces/ProjectCreation/PostgresVersionSelector.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/PostgresVersionSelector.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { ControllerRenderProps, UseFormReturn } from 'react-hook-form'
+import { ControllerRenderProps, UseFormReturn, useWatch } from 'react-hook-form'
 import type { CloudProvider } from 'shared-data'
 import {
   Badge,
@@ -91,7 +91,10 @@ export const PostgresVersionSelector = ({
       ? (createVersions?.available_versions ?? [])
       : (unpauseVersions?.available_versions ?? [])
   const availableVersions = versions.sort((a, b) => a.version.localeCompare(b.version)).reverse()
-  const { postgresVersionSelection } = form.watch()
+  const postgresVersionSelection = useWatch({
+    control: form.control,
+    name: 'postgresVersionSelection',
+  })
 
   useEffect(() => {
     if (availableVersions.length > 0) {
diff --git a/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx b/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx
index 0833ed8fda39e..52e2a3adb1330 100644
--- a/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx
+++ b/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import Link from 'next/link'
 import { useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -135,7 +135,10 @@ export const RealtimeSettings = () => {
     } as any,
   })
 
-  const { allow_public, suspend } = form.watch()
+  const [allow_public, suspend] = useWatch({
+    control: form.control,
+    name: ['allow_public', 'suspend'],
+  })
   const isSettingToPrivate = !data?.private_only && !allow_public
   const isDisablingRealtime = !isRealtimeDisabled && suspend
   const isEnablingRealtime = isRealtimeDisabled && !suspend
diff --git a/apps/studio/components/interfaces/Settings/API/DataApiEnableSwitchForm.tsx b/apps/studio/components/interfaces/Settings/API/DataApiEnableSwitchForm.tsx
index 79c0752f08111..7568f35e4d672 100644
--- a/apps/studio/components/interfaces/Settings/API/DataApiEnableSwitchForm.tsx
+++ b/apps/studio/components/interfaces/Settings/API/DataApiEnableSwitchForm.tsx
@@ -1,4 +1,4 @@
-import type { UseFormReturn } from 'react-hook-form'
+import { useWatch, type UseFormReturn } from 'react-hook-form'
 import { CardContent, CardFooter, Form, FormControl, FormField, FormItem, Switch } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
@@ -23,7 +23,7 @@ export const DataApiEnableSwitchForm = ({
   onSubmit: (values: DataApiFormValues) => void
   handleReset: () => void
 }) => {
-  const watchedEnabled = form.watch('enableDataApi')
+  const watchedEnabled = useWatch({ control: form.control, name: 'enableDataApi' })
 
   return (
     <Form {...form}>
diff --git a/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx b/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
index a3a32de1a34be..79f46c844e132 100644
--- a/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
@@ -4,7 +4,7 @@ import { useParams } from 'common'
 import { capitalize } from 'lodash'
 import Link from 'next/link'
 import { Fragment, useEffect } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Alert,
@@ -113,7 +113,7 @@ export const ConnectionPooling = () => {
       max_client_conn: undefined,
     },
   })
-  const { default_pool_size } = form.watch()
+  const default_pool_size = useWatch({ control: form.control, name: 'default_pool_size' })
   const connectionPoolingUnavailable = pgbouncerConfig?.pool_mode === null
   const ignoreStartupParameters = pgbouncerConfig?.ignore_startup_parameters
 
diff --git a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx
index 3c29635c1a565..2725474aea14d 100644
--- a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useParams } from 'common'
 import { parseAsBoolean, parseAsString, useQueryState } from 'nuqs'
 import { useEffect, useMemo } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -161,7 +161,7 @@ export function JitDbAccessRuleSheet({
     defaultValues,
     resolver: zodResolver(FormSchema),
   })
-  const grants = form.watch('grants')
+  const grants = useWatch({ control: form.control, name: 'grants' })
 
   const onCloseSheet = () => {
     setIsNewRule(false)
diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx
index 956cacd0f5599..37269e91fe6a0 100644
--- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx
+++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import {
   Button,
   Card,
@@ -71,7 +71,7 @@ export const CustomDomainsConfigureHostname = () => {
     )
   }
 
-  const domain = form.watch('domain')
+  const domain = useWatch({ control: form.control, name: 'domain' })
   const trimmedDomain = domain.trim()
   const isSubmitting = isCheckingRecord || isCreating
 
diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx
index ddf5df5a7278f..d56634f0111eb 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { AnimatePresence, motion } from 'framer-motion'
 import { Loader2 } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -174,9 +174,18 @@ export const GitHubIntegrationConnectionForm = ({
     },
   })
 
-  const enableProductionSync = githubSettingsForm.watch('enableProductionSync')
-  const newBranchPerPr = githubSettingsForm.watch('new_branch_per_pr')
-  const currentRepositoryId = githubSettingsForm.watch('repositoryId')
+  const enableProductionSync = useWatch({
+    control: githubSettingsForm.control,
+    name: 'enableProductionSync',
+  })
+  const newBranchPerPr = useWatch({
+    control: githubSettingsForm.control,
+    name: 'new_branch_per_pr',
+  })
+  const currentRepositoryId = useWatch({
+    control: githubSettingsForm.control,
+    name: 'repositoryId',
+  })
 
   const handleCreateOrUpdateConnection = async (data: z.infer<typeof GitHubSettingsSchema>) => {
     if (!selectedProject?.ref || !selectedOrganization?.id) return
diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx
index 7ec922a48da38..c1149f96f0c31 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx
@@ -1,6 +1,6 @@
 import { ChevronDown, PlusIcon, RefreshCw } from 'lucide-react'
 import { useMemo, useState, type ComponentProps, type ReactNode } from 'react'
-import type { FieldValues, Path, UseFormReturn } from 'react-hook-form'
+import { useWatch, type FieldValues, type Path, type UseFormReturn } from 'react-hook-form'
 import {
   Button,
   Command,
@@ -125,7 +125,7 @@ export const GitHubRepositoryField = <TFormValues extends FieldValues>({
 }: GitHubRepositoryFieldProps<TFormValues>) => {
   const [isRepoSelectorOpen, setIsRepoSelectorOpen] = useState(false)
 
-  const currentRepositoryId = form.watch(name) as string | undefined
+  const currentRepositoryId = useWatch({ control: form.control, name }) as string | undefined
   const selectedRepository = repositories.find((repo) => repo.id === currentRepositoryId)
 
   return (
diff --git a/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx b/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
index 09cb69ccf4bf1..c5257fd3afa95 100644
--- a/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
@@ -3,7 +3,7 @@ import { useParams } from 'common'
 import { Eye, EyeOff } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import { Button, cn, Form, FormControl, FormField, Separator } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
@@ -55,6 +55,8 @@ export const ResetPasswordForm = () => {
     mode: 'onChange',
   })
 
+  const password = useWatch({ control: form.control, name: 'password' })
+
   const onResetPassword = async (data: FormData) => {
     const toastId = toast.loading('Saving password...')
     const { error } = await auth.updateUser({
@@ -146,7 +148,7 @@ export const ResetPasswordForm = () => {
             'transition-all duration-400 overflow-y-hidden'
           )}
         >
-          <PasswordConditionsHelper password={form.watch('password')} />
+          <PasswordConditionsHelper password={password} />
         </div>
 
         <Separator className="bg-border" />
diff --git a/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx b/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx
index 88198f6808d0e..3e9d040ae215c 100644
--- a/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx
@@ -7,7 +7,7 @@ import { Lock } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { Button, Form, FormControl, FormField, Input } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
@@ -41,7 +41,7 @@ export const SignInMfaForm = ({ context = 'sign-in' }: SignInMfaFormProps) => {
     defaultValues: { code: '' },
   })
 
-  const { code } = form.watch()
+  const code = useWatch({ control: form.control, name: 'code' })
 
   const {
     data: factors,
diff --git a/apps/studio/components/interfaces/SignIn/SignUpForm.tsx b/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
index 6f5e6a33df8ae..f4640f9ad341d 100644
--- a/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
@@ -5,7 +5,7 @@ import { CheckCircle, Eye, EyeOff } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { parseAsString, useQueryStates } from 'nuqs'
 import { useRef, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Alert,
@@ -126,7 +126,7 @@ export const SignUpForm = () => {
     })
   }
 
-  const password = form.watch('password')
+  const password = useWatch({ control: form.control, name: 'password' })
   const isSubmitting = form.formState.isSubmitting || isSigningUp
 
   return (
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.constants.ts b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.constants.ts
index 63389dbc20d08..7a8b4ada0806d 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.constants.ts
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.constants.ts
@@ -15,9 +15,16 @@ export const COLUMN_TYPES = [
   'binary',
   'decimal',
   'fixed',
-]
+] as const
 
-export const COLUMN_TYPE_FIELDS = {
+export type ColumnType = (typeof COLUMN_TYPES)[number]
+
+interface AdditionalColumnField {
+  name: 'precision' | 'scale' | 'length'
+  type: 'number'
+}
+
+export const COLUMN_TYPE_FIELDS: Partial<Record<ColumnType, AdditionalColumnField[]>> = {
   decimal: [
     { name: 'precision', type: 'number' },
     { name: 'scale', type: 'number' },
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.schema.ts b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.schema.ts
index 05f0edee7ba27..a5896e5066d57 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.schema.ts
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.schema.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod'
 
-import { NEW_NAMESPACE_MARKER } from './CreateTableSheet.constants'
+import { COLUMN_TYPES, NEW_NAMESPACE_MARKER } from './CreateTableSheet.constants'
 
 const getValidRegex = (type: 'namespace' | 'table') =>
   type === 'namespace'
@@ -37,7 +37,7 @@ export const createFormSchema = () =>
       columns: z
         .object({
           name: z.string().min(1, 'Provide a name for your column'),
-          type: z.string().min(1, 'Select a type for your column'),
+          type: z.enum(COLUMN_TYPES, { message: 'Select a type for your column' }),
           // For decimal type
           precision: z.number().optional(),
           scale: z.number().int().optional(),
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.tsx
index c93911b7aa638..baa8f39d07aef 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.tsx
@@ -1,8 +1,8 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useParams } from 'common'
 import { Plus, X } from 'lucide-react'
-import { Fragment, useState } from 'react'
-import { SubmitHandler, useFieldArray, useForm } from 'react-hook-form'
+import { useState } from 'react'
+import { Control, SubmitHandler, useFieldArray, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -43,6 +43,8 @@ import { useIcebergNamespacesQuery } from '@/data/storage/iceberg-namespaces-que
 const formId = 'create-namespace-table'
 const NEW_NAMESPACE_MARKER = 'new-namespace'
 
+type CreateTableFormValues = z.infer<ReturnType<typeof createFormSchema>>
+
 interface CreateTableSheetProps {
   open: boolean
   onOpenChange: (value: boolean) => void
@@ -53,18 +55,18 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
   const [isCreating, setIsCreating] = useState(false)
 
   const FormSchema = createFormSchema()
-  const defaultValues = {
+  const defaultValues: CreateTableFormValues = {
     namespace: '',
     newNamespace: undefined,
     name: '',
-    columns: [{ name: '', type: 'string' as any }],
+    columns: [{ name: '', type: 'string' }],
   }
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
     defaultValues,
     mode: 'onChange',
   })
-  const { namespace } = form.watch()
+  const namespace = useWatch({ control: form.control, name: 'namespace' })
   const {
     fields: columns,
     append: appendColumn,
@@ -238,102 +240,15 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
                           <p className="text-xs text-foreground-lighter">Name</p>
                           <p className="text-xs text-foreground-lighter">Type</p>
                         </div>
-                        {columns.map((_, idx) => {
-                          const columnType = form.watch(`columns.${idx}.type`)
-                          const additionalFields =
-                            COLUMN_TYPE_FIELDS[columnType as keyof typeof COLUMN_TYPE_FIELDS] ?? []
-
-                          return (
-                            <Fragment key={`column-${idx}`}>
-                              <div className="grid grid-cols-[1fr_1fr_32px] gap-x-1">
-                                <FormField
-                                  control={form.control}
-                                  name={`columns.${idx}.name`}
-                                  render={({ field }) => (
-                                    <FormItemLayout>
-                                      <FormControl>
-                                        <Input
-                                          {...field}
-                                          placeholder="Provide a column name"
-                                          disabled={isCreating}
-                                          className="h-auto"
-                                        />
-                                      </FormControl>
-                                    </FormItemLayout>
-                                  )}
-                                />
-                                <FormField
-                                  control={form.control}
-                                  name={`columns.${idx}.type`}
-                                  render={({ field }) => (
-                                    <FormControl>
-                                      <Select value={field.value} onValueChange={field.onChange}>
-                                        <SelectTrigger className="h-auto">
-                                          <SelectValue placeholder="Select a type" />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                          {COLUMN_TYPES.map((x) => (
-                                            <SelectItem key={x} value={x}>
-                                              {x}
-                                            </SelectItem>
-                                          ))}
-                                        </SelectContent>
-                                      </Select>
-                                    </FormControl>
-                                  )}
-                                />
-                                <div className="flex items-center justify-center">
-                                  <Button
-                                    variant="text"
-                                    size="tiny"
-                                    icon={<X strokeWidth={1.5} size={14} />}
-                                    className="w-6 h-6"
-                                    onClick={() => removeColumn(idx)}
-                                  />
-                                </div>
-
-                                {additionalFields.length > 0 && (
-                                  <div className="col-span-full flex items-center mt-2">
-                                    <div className="flex items-center justify-end gap-1 w-[85%] ">
-                                      {additionalFields.map((x) => (
-                                        <FormField
-                                          control={form.control}
-                                          key={`columns.${idx}.${x.name}`}
-                                          name={`columns.${idx}.${x.name}` as any}
-                                          render={({ field }) => (
-                                            <FormItemLayout>
-                                              <FormControl>
-                                                <InputGroup>
-                                                  <InputGroupAddon align="inline-start">
-                                                    {x.name}
-                                                  </InputGroupAddon>
-                                                  <FormInputGroupInput
-                                                    {...field}
-                                                    type={x.type === 'number' ? 'number' : 'text'}
-                                                    disabled={isCreating}
-                                                    className="h-[34px] rounded-l-none"
-                                                    onChange={(event) =>
-                                                      field.onChange(
-                                                        isNaN(event.target.valueAsNumber)
-                                                          ? null
-                                                          : event.target.valueAsNumber
-                                                      )
-                                                    }
-                                                  />
-                                                </InputGroup>
-                                              </FormControl>
-                                            </FormItemLayout>
-                                          )}
-                                        />
-                                      ))}
-                                    </div>
-                                    <div className="w-4 h-[1.6rem] border-r border-b rounded-br mr-3 border-control -translate-y-3" />
-                                  </div>
-                                )}
-                              </div>
-                            </Fragment>
-                          )
-                        })}
+                        {columns.map((column, idx) => (
+                          <ColumnRow
+                            key={column.id}
+                            control={form.control}
+                            idx={idx}
+                            isCreating={isCreating}
+                            onRemove={() => removeColumn(idx)}
+                          />
+                        ))}
                       </>
                     )}
                   </div>
@@ -362,3 +277,101 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
     </Sheet>
   )
 }
+
+interface ColumnRowProps {
+  control: Control<CreateTableFormValues>
+  idx: number
+  isCreating: boolean
+  onRemove: () => void
+}
+
+const ColumnRow = ({ control, idx, isCreating, onRemove }: ColumnRowProps) => {
+  const columnType = useWatch({ control, name: `columns.${idx}.type` })
+  const additionalFields = COLUMN_TYPE_FIELDS[columnType] ?? []
+
+  return (
+    <div className="grid grid-cols-[1fr_1fr_32px] gap-x-1">
+      <FormField
+        control={control}
+        name={`columns.${idx}.name`}
+        render={({ field }) => (
+          <FormItemLayout>
+            <FormControl>
+              <Input
+                {...field}
+                placeholder="Provide a column name"
+                disabled={isCreating}
+                className="h-auto"
+              />
+            </FormControl>
+          </FormItemLayout>
+        )}
+      />
+      <FormField
+        control={control}
+        name={`columns.${idx}.type`}
+        render={({ field }) => (
+          <FormControl>
+            <Select value={field.value} onValueChange={field.onChange}>
+              <SelectTrigger className="h-auto">
+                <SelectValue placeholder="Select a type" />
+              </SelectTrigger>
+              <SelectContent>
+                {COLUMN_TYPES.map((x) => (
+                  <SelectItem key={x} value={x}>
+                    {x}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </FormControl>
+        )}
+      />
+      <div className="flex items-center justify-center">
+        <Button
+          aria-label="Remove"
+          variant="text"
+          size="tiny"
+          icon={<X strokeWidth={1.5} size={14} />}
+          className="w-6 h-6"
+          onClick={onRemove}
+        />
+      </div>
+
+      {additionalFields.length > 0 && (
+        <div className="col-span-full flex items-center mt-2">
+          <div className="flex items-center justify-end gap-1 w-[85%] ">
+            {additionalFields.map((x) => (
+              <FormField
+                control={control}
+                key={`columns.${idx}.${x.name}`}
+                name={`columns.${idx}.${x.name}`}
+                render={({ field }) => (
+                  <FormItemLayout>
+                    <FormControl>
+                      <InputGroup>
+                        <InputGroupAddon align="inline-start">{x.name}</InputGroupAddon>
+                        <FormInputGroupInput
+                          {...field}
+                          type={x.type === 'number' ? 'number' : 'text'}
+                          disabled={isCreating}
+                          className="h-[34px] rounded-l-none"
+                          onChange={(event) =>
+                            field.onChange(
+                              isNaN(event.target.valueAsNumber) ? null : event.target.valueAsNumber
+                            )
+                          }
+                        />
+                      </InputGroup>
+                    </FormControl>
+                  </FormItemLayout>
+                )}
+              />
+            ))}
+          </div>
+          <div className="w-4 h-[1.6rem] border-r border-b rounded-br mr-3 border-control -translate-y-3" />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
index 58d90f9592189..38c9cc7626957 100644
--- a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useParams } from 'common'
 import { useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -108,8 +108,8 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
     },
   })
   const { formatted_size_limit: formattedSizeLimitError } = form.formState.errors
-  const isPublicBucket = form.watch('public')
-  const hasFileSizeLimit = form.watch('has_file_size_limit')
+  const isPublicBucket = useWatch({ control: form.control, name: 'public' })
+  const hasFileSizeLimit = useWatch({ control: form.control, name: 'has_file_size_limit' })
 
   const onSubmit: SubmitHandler<CreateBucketForm> = async (values) => {
     if (!ref) return console.error('Project ref is required')
diff --git a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
index cdab844adfed9..125d45e2d093d 100644
--- a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useParams } from 'common'
 import { useEffect, useRef, useState } from 'react'
-import { useForm, type SubmitHandler } from 'react-hook-form'
+import { useForm, useWatch, type SubmitHandler } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -121,8 +121,8 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
   })
   const { formatted_size_limit: formattedSizeLimitError } = form.formState.errors
 
-  const isPublicBucket = form.watch('public')
-  const hasFileSizeLimit = form.watch('has_file_size_limit')
+  const isPublicBucket = useWatch({ control: form.control, name: 'public' })
+  const hasFileSizeLimit = useWatch({ control: form.control, name: 'has_file_size_limit' })
   const [hasAllowedMimeTypes, setHasAllowedMimeTypes] = useState(
     Boolean(bucket?.allowed_mime_types?.length)
   )
diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
index 3a3bf7ca63f24..d93c413405b69 100644
--- a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { IS_PLATFORM, useParams } from 'common'
 import { useEffect, useMemo, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -158,7 +158,7 @@ export const StorageSettings = () => {
     reValidateMode: 'onSubmit',
   })
 
-  const { unit: storageUnit } = form.watch()
+  const storageUnit = useWatch({ control: form.control, name: 'unit' })
   const fileSizeLimitError = form.formState.errors.fileSizeLimit
 
   const { mutate: updateStorageConfig } = useProjectStorageConfigUpdateUpdateMutation({
diff --git a/apps/studio/components/interfaces/Support/LinkSupportTicketForm.tsx b/apps/studio/components/interfaces/Support/LinkSupportTicketForm.tsx
index 1d104342edb2d..813ba72864803 100644
--- a/apps/studio/components/interfaces/Support/LinkSupportTicketForm.tsx
+++ b/apps/studio/components/interfaces/Support/LinkSupportTicketForm.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { Link2 } from 'lucide-react'
 import { useEffect } from 'react'
 import type { SubmitHandler } from 'react-hook-form'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import { Button, DialogSectionSeparator, Form, FormControl, FormField, Input } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -51,7 +51,10 @@ export const LinkSupportTicketForm = ({
     reValidateMode: 'onBlur',
   })
 
-  const { category, organizationSlug, projectRef } = form.watch()
+  const [category, organizationSlug, projectRef] = useWatch({
+    control: form.control,
+    name: ['category', 'organizationSlug', 'projectRef'],
+  })
   const selectedOrgSlug = organizationSlug === NO_ORG_MARKER ? null : organizationSlug
   const selectedProjectRef = projectRef === NO_PROJECT_MARKER ? null : projectRef
   const subscriptionPlanId = getOrgSubscriptionPlan(organizations, selectedOrgSlug)
diff --git a/apps/studio/components/interfaces/Support/SupportFormV2.tsx b/apps/studio/components/interfaces/Support/SupportFormV2.tsx
index eeb9a7d5bfb22..adf6400dd4a9d 100644
--- a/apps/studio/components/interfaces/Support/SupportFormV2.tsx
+++ b/apps/studio/components/interfaces/Support/SupportFormV2.tsx
@@ -4,6 +4,7 @@ import { useConstant, useFlag } from 'common'
 import { CLIENT_LIBRARIES } from 'common/constants'
 import { type Dispatch, type MouseEventHandler } from 'react'
 import type { SubmitHandler, UseFormReturn } from 'react-hook-form'
+import { useWatch } from 'react-hook-form'
 import { DialogSectionSeparator, Form } from 'ui'
 
 import {
@@ -71,7 +72,10 @@ export const SupportFormV2 = ({ form, initialError, state, dispatch }: SupportFo
   const { profile } = useProfile()
   const respondToEmail = profile?.primary_email ?? 'your email'
 
-  const { organizationSlug, projectRef, category, severity, subject, library } = form.watch()
+  const [organizationSlug, projectRef, category, severity, subject, library] = useWatch({
+    control: form.control,
+    name: ['organizationSlug', 'projectRef', 'category', 'severity', 'subject', 'library'],
+  })
 
   const selectedOrgSlug = organizationSlug === NO_ORG_MARKER ? null : organizationSlug
   const selectedProjectRef = projectRef === NO_PROJECT_MARKER ? null : projectRef
diff --git a/apps/studio/components/interfaces/Support/SupportFormV3.tsx b/apps/studio/components/interfaces/Support/SupportFormV3.tsx
index d8629c4c5f49f..764dc5959eb4c 100644
--- a/apps/studio/components/interfaces/Support/SupportFormV3.tsx
+++ b/apps/studio/components/interfaces/Support/SupportFormV3.tsx
@@ -4,6 +4,7 @@ import { useConstant, useFlag } from 'common'
 import { CLIENT_LIBRARIES } from 'common/constants'
 import { type Dispatch, type MouseEventHandler } from 'react'
 import type { SubmitHandler, UseFormReturn } from 'react-hook-form'
+import { useWatch } from 'react-hook-form'
 import { Form, Separator } from 'ui'
 import { v4 as uuidv4 } from 'uuid'
 
@@ -80,7 +81,10 @@ export const SupportFormV3 = ({
   const { profile } = useProfile()
   const respondToEmail = profile?.primary_email ?? 'your email'
 
-  const { organizationSlug, projectRef, category, severity, subject, library } = form.watch()
+  const [organizationSlug, projectRef, category, severity, subject, library] = useWatch({
+    control: form.control,
+    name: ['organizationSlug', 'projectRef', 'category', 'severity', 'subject', 'library'],
+  })
 
   const selectedOrgSlug = organizationSlug === NO_ORG_MARKER ? null : organizationSlug
   const currentProjectRef = projectRef === NO_PROJECT_MARKER ? null : projectRef
diff --git a/packages/ui/src/components/shadcn/ui/tabs.tsx b/packages/ui/src/components/shadcn/ui/tabs.tsx
index 5b7667990e9fc..f6b4b0a4b3686 100644
--- a/packages/ui/src/components/shadcn/ui/tabs.tsx
+++ b/packages/ui/src/components/shadcn/ui/tabs.tsx
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap py-1.5 text-sm transition-colors focus-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground data-[state=active]:shadow-xs text-foreground-lighter hover:text-foreground data-[state=active]:border-foreground border-b-2 border-transparent',
+      'inline-flex cursor-pointer items-center justify-center whitespace-nowrap py-1.5 text-sm transition-colors focus-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground data-[state=active]:shadow-xs text-foreground-lighter hover:text-foreground data-[state=active]:border-foreground border-b-2 border-transparent',
       'group',
       className
     )}