diff --git a/web/features/new-rag/connected-source-setup.tsx b/web/features/new-rag/connected-source-setup.tsx
index f78541bd08c..d243903c414 100644
--- a/web/features/new-rag/connected-source-setup.tsx
+++ b/web/features/new-rag/connected-source-setup.tsx
@@ -477,7 +477,7 @@ function ProviderSelector({
               key={option.label}
               value={option.label}
               className={cn(
-                'relative flex h-[30px] items-center justify-center gap-1.5 rounded-lg border border-divider-subtle px-3 system-xs-medium text-text-secondary outline-hidden',
+                'relative flex h-7.5 items-center justify-center gap-1.5 rounded-lg border border-divider-subtle px-3 system-xs-medium text-text-secondary outline-hidden',
                 'hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid',
                 'data-checked:border-[1.5px] data-checked:border-components-option-card-option-selected-border data-checked:bg-components-option-card-option-selected-bg data-checked:text-text-primary',
               )}
@@ -509,7 +509,7 @@ function ProviderBrandIcon({
     return (
       <span
         aria-hidden
-        className="flex size-4 shrink-0 items-center justify-center overflow-hidden rounded text-[10px]"
+        className="flex size-4 shrink-0 items-center justify-center overflow-hidden rounded text-2xs"
         style={{ backgroundColor: icon.background }}
       >
         {icon.content}
@@ -542,7 +542,7 @@ function OAuthConnectionCard({
               provider: draft.provider,
             })}
       </h3>
-      <p className="max-w-[576px] system-xs-regular leading-[15px] text-text-tertiary">
+      <p className="max-w-xl system-xs-regular leading-3.75 text-text-tertiary">
         {draft.provider === 'Notion'
           ? t(($) => $['newKnowledge.notionNotConnectedDescription'])
           : t(($) => $['newKnowledge.providerCredentialRequiredDescription'], {
@@ -684,8 +684,8 @@ function ResourceList({
   const someSelected = selectableResources.some((item) => selected.has(item.key))
 
   return (
-    <div className="flex h-[312px] flex-col overflow-hidden rounded-xl border border-divider-regular">
-      <div className="flex h-[30px] shrink-0 items-center gap-2 border-b border-divider-subtle px-3">
+    <div className="flex h-78 flex-col overflow-hidden rounded-xl border border-divider-regular">
+      <div className="flex h-7.5 shrink-0 items-center gap-2 border-b border-divider-subtle px-3">
         <Checkbox
           aria-label={t(($) => $['newKnowledge.selectAll'])}
           aria-describedby={selectionLimitVisible && !allSelected ? selectionLimitId : undefined}
@@ -736,7 +736,7 @@ function ResourceList({
           return (
             <li
               key={resource.key}
-              className={cn('flex items-center gap-2 pe-3', expandable ? 'h-[34px]' : 'h-[30px]')}
+              className={cn('flex items-center gap-2 pe-3', expandable ? 'h-8.5' : 'h-7.5')}
               style={{
                 paddingInlineStart: `${12 + resource.depth * 26}px`,
               }}
@@ -815,7 +815,7 @@ function SyncPolicyField({
         }}
       >
         <SelectLabel>{t(($) => $['newKnowledge.syncPolicy'])}</SelectLabel>
-        <SelectTrigger className="w-[301px]">
+        <SelectTrigger className="w-75.25">
           {t(($) =>
             draft.syncPolicy === 'provider'
               ? $['newKnowledge.syncPolicyProvider']
@@ -1747,7 +1747,7 @@ function ResourceConfiguration({
           {t(($) => $['newKnowledge.addSourceFailed'])}
         </p>
       )}
-      <div className="mt-1 flex justify-end gap-2 border-t border-divider-subtle pt-[19px]">
+      <div className="mt-1 flex justify-end gap-2 border-t border-divider-subtle pt-4.75">
         <Button type="button" onClick={onExit}>
           {t(($) => $['newKnowledge.cancelAddSource'])}
         </Button>
@@ -2136,7 +2136,7 @@ export function ConnectedSourceSetup({
         !datasourceAuthQuery.isPending &&
         !loadingConnections && <SyncPolicyField draft={draft} onDraftChange={onDraftChange} />}
       {!connection && (
-        <div className="mt-1 flex justify-between gap-2 border-t border-divider-subtle pt-[19px]">
+        <div className="mt-1 flex justify-between gap-2 border-t border-divider-subtle pt-4.75">
           <Button type="button" onClick={onExit}>
             {t(($) => $['newKnowledge.cancelAddSource'])}
           </Button>
diff --git a/web/features/new-rag/crawl-selection-form.tsx b/web/features/new-rag/crawl-selection-form.tsx
index 4c0beddfd25..85ad849c668 100644
--- a/web/features/new-rag/crawl-selection-form.tsx
+++ b/web/features/new-rag/crawl-selection-form.tsx
@@ -566,7 +566,7 @@ function ReadyCrawlSelectionForm({
           }}
         >
           <SelectLabel>{t(($) => $['newKnowledge.syncPolicy'])}</SelectLabel>
-          <SelectTrigger className="sm:w-[301px]">
+          <SelectTrigger className="sm:w-75.25">
             {t(($) =>
               syncMode === 'provider'
                 ? $['newKnowledge.syncPolicyProvider']
diff --git a/web/features/new-rag/document-upload-form.tsx b/web/features/new-rag/document-upload-form.tsx
index 8665a0d5ee3..e9eb39f090a 100644
--- a/web/features/new-rag/document-upload-form.tsx
+++ b/web/features/new-rag/document-upload-form.tsx
@@ -60,7 +60,7 @@ export function DocumentUploadForm({
   return (
     <form
       aria-labelledby="new-knowledge-documents-title"
-      className="mt-4 flex w-full max-w-[640px] flex-1 flex-col"
+      className="mt-4 flex w-full max-w-160 flex-1 flex-col"
       onSubmit={(event) => {
         event.preventDefault()
         if (!validFiles.length || uploading) return
@@ -95,7 +95,7 @@ export function DocumentUploadForm({
         }}
       >
         <span className="flex size-11 items-center justify-center rounded-[10px] bg-background-default-subtle">
-          <span aria-hidden className="i-ri-file-text-fill size-[22px] text-text-accent" />
+          <span aria-hidden className="i-ri-file-text-fill size-5.5 text-text-accent" />
         </span>
         <span className="system-md-medium text-text-primary">
           {t(($) => $['newKnowledge.uploadDropZoneTitle'])}
diff --git a/web/features/new-rag/knowledge-settings-page.tsx b/web/features/new-rag/knowledge-settings-page.tsx
index 78e51ae5f5d..631f002880d 100644
--- a/web/features/new-rag/knowledge-settings-page.tsx
+++ b/web/features/new-rag/knowledge-settings-page.tsx
@@ -118,7 +118,7 @@ export function KnowledgeSettingsPage({ knowledgeSpaceId }: { knowledgeSpaceId:
         </p>
       </div>
 
-      <div className="mt-3 w-full max-w-[784px]">
+      <div className="mt-3 w-full max-w-196">
         {isPending && <KnowledgeSettingsSkeleton />}
 
         {!isPending && hasError && (
diff --git a/web/features/new-rag/overview/knowledge-overview-page.tsx b/web/features/new-rag/overview/knowledge-overview-page.tsx
index 9e2aadbe9a8..43eefd4b875 100644
--- a/web/features/new-rag/overview/knowledge-overview-page.tsx
+++ b/web/features/new-rag/overview/knowledge-overview-page.tsx
@@ -145,7 +145,7 @@ function MetricCard({
   return (
     <Panel
       className={cn(
-        'flex h-[92px] flex-col justify-between border-0 bg-background-section p-4 shadow-none',
+        'flex h-23 flex-col justify-between border-0 bg-background-section p-4 shadow-none',
       )}
     >
       <div className="flex items-center gap-1 text-text-tertiary">
@@ -161,12 +161,12 @@ function MetricCard({
         )}
       </div>
       {loading ? (
-        <Skeleton className="h-[22px] w-24" />
+        <Skeleton className="h-5.5 w-24" />
       ) : (
         <div className="flex min-w-0 items-end gap-2">
           <span
             className={cn(
-              'truncate text-[28px] leading-[34px] font-semibold',
+              'truncate text-[28px] leading-8.5 font-semibold',
               empty ? 'text-text-quaternary' : 'text-text-primary',
             )}
           >
@@ -286,13 +286,13 @@ function QueryOutcomesChart({
 
   if (error)
     return (
-      <section className="flex h-[267px] min-w-0 flex-col gap-2 pt-6">
+      <section className="flex h-66.75 min-w-0 flex-col gap-2 pt-6">
         <div className="flex h-6 items-center">
           <h2 className="system-sm-semibold-uppercase text-text-secondary">
             {t(($) => $['newKnowledge.overview.queryOutcomes'])}
           </h2>
         </div>
-        <Panel className="flex h-[211px] border border-components-panel-border p-4 shadow-none">
+        <Panel className="flex h-52.75 border border-components-panel-border p-4 shadow-none">
           <OverviewErrorInline />
         </Panel>
       </section>
@@ -300,7 +300,7 @@ function QueryOutcomesChart({
 
   if (empty)
     return (
-      <section className="flex h-[267px] min-w-0 flex-col gap-2 pt-6">
+      <section className="flex h-66.75 min-w-0 flex-col gap-2 pt-6">
         <div className="flex h-6 items-center">
           <h2 className="system-sm-semibold-uppercase text-text-secondary">
             {t(($) => $['newKnowledge.overview.queryOutcomes'])}
@@ -313,7 +313,7 @@ function QueryOutcomesChart({
             </Infotip>
           </h2>
         </div>
-        <Panel className="flex h-[211px] border border-components-panel-border p-4 shadow-none">
+        <Panel className="flex h-52.75 border border-components-panel-border p-4 shadow-none">
           <EmptyInline
             icon="i-ri-time-line"
             title={t(($) => $['newKnowledge.overview.noQueryData'])}
@@ -324,7 +324,7 @@ function QueryOutcomesChart({
     )
 
   return (
-    <section className="flex h-[373px] min-w-0 flex-col gap-2 pt-6">
+    <section className="flex h-93.25 min-w-0 flex-col gap-2 pt-6">
       <div className="flex h-6 items-center">
         <h2 className="system-sm-semibold-uppercase text-text-secondary">
           {t(($) => $['newKnowledge.overview.queryOutcomes'])}
@@ -337,9 +337,9 @@ function QueryOutcomesChart({
           </Infotip>
         </h2>
       </div>
-      <Panel className="flex h-[317px] flex-col overflow-hidden border border-divider-subtle p-4 shadow-none">
+      <Panel className="flex h-79.25 flex-col overflow-hidden border border-divider-subtle p-4 shadow-none">
         {loading ? (
-          <div className="space-y-[22px] pt-2">
+          <div className="space-y-5.5 pt-2">
             {[
               ['outcome-1', 100],
               ['outcome-2', 100],
@@ -399,7 +399,7 @@ function EmptyInline({
       </span>
       <div className="flex flex-col items-center gap-1">
         <p className="system-md-medium text-text-primary">{title}</p>
-        <p className="max-w-[400px] body-xs-regular text-text-tertiary">{description}</p>
+        <p className="max-w-100 body-xs-regular text-text-tertiary">{description}</p>
       </div>
     </div>
   )
@@ -487,11 +487,11 @@ function HealthPanel({
 
   if (error)
     return (
-      <section className="flex h-[267px] min-w-0 flex-col gap-2 pt-6">
+      <section className="flex h-66.75 min-w-0 flex-col gap-2 pt-6">
         <h2 className="text-[15px] leading-6 font-medium text-text-secondary">
           {t(($) => $['newKnowledge.overview.needsAttention'])}
         </h2>
-        <Panel className="flex h-[211px] border border-components-panel-border p-4 shadow-none">
+        <Panel className="flex h-52.75 border border-components-panel-border p-4 shadow-none">
           <OverviewErrorInline />
         </Panel>
       </section>
@@ -499,11 +499,11 @@ function HealthPanel({
 
   if (empty)
     return (
-      <section className="flex h-[267px] min-w-0 flex-col gap-2 pt-6">
+      <section className="flex h-66.75 min-w-0 flex-col gap-2 pt-6">
         <h2 className="text-[15px] leading-6 font-medium text-text-secondary">
           {t(($) => $['newKnowledge.overview.needsAttention'])}
         </h2>
-        <Panel className="flex h-[211px] border border-components-panel-border p-4 shadow-none">
+        <Panel className="flex h-52.75 border border-components-panel-border p-4 shadow-none">
           <EmptyInline
             positive
             icon="i-ri-thumb-up-line"
@@ -515,15 +515,15 @@ function HealthPanel({
     )
 
   return (
-    <section className="flex h-[373px] min-w-0 flex-col gap-2 pt-6">
+    <section className="flex h-93.25 min-w-0 flex-col gap-2 pt-6">
       <div className="flex h-6 items-center">
         <h2 className="text-[15px] leading-6 font-medium text-text-secondary">
           {t(($) => $['newKnowledge.overview.needsAttention'])}
         </h2>
       </div>
-      <Panel className="flex h-[317px] flex-col overflow-hidden border border-divider-subtle px-4 py-3 shadow-none">
+      <Panel className="flex h-79.25 flex-col overflow-hidden border border-divider-subtle px-4 py-3 shadow-none">
         {loading ? (
-          <div className="space-y-[27px] pt-4">
+          <div className="space-y-6.75 pt-4">
             {[
               ['attention-1', 100],
               ['attention-2', 100],
@@ -574,7 +574,7 @@ function HealthPanel({
                 </li>
               ))}
             </ul>
-            <div className="flex h-[53px] shrink-0 items-end justify-end border-t border-divider-subtle pb-1">
+            <div className="flex h-13.25 shrink-0 items-end justify-end border-t border-divider-subtle pb-1">
               <div className="flex h-8 items-center rounded-lg border border-divider-subtle p-0.5">
                 <button
                   type="button"
@@ -676,7 +676,7 @@ function RecentActivity({
         <h2 className="system-md-medium text-text-secondary">
           {t(($) => $['newKnowledge.overview.recentActivity'])}
         </h2>
-        <Panel className="flex h-[200px] border border-components-panel-border p-4 shadow-none">
+        <Panel className="flex h-50 border border-components-panel-border p-4 shadow-none">
           <div
             role="alert"
             className="flex min-h-0 flex-1 flex-col items-center justify-center text-center"
@@ -701,16 +701,14 @@ function RecentActivity({
 
   if (empty)
     return (
-      <section
-        className={cn('flex min-w-0 flex-col gap-2 pt-6', indexing ? 'h-[267px]' : 'h-[252px]')}
-      >
+      <section className={cn('flex min-w-0 flex-col gap-2 pt-6', indexing ? 'h-66.75' : 'h-63')}>
         <h2 className="system-md-medium text-text-secondary">
           {t(($) => $['newKnowledge.overview.recentActivity'])}
         </h2>
         <Panel
           className={cn(
             'flex border border-components-panel-border p-4 shadow-none',
-            indexing ? 'h-[215px]' : 'h-[200px]',
+            indexing ? 'h-53.75' : 'h-50',
           )}
         >
           <EmptyInline
@@ -740,9 +738,9 @@ function RecentActivity({
           {t(($) => $['newKnowledge.overview.allActivity'])}
         </Button>
       </header>
-      <Panel className="flex h-[254px] flex-col overflow-hidden border border-divider-subtle px-4 pt-4 pb-3 shadow-none">
+      <Panel className="flex h-63.5 flex-col overflow-hidden border border-divider-subtle px-4 pt-4 pb-3 shadow-none">
         {loading ? (
-          <div className="flex flex-col gap-[25px] pt-10">
+          <div className="flex flex-col gap-6.25 pt-10">
             {[
               ['activity-1', 100],
               ['activity-2', 100],
@@ -757,7 +755,7 @@ function RecentActivity({
           <div
             role="table"
             aria-label={t(($) => $['newKnowledge.overview.recentActivity'])}
-            className="min-w-[560px]"
+            className="min-w-140"
           >
             <div
               role="row"
@@ -893,7 +891,7 @@ function ActivityDrawer({
       <DrawerPortal>
         <DrawerBackdrop />
         <DrawerViewport>
-          <DrawerPopup className="data-[swipe-direction=right]:w-[480px] data-[swipe-direction=right]:max-w-[calc(100vw-1rem)]">
+          <DrawerPopup className="data-[swipe-direction=right]:w-120 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)]">
             <DrawerContent className="flex min-h-0 flex-1 flex-col bg-components-panel-bg p-0 pb-0">
               <header className="flex h-16 shrink-0 items-center px-5">
                 <div className="flex w-full items-center justify-between gap-3">
@@ -928,11 +926,11 @@ function ActivityDrawer({
                     <Skeleton className="ml-5 h-3 w-14" />
                     <div className="mt-2 space-y-0">
                       {[248, 300, 210, 280, 236, 264].map((width) => (
-                        <div key={width} className="flex h-[54px] items-center px-5">
+                        <div key={width} className="flex h-13.5 items-center px-5">
                           <Skeleton className="size-6 shrink-0 rounded-full" />
                           <div className="ml-3 min-w-0 flex-1">
                             <Skeleton className="h-3" style={{ width }} />
-                            <Skeleton className="mt-1.5 h-2.5 w-[148px]" />
+                            <Skeleton className="mt-1.5 h-2.5 w-37" />
                           </div>
                           <Skeleton className="h-2.5 w-10" />
                         </div>
@@ -950,7 +948,7 @@ function ActivityDrawer({
                           {group.map((task) => (
                             <li
                               key={task.id}
-                              className="flex min-h-[54px] items-start gap-3 px-5 py-2.5"
+                              className="flex min-h-13.5 items-start gap-3 px-5 py-2.5"
                             >
                               <span className="system-2xs-semibold flex size-6 shrink-0 items-center justify-center rounded-full bg-util-colors-gray-gray-300 text-text-secondary">
                                 S
@@ -990,7 +988,7 @@ function ActivityDrawer({
                     </div>
                   </>
                 ) : (
-                  <div className="flex h-[289px] flex-col items-center justify-end pb-0 text-center">
+                  <div className="flex h-72.25 flex-col items-center justify-end pb-0 text-center">
                     <span className="flex size-11 items-center justify-center rounded-xl bg-background-section text-text-tertiary">
                       <span aria-hidden className="i-ri-search-line size-5" />
                     </span>
@@ -1076,11 +1074,11 @@ function InventoryPanel({
 
   if (error)
     return (
-      <section className="flex h-[275px] min-w-0 flex-col gap-2 pt-6">
+      <section className="flex h-68.75 min-w-0 flex-col gap-2 pt-6">
         <h2 className="text-[15px] leading-6 font-medium text-text-secondary">
           {t(($) => $['newKnowledge.overview.inventory'])}
         </h2>
-        <Panel className="flex h-[219px] border border-components-panel-border p-4 shadow-none">
+        <Panel className="flex h-54.75 border border-components-panel-border p-4 shadow-none">
           <OverviewErrorInline />
         </Panel>
       </section>
@@ -1088,16 +1086,14 @@ function InventoryPanel({
 
   if (empty)
     return (
-      <section
-        className={cn('flex min-w-0 flex-col gap-2 pt-6', indexing ? 'h-[261px]' : 'h-[275px]')}
-      >
+      <section className={cn('flex min-w-0 flex-col gap-2 pt-6', indexing ? 'h-65.25' : 'h-68.75')}>
         <h2 className="text-[15px] leading-6 font-medium text-text-secondary">
           {t(($) => $['newKnowledge.overview.inventory'])}
         </h2>
         <Panel
           className={cn(
             'flex border border-components-panel-border p-4 shadow-none',
-            indexing ? 'h-[205px]' : 'h-[219px]',
+            indexing ? 'h-51.25' : 'h-54.75',
           )}
         >
           <EmptyInline
@@ -1122,7 +1118,7 @@ function InventoryPanel({
       <h2 className="flex h-6 items-center text-[16px] leading-6 font-medium text-text-secondary">
         {t(($) => $['newKnowledge.overview.inventory'])}
       </h2>
-      <Panel className="h-[180px] overflow-hidden border border-divider-subtle p-4 shadow-none">
+      <Panel className="h-45 overflow-hidden border border-divider-subtle p-4 shadow-none">
         {loading ? (
           <>
             <Skeleton className="h-6 w-full" />
@@ -1190,7 +1186,7 @@ function InventoryPanel({
                   className="flex h-20 flex-col gap-1 rounded-lg bg-background-section p-3"
                 >
                   <p className="system-2xs-medium text-text-tertiary">{item.label}</p>
-                  <p className="text-[18px] leading-[20px] font-semibold text-text-primary">
+                  <p className="text-[18px] leading-5 font-semibold text-text-primary">
                     {item.value}
                   </p>
                   <p className="system-2xs-regular text-text-tertiary">{item.detail}</p>
@@ -1227,7 +1223,7 @@ function Onboarding({
 
   if (indexingTask)
     return (
-      <section className="flex h-[119px] flex-col rounded-xl bg-background-section p-4">
+      <section className="flex h-29.75 flex-col rounded-xl bg-background-section p-4">
         <h2 className="text-[18px] leading-6 font-semibold text-text-primary">
           {t(($) => $['newKnowledge.overview.indexing'])}
         </h2>
@@ -1255,7 +1251,7 @@ function Onboarding({
     <section
       className={cn(
         'h-auto min-w-0 rounded-xl bg-background-section p-4',
-        actionCount > 0 && 'md:h-[219px]',
+        actionCount > 0 && 'md:h-54.75',
       )}
     >
       <div aria-hidden className="flex h-4 items-center gap-1.5 text-text-tertiary">
@@ -1266,7 +1262,7 @@ function Onboarding({
         <span className="i-ri-links-line size-4" />
         <span className="i-ri-more-fill size-4" />
       </div>
-      <div className="mt-3 h-[42px]">
+      <div className="mt-3 h-10.5">
         <h2 className="title-2xl-semi-bold text-text-primary">
           {t(($) => $['newKnowledge.overview.noSources'])}
         </h2>
@@ -1279,7 +1275,7 @@ function Onboarding({
           {canConnectSource && (
             <Link
               aria-label={t(($) => $['newKnowledge.overview.connectSource'])}
-              className="flex h-[105px] flex-col items-center justify-center rounded-[10px] border border-divider-regular bg-components-panel-on-panel-item-bg text-center outline-hidden transition-colors hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
+              className="flex h-26.25 flex-col items-center justify-center rounded-[10px] border border-divider-regular bg-components-panel-on-panel-item-bg text-center outline-hidden transition-colors hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
               href={newKnowledgeAddSourcePath(knowledgeSpaceId)}
             >
               <span aria-hidden className="i-ri-node-tree size-6 text-text-accent" />
@@ -1294,7 +1290,7 @@ function Onboarding({
           {canUpload && (
             <Link
               aria-label={t(($) => $['newKnowledge.overview.uploadFiles'])}
-              className="flex h-[105px] flex-col items-center justify-center rounded-[10px] border border-divider-regular bg-components-panel-on-panel-item-bg text-center outline-hidden transition-colors hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
+              className="flex h-26.25 flex-col items-center justify-center rounded-[10px] border border-divider-regular bg-components-panel-on-panel-item-bg text-center outline-hidden transition-colors hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
               href={`${newKnowledgeDocumentsPath(knowledgeSpaceId)}?upload=1`}
             >
               <span aria-hidden className="i-ri-file-text-line size-6 text-text-accent" />
@@ -1434,7 +1430,7 @@ export function KnowledgeOverviewPage({ knowledgeSpaceId }: { knowledgeSpaceId:
 
   return (
     <main className="min-h-0 min-w-0 flex-1 overflow-y-auto bg-components-panel-bg">
-      <div className="mx-auto w-full max-w-[1328px] px-5 py-6 sm:px-8">
+      <div className="mx-auto w-full max-w-332 px-5 py-6 sm:px-8">
         <header className="flex flex-wrap items-center justify-between gap-3">
           <h1 className="title-2xl-semi-bold text-text-primary">
             {t(($) => $['newKnowledge.overviewTitle'])}
@@ -1451,7 +1447,7 @@ export function KnowledgeOverviewPage({ knowledgeSpaceId }: { knowledgeSpaceId:
               {WINDOWS.map((value) => (
                 <SegmentedControlItem<OverviewWindow>
                   key={value}
-                  className="h-[26px] px-3 system-xs-medium"
+                  className="h-6.5 px-3 system-xs-medium"
                   value={value}
                 >
                   {value === '24h'
@@ -1557,7 +1553,7 @@ export function KnowledgeOverviewPage({ knowledgeSpaceId }: { knowledgeSpaceId:
         <div
           className={cn(
             'grid lg:grid-cols-2',
-            showIndexing ? 'mt-[18px] gap-2.5' : showEmptyModules ? 'mt-2 gap-2.5' : 'mt-2 gap-3',
+            showIndexing ? 'mt-4.5 gap-2.5' : showEmptyModules ? 'mt-2 gap-2.5' : 'mt-2 gap-3',
           )}
         >
           <HealthPanel
diff --git a/web/features/new-rag/processing-tasks-drawer.tsx b/web/features/new-rag/processing-tasks-drawer.tsx
index c85a6b7ecd0..be3a4fc9ba4 100644
--- a/web/features/new-rag/processing-tasks-drawer.tsx
+++ b/web/features/new-rag/processing-tasks-drawer.tsx
@@ -413,7 +413,7 @@ export function ProcessingTasksDrawer({
                   <DrawerCloseButton
                     ref={drawerCloseButtonRef}
                     aria-label={tCommon(($) => $['operation.close'])}
-                    className="size-[26px] rounded-md"
+                    className="size-6.5 rounded-md"
                   />
                 </div>
                 <DrawerDescription className="mt-1 system-xs-regular text-text-tertiary">
@@ -544,7 +544,7 @@ export function ProcessingTasksDrawer({
                             <p className="truncate system-sm-medium text-text-primary">
                               {t(($) => $['newKnowledge.processDocument'], { name: title })}
                             </p>
-                            <p className="mt-[3px] truncate system-xs-regular text-text-tertiary">
+                            <p className="mt-0.75 truncate system-xs-regular text-text-tertiary">
                               {t(($) => $[`newKnowledge.processingTaskState.${task.state}`], {
                                 progress: task.progressPercent,
                               })}
diff --git a/web/features/new-rag/quality/golden-question-dialog.tsx b/web/features/new-rag/quality/golden-question-dialog.tsx
index fd69759b79b..cb36d165852 100644
--- a/web/features/new-rag/quality/golden-question-dialog.tsx
+++ b/web/features/new-rag/quality/golden-question-dialog.tsx
@@ -72,7 +72,7 @@ export function GoldenQuestionDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogPortal>
         <DialogBackdrop className="bg-[rgba(16,24,40,0.2)]" />
-        <DialogPopup className="fixed top-1/2 left-1/2 w-[560px] max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl border-0 p-6 shadow-xl">
+        <DialogPopup className="fixed top-1/2 left-1/2 w-140 max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl border-0 p-6 shadow-xl">
           <form className="flex flex-col gap-5" onSubmit={handleSubmit}>
             <div className="flex items-center justify-between">
               <DialogTitle className="system-md-semibold text-text-primary">{title}</DialogTitle>
@@ -88,7 +88,7 @@ export function GoldenQuestionDialog({
               </FieldLabel>
               <Textarea
                 aria-invalid={questionInvalid}
-                className="h-[88px] resize-y"
+                className="h-22 resize-y"
                 placeholder={t(($) => $['newKnowledge.qualityPage.questionPlaceholder'])}
                 value={question}
                 onValueChange={setQuestion}
diff --git a/web/features/new-rag/quality/quality-page.tsx b/web/features/new-rag/quality/quality-page.tsx
index de68f6a9d31..6ac2df83699 100644
--- a/web/features/new-rag/quality/quality-page.tsx
+++ b/web/features/new-rag/quality/quality-page.tsx
@@ -69,7 +69,7 @@ function RowMenuTrigger({ disabled, label }: { disabled?: boolean; label: string
       disabled={disabled}
       className="ml-auto flex size-7 items-center justify-center rounded-md text-text-tertiary outline-hidden hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid disabled:cursor-not-allowed disabled:text-text-disabled"
     >
-      <span aria-hidden className="i-ri-more-fill size-[18px]" />
+      <span aria-hidden className="i-ri-more-fill size-4.5" />
     </DropdownMenuTrigger>
   )
 }
@@ -362,14 +362,14 @@ export function QualityPage({ knowledgeSpaceId }: { knowledgeSpaceId: string })
 
   if (goldenQuery.isLoading || badCaseQuery.isLoading)
     return (
-      <div className="flex min-h-[420px] items-center justify-center">
+      <div className="flex min-h-105 items-center justify-center">
         <Loading />
       </div>
     )
 
   if (goldenQuery.isError || badCaseQuery.isError)
     return (
-      <div className="flex min-h-[420px] flex-col items-center justify-center gap-3 text-center">
+      <div className="flex min-h-105 flex-col items-center justify-center gap-3 text-center">
         <span aria-hidden className="i-ri-error-warning-line size-8 text-text-warning" />
         <p role="alert" className="system-sm-medium text-text-primary">
           {t(($) => $.unknownError)}
@@ -455,7 +455,7 @@ export function QualityPage({ knowledgeSpaceId }: { knowledgeSpaceId: string })
 
       {activeTab === 'golden' &&
         (goldenQuestions.length ? (
-          <div className="mt-3 min-w-[1192px]">
+          <div className="mt-3 min-w-298">
             <div className="grid h-8 grid-cols-[16px_466px_180px_280px_110px_80px] items-center gap-3 system-2xs-medium-uppercase text-text-tertiary">
               <Checkbox
                 aria-label={t(($) => $['newKnowledge.qualityPage.selectAll'])}
@@ -498,7 +498,7 @@ export function QualityPage({ knowledgeSpaceId }: { knowledgeSpaceId: string })
                   <TooltipTrigger className="block min-w-0 truncate text-left system-xs-regular text-text-secondary">
                     {item.annotation}
                   </TooltipTrigger>
-                  <TooltipContent className="max-w-[268px]">{item.annotation}</TooltipContent>
+                  <TooltipContent className="max-w-67">{item.annotation}</TooltipContent>
                 </Tooltip>
                 <span className="system-xs-regular text-text-secondary">
                   {updated(item.updated_at)}
@@ -558,12 +558,12 @@ export function QualityPage({ knowledgeSpaceId }: { knowledgeSpaceId: string })
             )}
           </div>
         ) : (
-          <div className="flex min-h-[420px] flex-col items-center justify-center text-center">
+          <div className="flex min-h-105 flex-col items-center justify-center text-center">
             <span aria-hidden className="i-ri-star-line size-8 text-text-tertiary" />
             <h2 className="mt-4 system-md-semibold text-text-primary">
               {t(($) => $['newKnowledge.qualityPage.goldenEmptyTitle'])}
             </h2>
-            <p className="mt-1 max-w-[420px] system-xs-regular text-text-tertiary">
+            <p className="mt-1 max-w-105 system-xs-regular text-text-tertiary">
               {t(($) => $['newKnowledge.qualityPage.goldenEmptyDescription'])}
             </p>
             <Button
@@ -581,7 +581,7 @@ export function QualityPage({ knowledgeSpaceId }: { knowledgeSpaceId: string })
 
       {activeTab === 'bad' &&
         (badCases.length ? (
-          <div className="mt-3 min-w-[1192px]">
+          <div className="mt-3 min-w-298">
             <div className="grid h-8 grid-cols-[624px_140px_180px_120px_80px] items-center gap-3 system-2xs-medium-uppercase text-text-tertiary">
               <span>{t(($) => $['newKnowledge.qualityPage.question'])}</span>
               <span>{t(($) => $['newKnowledge.qualityPage.statusLabel'])}</span>
@@ -689,12 +689,12 @@ export function QualityPage({ knowledgeSpaceId }: { knowledgeSpaceId: string })
             )}
           </div>
         ) : (
-          <div className="flex min-h-[420px] flex-col items-center justify-center text-center">
+          <div className="flex min-h-105 flex-col items-center justify-center text-center">
             <span aria-hidden className="i-ri-checkbox-circle-line size-8 text-text-tertiary" />
             <h2 className="mt-4 system-md-semibold text-text-primary">
               {t(($) => $['newKnowledge.qualityPage.badCasesEmptyTitle'])}
             </h2>
-            <p className="mt-1 max-w-[480px] system-xs-regular text-text-tertiary">
+            <p className="mt-1 max-w-120 system-xs-regular text-text-tertiary">
               {t(($) => $['newKnowledge.qualityPage.badCasesEmptyDescription'])}
             </p>
             {badCaseQuery.hasNextPage && (
diff --git a/web/features/new-rag/retrieval-test-page.tsx b/web/features/new-rag/retrieval-test-page.tsx
index 8ffde0415b5..237655ae74d 100644
--- a/web/features/new-rag/retrieval-test-page.tsx
+++ b/web/features/new-rag/retrieval-test-page.tsx
@@ -359,7 +359,7 @@ function ResearchProcess({
                     <span
                       aria-hidden
                       className={cn(
-                        'absolute top-5 left-[7px] h-6 w-px',
+                        'absolute top-5 left-1.75 h-6 w-px',
                         completed ? 'bg-util-colors-blue-blue-500' : 'bg-divider-regular',
                       )}
                     />
@@ -745,7 +745,7 @@ export function RetrievalTestPage({ knowledgeSpaceId }: { knowledgeSpaceId: stri
       </header>
 
       <div className="flex min-h-0 min-w-0 flex-1 flex-col lg:flex-row">
-        <section className="flex min-h-0 w-full shrink-0 flex-col border-b border-divider-subtle lg:w-[468px] lg:border-r lg:border-b-0">
+        <section className="flex min-h-0 w-full shrink-0 flex-col border-b border-divider-subtle lg:w-117 lg:border-r lg:border-b-0">
           <div className="shrink-0 p-4 pr-6">
             <div className="overflow-hidden rounded-xl border border-components-input-border-active bg-components-input-bg-active shadow-xs">
               <label className="sr-only" htmlFor="retrieval-test-query">
diff --git a/web/features/new-rag/website-crawl-preview.tsx b/web/features/new-rag/website-crawl-preview.tsx
index abc9e41d6f7..a065758cfb6 100644
--- a/web/features/new-rag/website-crawl-preview.tsx
+++ b/web/features/new-rag/website-crawl-preview.tsx
@@ -341,7 +341,7 @@ const CrawlPageList = memo(
 function EmptyPreview() {
   const { t } = useTranslation('dataset')
   return (
-    <div className="flex min-h-[155px] flex-col items-center justify-center rounded-xl border border-dashed border-divider-regular bg-background-default-subtle px-6 text-center">
+    <div className="flex min-h-38.75 flex-col items-center justify-center rounded-xl border border-dashed border-divider-regular bg-background-default-subtle px-6 text-center">
       <span className="flex size-10 items-center justify-center rounded-[10px] bg-background-section-burn">
         <span aria-hidden className="i-ri-global-line size-5 text-text-tertiary" />
       </span>
@@ -1342,7 +1342,7 @@ export function WebsiteCrawlPreview({
         {showFailure && (
           <div
             role="alert"
-            className="flex min-h-[155px] flex-col items-center justify-center gap-2.5 rounded-xl border border-divider-deep bg-background-default-subtle px-6 py-7 text-center"
+            className="flex min-h-38.75 flex-col items-center justify-center gap-2.5 rounded-xl border border-divider-deep bg-background-default-subtle px-6 py-7 text-center"
           >
             <span aria-hidden className="i-ri-error-warning-fill size-6 text-text-destructive" />
             <p className="system-sm-semibold text-text-primary">
@@ -1367,10 +1367,10 @@ export function WebsiteCrawlPreview({
           <div
             role="status"
             aria-live="polite"
-            className="flex min-h-[155px] flex-col items-center justify-center gap-2.5 rounded-xl border border-divider-deep bg-background-default-subtle px-6 py-7 text-center"
+            className="flex min-h-38.75 flex-col items-center justify-center gap-2.5 rounded-xl border border-divider-deep bg-background-default-subtle px-6 py-7 text-center"
           >
             <span className="flex size-11 items-center justify-center rounded-[10px] bg-background-section-burn">
-              <span aria-hidden className="i-ri-global-line size-[22px] text-text-tertiary" />
+              <span aria-hidden className="i-ri-global-line size-5.5 text-text-tertiary" />
             </span>
             <p className="system-sm-semibold text-text-primary">
               {t(($) => $['newKnowledge.noPagesFound'], { host })}