diff --git a/backend/app/agent/toolkit/terminal_toolkit.py b/backend/app/agent/toolkit/terminal_toolkit.py
index a2952d4e6..5c1fd8eb1 100644
--- a/backend/app/agent/toolkit/terminal_toolkit.py
+++ b/backend/app/agent/toolkit/terminal_toolkit.py
@@ -21,14 +21,21 @@ import subprocess
 import threading
 from concurrent.futures import ThreadPoolExecutor
 
+from camel.toolkits.terminal_toolkit import (
+    TerminalToolkit as BaseTerminalToolkit,
+)
+from camel.toolkits.terminal_toolkit.terminal_toolkit import _to_plain
+
 from app.agent.toolkit.abstract_toolkit import AbstractToolkit
 from app.component.environment import env
-from app.service.task import (Action, ActionTerminalData, Agents,
-                              get_task_lock, process_task)
+from app.service.task import (
+    Action,
+    ActionTerminalData,
+    Agents,
+    get_task_lock,
+    process_task,
+)
 from app.utils.listen.toolkit_listen import auto_listen_toolkit
-from camel.toolkits.terminal_toolkit import \
-    TerminalToolkit as BaseTerminalToolkit
-from camel.toolkits.terminal_toolkit.terminal_toolkit import _to_plain
 
 logger = logging.getLogger("terminal_toolkit")
 
diff --git a/src/components/IntegrationList/index.tsx b/src/components/IntegrationList/index.tsx
index 771d13664..aadfe3f52 100644
--- a/src/components/IntegrationList/index.tsx
+++ b/src/components/IntegrationList/index.tsx
@@ -340,7 +340,7 @@ export default function IntegrationList({
               }
             >
               {isSelectMode ? (
-                <div className="flex items-center gap-xs">
+                <div className="gap-xs flex items-center">
                   {(isSelectMode || showStatusDot) && (
                     <img
                       src={ellipseIcon}
@@ -361,8 +361,8 @@ export default function IntegrationList({
                   </div>
                 </div>
               ) : (
-                <div className="flex w-full flex-row items-center justify-between gap-xs">
-                  <div className="flex flex-row items-center gap-xs">
+                <div className="gap-xs flex w-full flex-row items-center justify-between">
+                  <div className="gap-xs flex flex-row items-center">
                     {showStatusDot && (
                       <img
                         src={ellipseIcon}
@@ -387,7 +387,7 @@ export default function IntegrationList({
                       </Tooltip>
                     </div>
                   </div>
-                  <div className="flex flex-row items-center gap-md">
+                  <div className="gap-md flex flex-row items-center">
                     {showConfigButton && (
                       <Button
                         type="button"
@@ -455,8 +455,8 @@ export default function IntegrationList({
             </div>
 
             {!isSelectMode && showSelect && (
-              <div className="mt-6 flex w-full flex-row items-center gap-md border-x-0 border-b-0 border-solid border-border-secondary pt-6">
-                <div className="flex w-full flex-row items-center justify-between gap-md">
+              <div className="mt-6 gap-md border-border-secondary pt-6 flex w-full flex-row items-center border-x-0 border-b-0 border-solid">
+                <div className="gap-md flex w-full flex-row items-center justify-between">
                   <div className="text-body-md text-text-body">
                     {' '}
                     Default {item.name}
diff --git a/src/components/SearchInput/index.tsx b/src/components/SearchInput/index.tsx
index 6b5e66fc4..43e27a2ae 100644
--- a/src/components/SearchInput/index.tsx
+++ b/src/components/SearchInput/index.tsx
@@ -80,9 +80,9 @@ export default function SearchInput({
     return (
       <motion.div
         className={cn(
-          'flex items-center justify-center overflow-hidden rounded-lg border border-solid border-transparent bg-transparent py-0.5',
+          'rounded-lg py-0.5 flex items-center justify-center overflow-hidden border border-solid border-transparent bg-transparent',
           'focus-within:border-input-border-focus focus-within:bg-input-bg-input',
-          'hover:border-transparent hover:bg-surface-tertiary'
+          'hover:bg-surface-tertiary hover:border-transparent'
         )}
         initial={false}
         animate={{ width: isExpanded ? EXPANDED_WIDTH : COLLAPSED_WIDTH }}
@@ -117,13 +117,13 @@ export default function SearchInput({
           ) : (
             <motion.div
               key="input"
-              className="flex min-w-0 flex-1 items-center gap-0 pr-1"
+              className="min-w-0 gap-0 pr-1 flex flex-1 items-center"
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
               transition={{ duration: 0.15 }}
             >
-              <span className="pointer-events-none ml-2 inline-flex h-4 w-4 shrink-0 items-center justify-center text-icon-secondary">
+              <span className="ml-2 h-4 w-4 text-icon-secondary pointer-events-none inline-flex shrink-0 items-center justify-center">
                 <Search className="h-4 w-4" />
               </span>
               <input
@@ -140,14 +140,14 @@ export default function SearchInput({
                     onSearch?.();
                   }
                 }}
-                className="h-6 min-w-0 flex-1 bg-transparent pl-2 text-label-sm text-text-heading outline-none placeholder:text-text-label"
+                className="h-6 min-w-0 pl-2 text-label-sm text-text-heading placeholder:text-text-label flex-1 bg-transparent outline-none"
               />
               <TooltipSimple content={clearLabel}>
                 <Button
                   type="button"
                   variant="ghost"
                   size="icon"
-                  className="shrink-0 rounded-full text-icon-secondary"
+                  className="text-icon-secondary shrink-0 rounded-full"
                   onClick={collapse}
                   aria-label={clearLabel}
                 >
diff --git a/src/pages/Agents/Models.tsx b/src/pages/Agents/Models.tsx
index 2a932a291..5f7eb9b66 100644
--- a/src/pages/Agents/Models.tsx
+++ b/src/pages/Agents/Models.tsx
@@ -1115,13 +1115,13 @@ export default function SettingModels() {
       <button
         key={tabId}
         onClick={() => setSelectedTab(tabId)}
-        className={`flex w-full items-center justify-between rounded-xl px-3 py-2 transition-all duration-200 ${isSubItem ? 'pl-3' : ''} ${
+        className={`rounded-xl px-3 py-2 flex w-full items-center justify-between transition-all duration-200 ${isSubItem ? 'pl-3' : ''} ${
           isActive
             ? 'bg-fill-fill-transparent-active'
             : 'bg-fill-fill-transparent hover:bg-fill-fill-transparent-hover'
         } `}
       >
-        <div className="flex items-center justify-center gap-3">
+        <div className="gap-3 flex items-center justify-center">
           {modelImage ? (
             <img
               src={modelImage}
@@ -1141,7 +1141,7 @@ export default function SettingModels() {
           </span>
         </div>
         {isConfigured && (
-          <div className="m-1 h-2 w-2 rounded-full bg-text-success" />
+          <div className="m-1 h-2 w-2 bg-text-success rounded-full" />
         )}
       </button>
     );
@@ -1153,16 +1153,16 @@ export default function SettingModels() {
     if (selectedTab === 'cloud') {
       if (import.meta.env.VITE_USE_LOCAL_PROXY === 'true') {
         return (
-          <div className="flex h-64 items-center justify-center text-text-label">
+          <div className="h-64 text-text-label flex items-center justify-center">
             {t('setting.cloud-not-available-in-local-proxy')}
           </div>
         );
       }
       return (
-        <div className="flex w-full flex-col rounded-2xl bg-surface-tertiary">
-          <div className="mx-6 mb-4 flex flex-col justify-start self-stretch border-x-0 border-b-[0.5px] border-t-0 border-solid border-border-secondary pb-4 pt-2">
-            <div className="inline-flex items-center justify-start gap-2 self-stretch">
-              <div className="text-body-base my-2 flex-1 justify-center font-bold text-text-heading">
+        <div className="rounded-2xl bg-surface-tertiary flex w-full flex-col">
+          <div className="mx-6 mb-4 border-border-secondary pb-4 pt-2 flex flex-col justify-start self-stretch border-x-0 border-t-0 border-b-[0.5px] border-solid">
+            <div className="gap-2 inline-flex items-center justify-start self-stretch">
+              <div className="text-body-base my-2 font-bold text-text-heading flex-1 justify-center">
                 {t('setting.eigent-cloud')}
               </div>
               {cloudPrefer ? (
@@ -1181,7 +1181,7 @@ export default function SettingModels() {
                 <Button
                   variant="ghost"
                   size="xs"
-                  className="rounded-full !text-text-label"
+                  className="!text-text-label rounded-full"
                   onClick={() => {
                     setLocalPrefer(false);
                     setActiveModelIdx(null);
@@ -1205,7 +1205,7 @@ export default function SettingModels() {
                 onClick={() => {
                   window.location.href = `https://www.eigent.ai/pricing`;
                 }}
-                className="cursor-pointer text-body-sm text-text-label underline"
+                className="text-body-sm text-text-label cursor-pointer underline"
               >
                 {t('setting.pricing-options')}
               </span>
@@ -1215,7 +1215,7 @@ export default function SettingModels() {
             </div>
           </div>
           {/*Content Area*/}
-          <div className="flex w-full flex-row items-center justify-between gap-4 px-6 pb-4">
+          <div className="gap-4 px-6 pb-4 flex w-full flex-row items-center justify-between">
             <div className="text-body-sm text-text-body">
               {t('setting.credits')}:{' '}
               {loadingCredits ? (
@@ -1240,9 +1240,9 @@ export default function SettingModels() {
               <Settings />
             </Button>
           </div>
-          <div className="flex w-full flex-1 items-center justify-between px-6 pb-4">
-            <div className="flex min-w-0 flex-1 items-center">
-              <span className="overflow-hidden text-ellipsis whitespace-nowrap text-body-sm">
+          <div className="px-6 pb-4 flex w-full flex-1 items-center justify-between">
+            <div className="min-w-0 flex flex-1 items-center">
+              <span className="text-body-sm overflow-hidden text-ellipsis whitespace-nowrap">
                 {t('setting.select-model-type')}
               </span>
             </div>
@@ -1306,15 +1306,15 @@ export default function SettingModels() {
       const canSwitch = !!form[idx].provider_id;
 
       return (
-        <div className="flex w-full flex-col rounded-2xl bg-surface-tertiary">
-          <div className="mx-6 mb-4 flex flex-col items-start justify-between border-x-0 border-b-[0.5px] border-t-0 border-solid border-border-secondary pb-4 pt-2">
-            <div className="inline-flex items-center justify-between gap-2 self-stretch">
+        <div className="rounded-2xl bg-surface-tertiary flex w-full flex-col">
+          <div className="mx-6 mb-4 border-border-secondary pb-4 pt-2 flex flex-col items-start justify-between border-x-0 border-t-0 border-b-[0.5px] border-solid">
+            <div className="gap-2 inline-flex items-center justify-between self-stretch">
               <div className="text-body-base my-2 font-bold text-text-heading">
                 {item.name}
               </div>
-              <div className="flex items-center gap-2">
+              <div className="gap-2 flex items-center">
                 {form[idx].prefer ? (
-                  <span className="inline-flex items-center rounded-full px-2 py-1 text-label-xs font-bold text-text-success">
+                  <span className="px-2 py-1 text-label-xs font-bold text-text-success inline-flex items-center rounded-full">
                     {t('setting.default')}
                   </span>
                 ) : (
@@ -1325,8 +1325,8 @@ export default function SettingModels() {
                     onClick={() => handleSwitch(idx, true)}
                     className={
                       canSwitch
-                        ? 'inline-flex items-center rounded-full bg-button-transparent-fill-hover !text-text-label shadow-none hover:bg-button-transparent-fill-active'
-                        : 'inline-flex items-center gap-1.5'
+                        ? 'bg-button-transparent-fill-hover !text-text-label hover:bg-button-transparent-fill-active inline-flex items-center rounded-full shadow-none'
+                        : 'gap-1.5 inline-flex items-center'
                     }
                   >
                     {!canSwitch
@@ -1335,9 +1335,9 @@ export default function SettingModels() {
                   </Button>
                 )}
                 {form[idx].provider_id ? (
-                  <div className="h-2 w-2 shrink-0 rounded-full bg-text-success" />
+                  <div className="h-2 w-2 bg-text-success shrink-0 rounded-full" />
                 ) : (
-                  <div className="h-2 w-2 shrink-0 rounded-full bg-text-label opacity-10" />
+                  <div className="h-2 w-2 bg-text-label shrink-0 rounded-full opacity-10" />
                 )}
               </div>
             </div>
@@ -1345,7 +1345,7 @@ export default function SettingModels() {
               {item.description}
             </div>
           </div>
-          <div className="flex w-full flex-col items-center gap-4 px-6">
+          <div className="gap-4 px-6 flex w-full flex-col items-center">
             {/* API Key Setting */}
             <Input
               id={`apiKey-${item.id}`}
@@ -1426,7 +1426,7 @@ export default function SettingModels() {
             {item.externalConfig &&
               form[idx].externalConfig &&
               form[idx].externalConfig.map((ec, ecIdx) => (
-                <div key={ec.key} className="flex h-full w-full flex-col gap-4">
+                <div key={ec.key} className="gap-4 flex h-full w-full flex-col">
                   {ec.options && ec.options.length > 0 ? (
                     <Select
                       value={ec.value}
@@ -1493,7 +1493,7 @@ export default function SettingModels() {
               ))}
           </div>
           {/* Action Button */}
-          <div className="flex justify-end gap-2 px-6 py-4">
+          <div className="gap-2 px-6 py-4 flex justify-end">
             <Button
               variant="ghost"
               size="sm"
@@ -1526,10 +1526,10 @@ export default function SettingModels() {
       const isPreferred = localPrefer && localPlatform === platform;
 
       return (
-        <div className="flex w-full flex-col rounded-2xl bg-surface-tertiary">
-          <div className="mx-6 mb-4 flex flex-col items-start justify-between border-x-0 border-b-[0.5px] border-t-0 border-solid border-border-secondary pb-4 pt-2">
-            <div className="inline-flex items-center justify-between gap-2 self-stretch">
-              <div className="flex items-center gap-2">
+        <div className="rounded-2xl bg-surface-tertiary flex w-full flex-col">
+          <div className="mx-6 mb-4 border-border-secondary pb-4 pt-2 flex flex-col items-start justify-between border-x-0 border-t-0 border-b-[0.5px] border-solid">
+            <div className="gap-2 inline-flex items-center justify-between self-stretch">
+              <div className="gap-2 flex items-center">
                 <div className="text-body-base my-2 font-bold text-text-heading">
                   {platform === 'ollama'
                     ? 'Ollama'
@@ -1557,7 +1557,7 @@ export default function SettingModels() {
                     onClick={() => handleLocalSwitch(true)}
                     className={
                       isConfigured
-                        ? 'rounded-full bg-button-transparent-fill-hover !text-text-label shadow-none'
+                        ? 'bg-button-transparent-fill-hover !text-text-label rounded-full shadow-none'
                         : ''
                     }
                   >
@@ -1568,14 +1568,14 @@ export default function SettingModels() {
                 )}
               </div>
               {isConfigured ? (
-                <div className="h-2 w-2 rounded-full bg-text-success" />
+                <div className="h-2 w-2 bg-text-success rounded-full" />
               ) : (
-                <div className="h-2 w-2 rounded-full bg-text-label opacity-10" />
+                <div className="h-2 w-2 bg-text-label rounded-full opacity-10" />
               )}
             </div>
           </div>
           {/* Model Endpoint URL Setting */}
-          <div className="flex w-full flex-col items-center gap-4 px-6">
+          <div className="gap-4 px-6 flex w-full flex-col items-center">
             <Input
               size="default"
               title={t('setting.model-endpoint-url')}
@@ -1623,8 +1623,8 @@ export default function SettingModels() {
               note={localError ?? undefined}
             />
             {platform === 'ollama' ? (
-              <div className="flex w-full flex-col gap-1">
-                <div className="flex w-full items-end gap-2">
+              <div className="gap-1 flex w-full flex-col">
+                <div className="gap-2 flex w-full items-end">
                   <div className="flex-1">
                     <Select
                       value={currentType}
@@ -1718,7 +1718,7 @@ export default function SettingModels() {
             )}
           </div>
           {/* Action Button */}
-          <div className="flex justify-end gap-2 px-6 py-4">
+          <div className="gap-2 px-6 py-4 flex justify-end">
             <Button
               variant="ghost"
               size="sm"
@@ -1748,8 +1748,8 @@ export default function SettingModels() {
   return (
     <div className="m-auto flex h-auto w-full flex-1 flex-col">
       {/* Header Section */}
-      <div className="sticky top-0 z-10 flex w-full items-center justify-between bg-surface-primary px-6 pb-6 pt-8">
-        <div className="flex w-full flex-col items-start justify-between gap-4">
+      <div className="top-0 bg-surface-primary px-6 pb-6 pt-8 sticky z-10 flex w-full items-center justify-between">
+        <div className="gap-4 flex w-full flex-col items-start justify-between">
           <div className="flex flex-col">
             <div className="text-heading-sm font-bold text-text-heading">
               {t('setting.models')}
@@ -1758,10 +1758,10 @@ export default function SettingModels() {
         </div>
       </div>
       {/* Content Section */}
-      <div className="mb-8 flex flex-col gap-6">
+      <div className="mb-8 gap-6 flex flex-col">
         {/* Default Model Cascading Dropdown */}
-        <div className="flex w-full flex-col items-end justify-between gap-4 rounded-2xl bg-surface-secondary px-6 py-4">
-          <div className="flex w-full flex-col items-start justify-center gap-1">
+        <div className="gap-4 rounded-2xl bg-surface-secondary px-6 py-4 flex w-full flex-col items-end justify-between">
+          <div className="gap-1 flex w-full flex-col items-start justify-center">
             <div className="text-body-base font-bold text-text-heading">
               {t('setting.models-default-setting-title')}
             </div>
@@ -1771,11 +1771,11 @@ export default function SettingModels() {
           </div>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <button className="flex w-fit items-center justify-between gap-2 rounded-lg border-[0.5px] border-solid border-border-success bg-surface-success px-3 py-1 font-semibold text-text-success transition-colors hover:opacity-70 active:opacity-90">
-                <span className="whitespace-nowrap text-body-sm">
+              <button className="gap-2 rounded-lg border-border-success bg-surface-success px-3 py-1 font-semibold text-text-success flex w-fit items-center justify-between border-[0.5px] border-solid transition-colors hover:opacity-70 active:opacity-90">
+                <span className="text-body-sm whitespace-nowrap">
                   {getDefaultModelDisplayText()}
                 </span>
-                <ChevronDown className="h-4 w-4 flex-shrink-0 text-text-success" />
+                <ChevronDown className="h-4 w-4 text-text-success flex-shrink-0" />
               </button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-[180px]">
@@ -1829,7 +1829,7 @@ export default function SettingModels() {
                         }
                         className="flex items-center justify-between"
                       >
-                        <div className="flex items-center gap-2">
+                        <div className="gap-2 flex items-center">
                           {modelImage ? (
                             <img
                               src={modelImage}
@@ -1850,15 +1850,15 @@ export default function SettingModels() {
                             {item.name}
                           </span>
                         </div>
-                        <div className="flex items-center gap-1">
+                        <div className="gap-1 flex items-center">
                           {!isConfigured && (
-                            <div className="h-2 w-2 rounded-full bg-text-label opacity-10" />
+                            <div className="h-2 w-2 bg-text-label rounded-full opacity-10" />
                           )}
                           {isPreferred && (
                             <Check className="h-4 w-4 text-text-success" />
                           )}
                           {isConfigured && !isPreferred && (
-                            <div className="h-2 w-2 rounded-full bg-text-success" />
+                            <div className="h-2 w-2 bg-text-success rounded-full" />
                           )}
                         </div>
                       </DropdownMenuItem>
@@ -1890,7 +1890,7 @@ export default function SettingModels() {
                         }
                         className="flex items-center justify-between"
                       >
-                        <div className="flex items-center gap-2">
+                        <div className="gap-2 flex items-center">
                           {modelImage ? (
                             <img
                               src={modelImage}
@@ -1911,15 +1911,15 @@ export default function SettingModels() {
                             {model.name}
                           </span>
                         </div>
-                        <div className="flex items-center gap-1">
+                        <div className="gap-1 flex items-center">
                           {!isConfigured && (
-                            <div className="h-2 w-2 rounded-full bg-text-label opacity-10" />
+                            <div className="h-2 w-2 bg-text-label rounded-full opacity-10" />
                           )}
                           {isPreferred && (
                             <Check className="h-4 w-4 text-text-success" />
                           )}
                           {isConfigured && !isPreferred && (
-                            <div className="h-2 w-2 rounded-full bg-text-success" />
+                            <div className="h-2 w-2 bg-text-success rounded-full" />
                           )}
                         </div>
                       </DropdownMenuItem>
@@ -1932,17 +1932,17 @@ export default function SettingModels() {
         </div>
 
         {/* Content Section with Sidebar */}
-        <div className="flex w-full flex-col items-start justify-between gap-2 rounded-2xl bg-surface-secondary px-6 py-4">
-          <div className="text-body-base sticky top-[86px] z-10 mb-2 w-full border-x-0 border-b-[0.5px] border-t-0 border-solid border-border-secondary bg-surface-secondary pb-4 font-bold text-text-heading">
+        <div className="gap-2 rounded-2xl bg-surface-secondary px-6 py-4 flex w-full flex-col items-start justify-between">
+          <div className="text-body-base mb-2 border-border-secondary bg-surface-secondary pb-4 font-bold text-text-heading sticky top-[86px] z-10 w-full border-x-0 border-t-0 border-b-[0.5px] border-solid">
             {t('setting.models-configuration')}
           </div>
 
           <div className="flex w-full flex-row items-start justify-between">
             {/* Sidebar */}
-            <div className="-ml-2 mr-4 h-full w-[240px] rounded-2xl bg-surface-secondary">
-              <div className="flex flex-col gap-4">
+            <div className="-ml-2 mr-4 rounded-2xl bg-surface-secondary h-full w-[240px]">
+              <div className="gap-4 flex flex-col">
                 {/* Eigent Cloud Section */}
-                <div className="flex flex-col gap-1">
+                <div className="gap-1 flex flex-col">
                   <div className="px-3 py-2 text-body-sm font-bold text-text-heading">
                     {t('setting.eigent-cloud')}
                   </div>
@@ -1957,10 +1957,10 @@ export default function SettingModels() {
                     )}
                 </div>
                 {/* Bring Your Own Key Section */}
-                <div className="flex flex-col gap-1">
+                <div className="gap-1 flex flex-col">
                   <button
                     onClick={() => setByokCollapsed(!byokCollapsed)}
-                    className="flex items-center justify-between rounded-lg bg-transparent px-3 py-2 transition-colors hover:bg-surface-secondary"
+                    className="rounded-lg px-3 py-2 hover:bg-surface-secondary flex items-center justify-between bg-transparent transition-colors"
                   >
                     <div className="text-body-sm font-bold text-text-heading">
                       {t('setting.custom-model')}
@@ -1972,7 +1972,7 @@ export default function SettingModels() {
                     )}
                   </button>
                   <div
-                    className={`overflow-hidden transition-all duration-300 ease-in-out ${
+                    className={`ease-in-out overflow-hidden transition-all duration-300 ${
                       byokCollapsed
                         ? 'max-h-0 opacity-0'
                         : 'max-h-[2000px] opacity-100'
@@ -1992,10 +1992,10 @@ export default function SettingModels() {
                 </div>
 
                 {/* Local Model Section */}
-                <div className="flex flex-col gap-1">
+                <div className="gap-1 flex flex-col">
                   <button
                     onClick={() => setLocalCollapsed(!localCollapsed)}
-                    className="flex items-center justify-between rounded-lg bg-transparent px-3 py-2 transition-colors hover:bg-surface-secondary"
+                    className="rounded-lg px-3 py-2 hover:bg-surface-secondary flex items-center justify-between bg-transparent transition-colors"
                   >
                     <div className="text-body-sm font-bold text-text-heading">
                       {t('setting.local-model')}
@@ -2007,7 +2007,7 @@ export default function SettingModels() {
                     )}
                   </button>
                   <div
-                    className={`overflow-hidden transition-all duration-300 ease-in-out ${
+                    className={`ease-in-out overflow-hidden transition-all duration-300 ${
                       localCollapsed
                         ? 'max-h-0 opacity-0'
                         : 'max-h-[2000px] opacity-100'
@@ -2050,7 +2050,7 @@ export default function SettingModels() {
               </div>
             </div>
             {/* Main Content */}
-            <div className="sticky top-[136px] z-10 min-w-0 flex-1">
+            <div className="min-w-0 sticky top-[136px] z-10 flex-1">
               {renderContent()}
             </div>
           </div>
diff --git a/src/pages/Agents/index.tsx b/src/pages/Agents/index.tsx
index ba89977fb..97d34b194 100644
--- a/src/pages/Agents/index.tsx
+++ b/src/pages/Agents/index.tsx
@@ -46,8 +46,8 @@ export default function Capabilities() {
 
   return (
     <div className="m-auto flex h-auto max-w-[940px] flex-col">
-      <div className="flex h-auto w-full px-6">
-        <div className="sticky top-20 flex h-full w-40 flex-shrink-0 flex-grow-0 flex-col justify-between self-start pr-6 pt-8">
+      <div className="px-6 flex h-auto w-full">
+        <div className="top-20 w-40 pr-6 pt-8 sticky flex h-full flex-shrink-0 flex-grow-0 flex-col justify-between self-start">
           <VerticalNavigation
             items={
               menuItems.map((menu) => ({
@@ -59,14 +59,14 @@ export default function Capabilities() {
             }
             value={activeTab}
             onValueChange={handleTabChange}
-            className="h-full min-h-0 w-full flex-1 gap-0"
+            className="min-h-0 gap-0 h-full w-full flex-1"
             listClassName="w-full h-full overflow-y-auto"
             contentClassName="hidden"
           />
         </div>
 
         <div className="flex h-auto w-full flex-1 flex-col">
-          <div className="flex flex-col gap-4">
+          <div className="gap-4 flex flex-col">
             {activeTab === 'models' && <Models />}
             {activeTab === 'skills' && <Skills />}
             {activeTab === 'memory' && <Memory />}
diff --git a/src/pages/Browser/Cookies.tsx b/src/pages/Browser/Cookies.tsx
index 69f14d03c..b4f5b0d30 100644
--- a/src/pages/Browser/Cookies.tsx
+++ b/src/pages/Browser/Cookies.tsx
@@ -220,26 +220,26 @@ export default function Cookies() {
         confirmVariant="information"
       />
 
-      <div className="flex w-full items-center justify-between px-6 pb-6 pt-8">
+      <div className="px-6 pb-6 pt-8 flex w-full items-center justify-between">
         <div className="text-heading-sm font-bold text-text-heading">
           {t('layout.browser-cookie-management')}
         </div>
       </div>
 
-      <div className="flex flex-col gap-4">
-        <div className="relative flex w-full flex-col rounded-xl border border-border-disabled bg-surface-secondary p-6">
-          <div className="absolute right-6 top-6">
+      <div className="gap-4 flex flex-col">
+        <div className="rounded-xl border-border-disabled bg-surface-secondary p-6 relative flex w-full flex-col border">
+          <div className="right-6 top-6 absolute">
             <Button
               variant="information"
               size="xs"
               onClick={handleRestartApp}
-              className="justify-center gap-0 overflow-hidden rounded-full transition-all duration-300 ease-in-out"
+              className="gap-0 ease-in-out justify-center overflow-hidden rounded-full transition-all duration-300"
             >
               <RefreshCw className="flex-shrink-0" />
               <span
-                className={`overflow-hidden transition-all duration-300 ease-in-out ${
+                className={`ease-in-out overflow-hidden transition-all duration-300 ${
                   hasUnsavedChanges
-                    ? 'max-w-[150px] pl-2 opacity-100'
+                    ? 'pl-2 max-w-[150px] opacity-100'
                     : 'ml-0 max-w-0 opacity-0'
                 }`}
               >
@@ -247,12 +247,12 @@ export default function Cookies() {
               </span>
             </Button>
           </div>
-          <div className="max-w-[600px] text-body-sm text-text-label">
+          <div className="text-body-sm text-text-label max-w-[600px]">
             {t('layout.browser-cookies-description')}
           </div>
-          <div className="mt-4 flex w-full flex-col gap-3 border-[0.5px] border-x-0 border-b-0 border-solid border-border-secondary pt-3">
-            <div className="flex flex-row items-center justify-between py-2">
-              <div className="flex flex-row items-center justify-start gap-2">
+          <div className="mt-4 gap-3 border-border-secondary pt-3 flex w-full flex-col border-[0.5px] border-x-0 border-b-0 border-solid">
+            <div className="py-2 flex flex-row items-center justify-between">
+              <div className="gap-2 flex flex-row items-center justify-start">
                 <div className="text-body-base font-bold text-text-body">
                   {t('layout.cookie-domains')}
                 </div>
@@ -263,14 +263,14 @@ export default function Cookies() {
                 )}
               </div>
 
-              <div className="flex items-center gap-2">
+              <div className="gap-2 flex items-center">
                 {cookieDomains.length > 0 && (
                   <Button
                     variant="ghost"
                     size="sm"
                     onClick={handleDeleteAll}
                     disabled={deletingAll}
-                    className="uppercase !text-text-cuation"
+                    className="!text-text-cuation uppercase"
                   >
                     {deletingAll
                       ? t('layout.deleting')
@@ -302,14 +302,14 @@ export default function Cookies() {
             </div>
 
             {cookieDomains.length > 0 ? (
-              <div className="flex flex-col gap-2">
+              <div className="gap-2 flex flex-col">
                 {groupDomainsByMain(cookieDomains).map((group, index) => (
                   <div
                     key={index}
-                    className="flex items-center justify-between rounded-xl border-solid border-border-disabled bg-surface-tertiary px-4 py-2"
+                    className="rounded-xl border-border-disabled bg-surface-tertiary px-4 py-2 flex items-center justify-between border-solid"
                   >
                     <div className="flex w-full flex-col items-start justify-start">
-                      <span className="truncate text-body-sm font-bold text-text-body">
+                      <span className="text-body-sm font-bold text-text-body truncate">
                         {group.mainDomain}
                       </span>
                       <span className="mt-1 text-label-xs text-text-label">
@@ -335,12 +335,12 @@ export default function Cookies() {
                 ))}
               </div>
             ) : (
-              <div className="flex flex-col items-center justify-center px-4 py-8">
+              <div className="px-4 py-8 flex flex-col items-center justify-center">
                 <Cookie className="mb-4 h-12 w-12 text-icon-secondary opacity-50" />
-                <div className="text-body-base text-center font-bold text-text-label">
+                <div className="text-body-base font-bold text-text-label text-center">
                   {t('layout.no-cookies-saved-yet')}
                 </div>
-                <p className="text-center text-label-xs font-medium text-text-label">
+                <p className="text-label-xs font-medium text-text-label text-center">
                   {t('layout.no-cookies-saved-yet-description')}
                 </p>
               </div>
@@ -348,7 +348,7 @@ export default function Cookies() {
           </div>
         </div>
 
-        <div className="w-full text-center text-label-xs text-text-label">
+        <div className="text-label-xs text-text-label w-full text-center">
           For more information, check out our
           <a
             href="https://www.eigent.ai/privacy-policy"
diff --git a/src/pages/Browser/Extension.tsx b/src/pages/Browser/Extension.tsx
index 6fa2d3b5c..42ca8e63d 100644
--- a/src/pages/Browser/Extension.tsx
+++ b/src/pages/Browser/Extension.tsx
@@ -20,18 +20,18 @@ export default function Extension() {
 
   return (
     <div className="m-auto flex h-auto w-full flex-1 flex-col">
-      <div className="flex w-full items-center justify-between px-6 pb-6 pt-8">
+      <div className="px-6 pb-6 pt-8 flex w-full items-center justify-between">
         <div className="text-heading-sm font-bold text-text-heading">
           {t('layout.browser-plugins')}
         </div>
       </div>
-      <div className="flex flex-col gap-4 px-6">
-        <div className="flex flex-col items-center justify-center rounded-xl border border-border-disabled bg-surface-secondary px-6 py-16">
+      <div className="gap-4 px-6 flex flex-col">
+        <div className="rounded-xl border-border-disabled bg-surface-secondary px-6 py-16 flex flex-col items-center justify-center border">
           <Puzzle className="mb-4 h-12 w-12 text-icon-secondary opacity-50" />
-          <div className="text-body-base text-center font-bold text-text-label">
+          <div className="text-body-base font-bold text-text-label text-center">
             {t('layout.coming-soon')}
           </div>
-          <p className="mt-2 text-center text-label-sm text-text-label">
+          <p className="mt-2 text-label-sm text-text-label text-center">
             {t('layout.browser-plugins-description')}
           </p>
         </div>
diff --git a/src/pages/Browser/index.tsx b/src/pages/Browser/index.tsx
index 9e04beacb..bccdb50ce 100644
--- a/src/pages/Browser/index.tsx
+++ b/src/pages/Browser/index.tsx
@@ -46,8 +46,8 @@ export default function Browser() {
 
   return (
     <div className="m-auto flex h-auto max-w-[940px] flex-col">
-      <div className="flex h-auto w-full px-6">
-        <div className="sticky top-20 flex h-full w-40 flex-shrink-0 flex-grow-0 flex-col justify-between self-start pr-6 pt-8">
+      <div className="px-6 flex h-auto w-full">
+        <div className="top-20 w-40 pr-6 pt-8 sticky flex h-full flex-shrink-0 flex-grow-0 flex-col justify-between self-start">
           <VerticalNavigation
             items={
               menuItems.map((menu) => ({
@@ -59,14 +59,14 @@ export default function Browser() {
             }
             value={activeTab}
             onValueChange={handleTabChange}
-            className="h-full min-h-0 w-full flex-1 gap-0"
+            className="min-h-0 gap-0 h-full w-full flex-1"
             listClassName="w-full h-full overflow-y-auto"
             contentClassName="hidden"
           />
         </div>
 
         <div className="flex h-auto w-full flex-1 flex-col">
-          <div className="flex flex-col gap-4">
+          <div className="gap-4 flex flex-col">
             {activeTab === 'cdp' && <CDP />}
             {activeTab === 'extension' && <Extension />}
             {activeTab === 'cookies' && <Cookies />}
diff --git a/src/pages/Channels/index.tsx b/src/pages/Channels/index.tsx
index 1bd4a9553..4561da164 100644
--- a/src/pages/Channels/index.tsx
+++ b/src/pages/Channels/index.tsx
@@ -36,8 +36,8 @@ export default function Channels() {
 
   return (
     <div className="m-auto flex h-auto max-w-[940px] flex-col">
-      <div className="flex h-auto w-full px-6">
-        <div className="sticky top-20 flex h-full w-40 flex-shrink-0 flex-grow-0 flex-col justify-between self-start pr-6 pt-8">
+      <div className="px-6 flex h-auto w-full">
+        <div className="top-20 w-40 pr-6 pt-8 sticky flex h-full flex-shrink-0 flex-grow-0 flex-col justify-between self-start">
           <VerticalNavigation
             items={
               menuItems.map((menu) => ({
@@ -49,7 +49,7 @@ export default function Channels() {
             }
             value={activeTab}
             onValueChange={handleTabChange}
-            className="h-full min-h-0 w-full flex-1 gap-0"
+            className="min-h-0 gap-0 h-full w-full flex-1"
             listClassName="w-full h-full overflow-y-auto"
             contentClassName="hidden"
           />
@@ -58,22 +58,22 @@ export default function Channels() {
         <div className="flex h-auto w-full flex-1 flex-col">
           <div className="m-auto flex h-auto w-full flex-1 flex-col">
             {/* Header Section */}
-            <div className="flex w-full items-center justify-between px-6 pb-6 pt-8">
+            <div className="px-6 pb-6 pt-8 flex w-full items-center justify-between">
               <div className="text-heading-sm font-bold text-text-heading">
                 {menuItems.find((m) => m.id === activeTab)?.name ?? ''}
               </div>
             </div>
 
             {/* Content Section */}
-            <div className="mb-12 flex flex-col gap-6">
-              <div className="flex w-full flex-col items-center justify-between rounded-2xl bg-surface-secondary px-6 py-4">
-                <div className="flex h-16 w-16 items-center justify-center">
+            <div className="mb-12 gap-6 flex flex-col">
+              <div className="rounded-2xl bg-surface-secondary px-6 py-4 flex w-full flex-col items-center justify-between">
+                <div className="h-16 w-16 flex items-center justify-center">
                   <MessageSquare className="h-8 w-8 text-icon-secondary" />
                 </div>
                 <h2 className="mb-2 text-body-md font-bold text-text-heading">
                   {t('layout.coming-soon')}
                 </h2>
-                <p className="max-w-md text-center text-body-sm text-text-label">
+                <p className="max-w-md text-body-sm text-text-label text-center">
                   {activeTab === 'overview'
                     ? t('layout.channels-overview-coming-soon-description')
                     : t('layout.channels-coming-soon-description')}
diff --git a/src/pages/Connectors/MCP.tsx b/src/pages/Connectors/MCP.tsx
index 0bf58fe0c..e5c17c95b 100644
--- a/src/pages/Connectors/MCP.tsx
+++ b/src/pages/Connectors/MCP.tsx
@@ -529,21 +529,21 @@ export default function SettingMCP() {
   return (
     <div className="m-auto flex h-auto w-full flex-1 flex-col">
       {/* Header Section */}
-      <div className="flex w-full items-center justify-between px-6 pb-6 pt-8">
+      <div className="px-6 pb-6 pt-8 flex w-full items-center justify-between">
         <div className="text-heading-sm font-bold text-text-heading">
           {t('setting.mcp-and-tools')}
         </div>
       </div>
 
       {/* Content Section */}
-      <div className="mb-12 flex flex-col gap-6">
-        <div className="flex w-full flex-col items-center justify-between gap-4 rounded-2xl bg-surface-secondary px-6 py-4">
+      <div className="mb-12 gap-6 flex flex-col">
+        <div className="gap-4 rounded-2xl bg-surface-secondary px-6 py-4 flex w-full flex-col items-center justify-between">
           <Tabs
             value={activeTab}
             onValueChange={(v) => setActiveTab(v as 'mcp-tools' | 'your-mcp')}
             className="w-full"
           >
-            <div className="sticky top-[84px] z-10 flex w-full items-center justify-between gap-4 border-x-0 border-b-[0.5px] border-t-0 border-solid border-border-secondary bg-surface-secondary">
+            <div className="gap-4 border-border-secondary bg-surface-secondary sticky top-[84px] z-10 flex w-full items-center justify-between border-x-0 border-t-0 border-b-[0.5px] border-solid">
               <TabsList
                 variant="outline"
                 className="h-auto flex-1 justify-start border-0 bg-transparent"
@@ -561,7 +561,7 @@ export default function SettingMCP() {
                   {t('setting.your-own-mcps')}
                 </TabsTrigger>
               </TabsList>
-              <div className="flex items-center gap-2">
+              <div className="gap-2 flex items-center">
                 <SearchInput
                   variant="icon"
                   value={searchQuery}
@@ -580,22 +580,22 @@ export default function SettingMCP() {
             </div>
             <TabsContent value="mcp-tools" className="mt-4">
               {isLoadingIntegrations ? (
-                <div className="flex w-full flex-col items-start justify-start gap-4">
+                <div className="gap-4 flex w-full flex-col items-start justify-start">
                   {[1, 2, 3, 4].map((i) => (
                     <div
                       key={i}
-                      className="relative w-full overflow-hidden rounded-2xl bg-surface-tertiary px-6 py-4"
+                      className="rounded-2xl bg-surface-tertiary px-6 py-4 relative w-full overflow-hidden"
                     >
-                      <div className="flex w-full flex-row items-center justify-between gap-xs">
-                        <div className="flex flex-row items-center gap-xs">
-                          <div className="mr-2 h-3 w-3 rounded-full bg-surface-hover-subtle" />
+                      <div className="gap-xs flex w-full flex-row items-center justify-between">
+                        <div className="gap-xs flex flex-row items-center">
+                          <div className="mr-2 h-3 w-3 bg-surface-hover-subtle rounded-full" />
                           <div className="h-5 w-32 rounded-md bg-surface-hover-subtle" />
                           <div className="h-4 w-4 rounded bg-surface-hover-subtle" />
                         </div>
                         <div className="h-9 w-20 rounded-lg bg-surface-hover-subtle" />
                       </div>
                       <motion.div
-                        className="via-white/20 absolute inset-0 w-1/2 bg-gradient-to-r from-transparent to-transparent"
+                        className="inset-0 via-white/20 absolute w-1/2 bg-gradient-to-r from-transparent to-transparent"
                         initial={{ x: '-100%' }}
                         animate={{ x: '200%' }}
                         transition={{
@@ -608,7 +608,7 @@ export default function SettingMCP() {
                   ))}
                 </div>
               ) : filteredIntegrations.length === 0 ? (
-                <div className="py-8 text-center text-text-label">
+                <div className="py-8 text-text-label text-center">
                   {searchQuery.trim()
                     ? t('dashboard.no-results')
                     : t('setting.no-mcp-servers')}
@@ -625,15 +625,15 @@ export default function SettingMCP() {
             </TabsContent>
             <TabsContent value="your-mcp" className="mt-4">
               {isLoading && (
-                <div className="py-8 text-center text-text-label">
+                <div className="py-8 text-text-label text-center">
                   {t('setting.loading')}
                 </div>
               )}
               {error && (
-                <div className="py-8 text-center text-text-error">{error}</div>
+                <div className="py-8 text-text-error text-center">{error}</div>
               )}
               {!isLoading && !error && items.length === 0 && (
-                <div className="flex flex-col items-center justify-center gap-4 py-12">
+                <div className="gap-4 py-12 flex flex-col items-center justify-center">
                   <p className="text-body-md text-text-label">
                     {t('setting.no-mcp-servers')}
                   </p>
@@ -651,7 +651,7 @@ export default function SettingMCP() {
                 !error &&
                 items.length > 0 &&
                 filteredItems.length === 0 && (
-                  <div className="py-8 text-center text-text-label">
+                  <div className="py-8 text-text-label text-center">
                     {t('dashboard.no-results')}
                   </div>
                 )}
diff --git a/src/pages/Connectors/Search.tsx b/src/pages/Connectors/Search.tsx
index d7d464157..037d61d9a 100644
--- a/src/pages/Connectors/Search.tsx
+++ b/src/pages/Connectors/Search.tsx
@@ -162,7 +162,7 @@ export default function Search() {
   return (
     <div className="m-auto flex h-auto w-full flex-1 flex-col">
       {/* Header Section */}
-      <div className="flex w-full items-center justify-between px-6 pb-6 pt-8">
+      <div className="px-6 pb-6 pt-8 flex w-full items-center justify-between">
         <div className="text-heading-sm font-bold text-text-heading">
           {t('setting.search-engine')}
         </div>
@@ -172,7 +172,7 @@ export default function Search() {
       <div className="mb-12">
         <div className="rounded-2xl bg-surface-secondary px-6 py-4">
           <div className="flex flex-col">
-            <div className="flex flex-col gap-2 pb-2">
+            <div className="gap-2 pb-2 flex flex-col">
               <div className="text-label-lg font-bold">
                 {selectedProvider.name}
               </div>
@@ -181,7 +181,7 @@ export default function Search() {
               </div>
             </div>
 
-            <div className="flex-1 pt-4">
+            <div className="pt-4 flex-1">
               {selectedProvider.requiresApiKey ? (
                 <div className="space-y-4">
                   {selectedProvider.fields.map((field) => (
@@ -223,7 +223,7 @@ export default function Search() {
             </div>
 
             {!selectedProvider.enabledByDefault && (
-              <div className="flex items-center justify-end gap-3 pt-4">
+              <div className="gap-3 pt-4 flex items-center justify-end">
                 <Button size="sm" onClick={saveConfiguration} disabled={saving}>
                   {saving
                     ? t('setting.saving')
diff --git a/src/pages/Connectors/components/CookieManager.tsx b/src/pages/Connectors/components/CookieManager.tsx
index 519aaaa33..a5dc19358 100644
--- a/src/pages/Connectors/components/CookieManager.tsx
+++ b/src/pages/Connectors/components/CookieManager.tsx
@@ -116,7 +116,7 @@ export default function CookieManager() {
     <div className="rounded-2xl bg-surface-secondary px-6 py-4">
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <div className="flex items-center gap-2 text-base font-bold leading-12 text-text-primary">
+          <div className="gap-2 text-base font-bold leading-12 text-text-primary flex items-center">
             <Cookie className="h-5 w-5" />
             {t('setting.cookie-manager')}
           </div>
@@ -124,7 +124,7 @@ export default function CookieManager() {
             {t('setting.cookie-manager-description')}
           </div>
         </div>
-        <div className="flex gap-2">
+        <div className="gap-2 flex">
           <Button
             onClick={loadCookies}
             variant="outline"
@@ -152,8 +152,8 @@ export default function CookieManager() {
       </div>
 
       {/* Search Bar */}
-      <div className="relative mb-4">
-        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 transform text-text-tertiary" />
+      <div className="mb-4 relative">
+        <Search className="left-3 h-4 w-4 text-text-tertiary absolute top-1/2 -translate-y-1/2 transform" />
         <Input
           type="text"
           placeholder={t('setting.search-domains')}
@@ -166,13 +166,13 @@ export default function CookieManager() {
       {/* Cookie List */}
       <div className="space-y-2">
         {isLoading ? (
-          <div className="py-8 text-center text-text-secondary">
-            <RefreshCw className="mx-auto mb-2 h-6 w-6 animate-spin" />
+          <div className="py-8 text-text-secondary text-center">
+            <RefreshCw className="mb-2 h-6 w-6 animate-spin mx-auto" />
             {t('setting.loading-cookies')}
           </div>
         ) : filteredDomains.length === 0 ? (
-          <div className="py-8 text-center text-text-secondary">
-            <Cookie className="mx-auto mb-3 h-12 w-12 opacity-30" />
+          <div className="py-8 text-text-secondary text-center">
+            <Cookie className="mb-3 h-12 w-12 mx-auto opacity-30" />
             <div className="mb-1 text-base font-medium">
               {domains.length === 0
                 ? t('setting.no-cookies-found')
@@ -188,13 +188,13 @@ export default function CookieManager() {
           filteredDomains.map((item) => (
             <div
               key={item.domain}
-              className="flex items-center justify-between rounded-lg border border-border-primary bg-surface-primary p-3 transition-colors hover:border-border-secondary"
+              className="rounded-lg border-border-primary bg-surface-primary p-3 hover:border-border-secondary flex items-center justify-between border transition-colors"
             >
               <div className="min-w-0 flex-1">
-                <div className="truncate font-medium text-text-primary">
+                <div className="font-medium text-text-primary truncate">
                   {item.domain}
                 </div>
-                <div className="mt-1 flex items-center gap-3 text-xs text-text-tertiary">
+                <div className="mt-1 gap-3 text-xs text-text-tertiary flex items-center">
                   <span>
                     {t('setting.cookies-count', { count: item.cookie_count })}
                   </span>
@@ -222,9 +222,9 @@ export default function CookieManager() {
 
       {/* Warning */}
       {domains.length > 0 && (
-        <div className="dark:bg-yellow-900/20 mt-4 rounded-lg border border-yellow-200 bg-yellow-50 p-3 dark:border-yellow-800">
-          <div className="flex items-start gap-2">
-            <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0 text-yellow-600 dark:text-yellow-500" />
+        <div className="dark:bg-yellow-900/20 mt-4 rounded-lg border-yellow-200 bg-yellow-50 p-3 dark:border-yellow-800 border">
+          <div className="gap-2 flex items-start">
+            <AlertTriangle className="mt-0.5 h-4 w-4 text-yellow-600 dark:text-yellow-500 flex-shrink-0" />
             <div className="text-xs text-yellow-800 dark:text-yellow-200">
               {t('setting.cookie-delete-warning')}
             </div>
diff --git a/src/pages/Connectors/components/MCPAddDialog.tsx b/src/pages/Connectors/components/MCPAddDialog.tsx
index 1f18ea307..5bc890049 100644
--- a/src/pages/Connectors/components/MCPAddDialog.tsx
+++ b/src/pages/Connectors/components/MCPAddDialog.tsx
@@ -128,7 +128,7 @@ export default function MCPAddDialog({
               {jsonError}
             </div>
           )}
-          <div className="overflow-hidden rounded-xl border border-border-primary">
+          <div className="rounded-xl border-border-primary overflow-hidden border">
             <MonacoEditor
               height="300px"
               width="100%"
diff --git a/src/pages/Connectors/components/MCPConfigDialog.tsx b/src/pages/Connectors/components/MCPConfigDialog.tsx
index 5faaf8a08..1a51a574b 100644
--- a/src/pages/Connectors/components/MCPConfigDialog.tsx
+++ b/src/pages/Connectors/components/MCPConfigDialog.tsx
@@ -64,7 +64,7 @@ export default function MCPConfigDialog({
         <form
           ref={formRef}
           onSubmit={onSave}
-          className="flex flex-col gap-4 p-md"
+          className="gap-4 p-md flex flex-col"
         >
           <Input
             title={t('setting.name')}
@@ -104,7 +104,7 @@ export default function MCPConfigDialog({
             )}
           />
 
-          <div className="mb-1 block text-label-sm font-normal">
+          <div className="mb-1 text-label-sm font-normal block">
             Env (key-value)
           </div>
           {Object.entries(form.env).map(([k, v], idx) => (
diff --git a/src/pages/Connectors/components/MCPDeleteDialog.tsx b/src/pages/Connectors/components/MCPDeleteDialog.tsx
index 3f050e500..4f030843f 100644
--- a/src/pages/Connectors/components/MCPDeleteDialog.tsx
+++ b/src/pages/Connectors/components/MCPDeleteDialog.tsx
@@ -33,8 +33,8 @@ export default function MCPDeleteDialog({
   const { t } = useTranslation();
   if (!open || !target) return null;
   return (
-    <div className="bg-black/30 fixed inset-0 z-30 flex items-center justify-center">
-      <div className="min-w-[320px] max-w-[90vw] rounded-lg bg-white-100% p-6 shadow-lg">
+    <div className="bg-black/30 inset-0 fixed z-30 flex items-center justify-center">
+      <div className="rounded-lg bg-white-100% p-6 shadow-lg max-w-[90vw] min-w-[320px]">
         <div className="mb-2 font-bold text-red-600">
           {t('setting.confirm-delete')}
         </div>
@@ -42,7 +42,7 @@ export default function MCPDeleteDialog({
           {t('setting.are-you-sure-you-want-to-delete')}{' '}
           <b>{target.mcp_name}</b>?
         </div>
-        <div className="flex justify-end gap-2">
+        <div className="gap-2 flex justify-end">
           <Button variant="outline" onClick={onCancel} disabled={loading}>
             {t('setting.cancel')}
           </Button>
diff --git a/src/pages/Connectors/components/MCPEnvDialog.tsx b/src/pages/Connectors/components/MCPEnvDialog.tsx
index c62d852b1..ddc8f0a3b 100644
--- a/src/pages/Connectors/components/MCPEnvDialog.tsx
+++ b/src/pages/Connectors/components/MCPEnvDialog.tsx
@@ -307,8 +307,8 @@ export const MCPEnvDialog: FC<MCPEnvDialogProps> = ({
             })}
           />
 
-          <div className="flex flex-col gap-3 p-md">
-            <div className="flex items-center gap-md">
+          <div className="gap-3 p-md flex flex-col">
+            <div className="gap-md flex items-center">
               {getCategoryIcon(activeMcp?.category?.name)}
               <div>
                 <div className="text-base font-bold leading-9 text-text-action">
@@ -328,7 +328,7 @@ export const MCPEnvDialog: FC<MCPEnvDialogProps> = ({
                           verticalAlign: 'middle',
                         }}
                       />
-                      <span className="line-clamp-1 items-center justify-center self-stretch overflow-hidden text-ellipsis break-words text-xs font-medium leading-normal">
+                      <span className="text-xs font-medium leading-normal line-clamp-1 items-center justify-center self-stretch overflow-hidden break-words text-ellipsis">
                         {getGithubRepoName(activeMcp?.home_page)}
                       </span>
                     </div>
@@ -336,7 +336,7 @@ export const MCPEnvDialog: FC<MCPEnvDialogProps> = ({
                 </div>
               </div>
             </div>
-            <div className="flex flex-col gap-md">
+            <div className="gap-md flex flex-col">
               {Object.keys(activeMcp?.install_command?.env || {}).map((key) => {
                 const getNoteContent = () => {
                   let noteContent = envValues[key]?.tip || '';
diff --git a/src/pages/Connectors/components/MCPListItem.tsx b/src/pages/Connectors/components/MCPListItem.tsx
index a9b907bd3..6c6661645 100644
--- a/src/pages/Connectors/components/MCPListItem.tsx
+++ b/src/pages/Connectors/components/MCPListItem.tsx
@@ -37,9 +37,9 @@ export default function MCPListItem({
   const [_showMenu, setShowMenu] = useState(false);
   const { t } = useTranslation();
   return (
-    <div className="mb-4 flex items-center justify-between gap-4 rounded-2xl bg-surface-tertiary p-4">
-      <div className="flex items-center gap-xs">
-        <div className="mx-xs h-3 w-3 rounded-full bg-green-500"></div>
+    <div className="mb-4 gap-4 rounded-2xl bg-surface-tertiary p-4 flex items-center justify-between">
+      <div className="gap-xs flex items-center">
+        <div className="mx-xs h-3 w-3 bg-green-500 rounded-full"></div>
         <div className="text-base font-bold leading-9 text-text-primary">
           {item.mcp_name}
         </div>
@@ -49,7 +49,7 @@ export default function MCPListItem({
           </TooltipSimple>
         </div>
       </div>
-      <div className="flex items-center gap-2">
+      <div className="gap-2 flex items-center">
         {/* <Switch
 					checked={item.status === 1}
 					disabled={loading}
diff --git a/src/pages/Connectors/components/MCPMarket.tsx b/src/pages/Connectors/components/MCPMarket.tsx
index 8b7b7efc0..02b8025e7 100644
--- a/src/pages/Connectors/components/MCPMarket.tsx
+++ b/src/pages/Connectors/components/MCPMarket.tsx
@@ -273,7 +273,7 @@ export default function MCPMarket({
     <div className="flex h-full flex-col items-center">
       {externalKeyword === undefined && (
         <>
-          <div className="text-body sticky top-0 z-[20] mb-0 flex w-full max-w-4xl items-center justify-between py-2">
+          <div className="text-body top-0 mb-0 max-w-4xl py-2 sticky z-[20] flex w-full items-center justify-between">
             <Button
               variant="ghost"
               size="sm"
@@ -296,7 +296,7 @@ export default function MCPMarket({
       )}
 
       {/* Category toggle row */}
-      <div className="flex w-full py-2">
+      <div className="py-2 flex w-full">
         <ToggleGroup
           type="single"
           value={categoryId ? String(categoryId) : 'all'}
@@ -321,24 +321,24 @@ export default function MCPMarket({
         onConnect={onConnect}
         activeMcp={activeMcp}
       ></MCPEnvDialog>
-      <div className="flex w-full flex-col gap-4 pt-4">
+      <div className="gap-4 pt-4 flex w-full flex-col">
         {isLoading && items.length === 0 && (
-          <div className="py-8 text-center text-text-muted">
+          <div className="py-8 text-text-muted text-center">
             {t('setting.loading')}
           </div>
         )}
         {error && (
-          <div className="py-8 text-center text-text-error">{error}</div>
+          <div className="py-8 text-text-error text-center">{error}</div>
         )}
         {!isLoading && !error && items.length === 0 && (
-          <div className="py-8 text-center text-text-muted">
+          <div className="py-8 text-text-muted text-center">
             {t('setting.no-mcp-services')}
           </div>
         )}
         {items.map((item) => (
           <div
             key={item.id}
-            className="flex items-center rounded-2xl bg-surface-secondary p-4"
+            className="rounded-2xl bg-surface-secondary p-4 flex items-center"
           >
             {/* Left: Icon */}
             <div className="mr-4 flex items-center">
@@ -356,10 +356,10 @@ export default function MCPMarket({
                 );
               })()}
             </div>
-            <div className="flex min-w-0 flex-1 flex-col justify-center">
-              <div className="flex w-full items-center gap-xs pb-1">
-                <div className="flex flex-1 items-center gap-xs">
-                  <span className="truncate text-base font-bold leading-9 text-text-primary">
+            <div className="min-w-0 flex flex-1 flex-col justify-center">
+              <div className="gap-xs pb-1 flex w-full items-center">
+                <div className="gap-xs flex flex-1 items-center">
+                  <span className="text-base font-bold leading-9 text-text-primary truncate">
                     {item.name}
                   </span>
                   <TooltipSimple content={item.description}>
@@ -400,7 +400,7 @@ export default function MCPMarket({
                         verticalAlign: 'middle',
                       }}
                     />
-                    <span className="items-center justify-center self-stretch text-xs font-medium leading-3">
+                    <span className="text-xs font-medium leading-3 items-center justify-center self-stretch">
                       {(() => {
                         const parts = item.home_page.split('/');
                         return parts.length > 4 ? parts[4] : item.home_page;
@@ -408,7 +408,7 @@ export default function MCPMarket({
                     </span>
                   </div>
                 )}
-              <div className="mt-1 whitespace-pre-line break-words text-sm text-text-muted">
+              <div className="mt-1 text-sm text-text-muted break-words whitespace-pre-line">
                 {item.description}
               </div>
             </div>
@@ -416,12 +416,12 @@ export default function MCPMarket({
         ))}
         <div ref={loader} />
         {isLoading && items.length > 0 && (
-          <div className="py-4 text-center text-text-muted">
+          <div className="py-4 text-text-muted text-center">
             {t('setting.loading-more')}
           </div>
         )}
         {!hasMore && items.length > 0 && (
-          <div className="py-4 text-center text-text-muted">
+          <div className="py-4 text-text-muted text-center">
             {t('setting.no-more-mcp-servers')}
           </div>
         )}
diff --git a/src/pages/Connectors/index.tsx b/src/pages/Connectors/index.tsx
index 758acabd8..f8ffc1e7b 100644
--- a/src/pages/Connectors/index.tsx
+++ b/src/pages/Connectors/index.tsx
@@ -41,8 +41,8 @@ export default function Connectors() {
 
   return (
     <div className="m-auto flex h-auto max-w-[940px] flex-col">
-      <div className="flex h-auto w-full px-6">
-        <div className="sticky top-20 flex h-full w-40 flex-shrink-0 flex-grow-0 flex-col justify-between self-start pr-6 pt-8">
+      <div className="px-6 flex h-auto w-full">
+        <div className="top-20 w-40 pr-6 pt-8 sticky flex h-full flex-shrink-0 flex-grow-0 flex-col justify-between self-start">
           <VerticalNavigation
             items={
               menuItems.map((menu) => ({
@@ -54,14 +54,14 @@ export default function Connectors() {
             }
             value={activeTab}
             onValueChange={handleTabChange}
-            className="h-full min-h-0 w-full flex-1 gap-0"
+            className="min-h-0 gap-0 h-full w-full flex-1"
             listClassName="w-full h-full overflow-y-auto"
             contentClassName="hidden"
           />
         </div>
 
         <div className="flex h-auto w-full flex-1 flex-col">
-          <div className="flex flex-col gap-4">
+          <div className="gap-4 flex flex-col">
             {activeTab === 'search' && <Search />}
             {activeTab === 'mcp' && <MCP />}
           </div>
diff --git a/src/pages/Projects/Project.tsx b/src/pages/Projects/Project.tsx
index 73cbd64fb..dce96a3c7 100644
--- a/src/pages/Projects/Project.tsx
+++ b/src/pages/Projects/Project.tsx
@@ -268,9 +268,9 @@ export default function Project() {
       />
 
       {/* Header Section */}
-      <div className="flex w-full border-x-0 border-t-0 border-solid border-border-disabled">
-        <div className="mx-auto flex w-full max-w-[900px] items-center justify-between px-6 pb-4 pt-8">
-          <div className="flex w-full flex-row items-center justify-between gap-4">
+      <div className="border-border-disabled flex w-full border-x-0 border-t-0 border-solid">
+        <div className="px-6 pb-4 pt-8 mx-auto flex w-full max-w-[900px] items-center justify-between">
+          <div className="gap-4 flex w-full flex-row items-center justify-between">
             <div className="flex flex-col">
               <div className="text-heading-sm font-bold text-text-heading">
                 {t('layout.projects-hub')}
@@ -281,7 +281,7 @@ export default function Project() {
       </div>
 
       <div className="flex w-full">
-        <div className="mx-auto flex min-h-[calc(100vh-86px)] w-full max-w-[940px] flex-col items-start justify-start px-6 py-8">
+        <div className="px-6 py-8 mx-auto flex min-h-[calc(100vh-86px)] w-full max-w-[940px] flex-col items-start justify-start">
           <GroupedHistoryView
             onTaskSelect={handleSetActive}
             onTaskDelete={handleDelete}
diff --git a/src/pages/Setting/index.tsx b/src/pages/Setting/index.tsx
index a2d113e64..663b92824 100644
--- a/src/pages/Setting/index.tsx
+++ b/src/pages/Setting/index.tsx
@@ -69,8 +69,8 @@ export default function Setting() {
 
   return (
     <div className="m-auto flex h-auto max-w-[940px] flex-col">
-      <div className="flex h-auto w-full px-6">
-        <div className="sticky top-20 flex h-full w-40 flex-shrink-0 flex-grow-0 flex-col justify-between self-start pr-6 pt-8">
+      <div className="px-6 flex h-auto w-full">
+        <div className="top-20 w-40 pr-6 pt-8 sticky flex h-full flex-shrink-0 flex-grow-0 flex-col justify-between self-start">
           <VerticalNavigation
             items={
               settingMenus.map((menu) => {
@@ -84,11 +84,11 @@ export default function Setting() {
             }
             value={activeTab}
             onValueChange={handleTabChange}
-            className="h-full min-h-0 w-full flex-1 gap-0"
+            className="min-h-0 gap-0 h-full w-full flex-1"
             listClassName="w-full h-full overflow-y-auto"
             contentClassName="hidden"
           />
-          <div className="mt-4 flex w-full flex-shrink-0 flex-grow-0 flex-col items-center justify-center gap-4 border-x-0 border-b-0 border-t-[0.5px] border-solid border-border-secondary py-4">
+          <div className="mt-4 gap-4 border-border-secondary py-4 flex w-full flex-shrink-0 flex-grow-0 flex-col items-center justify-center border-x-0 border-t-[0.5px] border-b-0 border-solid">
             <button
               onClick={() =>
                 window.open(
@@ -97,7 +97,7 @@ export default function Setting() {
                   'noopener,noreferrer'
                 )
               }
-              className="flex w-full cursor-pointer flex-row items-center justify-center gap-2 rounded-lg bg-surface-tertiary px-6 py-1.5 transition-opacity duration-200 hover:opacity-60"
+              className="gap-2 rounded-lg bg-surface-tertiary px-6 py-1.5 flex w-full cursor-pointer flex-row items-center justify-center transition-opacity duration-200 hover:opacity-60"
             >
               <TagIcon className="h-4 w-4 text-text-success" />
               <div className="text-label-sm font-semibold text-text-body">
@@ -120,7 +120,7 @@ export default function Setting() {
         </div>
 
         <div className="flex h-auto w-full flex-1 flex-col">
-          <div className="flex flex-col gap-4">
+          <div className="gap-4 flex flex-col">
             {activeTab === 'general' && <General />}
             {activeTab === 'privacy' && <Privacy />}
           </div>