diff --git a/web/default/src/components/status-badge.tsx b/web/default/src/components/status-badge.tsx
index 1a12d1d2..6e3b1da7 100644
--- a/web/default/src/components/status-badge.tsx
+++ b/web/default/src/components/status-badge.tsx
@@ -79,7 +79,6 @@ const sizeMap = {
   lg: 'h-6 gap-1.5 px-2 text-xs leading-none',
 } as const
 
-
 export interface StatusBadgeProps extends Omit<
   React.HTMLAttributes<HTMLSpanElement>,
   'children'
diff --git a/web/default/src/features/channels/components/channels-columns.tsx b/web/default/src/features/channels/components/channels-columns.tsx
index b39d398e..1676e6d6 100644
--- a/web/default/src/features/channels/components/channels-columns.tsx
+++ b/web/default/src/features/channels/components/channels-columns.tsx
@@ -638,14 +638,12 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
                 <Tooltip>
                   <TooltipTrigger
                     render={
-                      <span className='border-border bg-muted text-primary inline-flex h-5 w-5 items-center justify-center rounded-md border shrink-0' />
+                      <span className='border-border bg-muted text-primary inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border' />
                     }
                   >
                     <MultiKeyModeIcon className='h-3 w-3' />
                   </TooltipTrigger>
-                  <TooltipContent side='top'>
-                    {multiKeyTooltip}
-                  </TooltipContent>
+                  <TooltipContent side='top'>{multiKeyTooltip}</TooltipContent>
                 </Tooltip>
               </TooltipProvider>
             )}
@@ -654,7 +652,7 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
               size='sm'
               copyable={false}
               showDot={false}
-              className='pl-1 gap-1'
+              className='gap-1 pl-1'
             >
               {icon}
               <span className='truncate'>{typeName}</span>
diff --git a/web/default/src/features/system-settings/auth/oauth-section.tsx b/web/default/src/features/system-settings/auth/oauth-section.tsx
index 31af1e15..741d3123 100644
--- a/web/default/src/features/system-settings/auth/oauth-section.tsx
+++ b/web/default/src/features/system-settings/auth/oauth-section.tsx
@@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import * as z from 'zod'
 import axios from 'axios'
 import { useForm } from 'react-hook-form'
@@ -46,129 +46,197 @@ import { SettingsPageFormActions } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
 import { useUpdateOption } from '../hooks/use-update-option'
 
+/**
+ * react-hook-form 7 treats dotted `name` strings as nested paths. To keep
+ * form state, schema validation, and dirty tracking aligned, the
+ * `discord.*` and `oidc.*` fields are modeled as nested objects here and
+ * flattened back to dotted server keys only when persisting.
+ */
 const oauthSchema = z.object({
   GitHubOAuthEnabled: z.boolean(),
-  GitHubClientId: z.string().optional(),
-  GitHubClientSecret: z.string().optional(),
-  'discord.enabled': z.boolean(),
-  'discord.client_id': z.string().optional(),
-  'discord.client_secret': z.string().optional(),
-  'oidc.enabled': z.boolean(),
-  'oidc.client_id': z.string().optional(),
-  'oidc.client_secret': z.string().optional(),
-  'oidc.well_known': z.string().optional(),
-  'oidc.authorization_endpoint': z.string().optional(),
-  'oidc.token_endpoint': z.string().optional(),
-  'oidc.user_info_endpoint': z.string().optional(),
+  GitHubClientId: z.string(),
+  GitHubClientSecret: z.string(),
+  discord: z.object({
+    enabled: z.boolean(),
+    client_id: z.string(),
+    client_secret: z.string(),
+  }),
+  oidc: z.object({
+    enabled: z.boolean(),
+    client_id: z.string(),
+    client_secret: z.string(),
+    well_known: z.string(),
+    authorization_endpoint: z.string(),
+    token_endpoint: z.string(),
+    user_info_endpoint: z.string(),
+  }),
   TelegramOAuthEnabled: z.boolean(),
-  TelegramBotToken: z.string().optional(),
-  TelegramBotName: z.string().optional(),
+  TelegramBotToken: z.string(),
+  TelegramBotName: z.string(),
   LinuxDOOAuthEnabled: z.boolean(),
-  LinuxDOClientId: z.string().optional(),
-  LinuxDOClientSecret: z.string().optional(),
-  LinuxDOMinimumTrustLevel: z.string().optional(),
+  LinuxDOClientId: z.string(),
+  LinuxDOClientSecret: z.string(),
+  LinuxDOMinimumTrustLevel: z.string(),
   WeChatAuthEnabled: z.boolean(),
-  WeChatServerAddress: z.string().optional(),
-  WeChatServerToken: z.string().optional(),
-  WeChatAccountQRCodeImageURL: z.string().optional(),
+  WeChatServerAddress: z.string(),
+  WeChatServerToken: z.string(),
+  WeChatAccountQRCodeImageURL: z.string(),
 })
 
+type OAuthFormValues = z.infer<typeof oauthSchema>
+
+type FlatOAuthDefaults = {
+  GitHubOAuthEnabled: boolean
+  GitHubClientId: string
+  GitHubClientSecret: string
+  'discord.enabled': boolean
+  'discord.client_id': string
+  'discord.client_secret': string
+  'oidc.enabled': boolean
+  'oidc.client_id': string
+  'oidc.client_secret': string
+  'oidc.well_known': string
+  'oidc.authorization_endpoint': string
+  'oidc.token_endpoint': string
+  'oidc.user_info_endpoint': string
+  TelegramOAuthEnabled: boolean
+  TelegramBotToken: string
+  TelegramBotName: string
+  LinuxDOOAuthEnabled: boolean
+  LinuxDOClientId: string
+  LinuxDOClientSecret: string
+  LinuxDOMinimumTrustLevel: string
+  WeChatAuthEnabled: boolean
+  WeChatServerAddress: string
+  WeChatServerToken: string
+  WeChatAccountQRCodeImageURL: string
+}
+
 const oauthTabContentClassName =
   'grid min-w-0 gap-x-5 gap-y-6 lg:grid-cols-2 [&>[data-slot=form-item]]:min-w-0 lg:[&>[data-slot=form-item]:has([data-slot=switch])]:col-span-2'
 
-type OAuthFormValues = z.infer<typeof oauthSchema>
+const buildFormDefaults = (defaults: FlatOAuthDefaults): OAuthFormValues => ({
+  GitHubOAuthEnabled: defaults.GitHubOAuthEnabled,
+  GitHubClientId: defaults.GitHubClientId ?? '',
+  GitHubClientSecret: defaults.GitHubClientSecret ?? '',
+  discord: {
+    enabled: defaults['discord.enabled'],
+    client_id: defaults['discord.client_id'] ?? '',
+    client_secret: defaults['discord.client_secret'] ?? '',
+  },
+  oidc: {
+    enabled: defaults['oidc.enabled'],
+    client_id: defaults['oidc.client_id'] ?? '',
+    client_secret: defaults['oidc.client_secret'] ?? '',
+    well_known: defaults['oidc.well_known'] ?? '',
+    authorization_endpoint: defaults['oidc.authorization_endpoint'] ?? '',
+    token_endpoint: defaults['oidc.token_endpoint'] ?? '',
+    user_info_endpoint: defaults['oidc.user_info_endpoint'] ?? '',
+  },
+  TelegramOAuthEnabled: defaults.TelegramOAuthEnabled,
+  TelegramBotToken: defaults.TelegramBotToken ?? '',
+  TelegramBotName: defaults.TelegramBotName ?? '',
+  LinuxDOOAuthEnabled: defaults.LinuxDOOAuthEnabled,
+  LinuxDOClientId: defaults.LinuxDOClientId ?? '',
+  LinuxDOClientSecret: defaults.LinuxDOClientSecret ?? '',
+  LinuxDOMinimumTrustLevel: defaults.LinuxDOMinimumTrustLevel ?? '',
+  WeChatAuthEnabled: defaults.WeChatAuthEnabled,
+  WeChatServerAddress: defaults.WeChatServerAddress ?? '',
+  WeChatServerToken: defaults.WeChatServerToken ?? '',
+  WeChatAccountQRCodeImageURL: defaults.WeChatAccountQRCodeImageURL ?? '',
+})
+
+const normalizeFormValues = (values: OAuthFormValues): FlatOAuthDefaults => ({
+  GitHubOAuthEnabled: values.GitHubOAuthEnabled,
+  GitHubClientId: values.GitHubClientId,
+  GitHubClientSecret: values.GitHubClientSecret,
+  'discord.enabled': values.discord.enabled,
+  'discord.client_id': values.discord.client_id,
+  'discord.client_secret': values.discord.client_secret,
+  'oidc.enabled': values.oidc.enabled,
+  'oidc.client_id': values.oidc.client_id,
+  'oidc.client_secret': values.oidc.client_secret,
+  'oidc.well_known': values.oidc.well_known,
+  'oidc.authorization_endpoint': values.oidc.authorization_endpoint,
+  'oidc.token_endpoint': values.oidc.token_endpoint,
+  'oidc.user_info_endpoint': values.oidc.user_info_endpoint,
+  TelegramOAuthEnabled: values.TelegramOAuthEnabled,
+  TelegramBotToken: values.TelegramBotToken,
+  TelegramBotName: values.TelegramBotName,
+  LinuxDOOAuthEnabled: values.LinuxDOOAuthEnabled,
+  LinuxDOClientId: values.LinuxDOClientId,
+  LinuxDOClientSecret: values.LinuxDOClientSecret,
+  LinuxDOMinimumTrustLevel: values.LinuxDOMinimumTrustLevel,
+  WeChatAuthEnabled: values.WeChatAuthEnabled,
+  WeChatServerAddress: values.WeChatServerAddress,
+  WeChatServerToken: values.WeChatServerToken,
+  WeChatAccountQRCodeImageURL: values.WeChatAccountQRCodeImageURL,
+})
 
 type OAuthSectionProps = {
-  defaultValues: OAuthFormValues
+  defaultValues: FlatOAuthDefaults
 }
 
