diff --git a/web/app/components/header/account-dropdown/compliance.tsx b/web/app/components/header/account-dropdown/compliance.tsx
index a8d505627f..6bc5b5c3f1 100644
--- a/web/app/components/header/account-dropdown/compliance.tsx
+++ b/web/app/components/header/account-dropdown/compliance.tsx
@@ -79,7 +79,7 @@ const UpgradeOrDownload: FC<UpgradeOrDownloadProps> = ({ doc_name }) => {
     return (
       <Button loading={isPending} disabled={isPending} size="small" variant="secondary" className="flex items-center gap-[1px]" onClick={handleDownloadClick}>
         <RiArrowDownCircleLine className="size-[14px] text-components-button-secondary-text-disabled" />
-        <span className="px-[3px] text-components-button-secondary-text system-xs-medium">{t('operation.download', { ns: 'common' })}</span>
+        <span className="system-xs-medium px-[3px] text-components-button-secondary-text">{t('operation.download', { ns: 'common' })}</span>
       </Button>
     )
   }
@@ -120,7 +120,7 @@ export default function Compliance() {
             }
             >
               <RiVerifiedBadgeLine className="size-4 shrink-0 text-text-tertiary" />
-              <div className="grow px-1 text-left text-text-secondary system-md-regular">{t('userProfile.compliance', { ns: 'common' })}</div>
+              <div className="system-md-regular grow px-1 text-left text-text-secondary">{t('userProfile.compliance', { ns: 'common' })}</div>
               <RiArrowRightSLine className="size-[14px] shrink-0 text-text-tertiary" />
             </MenuButton>
             <Transition
