diff --git a/web/src/components/ui/progress.tsx b/web/src/components/ui/progress.tsx
index f2473debb..6c49239ac 100644
--- a/web/src/components/ui/progress.tsx
+++ b/web/src/components/ui/progress.tsx
@@ -12,13 +12,13 @@ const Progress = React.forwardRef<
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
-      'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
+      'relative h-4 w-full overflow-hidden rounded-full bg-bg-accent',
       className,
     )}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className="h-full w-full flex-1 bg-accent-primary transition-all"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
diff --git a/web/src/pages/dataset/dataset/constant.ts b/web/src/pages/dataset/dataset/constant.ts
index 52deb4577..ad6d8f1ae 100644
--- a/web/src/pages/dataset/dataset/constant.ts
+++ b/web/src/pages/dataset/dataset/constant.ts
@@ -3,15 +3,15 @@ import { RunningStatus } from '@/constants/knowledge';
 export const RunningStatusMap = {
   [RunningStatus.UNSTART]: {
     label: 'UNSTART',
-    color: 'cyan',
+    color: 'var(--accent-primary)',
   },
   [RunningStatus.RUNNING]: {
     label: 'Parsing',
-    color: 'blue',
+    color: 'var(--team-member)',
   },
-  [RunningStatus.CANCEL]: { label: 'CANCEL', color: 'orange' },
-  [RunningStatus.DONE]: { label: 'SUCCESS', color: 'blue' },
-  [RunningStatus.FAIL]: { label: 'FAIL', color: 'red' },
+  [RunningStatus.CANCEL]: { label: 'CANCEL', color: 'var(--state-warning)' },
+  [RunningStatus.DONE]: { label: 'SUCCESS', color: 'var(--state-success)' },
+  [RunningStatus.FAIL]: { label: 'FAIL', color: 'var(--state-error' },
 };
 
 export * from '@/constants/knowledge';
diff --git a/web/src/pages/dataset/dataset/dataset-table.tsx b/web/src/pages/dataset/dataset/dataset-table.tsx
index 48ec4bb42..1ed05d39a 100644
--- a/web/src/pages/dataset/dataset/dataset-table.tsx
+++ b/web/src/pages/dataset/dataset/dataset-table.tsx
@@ -164,7 +164,7 @@ export function DatasetTable({
           )}
         </TableBody>
       </Table>
-      <div className="flex items-center justify-end  py-4">
+      <div className="flex items-center justify-end  py-4 absolute bottom-3 right-3">
         <div className="space-x-2">
           <RAGFlowPagination
             {...pick(pagination, 'current', 'pageSize')}