-export function OAuthSection({ defaultValues }: OAuthSectionProps) {
+export function OAuthSection(props: OAuthSectionProps) {
   const { t } = useTranslation()
   const updateOption = useUpdateOption()
   const [activeTab, setActiveTab] = useState('github')
 
-  // Normalize empty strings for optional fields (only at mount)
-  const normalizedDefaults: OAuthFormValues = {
-    ...defaultValues,
-    GitHubClientId: defaultValues.GitHubClientId ?? '',
-    GitHubClientSecret: defaultValues.GitHubClientSecret ?? '',
-    'discord.client_id': defaultValues['discord.client_id'] ?? '',
-    'discord.client_secret': defaultValues['discord.client_secret'] ?? '',
-    'oidc.client_id': defaultValues['oidc.client_id'] ?? '',
-    'oidc.client_secret': defaultValues['oidc.client_secret'] ?? '',
-    'oidc.well_known': defaultValues['oidc.well_known'] ?? '',
-    'oidc.authorization_endpoint':
-      defaultValues['oidc.authorization_endpoint'] ?? '',
-    'oidc.token_endpoint': defaultValues['oidc.token_endpoint'] ?? '',
-    'oidc.user_info_endpoint': defaultValues['oidc.user_info_endpoint'] ?? '',
-    TelegramBotToken: defaultValues.TelegramBotToken ?? '',
-    TelegramBotName: defaultValues.TelegramBotName ?? '',
-    LinuxDOClientId: defaultValues.LinuxDOClientId ?? '',
-    LinuxDOClientSecret: defaultValues.LinuxDOClientSecret ?? '',
-    LinuxDOMinimumTrustLevel: defaultValues.LinuxDOMinimumTrustLevel ?? '',
-    WeChatServerAddress: defaultValues.WeChatServerAddress ?? '',
-    WeChatServerToken: defaultValues.WeChatServerToken ?? '',
-    WeChatAccountQRCodeImageURL:
-      defaultValues.WeChatAccountQRCodeImageURL ?? '',
-  }
+  const formDefaults = useMemo(
+    () => buildFormDefaults(props.defaultValues),
+    [props.defaultValues]
+  )
 
   const form = useForm<OAuthFormValues>({
     resolver: zodResolver(oauthSchema),
-    defaultValues: normalizedDefaults,
+    defaultValues: formDefaults,
   })
 
-  const onSubmit = async () => {
-    // Get raw form values directly
-    // React Hook Form treats "oidc.xxx" as nested paths, so we need to flatten
-    const rawData = form.getValues() as Record<string, unknown>
+  const baselineRef = useRef<FlatOAuthDefaults>(props.defaultValues)
+  const baselineSerializedRef = useRef<string>(
+    JSON.stringify(props.defaultValues)
+  )
 
-    // Flatten nested oidc object back to dot notation keys
-    const flattenedData: Record<string, unknown> = {}
+  useEffect(() => {
+    const serialized = JSON.stringify(props.defaultValues)
+    if (serialized === baselineSerializedRef.current) return
+    baselineRef.current = props.defaultValues
+    baselineSerializedRef.current = serialized
+    form.reset(buildFormDefaults(props.defaultValues))
+  }, [props.defaultValues, form])
 
-    Object.entries(rawData).forEach(([key, value]) => {
+  const onSubmit = async (values: OAuthFormValues) => {
+    let finalValues = values
+
+    if (values.oidc.well_known && values.oidc.well_known.trim() !== '') {
+      const wellKnown = values.oidc.well_known.trim()
       if (
-        (key === 'oidc' || key === 'discord') &&
-        typeof value === 'object' &&
-        value !== null
-      ) {
-        // React Hook Form auto-nested these fields, flatten them back
-        Object.entries(value as Record<string, unknown>).forEach(
-          ([nestedKey, nestedValue]) => {
-            flattenedData[`${key}.${nestedKey}`] = nestedValue
-          }
-        )
-      } else {
-        flattenedData[key] = value
-      }
-    })
-
-    const finalData = flattenedData as OAuthFormValues
-
-    if (finalData['oidc.well_known'] && finalData['oidc.well_known'] !== '') {
-      if (
-        !finalData['oidc.well_known'].startsWith('http://') &&
-        !finalData['oidc.well_known'].startsWith('https://')
+        !wellKnown.startsWith('http://') &&
+        !wellKnown.startsWith('https://')
       ) {
         toast.error(t('Well-Known URL must start with http:// or https://'))
         return
       }
 
       try {
-        const res = await axios.create().get(finalData['oidc.well_known'])
+        const res = await axios.create().get(wellKnown)
         const authEndpoint = res.data['authorization_endpoint'] || ''
         const tokenEndpoint = res.data['token_endpoint'] || ''
         const userInfoEndpoint = res.data['userinfo_endpoint'] || ''
 
-        finalData['oidc.authorization_endpoint'] = authEndpoint
-        finalData['oidc.token_endpoint'] = tokenEndpoint
-        finalData['oidc.user_info_endpoint'] = userInfoEndpoint
+        finalValues = {
+          ...values,
+          oidc: {
+            ...values.oidc,
+            authorization_endpoint: authEndpoint,
+            token_endpoint: tokenEndpoint,
+            user_info_endpoint: userInfoEndpoint,
+          },
+        }
 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        form.setValue('oidc.authorization_endpoint' as any, authEndpoint)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        form.setValue('oidc.token_endpoint' as any, tokenEndpoint)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        form.setValue('oidc.user_info_endpoint' as any, userInfoEndpoint)
+        form.setValue('oidc.authorization_endpoint', authEndpoint)
+        form.setValue('oidc.token_endpoint', tokenEndpoint)
+        form.setValue('oidc.user_info_endpoint', userInfoEndpoint)
 
         toast.success(t('OIDC configuration fetched successfully'))
       } catch (err) {
@@ -183,73 +251,30 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
       }
     }
 
-    // Find changed fields by comparing to initial values
-    const updates = Object.entries(finalData).filter(
-      ([key, value]) =>
-        value !== normalizedDefaults[key as keyof OAuthFormValues]
-    )
+    const normalized = normalizeFormValues(finalValues)
+    const changedKeys = (
+      Object.keys(normalized) as Array<keyof FlatOAuthDefaults>
+    ).filter((key) => normalized[key] !== baselineRef.current[key])
 
-    if (updates.length === 0) {
+    if (changedKeys.length === 0) {
       toast.info(t('No changes to save'))
       return
     }
 
-    // Save all changed fields
-    for (const [key, value] of updates) {
-      await updateOption.mutateAsync({ key, value: value ?? '' })
+    for (const key of changedKeys) {
+      await updateOption.mutateAsync({
+        key,
+        value: normalized[key],
+      })
     }
 
-    // Reset form dirty state after successful save
-    form.reset(finalData)
+    baselineRef.current = normalized
+    baselineSerializedRef.current = JSON.stringify(normalized)
+    form.reset(buildFormDefaults(normalized))
   }
 
   const handleReset = () => {
-    // React Hook Form auto-nests 'oidc.xxx' fields into { oidc: { xxx: value } }
-    // So we need to pass the same structure when resetting
-    const currentValues = form.getValues() as Record<string, unknown>
-
-    // Create reset values matching RHF's internal structure
-    const resetValues = { ...currentValues }
-
-    // Update nested oidc fields
-    if (resetValues.oidc && typeof resetValues.oidc === 'object') {
-      Object.keys(resetValues.oidc as Record<string, unknown>).forEach(
-        (key) => {
-          const flatKey = `oidc.${key}` as keyof typeof normalizedDefaults
-          if (flatKey in normalizedDefaults) {
-            ;(resetValues.oidc as Record<string, unknown>)[key] =
-              normalizedDefaults[flatKey]
-          }
-        }
-      )
-    }
-
-    // Update nested discord fields
-    if (resetValues.discord && typeof resetValues.discord === 'object') {
-      Object.keys(resetValues.discord as Record<string, unknown>).forEach(
-        (key) => {
-          const flatKey = `discord.${key}` as keyof typeof normalizedDefaults
-          if (flatKey in normalizedDefaults) {
-            ;(resetValues.discord as Record<string, unknown>)[key] =
-              normalizedDefaults[flatKey]
-          }
-        }
-      )
-    }
-
-    // Update top-level fields
-    Object.keys(resetValues).forEach((key) => {
-      if (key !== 'oidc' && key in normalizedDefaults) {
-        resetValues[key] =
-          normalizedDefaults[key as keyof typeof normalizedDefaults]
-      }
-    })
-
-    form.reset(resetValues, {
-      keepDirty: false,
-      keepDirtyValues: false,
-      keepErrors: false,
-    })
+    form.reset(buildFormDefaults(baselineRef.current))
     toast.success(t('Form reset to saved values'))
   }
 
@@ -310,7 +335,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                         <Input
                           placeholder={t('Your GitHub OAuth Client ID')}
                           autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -329,7 +360,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                           type='password'
                           placeholder={t('Your GitHub OAuth Client Secret')}
                           autoComplete='new-password'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -362,8 +399,7 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
 
                 <FormField
                   control={form.control}
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  name={'discord.client_id' as any}
+                  name='discord.client_id'
                   render={({ field }) => (
                     <FormItem>
                       <FormLabel>{t('Client ID')}</FormLabel>
@@ -371,7 +407,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                         <Input
                           placeholder={t('Your Discord OAuth Client ID')}
                           autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -390,7 +432,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                           type='password'
                           placeholder={t('Your Discord OAuth Client Secret')}
                           autoComplete='new-password'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -423,8 +471,7 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
 
                 <FormField
                   control={form.control}
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  name={'oidc.client_id' as any}
+                  name='oidc.client_id'
                   render={({ field }) => (
                     <FormItem>
                       <FormLabel>{t('Client ID')}</FormLabel>
@@ -432,7 +479,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                         <Input
                           placeholder={t('OIDC Client ID')}
                           autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -451,7 +504,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                           type='password'
                           placeholder={t('OIDC Client Secret')}
                           autoComplete='new-password'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -471,7 +530,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                             'https://provider.com/.well-known/openid-configuration'
                           )}
                           autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormDescription>
@@ -494,7 +559,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                         <Input
                           placeholder={t('Override auto-discovered endpoint')}
                           autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -512,7 +583,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                         <Input
                           placeholder={t('Override auto-discovered endpoint')}
                           autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -532,7 +609,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                         <Input
                           placeholder={t('Override auto-discovered endpoint')}
                           autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -577,7 +660,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                           type='password'
                           placeholder={t('Your Telegram Bot Token')}
                           autoComplete='new-password'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -595,7 +684,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                         <Input
                           placeholder={t('Your Bot Name')}
                           autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -636,7 +731,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                         <Input
                           placeholder={t('LinuxDO Client ID')}
                           autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -655,7 +756,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                           type='password'
                           placeholder={t('LinuxDO Client Secret')}
                           autoComplete='new-password'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -670,7 +777,17 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                     <FormItem>
                       <FormLabel>{t('Minimum Trust Level')}</FormLabel>
                       <FormControl>
-                        <Input placeholder='0' autoComplete='off' {...field} />
+                        <Input
+                          placeholder='0'
+                          autoComplete='off'
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
+                        />
                       </FormControl>
                       <FormDescription>
                         {t('Minimum LinuxDO trust level required')}
@@ -713,7 +830,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                         <Input
                           placeholder={t('https://wechat-server.example.com')}
                           autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -732,7 +855,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                           type='password'
                           placeholder={t('Server Token')}
                           autoComplete='new-password'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -750,7 +879,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                         <Input
                           placeholder={t('https://example.com/qr-code.png')}
                           autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
diff --git a/web/default/src/features/system-settings/auth/passkey-section.tsx b/web/default/src/features/system-settings/auth/passkey-section.tsx
index 873302c8..ec889ee9 100644
--- a/web/default/src/features/system-settings/auth/passkey-section.tsx
+++ b/web/default/src/features/system-settings/auth/passkey-section.tsx
@@ -16,11 +16,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { useMemo } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 import {
   Form,
   FormControl,
@@ -48,116 +49,139 @@ import {
 } from '../components/settings-form-layout'
 import { SettingsPageFormActions } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
-import { useResetForm } from '../hooks/use-reset-form'
 import { useUpdateOption } from '../hooks/use-update-option'
 
+type AttachmentPreference = '' | 'platform' | 'cross-platform'
+type AttachmentSelectValue = 'none' | 'platform' | 'cross-platform'
+
+/**
+ * Use a nested object so the dotted FormField `name` props line up with
+ * react-hook-form's path semantics. Flat keys with dots cause the form state
+ * to silently diverge from what zod validates on submit.
+ */
 const passkeySchema = z.object({
-  'passkey.enabled': z.boolean(),
-  'passkey.rp_display_name': z.string(),
-  'passkey.rp_id': z.string(),
-  'passkey.origins': z.string(),
-  'passkey.allow_insecure_origin': z.boolean(),
-  'passkey.user_verification': z.enum(['required', 'preferred', 'discouraged']),
-  'passkey.attachment_preference': z.enum([
-    'none',
-    'platform',
-    'cross-platform',
-  ]),
+  passkey: z.object({
+    enabled: z.boolean(),
+    rp_display_name: z.string(),
+    rp_id: z.string(),
+    origins: z.string(),
+    allow_insecure_origin: z.boolean(),
+    user_verification: z.enum(['required', 'preferred', 'discouraged']),
+    attachment_preference: z.enum(['none', 'platform', 'cross-platform']),
+  }),
 })
 
-type PasskeyFormValues = z.infer<typeof passkeySchema>
+type PasskeyFormInput = z.input<typeof passkeySchema>
+type PasskeyFormValues = z.output<typeof passkeySchema>
 
-interface PasskeySectionProps {
-  defaultValues: PasskeyFormValues
+type FlatPasskeyDefaults = {
+  'passkey.enabled': boolean
+  'passkey.rp_display_name': string
+  'passkey.rp_id': string
+  'passkey.origins': string
+  'passkey.allow_insecure_origin': boolean
+  'passkey.user_verification': 'required' | 'preferred' | 'discouraged'
+  'passkey.attachment_preference': AttachmentPreference
 }
 
-export function PasskeySection({ defaultValues }: PasskeySectionProps) {
+const toAttachmentSelectValue = (
+  value: AttachmentPreference
+): AttachmentSelectValue => (value === '' ? 'none' : value)
+
+const fromAttachmentSelectValue = (
+  value: AttachmentSelectValue
+): AttachmentPreference => (value === 'none' ? '' : value)
+
+const buildFormDefaults = (
+  defaults: FlatPasskeyDefaults
+): PasskeyFormInput => ({
+  passkey: {
+    enabled: defaults['passkey.enabled'],
+    rp_display_name: defaults['passkey.rp_display_name'] ?? '',
+    rp_id: defaults['passkey.rp_id'] ?? '',
+    origins: (defaults['passkey.origins'] ?? '')
+      .split(',')
+      .map((origin) => origin.trim())
+      .filter(Boolean)
+      .join('\n'),
+    allow_insecure_origin: defaults['passkey.allow_insecure_origin'],
+    user_verification: defaults['passkey.user_verification'],
+    attachment_preference: toAttachmentSelectValue(
+      defaults['passkey.attachment_preference']
+    ),
+  },
+})
+
+const normalizeFormValues = (
+  values: PasskeyFormValues
+): FlatPasskeyDefaults => ({
+  'passkey.enabled': values.passkey.enabled,
+  'passkey.rp_display_name': values.passkey.rp_display_name,
+  'passkey.rp_id': values.passkey.rp_id,
+  'passkey.origins': values.passkey.origins
+    .split('\n')
+    .map((origin) => origin.trim())
+    .filter(Boolean)
+    .join(','),
+  'passkey.allow_insecure_origin': values.passkey.allow_insecure_origin,
+  'passkey.user_verification': values.passkey.user_verification,
+  'passkey.attachment_preference': fromAttachmentSelectValue(
+    values.passkey.attachment_preference
+  ),
+})
+
+interface PasskeySectionProps {
+  defaultValues: FlatPasskeyDefaults
+}
+
+export function PasskeySection(props: PasskeySectionProps) {
   const { t } = useTranslation()
   const updateOption = useUpdateOption()
 
-  const formDefaults = useMemo<PasskeyFormValues>(
-    () => ({
-      ...defaultValues,
-      'passkey.origins': (defaultValues['passkey.origins'] as string)
-        .split(',')
-        .map((origin: string) => origin.trim())
-        .filter(Boolean)
-        .join('\n'),
-      'passkey.attachment_preference':
-        (defaultValues['passkey.attachment_preference'] as string) === ''
-          ? 'none'
-          : (defaultValues['passkey.attachment_preference'] as
-              | 'platform'
-              | 'cross-platform'),
-    }),
-    [defaultValues]
+  const formDefaults = useMemo(
+    () => buildFormDefaults(props.defaultValues),
+    [props.defaultValues]
   )
 
-  const form = useForm<PasskeyFormValues>({
+  const form = useForm<PasskeyFormInput, unknown, PasskeyFormValues>({
     resolver: zodResolver(passkeySchema),
     defaultValues: formDefaults,
   })
 
-  useResetForm(form, formDefaults)
+  const baselineRef = useRef<FlatPasskeyDefaults>(props.defaultValues)
+  const baselineSerializedRef = useRef<string>(
+    JSON.stringify(props.defaultValues)
+  )
 
-  const onSubmit = async () => {
-    const rawData = form.getValues() as Record<string, unknown>
-    const flattenedEntries: Array<
-      [keyof PasskeyFormValues, PasskeyFormValues[keyof PasskeyFormValues]]
-    > = []
+  useEffect(() => {
+    const serialized = JSON.stringify(props.defaultValues)
+    if (serialized === baselineSerializedRef.current) return
+    baselineRef.current = props.defaultValues
+    baselineSerializedRef.current = serialized
+    form.reset(buildFormDefaults(props.defaultValues))
+  }, [props.defaultValues, form])
 
-    Object.entries(rawData).forEach(([key, value]) => {
-      if (key === 'passkey' && value && typeof value === 'object') {
-        Object.entries(value as Record<string, unknown>).forEach(
-          ([nestedKey, nestedValue]) => {
-            flattenedEntries.push([
-              `passkey.${nestedKey}` as keyof PasskeyFormValues,
-              nestedValue as PasskeyFormValues[keyof PasskeyFormValues],
-            ])
-          }
-        )
-      } else {
-        flattenedEntries.push([
-          key as keyof PasskeyFormValues,
-          value as PasskeyFormValues[keyof PasskeyFormValues],
-        ])
-      }
-    })
+  const onSubmit = async (values: PasskeyFormValues) => {
+    const normalized = normalizeFormValues(values)
+    const changedKeys = (
+      Object.keys(normalized) as Array<keyof FlatPasskeyDefaults>
+    ).filter((key) => normalized[key] !== baselineRef.current[key])
 
-    const data = Object.fromEntries(flattenedEntries) as PasskeyFormValues
-    const updates: Array<{ key: string; value: string | boolean }> = []
-
-    Object.entries(data).forEach(([key, value]) => {
-      if (key === 'passkey.origins') {
-        const processed = (value as string)
-          .split('\n')
-          .map((origin: string) => origin.trim())
-          .filter(Boolean)
-          .join(',')
-        const currentDefault = defaultValues['passkey.origins'] as string
-        if (processed !== currentDefault) {
-          updates.push({ key, value: processed })
-        }
-      } else if (key === 'passkey.attachment_preference') {
-        const attachmentPreference =
-          value as PasskeyFormValues['passkey.attachment_preference']
-        const incoming =
-          attachmentPreference === 'none' ? '' : attachmentPreference
-        const currentDefault =
-          defaultValues['passkey.attachment_preference'] === 'none'
-            ? ''
-            : defaultValues['passkey.attachment_preference']
-        if (incoming !== currentDefault) {
-          updates.push({ key, value: incoming })
-        }
-      } else if (value !== defaultValues[key as keyof PasskeyFormValues]) {
-        updates.push({ key, value })
-      }
-    })
-
-    for (const update of updates) {
-      await updateOption.mutateAsync(update)
+    if (changedKeys.length === 0) {
+      toast.info(t('No changes to save'))
+      return
     }
+
+    for (const key of changedKeys) {
+      await updateOption.mutateAsync({
+        key,
+        value: normalized[key],
+      })
+    }
+
+    baselineRef.current = normalized
+    baselineSerializedRef.current = JSON.stringify(normalized)
+    form.reset(buildFormDefaults(normalized))
   }
 
   return (
@@ -200,8 +224,11 @@ export function PasskeySection({ defaultValues }: PasskeySectionProps) {
                 <FormControl>
                   <Input
                     placeholder={t('e.g. New API Console')}
-                    {...field}
                     value={field.value ?? ''}
+                    onChange={(event) => field.onChange(event.target.value)}
+                    name={field.name}
+                    onBlur={field.onBlur}
+                    ref={field.ref}
                   />
                 </FormControl>
                 <FormDescription>
@@ -223,8 +250,11 @@ export function PasskeySection({ defaultValues }: PasskeySectionProps) {
                 <FormControl>
                   <Input
                     placeholder={t('e.g. example.com')}
-                    {...field}
                     value={field.value ?? ''}
+                    onChange={(event) => field.onChange(event.target.value)}
+                    name={field.name}
+                    onBlur={field.onBlur}
+                    ref={field.ref}
                   />
                 </FormControl>
                 <FormDescription>
@@ -356,8 +386,11 @@ export function PasskeySection({ defaultValues }: PasskeySectionProps) {
                   <Textarea
                     rows={4}
                     placeholder={t('https://example.com')}
-                    {...field}
                     value={field.value ?? ''}
+                    onChange={(event) => field.onChange(event.target.value)}
+                    name={field.name}
+                    onBlur={field.onBlur}
+                    ref={field.ref}
                   />
                 </FormControl>
                 <FormDescription>
diff --git a/web/default/src/features/system-settings/auth/section-registry.tsx b/web/default/src/features/system-settings/auth/section-registry.tsx
index 622eb1d3..591476c2 100644
--- a/web/default/src/features/system-settings/auth/section-registry.tsx
+++ b/web/default/src/features/system-settings/auth/section-registry.tsx
@@ -93,14 +93,8 @@ const AUTH_SECTIONS = [
             | 'required'
             | 'preferred'
             | 'discouraged',
-          'passkey.attachment_preference': (settings[
-            'passkey.attachment_preference'
-          ] === ''
-            ? 'none'
-            : settings['passkey.attachment_preference']) as
-            | 'none'
-            | 'platform'
-            | 'cross-platform',
+          'passkey.attachment_preference':
+            settings['passkey.attachment_preference'],
         }}
       />
     ),
diff --git a/web/default/src/features/system-settings/content/dashboard-section.tsx b/web/default/src/features/system-settings/content/dashboard-section.tsx
index 4206c9d7..e21f6ebb 100644
--- a/web/default/src/features/system-settings/content/dashboard-section.tsx
+++ b/web/default/src/features/system-settings/content/dashboard-section.tsx
@@ -48,6 +48,7 @@ import {
 import { SettingsPageFormActions } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
 import { useUpdateOption } from '../hooks/use-update-option'
+import { safeNumberFieldProps } from '../utils/numeric-field'
 
 const dataDashboardSchema = z.object({
   DataExportEnabled: z.boolean(),
@@ -132,9 +133,8 @@ export function DashboardSection({ defaultValues }: DashboardSectionProps) {
                       min={1}
                       max={1440}
                       step={1}
+                      {...safeNumberFieldProps(field)}
                       disabled={!isEnabled}
-                      value={field.value}
-                      onChange={(e) => field.onChange(e.target.valueAsNumber)}
                     />
                   </FormControl>
                   <FormDescription>
diff --git a/web/default/src/features/system-settings/general/pricing-section.tsx b/web/default/src/features/system-settings/general/pricing-section.tsx
index cdeb815d..6a99f0d1 100644
--- a/web/default/src/features/system-settings/general/pricing-section.tsx
+++ b/web/default/src/features/system-settings/general/pricing-section.tsx
@@ -51,6 +51,7 @@ import { SettingsPageFormActions } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
 import { useSettingsForm } from '../hooks/use-settings-form'
 import { useUpdateOption } from '../hooks/use-update-option'
+import { safeNumberFieldProps } from '../utils/numeric-field'
 
 const createPricingSchema = (t: (key: string) => string) =>
   z
@@ -243,11 +244,7 @@ export function PricingSection({ defaultValues }: PricingSectionProps) {
                       <Input
                         type='number'
                         step='0.01'
-                        value={field.value as number}
-                        onChange={(e) => field.onChange(e.target.valueAsNumber)}
-                        name={field.name}
-                        onBlur={field.onBlur}
-                        ref={field.ref}
+                        {...safeNumberFieldProps(field)}
                       />
                     </FormControl>
                     <FormDescription>
diff --git a/web/default/src/features/system-settings/general/system-behavior-section.tsx b/web/default/src/features/system-settings/general/system-behavior-section.tsx
index e4232903..8619569f 100644
--- a/web/default/src/features/system-settings/general/system-behavior-section.tsx
+++ b/web/default/src/features/system-settings/general/system-behavior-section.tsx
@@ -40,6 +40,7 @@ import { SettingsPageFormActions } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
 import { useResetForm } from '../hooks/use-reset-form'
 import { useUpdateOption } from '../hooks/use-update-option'
+import { safeNumberFieldProps } from '../utils/numeric-field'
 
 const behaviorSchema = z.object({
   RetryTimes: z.coerce.number().min(0).max(10),
@@ -96,11 +97,7 @@ export function SystemBehaviorSection({
                     type='number'
                     min='0'
                     max='10'
-                    value={field.value as number}
-                    onChange={(e) => field.onChange(e.target.valueAsNumber)}
-                    name={field.name}
-                    onBlur={field.onBlur}
-                    ref={field.ref}
+                    {...safeNumberFieldProps(field)}
                   />
                 </FormControl>
                 <FormDescription>
diff --git a/web/default/src/features/system-settings/integrations/creem-product-dialog.tsx b/web/default/src/features/system-settings/integrations/creem-product-dialog.tsx
index 26865c7c..dcff9ce1 100644
--- a/web/default/src/features/system-settings/integrations/creem-product-dialog.tsx
+++ b/web/default/src/features/system-settings/integrations/creem-product-dialog.tsx
@@ -49,6 +49,7 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import type { CreemProduct } from '@/features/wallet/types'
+import { safeNumberFieldProps } from '../utils/numeric-field'
 
 const creemProductDialogSchema = z.object({
   name: z.string().min(1, 'Product name is required'),
@@ -216,8 +217,7 @@ export function CreemProductDialog({
                         step='0.01'
                         min={0.01}
                         placeholder='10.00'
-                        {...field}
-                        onChange={(e) => field.onChange(e.target.valueAsNumber)}
+                        {...safeNumberFieldProps(field)}
                       />
                     </FormControl>
                     <FormMessage />
@@ -237,8 +237,7 @@ export function CreemProductDialog({
                       type='number'
                       min={1}
                       placeholder={t('e.g., 500000')}
-                      {...field}
-                      onChange={(e) => field.onChange(e.target.valueAsNumber)}
+                      {...safeNumberFieldProps(field)}
                     />
                   </FormControl>
                   <FormDescription>
diff --git a/web/default/src/features/system-settings/integrations/monitoring-settings-section.tsx b/web/default/src/features/system-settings/integrations/monitoring-settings-section.tsx
index ee7a528a..5ec328a2 100644
--- a/web/default/src/features/system-settings/integrations/monitoring-settings-section.tsx
+++ b/web/default/src/features/system-settings/integrations/monitoring-settings-section.tsx
@@ -44,6 +44,7 @@ import { SettingsPageFormActions } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
 import { useResetForm } from '../hooks/use-reset-form'
 import { useUpdateOption } from '../hooks/use-update-option'
+import { safeNumberFieldProps } from '../utils/numeric-field'
 
 const numericString = z.string().refine((value) => {
   const trimmed = value.trim()
@@ -289,18 +290,7 @@ export function MonitoringSettingsSection({
                       type='number'
                       min={1}
                       step={1}
-                      value={
-                        typeof field.value === 'number' &&
-                        Number.isFinite(field.value)
-                          ? field.value
-                          : ''
-                      }
-                      onChange={(event) =>
-                        field.onChange(event.target.valueAsNumber)
-                      }
-                      name={field.name}
-                      onBlur={field.onBlur}
-                      ref={field.ref}
+                      {...safeNumberFieldProps(field)}
                     />
                   </FormControl>
                   <FormDescription>
diff --git a/web/default/src/features/system-settings/integrations/payment-settings-section.tsx b/web/default/src/features/system-settings/integrations/payment-settings-section.tsx
index 0ec1467f..0f40545f 100644
--- a/web/default/src/features/system-settings/integrations/payment-settings-section.tsx
+++ b/web/default/src/features/system-settings/integrations/payment-settings-section.tsx
@@ -55,6 +55,7 @@ import {
 import { SettingsPageFormActions } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
 import { useUpdateOption } from '../hooks/use-update-option'
+import { safeNumberFieldProps } from '../utils/numeric-field'
 import { AmountDiscountVisualEditor } from './amount-discount-visual-editor'
 import { AmountOptionsVisualEditor } from './amount-options-visual-editor'
 import { CreemProductsVisualEditor } from './creem-products-visual-editor'
@@ -876,10 +877,7 @@ export function PaymentSettingsSection({
                         type='number'
                         step='0.01'
                         min={0}
-                        value={(field.value ?? 0) as number}
-                        onChange={(event) =>
-                          field.onChange(event.target.valueAsNumber)
-                        }
+                        {...safeNumberFieldProps(field)}
                       />
                     </FormControl>
                     <FormDescription>
@@ -903,10 +901,7 @@ export function PaymentSettingsSection({
                         type='number'
                         step='0.01'
                         min={0}
-                        value={(field.value ?? 0) as number}
-                        onChange={(event) =>
-                          field.onChange(event.target.valueAsNumber)
-                        }
+                        {...safeNumberFieldProps(field)}
                       />
                     </FormControl>
                     <FormDescription>
@@ -1314,10 +1309,7 @@ export function PaymentSettingsSection({
                         type='number'
                         step='0.01'
                         min={0}
-                        value={(field.value ?? 0) as number}
-                        onChange={(event) =>
-                          field.onChange(event.target.valueAsNumber)
-                        }
+                        {...safeNumberFieldProps(field)}
                       />
                     </FormControl>
                     <FormDescription>
@@ -1339,10 +1331,7 @@ export function PaymentSettingsSection({
                         type='number'
                         step='0.01'
                         min={0}
-                        value={(field.value ?? 0) as number}
-                        onChange={(event) =>
-                          field.onChange(event.target.valueAsNumber)
-                        }
+                        {...safeNumberFieldProps(field)}
                       />
                     </FormControl>
                     <FormDescription>
diff --git a/web/default/src/features/system-settings/maintenance/performance-section.tsx b/web/default/src/features/system-settings/maintenance/performance-section.tsx
index a03c02ab..36e386a1 100644
--- a/web/default/src/features/system-settings/maintenance/performance-section.tsx
+++ b/web/default/src/features/system-settings/maintenance/performance-section.tsx
@@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -44,6 +44,7 @@ import {
   FormField,
   FormItem,
   FormLabel,
+  FormMessage,
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
@@ -66,31 +67,102 @@ import {
 } from '../components/settings-form-layout'
 import { SettingsPageFormActions } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
-import { useResetForm } from '../hooks/use-reset-form'
 import { useUpdateOption } from '../hooks/use-update-option'
+import { safeNumberFieldProps } from '../utils/numeric-field'
 
+/**
+ * IMPORTANT: react-hook-form 7 interprets dotted `name` strings as nested
+ * paths. If we declare the schema with literal flat keys like
+ * `'performance_setting.disk_cache_enabled'`, the form state diverges from
+ * what zod validates and saves silently turn into no-ops. So we model the
+ * form internally with proper nested objects and only flatten back to the
+ * server-side key format right before persisting.
+ */
 const perfSchema = z.object({
-  'performance_setting.disk_cache_enabled': z.boolean(),
-  'performance_setting.disk_cache_threshold_mb': z.coerce.number().min(1),
-  'performance_setting.disk_cache_max_size_mb': z.coerce.number().min(100),
-  'performance_setting.disk_cache_path': z.string().optional(),
-  'performance_setting.monitor_enabled': z.boolean(),
-  'performance_setting.monitor_cpu_threshold': z.coerce.number().min(0),
-  'performance_setting.monitor_memory_threshold': z.coerce
-    .number()
-    .min(0)
-    .max(100),
-  'performance_setting.monitor_disk_threshold': z.coerce
-    .number()
-    .min(0)
-    .max(100),
-  'perf_metrics_setting.enabled': z.boolean(),
-  'perf_metrics_setting.flush_interval': z.coerce.number().min(1),
-  'perf_metrics_setting.bucket_time': z.enum(['minute', '5min', 'hour']),
-  'perf_metrics_setting.retention_days': z.coerce.number().min(0),
+  performance_setting: z.object({
+    disk_cache_enabled: z.boolean(),
+    disk_cache_threshold_mb: z.coerce.number().min(1),
+    disk_cache_max_size_mb: z.coerce.number().min(100),
+    disk_cache_path: z.string(),
+    monitor_enabled: z.boolean(),
+    monitor_cpu_threshold: z.coerce.number().min(0),
+    monitor_memory_threshold: z.coerce.number().min(0).max(100),
+    monitor_disk_threshold: z.coerce.number().min(0).max(100),
+  }),
+  perf_metrics_setting: z.object({
+    enabled: z.boolean(),
+    flush_interval: z.coerce.number().min(1),
+    bucket_time: z.enum(['minute', '5min', 'hour']),
+    retention_days: z.coerce.number().min(0),
+  }),
 })
 
-type PerfFormValues = z.infer<typeof perfSchema>
+type PerfFormInput = z.input<typeof perfSchema>
+type PerfFormValues = z.output<typeof perfSchema>
+
+type FlatPerfDefaults = {
+  'performance_setting.disk_cache_enabled': boolean
+  'performance_setting.disk_cache_threshold_mb': number
+  'performance_setting.disk_cache_max_size_mb': number
+  'performance_setting.disk_cache_path': string
+  'performance_setting.monitor_enabled': boolean
+  'performance_setting.monitor_cpu_threshold': number
+  'performance_setting.monitor_memory_threshold': number
+  'performance_setting.monitor_disk_threshold': number
+  'perf_metrics_setting.enabled': boolean
+  'perf_metrics_setting.flush_interval': number
+  'perf_metrics_setting.bucket_time': 'minute' | '5min' | 'hour'
+  'perf_metrics_setting.retention_days': number
+}
+
+const buildFormDefaults = (defaults: FlatPerfDefaults): PerfFormInput => ({
+  performance_setting: {
+    disk_cache_enabled: defaults['performance_setting.disk_cache_enabled'],
+    disk_cache_threshold_mb:
+      defaults['performance_setting.disk_cache_threshold_mb'],
+    disk_cache_max_size_mb:
+      defaults['performance_setting.disk_cache_max_size_mb'],
+    disk_cache_path: defaults['performance_setting.disk_cache_path'] ?? '',
+    monitor_enabled: defaults['performance_setting.monitor_enabled'],
+    monitor_cpu_threshold:
+      defaults['performance_setting.monitor_cpu_threshold'],
+    monitor_memory_threshold:
+      defaults['performance_setting.monitor_memory_threshold'],
+    monitor_disk_threshold:
+      defaults['performance_setting.monitor_disk_threshold'],
+  },
+  perf_metrics_setting: {
+    enabled: defaults['perf_metrics_setting.enabled'],
+    flush_interval: defaults['perf_metrics_setting.flush_interval'],
+    bucket_time: defaults['perf_metrics_setting.bucket_time'],
+    retention_days: defaults['perf_metrics_setting.retention_days'],
+  },
+})
+
+const normalizeFormValues = (values: PerfFormValues): FlatPerfDefaults => ({
+  'performance_setting.disk_cache_enabled':
+    values.performance_setting.disk_cache_enabled,
+  'performance_setting.disk_cache_threshold_mb':
+    values.performance_setting.disk_cache_threshold_mb,
+  'performance_setting.disk_cache_max_size_mb':
+    values.performance_setting.disk_cache_max_size_mb,
+  'performance_setting.disk_cache_path':
+    values.performance_setting.disk_cache_path ?? '',
+  'performance_setting.monitor_enabled':
+    values.performance_setting.monitor_enabled,
+  'performance_setting.monitor_cpu_threshold':
+    values.performance_setting.monitor_cpu_threshold,
+  'performance_setting.monitor_memory_threshold':
+    values.performance_setting.monitor_memory_threshold,
+  'performance_setting.monitor_disk_threshold':
+    values.performance_setting.monitor_disk_threshold,
+  'perf_metrics_setting.enabled': values.perf_metrics_setting.enabled,
+  'perf_metrics_setting.flush_interval':
+    values.perf_metrics_setting.flush_interval,
+  'perf_metrics_setting.bucket_time': values.perf_metrics_setting.bucket_time,
+  'perf_metrics_setting.retention_days':
+    values.perf_metrics_setting.retention_days,
+})
 
 function formatBytes(bytes: number, decimals = 2): string {
   if (!bytes || isNaN(bytes)) return '0 Bytes'
@@ -104,7 +176,7 @@ function formatBytes(bytes: number, decimals = 2): string {
 }
 
 interface Props {
-  defaultValues: PerfFormValues
+  defaultValues: FlatPerfDefaults
 }
 
 type LogInfo = {
@@ -158,14 +230,28 @@ export function PerformanceSection(props: Props) {
   const [logCleanupValue, setLogCleanupValue] = useState(10)
   const [logCleanupLoading, setLogCleanupLoading] = useState(false)
 
-  const form = useForm<PerfFormValues>({
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    resolver: zodResolver(perfSchema) as any,
-    defaultValues: props.defaultValues,
+  const formDefaults = useMemo(
+    () => buildFormDefaults(props.defaultValues),
+    [props.defaultValues]
+  )
+
+  const form = useForm<PerfFormInput, unknown, PerfFormValues>({
+    resolver: zodResolver(perfSchema),
+    defaultValues: formDefaults,
   })
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  useResetForm(form as any, props.defaultValues)
+  const baselineRef = useRef<FlatPerfDefaults>(props.defaultValues)
+  const baselineSerializedRef = useRef<string>(
+    JSON.stringify(props.defaultValues)
+  )
+
+  useEffect(() => {
+    const serialized = JSON.stringify(props.defaultValues)
+    if (serialized === baselineSerializedRef.current) return
+    baselineRef.current = props.defaultValues
+    baselineSerializedRef.current = serialized
+    form.reset(buildFormDefaults(props.defaultValues))
+  }, [props.defaultValues, form])
 
   const fetchStats = useCallback(async () => {
     try {
@@ -190,23 +276,27 @@ export function PerformanceSection(props: Props) {
     fetchLogInfo()
   }, [fetchStats, fetchLogInfo])
 
-  const onSubmit = async (data: PerfFormValues) => {
-    const entries = Object.entries(data) as [string, unknown][]
-    const updates = entries.filter(
-      ([key, value]) =>
-        value !== (props.defaultValues[key as keyof PerfFormValues] as unknown)
-    )
-    if (updates.length === 0) {
+  const onSubmit = async (values: PerfFormValues) => {
+    const normalized = normalizeFormValues(values)
+    const changedKeys = (
+      Object.keys(normalized) as Array<keyof FlatPerfDefaults>
+    ).filter((key) => normalized[key] !== baselineRef.current[key])
+
+    if (changedKeys.length === 0) {
       toast.info(t('No changes to save'))
       return
     }
-    for (const [key, value] of updates) {
+
+    for (const key of changedKeys) {
       await updateOption.mutateAsync({
         key,
-        value: value as string | number | boolean,
+        value: normalized[key],
       })
     }
-    toast.success(t('Saved successfully'))
+
+    baselineRef.current = normalized
+    baselineSerializedRef.current = JSON.stringify(normalized)
+    form.reset(buildFormDefaults(normalized))
     fetchStats()
   }
 
@@ -278,9 +368,13 @@ export function PerformanceSection(props: Props) {
   const diskEnabled = form.watch('performance_setting.disk_cache_enabled')
   const monitorEnabled = form.watch('performance_setting.monitor_enabled')
   const perfMetricsEnabled = form.watch('perf_metrics_setting.enabled')
-  const maxCacheSizeMb = form.watch(
+  const maxCacheSizeRaw = form.watch(
     'performance_setting.disk_cache_max_size_mb'
   )
+  const maxCacheSizeMb =
+    typeof maxCacheSizeRaw === 'number'
+      ? maxCacheSizeRaw
+      : Number(maxCacheSizeRaw) || 0
 
   const lowDiskSpace =
     diskEnabled &&
@@ -342,11 +436,18 @@ export function PerformanceSection(props: Props) {
                 <FormItem>
                   <FormLabel>{t('Disk Cache Threshold (MB)')}</FormLabel>
                   <FormControl>
-                    <Input type='number' {...field} disabled={!diskEnabled} />
+                    <Input
+                      type='number'
+                      min={1}
+                      step={1}
+                      {...safeNumberFieldProps(field)}
+                      disabled={!diskEnabled}
+                    />
                   </FormControl>
                   <FormDescription>
                     {t('Use disk cache when request body exceeds this size')}
                   </FormDescription>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -357,7 +458,13 @@ export function PerformanceSection(props: Props) {
                 <FormItem>
                   <FormLabel>{t('Max Disk Cache Size (MB)')}</FormLabel>
                   <FormControl>
-                    <Input type='number' {...field} disabled={!diskEnabled} />
+                    <Input
+                      type='number'
+                      min={100}
+                      step={1}
+                      {...safeNumberFieldProps(field)}
+                      disabled={!diskEnabled}
+                    />
                   </FormControl>
                   {stats?.disk_space_info &&
                     stats.disk_space_info.total > 0 && (
@@ -368,6 +475,7 @@ export function PerformanceSection(props: Props) {
                         })}
                       </FormDescription>
                     )}
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -393,11 +501,15 @@ export function PerformanceSection(props: Props) {
                       placeholder={t(
                         'Leave empty to use system temp directory'
                       )}
-                      {...field}
                       value={field.value ?? ''}
+                      onChange={(event) => field.onChange(event.target.value)}
+                      name={field.name}
+                      onBlur={field.onBlur}
+                      ref={field.ref}
                       disabled={!diskEnabled}
                     />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -444,10 +556,13 @@ export function PerformanceSection(props: Props) {
                   <FormControl>
                     <Input
                       type='number'
-                      {...field}
+                      min={0}
+                      step={1}
+                      {...safeNumberFieldProps(field)}
                       disabled={!monitorEnabled}
                     />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -460,10 +575,14 @@ export function PerformanceSection(props: Props) {
                   <FormControl>
                     <Input
                       type='number'
-                      {...field}
+                      min={0}
+                      max={100}
+                      step={1}
+                      {...safeNumberFieldProps(field)}
                       disabled={!monitorEnabled}
                     />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -476,10 +595,14 @@ export function PerformanceSection(props: Props) {
                   <FormControl>
                     <Input
                       type='number'
-                      {...field}
+                      min={0}
+                      max={100}
+                      step={1}
+                      {...safeNumberFieldProps(field)}
                       disabled={!monitorEnabled}
                     />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -526,10 +649,12 @@ export function PerformanceSection(props: Props) {
                     <Input
                       type='number'
                       min={1}
-                      {...field}
+                      step={1}
+                      {...safeNumberFieldProps(field)}
                       disabled={!perfMetricsEnabled}
                     />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -562,6 +687,7 @@ export function PerformanceSection(props: Props) {
                       </SelectGroup>
                     </SelectContent>
                   </Select>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -575,13 +701,15 @@ export function PerformanceSection(props: Props) {
                     <Input
                       type='number'
                       min={0}
-                      {...field}
+                      step={1}
+                      {...safeNumberFieldProps(field)}
                       disabled={!perfMetricsEnabled}
                     />
                   </FormControl>
                   <FormDescription>
                     {t('0 means data is kept permanently')}
                   </FormDescription>
+                  <FormMessage />
                 </FormItem>
               )}
             />
diff --git a/web/default/src/features/system-settings/models/grok-settings-card.tsx b/web/default/src/features/system-settings/models/grok-settings-card.tsx
index baa27ddd..c288e789 100644
--- a/web/default/src/features/system-settings/models/grok-settings-card.tsx
+++ b/web/default/src/features/system-settings/models/grok-settings-card.tsx
@@ -16,10 +16,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
+import { useEffect, useMemo, useRef } from 'react'
 import * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 import {
   Form,
   FormControl,
@@ -27,6 +29,7 @@ import {
   FormField,
   FormItem,
   FormLabel,
+  FormMessage,
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { Switch } from '@/components/ui/switch'
@@ -37,48 +40,97 @@ import {
 } from '../components/settings-form-layout'
 import { SettingsPageFormActions } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
-import { useResetForm } from '../hooks/use-reset-form'
 import { useUpdateOption } from '../hooks/use-update-option'
+import { safeNumberFieldProps } from '../utils/numeric-field'
 
 const XAI_VIOLATION_FEE_DOC_URL =
   'https://docs.x.ai/docs/models#usage-guidelines-violation-fee'
 
+/**
+ * The schema uses a nested object so the dotted FormField `name` props line
+ * up with react-hook-form's path semantics. Using flat keys like
+ * `'grok.violation_deduction_enabled'` causes RHF to silently maintain two
+ * parallel value trees and saves never see the user input.
+ */
 const grokSchema = z.object({
-  'grok.violation_deduction_enabled': z.boolean(),
-  'grok.violation_deduction_amount': z.coerce.number().min(0),
+  grok: z.object({
+    violation_deduction_enabled: z.boolean(),
+    violation_deduction_amount: z.coerce.number().min(0),
+  }),
 })
 
-type GrokFormValues = z.infer<typeof grokSchema>
+type GrokFormInput = z.input<typeof grokSchema>
+type GrokFormValues = z.output<typeof grokSchema>
+
+type FlatGrokDefaults = {
+  'grok.violation_deduction_enabled': boolean
+  'grok.violation_deduction_amount': number
+}
+
+const buildFormDefaults = (defaults: FlatGrokDefaults): GrokFormInput => ({
+  grok: {
+    violation_deduction_enabled: defaults['grok.violation_deduction_enabled'],
+    violation_deduction_amount: defaults['grok.violation_deduction_amount'],
+  },
+})
+
+const normalizeFormValues = (values: GrokFormValues): FlatGrokDefaults => ({
+  'grok.violation_deduction_enabled': values.grok.violation_deduction_enabled,
+  'grok.violation_deduction_amount': values.grok.violation_deduction_amount,
+})
 
 interface Props {
-  defaultValues: GrokFormValues
+  defaultValues: FlatGrokDefaults
 }
 
 export function GrokSettingsCard(props: Props) {
   const { t } = useTranslation()
   const updateOption = useUpdateOption()
 
-  const form = useForm<GrokFormValues>({
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    resolver: zodResolver(grokSchema) as any,
-    defaultValues: props.defaultValues,
+  const formDefaults = useMemo(
+    () => buildFormDefaults(props.defaultValues),
+    [props.defaultValues]
+  )
+
+  const form = useForm<GrokFormInput, unknown, GrokFormValues>({
+    resolver: zodResolver(grokSchema),
+    defaultValues: formDefaults,
   })
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  useResetForm(form as any, props.defaultValues)
+  const baselineRef = useRef<FlatGrokDefaults>(props.defaultValues)
+  const baselineSerializedRef = useRef<string>(
+    JSON.stringify(props.defaultValues)
+  )
 
-  const onSubmit = async (data: GrokFormValues) => {
-    const entries = Object.entries(data) as [string, unknown][]
-    const updates = entries.filter(
-      ([key, value]) =>
-        value !== (props.defaultValues[key as keyof GrokFormValues] as unknown)
-    )
-    for (const [key, value] of updates) {
+  useEffect(() => {
+    const serialized = JSON.stringify(props.defaultValues)
+    if (serialized === baselineSerializedRef.current) return
+    baselineRef.current = props.defaultValues
+    baselineSerializedRef.current = serialized
+    form.reset(buildFormDefaults(props.defaultValues))
+  }, [props.defaultValues, form])
+
+  const onSubmit = async (values: GrokFormValues) => {
+    const normalized = normalizeFormValues(values)
+    const changedKeys = (
+      Object.keys(normalized) as Array<keyof FlatGrokDefaults>
+    ).filter((key) => normalized[key] !== baselineRef.current[key])
+
+    if (changedKeys.length === 0) {
+      toast.info(t('No changes to save'))
+      return
+    }
+
+    for (const key of changedKeys) {
       await updateOption.mutateAsync({
         key,
-        value: value as string | number | boolean,
+        value: normalized[key],
       })
     }
+
+    baselineRef.current = normalized
+    baselineSerializedRef.current = JSON.stringify(normalized)
+    form.reset(buildFormDefaults(normalized))
   }
 
   const enabled = form.watch('grok.violation_deduction_enabled')
@@ -133,7 +185,7 @@ export function GrokSettingsCard(props: Props) {
                     type='number'
                     step={0.01}
                     min={0}
-                    {...field}
+                    {...safeNumberFieldProps(field)}
                     disabled={!enabled}
                   />
                 </FormControl>
@@ -142,6 +194,7 @@ export function GrokSettingsCard(props: Props) {
                     'Base amount. Actual deduction = base amount × system group rate.'
                   )}
                 </FormDescription>
+                <FormMessage />
               </FormItem>
             )}
           />
diff --git a/web/default/src/features/system-settings/utils/numeric-field.ts b/web/default/src/features/system-settings/utils/numeric-field.ts
new file mode 100644
index 00000000..f14e6798
--- /dev/null
+++ b/web/default/src/features/system-settings/utils/numeric-field.ts
@@ -0,0 +1,91 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import type { ChangeEvent } from 'react'
+import type {
+  ControllerRenderProps,
+  FieldPath,
+  FieldValues,
+} from 'react-hook-form'
+
+/**
+ * Props produced by {@link safeNumberFieldProps} for a native
+ * `<input type="number">`. They are intentionally narrow so consumers can
+ * spread them onto our shared `Input` component without leaking the
+ * react-hook-form internals (e.g. `disabled`) that need overriding per call.
+ */
+export type SafeNumberFieldProps = {
+  value: number | ''
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void
+  onBlur: () => void
+  name: string
+  ref: (instance: HTMLInputElement | null) => void
+}
+
+/**
+ * Adapter for binding a react-hook-form numeric field to a native
+ * `<input type="number">` without ever putting `NaN` into form state.
+ *
+ * Why this exists:
+ * - `<input type="number">` reports `valueAsNumber === NaN` whenever the field
+ *   is empty or holds an in-progress non-numeric token (e.g. just a minus
+ *   sign or a trailing dot). Forwarding `NaN` to `field.onChange` makes Zod
+ *   numeric validators (`z.number().min(...)`, `z.coerce.number()`, etc.)
+ *   fail at submit time, so `form.handleSubmit` silently refuses to call
+ *   `onSubmit` — the save button appears frozen with no toast and no error.
+ * - The legacy Semi `InputNumber` avoids this by snapping the input back to
+ *   the previous valid number. We replicate that behaviour by ignoring `NaN`
+ *   updates: React's controlled-input reconciliation will restore the last
+ *   valid value to the DOM on the next render.
+ *
+ * Display:
+ * - When the underlying state is not a finite number, the prop returns `''`
+ *   so the input visibly renders empty instead of literal "NaN".
+ *
+ * Usage:
+ * ```tsx
+ * <FormField
+ *   control={form.control}
+ *   name='performance_setting.monitor_cpu_threshold'
+ *   render={({ field }) => (
+ *     <Input type='number' min={0} {...safeNumberFieldProps(field)} />
+ *   )}
+ * />
+ * ```
+ */
+export function safeNumberFieldProps<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>,
+>(field: ControllerRenderProps<TFieldValues, TName>): SafeNumberFieldProps {
+  const raw = field.value as unknown
+  const display: number | '' =
+    typeof raw === 'number' && Number.isFinite(raw) ? raw : ''
+
+  return {
+    value: display,
+    onChange: (event) => {
+      const next = event.target.valueAsNumber
+      if (Number.isFinite(next)) {
+        ;(field.onChange as (value: number) => void)(next)
+      }
+    },
+    onBlur: field.onBlur,
+    name: field.name,
+    ref: field.ref,
+  }
+}
diff --git a/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx b/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
index 0b85cfa4..1d15c9c7 100644
--- a/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
+++ b/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
@@ -357,7 +357,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
                     )}
                   </div>
                   {log.channel_name && (
-                    <span className='text-muted-foreground/70 truncate !text-xs [font-family:var(--font-body)]'>
+                    <span className='text-muted-foreground/70 truncate [font-family:var(--font-body)] !text-xs'>
                       {channelName}
                     </span>
                   )}
@@ -502,7 +502,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
             </Tooltip>
           </TooltipProvider>
           {metaParts.length > 0 && (
-            <span className='text-muted-foreground/60 truncate !text-xs [font-family:var(--font-body)]'>
+            <span className='text-muted-foreground/60 truncate [font-family:var(--font-body)] !text-xs'>
               {metaParts.join(' · ')}
             </span>
           )}
@@ -598,8 +598,8 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
                   />
                 ))}
             </div>
-            <div className='flex items-center gap-1 !text-xs leading-none [font-family:var(--font-body)]'>
-              <span className='text-muted-foreground/60 !text-xs leading-none [font-family:var(--font-body)]'>
+            <div className='flex items-center gap-1 [font-family:var(--font-body)] !text-xs leading-none'>
+              <span className='text-muted-foreground/60 [font-family:var(--font-body)] !text-xs leading-none'>
                 {log.is_stream ? t('Stream') : t('Non-stream')}
                 {tokensPerSecond != null && (
                   <>
@@ -736,7 +736,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
 
         return (
           <div className='flex flex-col gap-0.5'>
-            <span className='border-border/80 bg-muted/60 inline-flex w-fit items-center rounded-md border px-1.5 py-0.5 font-semibold tabular-nums [font-family:var(--font-body)]'>
+            <span className='border-border/80 bg-muted/60 inline-flex w-fit items-center rounded-md border px-1.5 py-0.5 [font-family:var(--font-body)] font-semibold tabular-nums'>
               {quotaStr}
             </span>
           </div>
diff --git a/web/default/src/features/usage-logs/components/model-badge.tsx b/web/default/src/features/usage-logs/components/model-badge.tsx
index 6be5ecea..1ff031ae 100644
--- a/web/default/src/features/usage-logs/components/model-badge.tsx
+++ b/web/default/src/features/usage-logs/components/model-badge.tsx
@@ -101,12 +101,12 @@ function ModelBadgeContent(props: ModelBadgeProps) {
       showDot={!provider}
       autoColor={provider ? undefined : props.modelName}
       className={cn(
-        'border-border/60 bg-muted/30 h-auto min-h-6 gap-1.5 rounded-md border px-2 py-0.5 whitespace-normal break-all [font-family:var(--font-body)]',
+        'border-border/60 bg-muted/30 h-auto min-h-6 gap-1.5 rounded-md border px-2 py-0.5 [font-family:var(--font-body)] break-all whitespace-normal',
         provider && 'text-foreground',
         props.className
       )}
     >
-      <span className='flex items-center gap-1.5 min-w-0'>
+      <span className='flex min-w-0 items-center gap-1.5'>
         {provider && (
           <span
             className='flex size-3.5 shrink-0 items-center justify-center'