@@ -145,7 +145,7 @@ export default function Compliance() {
                       className={cn(itemClassName, 'group justify-between', 'data-[active]:bg-state-base-hover')}
                     >
                       <Soc2 className="size-7 shrink-0" />
-                      <div className="grow truncate px-1 text-text-secondary system-md-regular">{t('compliance.soc2Type1', { ns: 'common' })}</div>
+                      <div className="system-md-regular grow truncate px-1 text-text-secondary">{t('compliance.soc2Type1', { ns: 'common' })}</div>
                       <UpgradeOrDownload doc_name={DocName.SOC2_Type_I} />
                     </div>
                   </MenuItem>
@@ -154,7 +154,7 @@ export default function Compliance() {
                       className={cn(itemClassName, 'group justify-between', 'data-[active]:bg-state-base-hover')}
                     >
                       <Soc2 className="size-7 shrink-0" />
-                      <div className="grow truncate px-1 text-text-secondary system-md-regular">{t('compliance.soc2Type2', { ns: 'common' })}</div>
+                      <div className="system-md-regular grow truncate px-1 text-text-secondary">{t('compliance.soc2Type2', { ns: 'common' })}</div>
                       <UpgradeOrDownload doc_name={DocName.SOC2_Type_II} />
                     </div>
                   </MenuItem>
@@ -163,7 +163,7 @@ export default function Compliance() {
                       className={cn(itemClassName, 'group justify-between', 'data-[active]:bg-state-base-hover')}
                     >
                       <Iso className="size-7 shrink-0" />
-                      <div className="grow truncate px-1 text-text-secondary system-md-regular">{t('compliance.iso27001', { ns: 'common' })}</div>
+                      <div className="system-md-regular grow truncate px-1 text-text-secondary">{t('compliance.iso27001', { ns: 'common' })}</div>
                       <UpgradeOrDownload doc_name={DocName.ISO_27001} />
                     </div>
                   </MenuItem>
@@ -172,7 +172,7 @@ export default function Compliance() {
                       className={cn(itemClassName, 'group justify-between', 'data-[active]:bg-state-base-hover')}
                     >
                       <Gdpr className="size-7 shrink-0" />
-                      <div className="grow truncate px-1 text-text-secondary system-md-regular">{t('compliance.gdpr', { ns: 'common' })}</div>
+                      <div className="system-md-regular grow truncate px-1 text-text-secondary">{t('compliance.gdpr', { ns: 'common' })}</div>
                       <UpgradeOrDownload doc_name={DocName.GDPR} />
                     </div>
                   </MenuItem>
diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx
index c61ffb4a7a..983f9e434d 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -96,7 +96,7 @@ export default function AppSelector() {
                     <MenuItem disabled>
                       <div className="flex flex-nowrap items-center py-2 pl-3 pr-2">
                         <div className="grow">
-                          <div className="break-all text-text-primary system-md-medium">
+                          <div className="system-md-medium break-all text-text-primary">
                             {userProfile.name}
                             {isEducationAccount && (
                               <PremiumBadge size="s" color="blue" className="ml-1 !px-2">
@@ -105,7 +105,7 @@ export default function AppSelector() {
                               </PremiumBadge>
                             )}
                           </div>
-                          <div className="break-all text-text-tertiary system-xs-regular">{userProfile.email}</div>
+                          <div className="system-xs-regular break-all text-text-tertiary">{userProfile.email}</div>
                         </div>
                         <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={36} />
                       </div>
@@ -118,7 +118,7 @@ export default function AppSelector() {
                         rel="noopener noreferrer"
                       >
                         <RiAccountCircleLine className="size-4 shrink-0 text-text-tertiary" />
-                        <div className="grow px-1 text-text-secondary system-md-regular">{t('account.account', { ns: 'common' })}</div>
+                        <div className="system-md-regular grow px-1 text-text-secondary">{t('account.account', { ns: 'common' })}</div>
                         <RiArrowRightUpLine className="size-[14px] shrink-0 text-text-tertiary" />
                       </Link>
                     </MenuItem>
@@ -128,7 +128,7 @@ export default function AppSelector() {
                         onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.MEMBERS })}
                       >
                         <RiSettings3Line className="size-4 shrink-0 text-text-tertiary" />
-                        <div className="grow px-1 text-text-secondary system-md-regular">{t('userProfile.settings', { ns: 'common' })}</div>
+                        <div className="system-md-regular grow px-1 text-text-secondary">{t('userProfile.settings', { ns: 'common' })}</div>
                       </div>
                     </MenuItem>
                   </div>
@@ -143,7 +143,7 @@ export default function AppSelector() {
                             rel="noopener noreferrer"
                           >
                             <RiBookOpenLine className="size-4 shrink-0 text-text-tertiary" />
-                            <div className="grow px-1 text-text-secondary system-md-regular">{t('userProfile.helpCenter', { ns: 'common' })}</div>
+                            <div className="system-md-regular grow px-1 text-text-secondary">{t('userProfile.helpCenter', { ns: 'common' })}</div>
                             <RiArrowRightUpLine className="size-[14px] shrink-0 text-text-tertiary" />
                           </Link>
                         </MenuItem>
@@ -159,7 +159,7 @@ export default function AppSelector() {
                             rel="noopener noreferrer"
                           >
                             <RiMap2Line className="size-4 shrink-0 text-text-tertiary" />
-                            <div className="grow px-1 text-text-secondary system-md-regular">{t('userProfile.roadmap', { ns: 'common' })}</div>
+                            <div className="system-md-regular grow px-1 text-text-secondary">{t('userProfile.roadmap', { ns: 'common' })}</div>
                             <RiArrowRightUpLine className="size-[14px] shrink-0 text-text-tertiary" />
                           </Link>
                         </MenuItem>
@@ -171,10 +171,10 @@ export default function AppSelector() {
                             rel="noopener noreferrer"
                           >
                             <RiGithubLine className="size-4 shrink-0 text-text-tertiary" />
-                            <div className="grow px-1 text-text-secondary system-md-regular">{t('userProfile.github', { ns: 'common' })}</div>
+                            <div className="system-md-regular grow px-1 text-text-secondary">{t('userProfile.github', { ns: 'common' })}</div>
                             <div className="flex items-center gap-0.5 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] py-[3px]">
                               <RiStarLine className="size-3 shrink-0 text-text-tertiary" />
-                              <GithubStar className="text-text-tertiary system-2xs-medium-uppercase" />
+                              <GithubStar className="system-2xs-medium-uppercase text-text-tertiary" />
                             </div>
                           </Link>
                         </MenuItem>
@@ -186,9 +186,9 @@ export default function AppSelector() {
                                 onClick={() => setAboutVisible(true)}
                               >
                                 <RiInformation2Line className="size-4 shrink-0 text-text-tertiary" />
-                                <div className="grow px-1 text-text-secondary system-md-regular">{t('userProfile.about', { ns: 'common' })}</div>
+                                <div className="system-md-regular grow px-1 text-text-secondary">{t('userProfile.about', { ns: 'common' })}</div>
                                 <div className="flex shrink-0 items-center">
-                                  <div className="mr-2 text-text-tertiary system-xs-regular">{langGeniusVersionInfo.current_version}</div>
+                                  <div className="system-xs-regular mr-2 text-text-tertiary">{langGeniusVersionInfo.current_version}</div>
                                   <Indicator color={langGeniusVersionInfo.current_version === langGeniusVersionInfo.latest_version ? 'green' : 'orange'} />
                                 </div>
                               </div>
@@ -202,7 +202,7 @@ export default function AppSelector() {
                     <div className="p-1">
                       <div className={cn(itemClassName, 'hover:bg-transparent')}>
                         <RiTShirt2Line className="size-4 shrink-0 text-text-tertiary" />
-                        <div className="grow px-1 text-text-secondary system-md-regular">{t('theme.theme', { ns: 'common' })}</div>
+                        <div className="system-md-regular grow px-1 text-text-secondary">{t('theme.theme', { ns: 'common' })}</div>
                         <ThemeSwitcher />
                       </div>
                     </div>
@@ -213,7 +213,7 @@ export default function AppSelector() {
                         className={cn(itemClassName, 'group justify-between', 'data-[active]:bg-state-base-hover')}
                       >
                         <RiLogoutBoxRLine className="size-4 shrink-0 text-text-tertiary" />
-                        <div className="grow px-1 text-text-secondary system-md-regular">{t('userProfile.logout', { ns: 'common' })}</div>
+                        <div className="system-md-regular grow px-1 text-text-secondary">{t('userProfile.logout', { ns: 'common' })}</div>
                       </div>
                     </div>
                   </MenuItem>
diff --git a/web/app/components/header/account-dropdown/support.tsx b/web/app/components/header/account-dropdown/support.tsx
index 566a9ff56f..7873b676c3 100644
--- a/web/app/components/header/account-dropdown/support.tsx
+++ b/web/app/components/header/account-dropdown/support.tsx
@@ -35,7 +35,7 @@ export default function Support({ closeAccountDropdown }: SupportProps) {
             }
             >
               <RiQuestionLine className="size-4 shrink-0 text-text-tertiary" />
-              <div className="grow px-1 text-left text-text-secondary system-md-regular">{t('userProfile.support', { ns: 'common' })}</div>
+              <div className="system-md-regular grow px-1 text-left text-text-secondary">{t('userProfile.support', { ns: 'common' })}</div>
               <RiArrowRightSLine className="size-[14px] shrink-0 text-text-tertiary" />
             </MenuButton>
             <Transition
@@ -67,7 +67,7 @@ export default function Support({ closeAccountDropdown }: SupportProps) {
                               }}
                             >
                               <RiChatSmile2Line className="size-4 shrink-0 text-text-tertiary" />
-                              <div className="grow px-1 text-text-secondary system-md-regular">{t('userProfile.contactUs', { ns: 'common' })}</div>
+                              <div className="system-md-regular grow px-1 text-text-secondary">{t('userProfile.contactUs', { ns: 'common' })}</div>
                             </button>
                           )
                         : (
@@ -78,7 +78,7 @@ export default function Support({ closeAccountDropdown }: SupportProps) {
                               rel="noopener noreferrer"
                             >
                               <RiMailSendLine className="size-4 shrink-0 text-text-tertiary" />
-                              <div className="grow px-1 text-text-secondary system-md-regular">{t('userProfile.emailSupport', { ns: 'common' })}</div>
+                              <div className="system-md-regular grow px-1 text-text-secondary">{t('userProfile.emailSupport', { ns: 'common' })}</div>
                               <RiArrowRightUpLine className="size-[14px] shrink-0 text-text-tertiary" />
                             </a>
                           )}
@@ -92,7 +92,7 @@ export default function Support({ closeAccountDropdown }: SupportProps) {
                       rel="noopener noreferrer"
                     >
                       <RiDiscussLine className="size-4 shrink-0 text-text-tertiary" />
-                      <div className="grow px-1 text-text-secondary system-md-regular">{t('userProfile.forum', { ns: 'common' })}</div>
+                      <div className="system-md-regular grow px-1 text-text-secondary">{t('userProfile.forum', { ns: 'common' })}</div>
                       <RiArrowRightUpLine className="size-[14px] shrink-0 text-text-tertiary" />
                     </Link>
                   </MenuItem>
@@ -104,7 +104,7 @@ export default function Support({ closeAccountDropdown }: SupportProps) {
                       rel="noopener noreferrer"
                     >
                       <RiDiscordLine className="size-4 shrink-0 text-text-tertiary" />
-                      <div className="grow px-1 text-text-secondary system-md-regular">{t('userProfile.community', { ns: 'common' })}</div>
+                      <div className="system-md-regular grow px-1 text-text-secondary">{t('userProfile.community', { ns: 'common' })}</div>
                       <RiArrowRightUpLine className="size-[14px] shrink-0 text-text-tertiary" />
                     </Link>
                   </MenuItem>