diff --git a/web/src/pages/dataset/dataset/parsing-card.tsx b/web/src/pages/dataset/dataset/parsing-card.tsx
index b5511dae8..d9cdefec3 100644
--- a/web/src/pages/dataset/dataset/parsing-card.tsx
+++ b/web/src/pages/dataset/dataset/parsing-card.tsx
@@ -17,7 +17,7 @@ function Dot({ run }: { run: RunningStatus }) {
   const runningStatus = RunningStatusMap[run];
   return (
     <span
-      className={'size-2 inline-block rounded'}
+      className={'size-1 inline-block rounded'}
       style={{ backgroundColor: runningStatus.color }}
     ></span>
   );
@@ -89,7 +89,7 @@ export function ParsingCard({ record }: IProps) {
   return (
     <HoverCard>
       <HoverCardTrigger asChild>
-        <Button variant={'ghost'} size={'sm'}>
+        <Button variant={'transparent'} className="border-none" size={'sm'}>
           <Dot run={record.run}></Dot>
         </Button>
       </HoverCardTrigger>
diff --git a/web/src/pages/dataset/dataset/parsing-status-cell.tsx b/web/src/pages/dataset/dataset/parsing-status-cell.tsx
index 723b1db9f..7affd71a5 100644
--- a/web/src/pages/dataset/dataset/parsing-status-cell.tsx
+++ b/web/src/pages/dataset/dataset/parsing-status-cell.tsx
@@ -14,7 +14,7 @@ import {
 import { Progress } from '@/components/ui/progress';
 import { Separator } from '@/components/ui/separator';
 import { IDocumentInfo } from '@/interfaces/database/document';
-import { CircleX, Play, RefreshCw } from 'lucide-react';
+import { CircleX, RefreshCw } from 'lucide-react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RunningStatus } from './constant';
@@ -24,11 +24,13 @@ import { useHandleRunDocumentByIds } from './use-run-document';
 import { UseSaveMetaShowType } from './use-save-meta';
 import { isParserRunning } from './utils';
 const IconMap = {
-  [RunningStatus.UNSTART]: <Play />,
-  [RunningStatus.RUNNING]: <CircleX />,
-  [RunningStatus.CANCEL]: <RefreshCw />,
-  [RunningStatus.DONE]: <RefreshCw />,
-  [RunningStatus.FAIL]: <RefreshCw />,
+  [RunningStatus.UNSTART]: (
+    <div className="w-0 h-0 border-l-[10px] border-l-accent-primary border-t-8 border-r-4 border-b-8 border-transparent"></div>
+  ),
+  [RunningStatus.RUNNING]: <CircleX size={14} />,
+  [RunningStatus.CANCEL]: <RefreshCw size={14} color="var(--accent-primary)" />,
+  [RunningStatus.DONE]: <RefreshCw size={14} color="var(--accent-primary)" />,
+  [RunningStatus.FAIL]: <RefreshCw size={14} color="var(--accent-primary)" />,
 };
 
 export function ParsingStatusCell({
@@ -60,11 +62,11 @@ export function ParsingStatusCell({
   }, [record, showSetMetaModal]);
 
   return (
-    <section className="flex gap-2 items-center">
-      <div className="w-28 flex items-center justify-between">
+    <section className="flex gap-8 items-center">
+      <div className="w-fit flex items-center justify-between">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant={'ghost'} size={'sm'}>
+            <Button variant={'transparent'} className="border-none" size={'sm'}>
               {parser_id === 'naive' ? 'general' : parser_id}
             </Button>
           </DropdownMenuTrigger>
@@ -77,7 +79,6 @@ export function ParsingStatusCell({
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
-        <Separator orientation="vertical" className="h-2.5" />
       </div>
       <ConfirmDeleteDialog
         title={t(`knowledgeDetails.redo`, { chunkNum: chunk_num })}
@@ -85,17 +86,17 @@ export function ParsingStatusCell({
         onOk={handleOperationIconClick(true)}
         onCancel={handleOperationIconClick(false)}
       >
-        <Button
-          variant={'ghost'}
-          size={'sm'}
+        <div
+          className="cursor-pointer flex items-center gap-3"
           onClick={
             isZeroChunk || isRunning
               ? handleOperationIconClick(false)
               : () => {}
           }
         >
+          <Separator orientation="vertical" className="h-2.5" />
           {operationIcon}
-        </Button>
+        </div>
       </ConfirmDeleteDialog>
       {isParserRunning(run) ? (
         <HoverCard>
diff --git a/web/src/pages/datasets/dataset-card.tsx b/web/src/pages/datasets/dataset-card.tsx
index 5205a80a1..14b4fda53 100644
--- a/web/src/pages/datasets/dataset-card.tsx
+++ b/web/src/pages/datasets/dataset-card.tsx
@@ -41,7 +41,7 @@ export function SeeAllCard() {
   const { navigateToDatasetList } = useNavigatePage();
 
   return (
-    <Card className="w-40" onClick={navigateToDatasetList}>
+    <Card className="w-40 flex-none" onClick={navigateToDatasetList}>
       <CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-secondary">
         See All <ChevronRight className="size-4" />
       </CardContent>
diff --git a/web/src/pages/home/datasets.tsx b/web/src/pages/home/datasets.tsx
index 85fdf848c..b63fd1f99 100644
--- a/web/src/pages/home/datasets.tsx
+++ b/web/src/pages/home/datasets.tsx
@@ -30,7 +30,7 @@ export function Datasets() {
             <CardSkeleton />
           </div>
         ) : (
-          <div className="flex gap-4 flex-1">
+          <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 max-h-[78vh] overflow-auto">
             {kbs.slice(0, 6).map((dataset) => (
               <DatasetCard
                 key={dataset.id}
diff --git a/web/src/pages/next-search/index.tsx b/web/src/pages/next-search/index.tsx
index b9185a433..9ffa1639d 100644
--- a/web/src/pages/next-search/index.tsx
+++ b/web/src/pages/next-search/index.tsx
@@ -128,7 +128,7 @@ export default function SearchPage() {
       </div>
       <div className="absolute right-5 top-4 ">
         <Button
-          className="bg-text-primary  text-bg-base border-b-[#00BEB4] border-b-2"
+          className="bg-text-primary  text-bg-base border-b-accent-primary border-b-2"
           onClick={() => {
             handleOperate().then((res) => {
               console.log(res, 'res');