diff --git a/web/src/components/confirm-delete-dialog.tsx b/web/src/components/confirm-delete-dialog.tsx
index eacbb83986..d008990e37 100644
--- a/web/src/components/confirm-delete-dialog.tsx
+++ b/web/src/components/confirm-delete-dialog.tsx
@@ -65,7 +65,7 @@ export function ConfirmDeleteDialog({
       <AlertDialogContent
         onSelect={(e) => e.preventDefault()}
         onClick={(e) => e.stopPropagation()}
-        className="bg-bg-base "
+        className="bg-bg-base"
         data-testid={testId ?? 'confirm-delete-dialog'}
       >
         <AlertDialogHeader className="space-y-5">
@@ -82,7 +82,7 @@ export function ConfirmDeleteDialog({
             <>
               <Separator className="w-[calc(100%+48px)] -translate-x-6"></Separator>
               <AlertDialogDescription className="mt-5">
-                <div className="flex flex-col gap-5  text-base mb-10 px-5">
+                <div className="flex flex-col gap-2 text-base mb-10 px-5">
                   <div className="text-text-primary">
                     {content.title || t('common.deleteModalTitle')}
                   </div>
@@ -92,7 +92,7 @@ export function ConfirmDeleteDialog({
             </>
           )}
         </AlertDialogHeader>
-        <AlertDialogFooter className="px-5 flex items-center gap-2">
+        <AlertDialogFooter className="px-5 flex items-center">
           <AlertDialogCancel
             onClick={onCancel}
             data-testid={
diff --git a/web/src/components/list-filter-bar/filter-field.tsx b/web/src/components/list-filter-bar/filter-field.tsx
index 2b5ab8018a..6d80936478 100644
--- a/web/src/components/list-filter-bar/filter-field.tsx
+++ b/web/src/components/list-filter-bar/filter-field.tsx
@@ -70,9 +70,9 @@ const FilterItem = memo(
       <div
         className={`flex items-center justify-between text-text-primary text-xs ${level > 0 ? 'ml-1' : ''}`}
       >
-        <FormItem className="flex flex-row space-x-3 space-y-0 items-center ">
+        <FormItem className="flex flex-row space-x-3 space-y-0 items-center min-w-0 flex-1">
           <FormControl>
-            <div className="flex space-x-3">
+            <div className="flex items-center space-x-2 min-w-0">
               <Checkbox
                 checked={field.value?.includes?.(item.id.toString())}
                 onCheckedChange={(checked: boolean) =>
@@ -88,7 +88,7 @@ const FilterItem = memo(
                     item,
                   })
                 }
-                className="truncate w-[200px] text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-text-secondary"
+                className="truncate text-sm font-normal leading-normal peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-text-secondary"
               >
                 {item.label}
               </div>
@@ -96,7 +96,7 @@ const FilterItem = memo(
           </FormControl>
         </FormItem>
         {item.count !== undefined && (
-          <span className="text-sm">{item.count}</span>
+          <span className="text-sm shrink-0 ml-2 text-right">{item.count}</span>
         )}
       </div>
     );
diff --git a/web/src/components/list-filter-bar/filter-popover.tsx b/web/src/components/list-filter-bar/filter-popover.tsx
index 3da931e16e..87d240a51b 100644
--- a/web/src/components/list-filter-bar/filter-popover.tsx
+++ b/web/src/components/list-filter-bar/filter-popover.tsx
@@ -209,7 +209,7 @@ function CheckboxFormMultiple({
               return (
                 <div
                   key={key}
-                  className="flex flex-col space-y-4 border-b border-border-button pb-4"
+                  className="flex flex-col gap-4 border-b border-border-button pb-4"
                 >
                   <div className="text-text-primary text-sm">{key}</div>
                   <div className="flex flex-col space-y-4">
@@ -223,7 +223,6 @@ function CheckboxFormMultiple({
                               onChange={(e) =>
                                 handleSearchChange(x.field, e.target.value)
                               }
-                              className="h-8"
                             />
                           </div>
                         )}
@@ -249,7 +248,7 @@ function CheckboxFormMultiple({
               return (
                 <FormItem className="space-y-4" key={x.field}>
                   <div>
-                    <div className="flex flex-col items-start justify-between mb-2">
+                    <div className="flex flex-col items-start justify-between gap-2 mb-2">
                       <FormLabel className="text-text-primary text-sm">
                         {x.label}
                       </FormLabel>
@@ -260,7 +259,7 @@ function CheckboxFormMultiple({
                           onChange={(e) =>
                             handleSearchChange(x.field, e.target.value)
                           }
-                          className="h-8 w-full"
+                          rootClassName="w-full"
                         />
                       )}
                     </div>
@@ -287,7 +286,7 @@ function CheckboxFormMultiple({
             })}
         </div>
 
-        <div className="flex justify-end gap-5">
+        <div className="flex justify-end gap-2">
           <Button
             type="button"
             variant={'outline'}
diff --git a/web/src/components/ui/tooltip.tsx b/web/src/components/ui/tooltip.tsx
index dbbe473a63..ea35e3e4dd 100644
--- a/web/src/components/ui/tooltip.tsx
+++ b/web/src/components/ui/tooltip.tsx
@@ -38,7 +38,7 @@ export const FormTooltip = ({ tooltip }: { tooltip: React.ReactNode }) => {
       <TooltipTrigger asChild>
         <span
           tabIndex={-1}
-          className="inline-flex align-text-top"
+          className="inline-flex align-middle -translate-y-[.02em]"
           onClick={(e) => {
             e.preventDefault(); // Prevent clicking the tooltip from triggering form save
           }}
diff --git a/web/src/pages/dataset/dataset-setting/configuration/common-item.tsx b/web/src/pages/dataset/dataset-setting/configuration/common-item.tsx
index f3409d4d16..51761f097c 100644
--- a/web/src/pages/dataset/dataset-setting/configuration/common-item.tsx
+++ b/web/src/pages/dataset/dataset-setting/configuration/common-item.tsx
@@ -67,8 +67,10 @@ export function ChunkMethodItem(props: IProps) {
       control={form.control}
       name={name}
       render={({ field }) => (
-        <FormItem className=" items-center space-y-1">
-          <div className={line === 1 ? 'flex items-center' : ''}>
+        <FormItem className="items-center gap-1">
+          <div
+            className={line === 1 ? 'flex items-center' : 'flex flex-col gap-1'}
+          >
             <FormLabel
               required
               tooltip={t('chunkMethodTip')}
@@ -78,7 +80,7 @@ export function ChunkMethodItem(props: IProps) {
             >
               {t('builtIn')}
             </FormLabel>
-            <div className={line === 1 ? 'w-3/4 ' : 'w-full'}>
+            <div className={line === 1 ? 'w-3/4' : 'w-full'}>
               <FormControl>
                 <SelectWithSearch
                   {...field}
@@ -123,7 +125,7 @@ export const EmbeddingSelect = ({
   return (
     <Spin
       spinning={loading}
-      className={cn(' rounded-lg after:bg-bg-base', {
+      className={cn('rounded-lg after:bg-bg-base', {
         'opacity-20': loading,
       })}
     >
@@ -161,17 +163,17 @@ export function EmbeddingModelItem({ line = 1, isEdit }: IProps) {
         control={form.control}
         name={'embedding_model'}
         render={({ field }) => (
-          <FormItem className={cn(' items-center space-y-0 ')}>
+          <FormItem className={cn('items-center space-y-0')}>
             <div
               className={cn('flex', {
-                ' items-center': line === 1,
+                'items-center': line === 1,
                 'flex-col gap-1': line === 2,
               })}
             >
               <FormLabel
                 required
                 tooltip={t('embeddingModelTip')}
-                className={cn('text-sm  whitespace-wrap ', {
+                className={cn('text-sm whitespace-wrap', {
                   'w-1/4': line === 1,
                 })}
               >
@@ -216,10 +218,10 @@ export function ParseTypeItem({
       control={form.control}
       name={name}
       render={({ field }) => (
-        <FormItem className=" items-center space-y-0 ">
+        <FormItem className="items-center space-y-0">
           <div
             className={cn('flex', {
-              ' items-center': line === 1,
+              'items-center': line === 1,
               'flex-col gap-1': line === 2,
             })}
           >
@@ -268,7 +270,7 @@ export function EnableAutoGenerateItem() {
       control={form.control}
       name={'enableAutoGenerate'}
       render={({ field }) => (
-        <FormItem className=" items-center space-y-0 ">
+        <FormItem className="items-center space-y-0">
           <div className="flex items-center">
             <FormLabel
               tooltip={t('enableAutoGenerateTip')}
@@ -304,7 +306,7 @@ export function EnableTocToggle() {
       control={form.control}
       name={'parser_config.toc_extraction'}
       render={({ field }) => (
-        <FormItem className=" items-center space-y-0 ">
+        <FormItem className="items-center space-y-0">
           <div className="flex items-center">
             <FormLabel
               tooltip={t('tocExtractionTip')}
@@ -561,10 +563,10 @@ export function LLMModelItem({ line = 1, isEdit, label, name }: IProps) {
         control={form.control}
         name={name ?? 'llm_id'}
         render={({ field }) => (
-          <FormItem className={cn(' items-center space-y-0 ')}>
+          <FormItem className={cn('items-center space-y-0')}>
             <div
               className={cn('flex', {
-                ' items-center': line === 1,
+                'items-center': line === 1,
                 'flex-col gap-1': line === 2,
               })}
             >
diff --git a/web/src/pages/datasets/dataset-creating-dialog.tsx b/web/src/pages/datasets/dataset-creating-dialog.tsx
index bc884ae89a..f43ce5e924 100644
--- a/web/src/pages/datasets/dataset-creating-dialog.tsx
+++ b/web/src/pages/datasets/dataset-creating-dialog.tsx
@@ -124,11 +124,8 @@ export function InputForm({ onOk }: IModalProps<any>) {
           control={form.control}
           name="name"
           render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <span className="text-destructive mr-1"> *</span>
-                {t('knowledgeList.name')}
-              </FormLabel>
+            <FormItem className="space-y-1">
+              <FormLabel required>{t('knowledgeList.name')}</FormLabel>
               <FormControl>
                 <Input
                   placeholder={t('knowledgeList.namePlaceholder')}