diff --git a/web/app/components/app/annotation/index.tsx b/web/app/components/app/annotation/index.tsx
index 92276e43e8..418079abe8 100644
--- a/web/app/components/app/annotation/index.tsx
+++ b/web/app/components/app/annotation/index.tsx
@@ -25,7 +25,7 @@ import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
 import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
 import type { App } from '@/types/app'
 
-interface Props {
+type Props = {
   appDetail: App
 }
 
diff --git a/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx b/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
index 6d16660e81..f5fb96da08 100644
--- a/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
+++ b/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable multiline-ternary */
 'use client'
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
diff --git a/web/app/components/app/log/index.tsx b/web/app/components/app/log/index.tsx
index 7e037c8355..592233facd 100644
--- a/web/app/components/app/log/index.tsx
+++ b/web/app/components/app/log/index.tsx
@@ -114,35 +114,12 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
         {/* Show Pagination only if the total is more than the limit */}
         {(total && total > APP_PAGE_LIMIT)
           ? <Pagination
-            className="flex items-center w-full h-10 text-sm select-none mt-8"
-            currentPage={currPage}
-            edgePageCount={2}
-            middlePagesSiblingCount={1}
-            setCurrentPage={setCurrPage}
-            totalPages={Math.ceil(total / APP_PAGE_LIMIT)}
-            truncableClassName="w-8 px-0.5 text-center"
-            truncableText="..."
-          >
-            <Pagination.PrevButton
-              disabled={currPage === 0}
-              className={`flex items-center mr-2 text-gray-500  focus:outline-none ${currPage === 0 ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:text-gray-600 dark:hover:text-gray-200'}`} >
-              <ArrowLeftIcon className="mr-3 h-3 w-3" />
-              {t('appLog.table.pagination.previous')}
-            </Pagination.PrevButton>
-            <div className={`flex items-center justify-center grow ${s.pagination}`}>
-              <Pagination.PageButton
-                activeClassName="bg-primary-50 dark:bg-opacity-0 text-primary-600 dark:text-white"
-                className="flex items-center justify-center h-8 w-8 rounded-full cursor-pointer"
-                inactiveClassName="text-gray-500"
-              />
-            </div>
-            <Pagination.NextButton
-              disabled={currPage === Math.ceil(total / APP_PAGE_LIMIT) - 1}
-              className={`flex items-center mr-2 text-gray-500 focus:outline-none ${currPage === Math.ceil(total / APP_PAGE_LIMIT) - 1 ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:text-gray-600 dark:hover:text-gray-200'}`} >
-              {t('appLog.table.pagination.next')}
-              <ArrowRightIcon className="ml-3 h-3 w-3" />
-            </Pagination.NextButton>
-          </Pagination>
+            current={currPage}
+            onChange={setCurrPage}
+            total={total}
+            limit={limit}
+            onLimitChange={setLimit}
+          />
           : null}
       </div>
     </div>
diff --git a/web/app/components/base/badge.tsx b/web/app/components/base/badge.tsx
index c44057b9a4..fb1ceca1e6 100644
--- a/web/app/components/base/badge.tsx
+++ b/web/app/components/base/badge.tsx
@@ -17,7 +17,7 @@ const Badge = ({
   return (
     <div
       className={cn(
-        'relative inline-flex items-center px-[5px] h-5 rounded-[5px] border border-divider-deep  leading-3 text-text-tertiary',
+        'inline-flex items-center px-[5px] h-5 rounded-[5px] border border-divider-deep leading-3 text-text-tertiary',
         uppercase ? 'system-2xs-medium-uppercase' : 'system-xs-medium',
         className,
       )}
diff --git a/web/app/components/base/pagination/hook.ts b/web/app/components/base/pagination/hook.ts
index 6501d6f457..32a2af8013 100644
--- a/web/app/components/base/pagination/hook.ts
+++ b/web/app/components/base/pagination/hook.ts
@@ -10,7 +10,7 @@ const usePagination = ({
   edgePageCount,
   middlePagesSiblingCount,
 }: IPaginationProps): IUsePagination => {
-  const pages = Array(totalPages)
+  const pages = new Array(totalPages)
     .fill(0)
     .map((_, i) => i + 1)
 
diff --git a/web/app/components/base/pagination/index.tsx b/web/app/components/base/pagination/index.tsx
index b64c712425..2285db9230 100644
--- a/web/app/components/base/pagination/index.tsx
+++ b/web/app/components/base/pagination/index.tsx
@@ -33,20 +33,20 @@ const CustomizedPagination: FC<Props> = ({
   const [showPerPageTip, setShowPerPageTip] = React.useState(false)
 
   const { run: handlePaging } = useDebounceFn((value: string) => {
-    if (parseInt(value) > totalPages) {
+    if (Number.parseInt(value) > totalPages) {
       setInputValue(totalPages)
       onChange(totalPages - 1)
       setShowInput(false)
       return
     }
-    if (parseInt(value) < 1) {
+    if (Number.parseInt(value) < 1) {
       setInputValue(1)
       onChange(0)
       setShowInput(false)
       return
     }
-    onChange(parseInt(value) - 1)
-    setInputValue(parseInt(value))
+    onChange(Number.parseInt(value) - 1)
+    setInputValue(Number.parseInt(value))
     setShowInput(false)
   }, { wait: 500 })
 
@@ -54,9 +54,9 @@ const CustomizedPagination: FC<Props> = ({
     const value = e.target.value
     if (!value)
       return setInputValue('')
-    if (isNaN(parseInt(value)))
+    if (isNaN(Number.parseInt(value)))
       return setInputValue('')
-    setInputValue(parseInt(value))
+    setInputValue(Number.parseInt(value))
     handlePaging(value)
   }
 
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index 6c69e6c3ce..af7ec2136f 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -675,7 +675,7 @@ const StepTwo = ({
                         value={maxChunkLength}
                         max={limitMaxChunkLength}
                         min={1}
-                        onChange={e => setMaxChunkLength(parseInt(e.target.value.replace(/^0+/, ''), 10))}
+                        onChange={e => setMaxChunkLength(Number.parseInt(e.target.value.replace(/^0+/, ''), 10))}
                       />
                     </div>
                   </div>
diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
index fc6a42338a..f8bde33d51 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -41,9 +41,11 @@ const WorkplaceSelector = () => {
                 group hover:bg-state-base-hover cursor-pointer ${open && 'bg-state-base-hover'} rounded-[10px]
               `,
             )}>
-              <div className='flex items-center justify-center w-7 h-7 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600'>{currentWorkspace?.name[0].toLocaleUpperCase()}</div>
-              <div className={'truncate max-w-[80px] text-text-secondary system-sm-medium'}>{currentWorkspace?.name}</div>
-              <RiArrowDownSLine className='w-4 h-4 text-text-secondary' />
+              <div className='flex items-center justify-center w-7 h-7 bg-[#EFF4FF] rounded-lg text-xs font-medium text-primary-600'>{currentWorkspace?.name[0].toLocaleUpperCase()}</div>
+              <div className='flex flex-row'>
+                <div className={'truncate max-w-[80px] text-text-secondary system-sm-medium'}>{currentWorkspace?.name}</div>
+                <RiArrowDownSLine className='w-4 h-4 text-text-secondary' />
+              </div>
             </Menu.Button>
             <Transition
               as={Fragment}
@@ -68,7 +70,7 @@ const WorkplaceSelector = () => {
                   {
                     workspaces.map(workspace => (
                       <div className='flex py-1 pl-3 pr-2 items-center gap-2 self-stretch hover:bg-state-base-hover rounded-lg' key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
-                        <div className='flex items-center justify-center w-7 h-7 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600'>{workspace.name[0].toLocaleUpperCase()}</div>
+                        <div className='flex items-center justify-center w-6 h-6 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600'>{workspace.name[0].toLocaleUpperCase()}</div>
                         <div className='line-clamp-1 grow overflow-hidden text-text-secondary text-ellipsis system-md-regular cursor-pointer'>{workspace.name}</div>
                         {
                           <PremiumBadge size='s' color='gray' allowHover={false}>
diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
index 57b86e315a..217cf12aed 100644
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -13,10 +13,9 @@ import EnvNav from './env-nav'
 import PluginsNav from './plugins-nav'
 import ExploreNav from './explore-nav'
 import ToolsNav from './tools-nav'
-import GithubStar from './github-star'
 import LicenseNav from './license-env'
 import { WorkspaceProvider } from '@/context/workspace-context'
-import AppContext, { useAppContext } from '@/context/app-context'
+import { useAppContext } from '@/context/app-context'
 import LogoSite from '@/app/components/base/logo/logo-site'
 import WorkplaceSelector from '@/app/components/header/account-dropdown/workplace-selector'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
@@ -61,7 +60,8 @@ const Header = () => {
         >
           <Bars3Icon className="h-4 w-4 text-gray-500" />
         </div>}
-        {!isMobile
+        {
+          !isMobile
           && <div className='flex w-64 p-2 pl-3 gap-1.5 items-center shrink-0 self-stretch'>
             <Link href="/apps" className='flex w-8 h-8 items-center justify-center gap-2 shrink-0'>
               <LogoSite className='object-contain' />
@@ -93,29 +93,32 @@ const Header = () => {
             <LogoSite />
           </Link>
           <div className='font-light text-divider-deep'>/</div>
-          {enableBilling && (
-            <div className='select-none'>
-              <PremiumBadge color='blue' allowHover={true} onClick={handlePlanClick}>
-                <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
-                <div className='system-xs-medium'>
-                  <span className='p-1'>
-                    {t('billing.upgradeBtn.encourageShort')}
-                  </span>
-                </div>
-              </PremiumBadge>
-            </div>
-          )}
-          <GithubStar />
-        </div>
-      )}
-      {!isMobile && (
-        <div className='flex items-center'>
-          {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
-          {!isCurrentWorkspaceDatasetOperator && <AppNav />}
-          {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
-          {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
-        </div>
+          {
+            enableBilling && (
+              <div className='select-none'>
+                <PremiumBadge color='blue' allowHover={true} onClick={handlePlanClick}>
+                  <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
+                  <div className='system-xs-medium'>
+                    <span className='p-1'>
+                      {t('billing.upgradeBtn.encourageShort')}
+                    </span>
+                  </div>
+                </PremiumBadge>
+              </div>
+            )
+          }
+        </div >
       )}
+      {
+        !isMobile && (
+          <div className='flex items-center'>
+            {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
+            {!isCurrentWorkspaceDatasetOperator && <AppNav />}
+            {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
+            {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
+          </div>
+        )
+      }
       <div className='flex items-center shrink-0'>
         <LicenseNav />
         <EnvNav />
@@ -124,15 +127,17 @@ const Header = () => {
         </div>
         <AccountDropdown isMobile={isMobile} />
       </div>
-      {(isMobile && isShowNavMenu) && (
-        <div className='w-full flex flex-col p-2 gap-y-1'>
-          {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
-          {!isCurrentWorkspaceDatasetOperator && <AppNav />}
-          {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
-          {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
-        </div>
-      )}
-    </div>
+      {
+        (isMobile && isShowNavMenu) && (
+          <div className='w-full flex flex-col p-2 gap-y-1'>
+            {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
+            {!isCurrentWorkspaceDatasetOperator && <AppNav />}
+            {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
+            {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
+          </div>
+        )
+      }
+    </div >
   )
 }
 export default Header
diff --git a/web/app/components/workflow/nodes/_base/components/field.tsx b/web/app/components/workflow/nodes/_base/components/field.tsx
index e284e91cfc..eb8976f78d 100644
--- a/web/app/components/workflow/nodes/_base/components/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/field.tsx
@@ -51,7 +51,7 @@ const Field: FC<Props> = ({
         <div className='flex'>
           {operations && <div>{operations}</div>}
           {supportFold && (
-            <RiArrowDownSLine className='w-4 h-4 text-text-tertiary cursor-pointer transform transition-transform' style={{ transform: fold ? 'rotate(-90deg)' : 'rotate(0deg)' }} />
+            <RiArrowDownSLine className='w-4 h-4 text-text-tertiary cursor-pointer transition-transform' style={{ transform: fold ? 'rotate(-90deg)' : 'rotate(0deg)' }} />
           )}
         </div>
       </div>
diff --git a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
index 8542bb4829..b2f8e8cb5b 100644
--- a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
@@ -108,7 +108,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({
                     }}
                   >
                     <div className='flex min-h-5 px-1 items-center gap-1 grow'>
-                      <span className={'flex flex-grow text-text-secondary system-sm-medium'}>{t(`${i18nPrefix}.operations.${item.name}`)}</span>
+                      <span className={'flex grow text-text-secondary system-sm-medium'}>{t(`${i18nPrefix}.operations.${item.name}`)}</span>
                     </div>
                     {item.value === value && (
                       <div className='flex justify-center items-center'>
diff --git a/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx b/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx
index 42ee9845dd..52d076624d 100644
--- a/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx
@@ -128,7 +128,7 @@ const VarList: FC<Props> = ({
 
         return (
           <div className='flex items-start gap-1 self-stretch' key={index}>
-            <div className='flex flex-col items-start gap-1 flex-grow'>
+            <div className='flex flex-col items-start gap-1 grow'>
               <div className='flex items-center gap-1 self-stretch'>
                 <VarReferencePicker
                   readonly={readonly}
@@ -212,7 +212,7 @@ const VarList: FC<Props> = ({
             </div>
             <ActionButton
               size='l'
-              className='flex-shrink-0 group hover:!bg-state-destructive-hover'
+              className='shrink-0 group hover:!bg-state-destructive-hover'
               onClick={handleVarRemove(index)}
             >
               <RiDeleteBinLine className='text-text-tertiary w-4 h-4 group-hover:text-text-destructive' />
diff --git a/web/app/components/workflow/nodes/assigner/panel.tsx b/web/app/components/workflow/nodes/assigner/panel.tsx
index d82155196b..6b151a7cb0 100644
--- a/web/app/components/workflow/nodes/assigner/panel.tsx
+++ b/web/app/components/workflow/nodes/assigner/panel.tsx
@@ -7,11 +7,9 @@ import {
 import VarList from './components/var-list'
 import useConfig from './use-config'
 import type { AssignerNodeType } from './types'
-import Field from '@/app/components/workflow/nodes/_base/components/field'
 import type { NodePanelProps } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
-import ActionButton from '@/app/components/base/action-button'
 import { useHandleAddOperationItem } from './hooks'
+import ActionButton from '@/app/components/base/action-button'
 
 const i18nPrefix = 'workflow.nodes.assigner'
 
@@ -42,7 +40,7 @@ const Panel: FC<NodePanelProps<AssignerNodeType>> = ({
     <div className='flex py-2 flex-col items-start self-stretch'>
       <div className='flex flex-col justify-center items-start gap-1 px-4 py-2 w-full self-stretch'>
         <div className='flex items-start gap-2 self-stretch'>
-          <div className='flex flex-col justify-center items-start flex-grow text-text-secondary system-sm-semibold-uppercase'>{t(`${i18nPrefix}.variables`)}</div>
+          <div className='flex flex-col justify-center items-start grow text-text-secondary system-sm-semibold-uppercase'>{t(`${i18nPrefix}.variables`)}</div>
           <ActionButton onClick={handleAddOperation}>
             <RiAddLine className='w-4 h-4 shrink-0 text-text-tertiary' />
           </ActionButton>
diff --git a/web/i18n/th-TH/plugin-tags.ts b/web/i18n/th-TH/plugin-tags.ts
new file mode 100644
index 0000000000..928649474b
--- /dev/null
+++ b/web/i18n/th-TH/plugin-tags.ts
@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation
diff --git a/web/i18n/th-TH/plugin.ts b/web/i18n/th-TH/plugin.ts
new file mode 100644
index 0000000000..928649474b
--- /dev/null
+++ b/web/i18n/th-TH/plugin.ts
@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation