diff --git a/apps/web/i18n b/apps/web/i18n
index 737b1a91..ac3bad87 160000
--- a/apps/web/i18n
+++ b/apps/web/i18n
@@ -1 +1 @@
-Subproject commit 737b1a9190679e1c37ff3d92ec93912e23c420a6
+Subproject commit ac3bad874065576418b3bfd084a16c98f0ac4ad9
diff --git a/apps/web/src/common/components/Tab.tsx b/apps/web/src/common/components/Tab.tsx
index c05c9a48..497da27a 100644
--- a/apps/web/src/common/components/Tab.tsx
+++ b/apps/web/src/common/components/Tab.tsx
@@ -1,8 +1,15 @@
 import React from 'react';
 import classnames from 'classnames';
+import Tooltip from '@common/components/Tooltip';
 
 const Tab: React.FC<{
-  options: { value: string; label: string; disable?: boolean }[];
+  options: {
+    value: string;
+    label: string;
+    disable?: boolean;
+    tabCls?: string;
+    tooltip?: string;
+  }[];
   value: string;
   onChange: (v: string) => void;
 }> = ({ options, value, onChange }) => (
@@ -14,12 +21,15 @@ const Tab: React.FC<{
             key={option.label}
             className={classnames(
               'text-steel cursor-pointer  px-3 py-1 text-sm ',
+              option?.tabCls,
               { 'rounded bg-white text-black shadow': option.value === value },
               { 'cursor-not-allowed text-[#ABABAB]': option.disable === true }
             )}
             onClick={() => !option.disable && onChange(option.value)}
           >
-            {option.label}
+            <Tooltip arrow title={option.tooltip} placement="right">
+              <div>{option.label}</div>
+            </Tooltip>
           </div>
         );
       })}
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricChart.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricChart.tsx
index 691e15af..c54b40b6 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricChart.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricChart.tsx
@@ -74,10 +74,7 @@ const MetricChart: React.FC<ReactEChartsProps> = ({
   const onResize = useCallback((width?: number, height?: number) => {
     if (chartRef.current !== null) {
       const chart = getInstanceByDom(chartRef.current)!;
-      chart?.resize({
-        width: 'auto',
-        height: Number(height) > 650 ? 650 : 350,
-      });
+      chart?.resize();
     }
   }, []);
 
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributionCount.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributionCount.tsx
new file mode 100644
index 00000000..ba4a0cfc
--- /dev/null
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributionCount.tsx
@@ -0,0 +1,31 @@
+import React, { useRef, useMemo } from 'react';
+import ContributorContribution from './ContributorContribution';
+import ContributorOrganizations from './ContributorOrganizations';
+
+const ContributionCount: React.FC<{
+  label: string;
+  level: string;
+  beginDate: Date;
+  endDate: Date;
+  mileage: string[];
+}> = ({ label, level, beginDate, endDate, mileage }) => {
+  return (
+    <div className="flex lg:flex-col">
+      <ContributorContribution
+        label={label}
+        level={level}
+        beginDate={beginDate}
+        endDate={endDate}
+        mileage={mileage}
+      />
+      <ContributorOrganizations
+        label={label}
+        level={level}
+        beginDate={beginDate}
+        endDate={endDate}
+        mileage={mileage}
+      />
+    </div>
+  );
+};
+export default ContributionCount;
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx
index 8dce2c2d..6a5e4a31 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx
@@ -63,28 +63,34 @@ const ContributorContribution: React.FC<{
       contributorsData,
     };
   }, [data]);
-
+  const unit: string = t('analyze:metric_detail:contribution_unit');
+  const formatter = '{b} : {c}' + unit + ' ({d}%)';
   const option: EChartsOption = {
     tooltip: {
       trigger: 'item',
-      formatter: '{b}: {c} ({d}%)',
+      formatter: formatter,
     },
     legend: {
-      top: '2%',
+      top: 40,
       left: 'center',
       data: getSeries.legend,
     },
+    title: {
+      text: t('analyze:metric_detail:global_contribution_distribution'),
+      left: 'center',
+    },
     series: [
       {
+        top: 15,
         name: '生态类型',
         type: 'pie',
         selectedMode: 'single',
-        radius: [0, '45%'],
+        radius: [0, '40%'],
         label: {
           position: 'inner',
           fontSize: 12,
           color: '#333',
-          formatter: '{b}: {c} ({d}%)',
+          formatter: formatter,
         },
         labelLine: {
           show: false,
@@ -96,14 +102,15 @@ const ContributorContribution: React.FC<{
         data: getSeries.ecoData,
       },
       {
+        top: 15,
         name: '贡献者',
         type: 'pie',
-        radius: ['55%', '67%'],
+        radius: ['50%', '62%'],
         labelLine: {
           length: 30,
         },
         label: {
-          formatter: '{b}: {c} ({d}%)',
+          formatter: formatter,
           color: '#333',
         },
         data: getSeries.contributorsData,
@@ -112,7 +119,7 @@ const ContributorContribution: React.FC<{
   };
 
   return (
-    <div className="flex-1 pt-4" ref={chartRef}>
+    <div className="h-[600px] w-[50%] flex-1 pt-4" ref={chartRef}>
       <MetricChart
         style={{ height: '100%' }}
         loading={isLoading}
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorOrganizations.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorOrganizations.tsx
index 078eefe8..ce9651eb 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorOrganizations.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorOrganizations.tsx
@@ -28,29 +28,31 @@ const ContributorContribution: React.FC<{
     const contributorsData = [];
     if (data?.orgContributorsOverview?.length > 0) {
       const ecoContributorsOverview = data.orgContributorsOverview;
-      ecoContributorsOverview.forEach((item, i) => {
-        const { subTypeName, topContributorDistribution } = item;
-        const colorList = gradientRamp[i];
-        let count = 0;
-        topContributorDistribution.forEach(({ subCount, subName }, index) => {
-          count += subCount;
-          contributorsData.push({
-            parentName: subTypeName,
-            name: subName,
-            value: subCount,
-            itemStyle: { color: colorList[index + 1] },
+      ecoContributorsOverview
+        .filter((item) => item.subTypeName)
+        .forEach((item, i) => {
+          const { subTypeName, topContributorDistribution } = item;
+          const colorList = gradientRamp[i];
+          let count = 0;
+          topContributorDistribution.forEach(({ subCount, subName }, index) => {
+            count += subCount;
+            contributorsData.push({
+              parentName: subTypeName,
+              name: subName,
+              value: subCount,
+              itemStyle: { color: colorList[index + 1] },
+            });
+          });
+          legend.push({
+            name: subTypeName,
+            itemStyle: { color: colorList[0] },
+          });
+          ecoData.push({
+            name: subTypeName,
+            value: count,
+            itemStyle: { color: colorList[0] },
           });
         });
-        legend.push({
-          name: subTypeName,
-          itemStyle: { color: colorList[0] },
-        });
-        ecoData.push({
-          name: subTypeName,
-          value: count,
-          itemStyle: { color: colorList[0] },
-        });
-      });
     }
     return {
       legend,
@@ -58,28 +60,34 @@ const ContributorContribution: React.FC<{
       contributorsData,
     };
   }, [data]);
-
+  const unit: string = t('analyze:metric_detail:contribution_unit');
+  const formatter = '{b} : {c}' + unit + ' ({d}%)';
   const option: EChartsOption = {
     tooltip: {
       trigger: 'item',
-      formatter: '{b}: {c} ({d}%)',
+      formatter: formatter,
     },
     legend: {
-      top: '2%',
+      top: 40,
       left: 'center',
       data: getSeries.legend,
     },
+    title: {
+      text: t('analyze:metric_detail:organization_contribution_distribution'),
+      left: 'center',
+    },
     series: [
       {
+        top: 15,
         name: '生态类型',
         type: 'pie',
         selectedMode: 'single',
-        radius: [0, '45%'],
+        radius: [0, '40%'],
         label: {
           position: 'inner',
           fontSize: 12,
           color: '#333',
-          formatter: '{b}: {c} ({d}%)',
+          formatter: formatter,
         },
         labelLine: {
           show: false,
@@ -91,14 +99,15 @@ const ContributorContribution: React.FC<{
         data: getSeries.ecoData,
       },
       {
+        top: 15,
         name: '贡献者',
         type: 'pie',
-        radius: ['55%', '67%'],
+        radius: ['50%', '62%'],
         labelLine: {
           length: 30,
         },
         label: {
-          formatter: '{b}: {c} ({d}%)',
+          formatter: formatter,
           color: '#333',
         },
         data: getSeries.contributorsData,
@@ -107,7 +116,7 @@ const ContributorContribution: React.FC<{
   };
 
   return (
-    <div className="flex-1 pt-4" ref={chartRef}>
+    <div className="h-[600px] w-[50%] flex-1 pt-4" ref={chartRef}>
       <MetricChart
         style={{ height: '100%' }}
         loading={isLoading}
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable.tsx
index 77bfbe70..2b936b7a 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable.tsx
@@ -141,18 +141,18 @@ const MetricTable: React.FC<{
     {
       title: t('analyze:metric_detail:contributor'),
       dataIndex: 'contributor',
-      align: 'center',
+      align: 'left',
       width: '200px',
       sorter: true,
     },
     {
       title: t('analyze:metric_detail:role_persona'),
       dataIndex: 'ecologicalType',
-      align: 'center',
+      align: 'left',
       width: '200px',
       filters: ecologicalOptions,
       render: (text) => {
-        return ecologicalOptions.find((i) => i.value === text).text;
+        return ecologicalOptions.find((i) => i.value === text)?.text || text;
       },
     },
 
@@ -160,9 +160,9 @@ const MetricTable: React.FC<{
       title: t('analyze:metric_detail:milestone_persona'),
       dataIndex: 'mileageType',
       render: (text) => {
-        return mileageOptions.find((i) => i.value === text).label;
+        return mileageOptions.find((i) => i.value === text)?.label || text;
       },
-      align: 'center',
+      align: 'left',
       width: '200px',
     },
     {
@@ -194,13 +194,13 @@ const MetricTable: React.FC<{
       },
       filters: useContributionTypeLsit(),
       filterMode: 'tree',
-      align: 'center',
+      align: 'left',
       width: '220px',
     },
     {
       title: t('analyze:metric_detail:organization'),
       dataIndex: 'organization',
-      align: 'center',
+      align: 'left',
       width: '160px',
     },
     {
@@ -218,7 +218,7 @@ const MetricTable: React.FC<{
           return contribution;
         }
       },
-      align: 'center',
+      align: 'left',
       width: '200px',
       sorter: true,
     },
@@ -231,8 +231,7 @@ const MetricTable: React.FC<{
       onChange={handleTableChange}
       pagination={tableParams.pagination}
       rowKey={'contributor'}
-      scroll={{ x: 'max-content', y: '100%' }}
-      className="h-[600px]"
+      scroll={{ x: 'max-content' }}
     />
   );
 };
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContributors.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/Contributors.tsx
similarity index 58%
rename from apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContributors.tsx
rename to apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/Contributors.tsx
index c3b39a6d..eaf94efb 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContributors.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/Contributors.tsx
@@ -4,7 +4,7 @@ import client from '@common/gqlClient';
 import { useTranslation } from 'next-i18next';
 import MetricChart from '@modules/analyze/DataView/MetricDetail/MetricChart';
 import { useEcologicalType } from './contribution';
-import type { EChartsOption } from 'echarts';
+import { getPieOption } from '@modules/analyze/DataView/MetricDetail/metricChartOption';
 
 const ContributorContributors: React.FC<{
   label: string;
@@ -34,61 +34,12 @@ const ContributorContributors: React.FC<{
       };
     });
   }, [data]);
-
-  const option: EChartsOption = {
-    tooltip: {
-      trigger: 'item',
-      formatter: '{b}: {c} ({d}%)',
-    },
-    color: [
-      // '#5470c6',
-      // '#91cc75',
-      // '#fac858',
-      // '#ee6666',
-      '#2ec7c9',
-      '#b6a2de',
-      '#5ab1ef',
-      '#ffb980',
-      '#d87a80',
-      '#8d98b3',
-      '#e5cf0d',
-      '#97b552',
-      '#95706d',
-      '#dc69aa',
-      '#07a2a4',
-      '#9a7fd1',
-      '#588dd5',
-      '#f5994e',
-      '#c05050',
-      '#59678c',
-      '#c9ab00',
-      '#7eb00a',
-      '#6f5553',
-      '#c14089',
-    ],
-    legend: {
-      top: '2%',
-      left: 'center',
-    },
-    series: [
-      {
-        name: '',
-        type: 'pie',
-        selectedMode: 'single',
-        radius: [0, '65%'],
-        label: {
-          position: 'inner',
-          fontSize: 14,
-          color: '#333',
-          formatter: '{b}: {c} ({d}%)',
-        },
-        data: getSeries,
-      },
-    ],
-  };
+  const unit: string = t('analyze:metric_detail:contributor_unit');
+  const formatter = '{b} : {c}' + unit + ' ({d}%)';
+  const option = getPieOption({ seriesData: getSeries, formatter });
 
   return (
-    <div className="flex-1 pt-4" ref={chartRef}>
+    <div className="h-[600px] pt-4" ref={chartRef}>
       <MetricChart
         style={{ height: '100%' }}
         loading={isLoading}
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/contribution.ts b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/contribution.ts
index a02ab1c6..a76e8366 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/contribution.ts
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/contribution.ts
@@ -155,7 +155,8 @@ export const useMileageOptions = () => {
 
   return [
     { label: t('analyze:metric_detail:core'), value: 'core' },
-    { label: t('analyze:metric_detail:regular'), value: 'guest' },
+    { label: t('analyze:metric_detail:regular'), value: 'regular' },
+    { label: t('analyze:metric_detail:guest'), value: 'guest' },
   ];
 };
 export const useEcologicalType = () => {
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/index.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/index.tsx
index 241eb773..02a1d9de 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/index.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/index.tsx
@@ -7,8 +7,8 @@ import { useTranslation } from 'next-i18next';
 import { useMileageOptions } from './contribution';
 import MetricTable from './ContributorTable';
 import ContributorContribution from './ContributorContribution';
-import ContributorOrganizations from './ContributorOrganizations';
-import ContributorContributors from './ContributorContributors';
+import ContributionCount from './ContributionCount';
+import ContributorContributors from './Contributors';
 import { AiOutlineQuestionCircle } from 'react-icons/ai';
 import Tooltip from '@common/components/Tooltip';
 import useLabelStatus from '@modules/analyze/hooks/useLabelStatus';
@@ -22,7 +22,7 @@ const MetricContributor = () => {
   const [tab, setTab] = useState('1');
   const { timeStart, timeEnd } = useQueryDateRange();
   const options = useMileageOptions();
-  const [mileage, setMileage] = useState<string[]>(['core', 'guest']);
+  const [mileage, setMileage] = useState<string[]>(['core', 'regular']);
   const onChange = (checkedValues: string[]) => {
     setMileage(checkedValues);
   };
@@ -42,7 +42,7 @@ const MetricContributor = () => {
     }
     case '2': {
       source = (
-        <ContributorContribution
+        <ContributionCount
           label={label}
           level={level}
           beginDate={timeStart}
@@ -53,18 +53,6 @@ const MetricContributor = () => {
       break;
     }
     case '3': {
-      source = (
-        <ContributorOrganizations
-          label={label}
-          level={level}
-          beginDate={timeStart}
-          endDate={timeEnd}
-          mileage={mileage}
-        />
-      );
-      break;
-    }
-    case '4': {
       source = (
         <ContributorContributors
           label={label}
@@ -84,7 +72,7 @@ const MetricContributor = () => {
     <BaseCard
       title={t('metrics_models:contributors_persona.metrics.contributor')}
       id={ContributorsPersona.Contributor}
-      bodyClass="h-[650px]"
+      bodyClass="h-[full]"
     >
       <div>
         <Tabs
@@ -108,7 +96,7 @@ const MetricContributor = () => {
               root: '!normal-case',
               selected: '!text-black !normal-case',
             }}
-            label={t('analyze:metric_detail:contribution')}
+            label={t('analyze:metric_detail:contribution_distribution')}
             value="2"
           />
           <Tab
@@ -117,20 +105,11 @@ const MetricContributor = () => {
               root: '!normal-case',
               selected: '!text-black !normal-case',
             }}
-            label={t('analyze:metric_detail:organization')}
+            label={t('analyze:metric_detail:contributor_distribution')}
             value="3"
           />
-          <Tab
-            disableRipple
-            classes={{
-              root: '!normal-case',
-              selected: '!text-black !normal-case',
-            }}
-            label={t('analyze:metric_detail:contributor')}
-            value="4"
-          />
         </Tabs>
-        <div className="absolute right-1 top-2.5 flex lg:hidden">
+        <div className="absolute right-1 top-2.5 flex md:hidden xl:-top-2.5">
           <span className="mr-2 flex items-center font-medium">
             {t('analyze:metric_detail:milestone_persona_filter')}
             <Tooltip
@@ -149,6 +128,12 @@ const MetricContributor = () => {
                     </span>
                     {t('analyze:metric_detail:regular_desc')}
                   </div>
+                  <div>
+                    <span className="font-xs font-semibold">
+                      {t('analyze:metric_detail:guest')} :
+                    </span>
+                    {t('analyze:metric_detail:guest_desc')}
+                  </div>
                 </>
               }
               placement="right"
@@ -161,12 +146,12 @@ const MetricContributor = () => {
           <span className="mr-2">:</span>
           <Checkbox.Group
             options={options}
-            defaultValue={['core', 'guest']}
+            defaultValue={['core', 'regular']}
             onChange={onChange}
           />
         </div>
 
-        <div className="mt-2 flex h-[600px] flex-1 flex-col">{source}</div>
+        <div className="mt-2 flex-1">{source}</div>
       </div>
     </BaseCard>
   );
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/IssueComments.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/IssueComments.tsx
index 3dfe820d..bedd126f 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/IssueComments.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/IssueComments.tsx
@@ -4,6 +4,7 @@ import client from '@common/gqlClient';
 import { useTranslation } from 'next-i18next';
 import MetricChart from '@modules/analyze/DataView/MetricDetail/MetricChart';
 import type { EChartsOption } from 'echarts';
+import { getPieOption } from '@modules/analyze/DataView/MetricDetail/metricChartOption';
 
 const IssueCompletion: React.FC<{
   label: string;
@@ -35,60 +36,10 @@ const IssueCompletion: React.FC<{
     }
   }, [data]);
 
-  const option: EChartsOption = {
-    tooltip: {
-      trigger: 'item',
-      formatter: '{b} : {c} ({d}%)',
-    },
-    color: [
-      // '#5470c6',
-      // '#91cc75',
-      // '#fac858',
-      // '#ee6666',
-      '#2ec7c9',
-      '#b6a2de',
-      '#5ab1ef',
-      '#ffb980',
-      '#d87a80',
-      '#8d98b3',
-      '#e5cf0d',
-      '#97b552',
-      '#95706d',
-      '#dc69aa',
-      '#07a2a4',
-      '#9a7fd1',
-      '#588dd5',
-      '#f5994e',
-      '#c05050',
-      '#59678c',
-      '#c9ab00',
-      '#7eb00a',
-      '#6f5553',
-      '#c14089',
-    ],
-    legend: {
-      top: '2%',
-      left: 'center',
-    },
-    series: [
-      {
-        name: '',
-        type: 'pie',
-        selectedMode: 'single',
-        radius: [0, '65%'],
-        label: {
-          position: 'inner',
-          fontSize: 14,
-          color: '#333',
-          formatter: '{b} : {c} ({d}%)',
-        },
-        data: getSeries,
-      },
-    ],
-  };
+  const option = getPieOption({ seriesData: getSeries });
 
   return (
-    <div className="flex-1 pt-4" ref={chartRef}>
+    <div className="h-[600px] pt-4" ref={chartRef}>
       <MetricChart
         loading={isLoading}
         option={option}
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/IssueCompletion.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/IssueCompletion.tsx
index 562de381..ec7ff6ba 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/IssueCompletion.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/IssueCompletion.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'next-i18next';
 import MetricChart from '@modules/analyze/DataView/MetricDetail/MetricChart';
 import type { EChartsOption } from 'echarts';
 import { useStateType } from './issue';
+import { getPieOption } from '@modules/analyze/DataView/MetricDetail/metricChartOption';
 
 const IssueCompletion: React.FC<{
   label: string;
@@ -38,60 +39,10 @@ const IssueCompletion: React.FC<{
     }
   }, [data]);
 
-  const option: EChartsOption = {
-    tooltip: {
-      trigger: 'item',
-      formatter: '{b}: {c} ({d}%)',
-    },
-    color: [
-      // '#5470c6',
-      // '#91cc75',
-      // '#fac858',
-      // '#ee6666',
-      '#2ec7c9',
-      '#b6a2de',
-      '#5ab1ef',
-      '#ffb980',
-      '#d87a80',
-      '#8d98b3',
-      '#e5cf0d',
-      '#97b552',
-      '#95706d',
-      '#dc69aa',
-      '#07a2a4',
-      '#9a7fd1',
-      '#588dd5',
-      '#f5994e',
-      '#c05050',
-      '#59678c',
-      '#c9ab00',
-      '#7eb00a',
-      '#6f5553',
-      '#c14089',
-    ],
-    legend: {
-      top: '2%',
-      left: 'center',
-    },
-    series: [
-      {
-        name: '',
-        type: 'pie',
-        selectedMode: 'single',
-        radius: [0, '65%'],
-        label: {
-          position: 'inner',
-          fontSize: 14,
-          color: '#333',
-          formatter: '{b}: {c} ({d}%)',
-        },
-        data: getSeries,
-      },
-    ],
-  };
+  const option = getPieOption({ seriesData: getSeries });
 
   return (
-    <div className="flex-1 pt-4" ref={chartRef}>
+    <div className="h-[600px] pt-4" ref={chartRef}>
       <MetricChart
         loading={isLoading}
         option={option}
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/IssueTable.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/IssueTable.tsx
index 4f721579..99bf337d 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/IssueTable.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/IssueTable.tsx
@@ -100,20 +100,20 @@ const MetricTable: React.FC<{
     {
       title: t('analyze:metric_detail:issue_title'),
       dataIndex: 'title',
-      align: 'center',
+      align: 'left',
       width: '200px',
       sorter: true,
     },
     {
       title: 'URL',
       dataIndex: 'url',
-      align: 'center',
+      align: 'left',
       width: '220px',
     },
     {
       title: t('analyze:metric_detail:state'),
       dataIndex: 'state',
-      align: 'center',
+      align: 'left',
       width: '100px',
       sorter: true,
       filters: stateOption,
@@ -124,7 +124,7 @@ const MetricTable: React.FC<{
     {
       title: t('analyze:metric_detail:created_time'),
       dataIndex: 'createdAt',
-      align: 'center',
+      align: 'left',
       sorter: true,
       width: '140px',
       render: (time) => format(parseJSON(time)!, 'yyyy-MM-dd'),
@@ -132,7 +132,7 @@ const MetricTable: React.FC<{
     {
       title: t('analyze:metric_detail:close_time'),
       dataIndex: 'closedAt',
-      align: 'center',
+      align: 'left',
       sorter: true,
       width: '120px',
       render: (time) => (time ? format(parseJSON(time)!, 'yyyy-MM-dd') : ''),
@@ -140,42 +140,42 @@ const MetricTable: React.FC<{
     {
       title: t('analyze:metric_detail:processing_time'),
       dataIndex: 'timeToCloseDays',
-      align: 'center',
+      align: 'left',
       sorter: true,
       width: '200px',
     },
     {
       title: t('analyze:metric_detail:first_response_time'),
       dataIndex: 'timeToFirstAttentionWithoutBot',
-      align: 'center',
+      align: 'left',
       sorter: true,
       width: '220px',
     },
     {
       title: t('analyze:metric_detail:comments_count'),
       dataIndex: 'numOfCommentsWithoutBot',
-      align: 'center',
+      align: 'left',
       sorter: true,
       width: '160px',
     },
     {
       title: t('analyze:metric_detail:tags'),
       dataIndex: 'labels',
-      align: 'center',
+      align: 'left',
       render: (list) => list?.join(', ') || '',
       width: '100px',
     },
     {
       title: t('analyze:metric_detail:creator'),
       dataIndex: 'userLogin',
-      align: 'center',
+      align: 'left',
       sorter: true,
       width: '100px',
     },
     {
       title: t('analyze:metric_detail:assignee'),
       dataIndex: 'assigneeLogin',
-      align: 'center',
+      align: 'left',
       sorter: true,
       width: '100px',
     },
@@ -188,8 +188,7 @@ const MetricTable: React.FC<{
       onChange={handleTableChange}
       pagination={tableParams.pagination}
       rowKey={'url'}
-      scroll={{ x: 'max-content', y: '100%' }}
-      className="h-[600px]"
+      scroll={{ x: 'max-content' }}
     />
   );
 };
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/index.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/index.tsx
index 7cb96ef9..c3b49a84 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/index.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/index.tsx
@@ -59,7 +59,7 @@ const MetricIssue = () => {
     <BaseCard
       title={t('metrics_models:contributors_persona.metrics.issue')}
       id={ContributorsPersona.Issue}
-      bodyClass="h-[650px]"
+      bodyClass="h-full"
     >
       <Tabs
         classes={{ flexContainer: 'border-b', indicator: '!bg-black' }}
@@ -96,7 +96,7 @@ const MetricIssue = () => {
         />
       </Tabs>
 
-      <div className="mt-2 flex h-[600px] flex-1 flex-col">{source}</div>
+      <div className="mt-2 flex flex-1 flex-col">{source}</div>
     </BaseCard>
   );
 };
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/PrComments.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/PrComments.tsx
index 5f2d788d..9208b1d2 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/PrComments.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/PrComments.tsx
@@ -4,6 +4,7 @@ import client from '@common/gqlClient';
 import { useTranslation } from 'next-i18next';
 import MetricChart from '@modules/analyze/DataView/MetricDetail/MetricChart';
 import type { EChartsOption } from 'echarts';
+import { getPieOption } from '@modules/analyze/DataView/MetricDetail/metricChartOption';
 
 const PrComments: React.FC<{
   label: string;
@@ -33,60 +34,10 @@ const PrComments: React.FC<{
     }
   }, [data]);
 
-  const option: EChartsOption = {
-    tooltip: {
-      trigger: 'item',
-      formatter: `{b} : {c} ({d}%)`,
-    },
-    color: [
-      // '#5470c6',
-      // '#91cc75',
-      // '#fac858',
-      // '#ee6666',
-      '#2ec7c9',
-      '#b6a2de',
-      '#5ab1ef',
-      '#ffb980',
-      '#d87a80',
-      '#8d98b3',
-      '#e5cf0d',
-      '#97b552',
-      '#95706d',
-      '#dc69aa',
-      '#07a2a4',
-      '#9a7fd1',
-      '#588dd5',
-      '#f5994e',
-      '#c05050',
-      '#59678c',
-      '#c9ab00',
-      '#7eb00a',
-      '#6f5553',
-      '#c14089',
-    ],
-    legend: {
-      top: '2%',
-      left: 'center',
-    },
-    series: [
-      {
-        name: '',
-        type: 'pie',
-        selectedMode: 'single',
-        radius: [0, '65%'],
-        label: {
-          position: 'inner',
-          fontSize: 14,
-          color: '#333',
-          formatter: '{b} : {c} ({d}%)',
-        },
-        data: getSeries,
-      },
-    ],
-  };
+  const option = getPieOption({ seriesData: getSeries });
 
   return (
-    <div className="flex-1 pt-4" ref={chartRef}>
+    <div className="h-[600px] pt-4" ref={chartRef}>
       <MetricChart
         loading={isLoading}
         option={option}
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/PrCompletion.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/PrCompletion.tsx
index b36f051c..78caf770 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/PrCompletion.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/PrCompletion.tsx
@@ -1,10 +1,9 @@
 import React, { useRef, useMemo } from 'react';
 import { usePullsCompletionQuery } from '@oss-compass/graphql';
 import client from '@common/gqlClient';
-import { useTranslation } from 'next-i18next';
 import MetricChart from '@modules/analyze/DataView/MetricDetail/MetricChart';
+import { getPieOption } from '@modules/analyze/DataView/MetricDetail/metricChartOption';
 import { useStateType } from '@modules/analyze/DataView/MetricDetail/MetricPr/PR';
-import type { EChartsOption } from 'echarts';
 
 const PrCompletion: React.FC<{
   label: string;
@@ -12,7 +11,6 @@ const PrCompletion: React.FC<{
   beginDate: Date;
   endDate: Date;
 }> = ({ label, level, beginDate, endDate }) => {
-  const { t } = useTranslation();
   const stateOption = useStateType();
   const chartRef = useRef<HTMLDivElement>(null);
   const { data, isLoading } = usePullsCompletionQuery(client, {
@@ -35,60 +33,10 @@ const PrCompletion: React.FC<{
     }
   }, [data]);
 
-  const option: EChartsOption = {
-    tooltip: {
-      trigger: 'item',
-      formatter: '{b} : {c} ({d}%)',
-    },
-    color: [
-      // '#5470c6',
-      // '#91cc75',
-      // '#fac858',
-      // '#ee6666',
-      '#2ec7c9',
-      '#b6a2de',
-      '#5ab1ef',
-      '#ffb980',
-      '#d87a80',
-      '#8d98b3',
-      '#e5cf0d',
-      '#97b552',
-      '#95706d',
-      '#dc69aa',
-      '#07a2a4',
-      '#9a7fd1',
-      '#588dd5',
-      '#f5994e',
-      '#c05050',
-      '#59678c',
-      '#c9ab00',
-      '#7eb00a',
-      '#6f5553',
-      '#c14089',
-    ],
-    legend: {
-      top: '2%',
-      left: 'center',
-    },
-    series: [
-      {
-        name: '',
-        type: 'pie',
-        selectedMode: 'single',
-        radius: [0, '65%'],
-        label: {
-          position: 'inner',
-          fontSize: 14,
-          color: '#333',
-          formatter: '{b} : {c} ({d}%)',
-        },
-        data: getSeries,
-      },
-    ],
-  };
+  const option = getPieOption({ seriesData: getSeries });
 
   return (
-    <div className="flex-1 pt-4" ref={chartRef}>
+    <div className="h-[600px] pt-4" ref={chartRef}>
       <MetricChart
         loading={isLoading}
         option={option}
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/PrTable.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/PrTable.tsx
index 5b0c1d05..19038208 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/PrTable.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/PrTable.tsx
@@ -100,20 +100,20 @@ const MetricTable: React.FC<{
     {
       title: t('analyze:metric_detail:pr_title'),
       dataIndex: 'title',
-      align: 'center',
+      align: 'left',
       width: '200px',
       sorter: true,
     },
     {
       title: 'URL',
       dataIndex: 'url',
-      align: 'center',
+      align: 'left',
       width: '220px',
     },
     {
       title: t('analyze:metric_detail:state'),
       dataIndex: 'state',
-      align: 'center',
+      align: 'left',
       width: '100px',
       filters: stateOption,
       sorter: true,
@@ -124,7 +124,7 @@ const MetricTable: React.FC<{
     {
       title: t('analyze:metric_detail:created_time'),
       dataIndex: 'createdAt',
-      align: 'center',
+      align: 'left',
       width: '140px',
       sorter: true,
       render: (time) => (time ? format(parseJSON(time)!, 'yyyy-MM-dd') : ''),
@@ -132,7 +132,7 @@ const MetricTable: React.FC<{
     {
       title: t('analyze:metric_detail:close_time'),
       dataIndex: 'closedAt',
-      align: 'center',
+      align: 'left',
       width: '120px',
       sorter: true,
       render: (time) => (time ? format(parseJSON(time)!, 'yyyy-MM-dd') : ''),
@@ -140,49 +140,49 @@ const MetricTable: React.FC<{
     {
       title: t('analyze:metric_detail:processing_time'),
       dataIndex: 'timeToCloseDays',
-      align: 'center',
+      align: 'left',
       width: '200px',
       sorter: true,
     },
     {
       title: t('analyze:metric_detail:first_response_time'),
       dataIndex: 'timeToFirstAttentionWithoutBot',
-      align: 'center',
+      align: 'left',
       width: '220px',
       sorter: true,
     },
     {
       title: t('analyze:metric_detail:comments_count'),
       dataIndex: 'numReviewComments',
-      align: 'center',
+      align: 'left',
       width: '160px',
       sorter: true,
     },
     {
       title: t('analyze:metric_detail:tags'),
       dataIndex: 'labels',
-      align: 'center',
+      align: 'left',
       width: '100px',
       render: (list) => list?.join(', ') || '',
     },
     {
       title: t('analyze:metric_detail:creator'),
       dataIndex: 'userLogin',
-      align: 'center',
+      align: 'left',
       width: '100px',
       sorter: true,
     },
     {
       title: t('analyze:metric_detail:reviewer'),
       dataIndex: 'reviewersLogin',
-      align: 'center',
+      align: 'left',
       width: '100px',
       render: (list) => list?.join(',') || '',
     },
     {
       title: t('analyze:metric_detail:merge_author'),
       dataIndex: 'mergeAuthorLogin',
-      align: 'center',
+      align: 'left',
       width: '140px',
       sorter: true,
     },
@@ -195,8 +195,7 @@ const MetricTable: React.FC<{
       onChange={handleTableChange}
       pagination={tableParams.pagination}
       rowKey={'url'}
-      scroll={{ x: 'max-content', y: '100%' }}
-      className="h-[600px]"
+      scroll={{ x: 'max-content' }}
     />
   );
 };
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/index.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/index.tsx
index de3a9ed9..c35f488f 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/index.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/index.tsx
@@ -59,7 +59,7 @@ const MetricPr = () => {
     <BaseCard
       title={t('metrics_models:contributors_persona.metrics.pr')}
       id={ContributorsPersona.Pr}
-      bodyClass="h-[650px]"
+      bodyClass="h-full"
     >
       <Tabs
         classes={{ flexContainer: 'border-b', indicator: '!bg-black' }}
@@ -95,7 +95,7 @@ const MetricPr = () => {
           value="3"
         />
       </Tabs>
-      <div className="mt-2 flex h-[600px] flex-1 flex-col">{source}</div>
+      <div className="mt-2 flex flex-1 flex-col">{source}</div>
     </BaseCard>
   );
 };
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/metricChartOption.ts b/apps/web/src/modules/analyze/DataView/MetricDetail/metricChartOption.ts
new file mode 100644
index 00000000..9cd0c8a9
--- /dev/null
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/metricChartOption.ts
@@ -0,0 +1,58 @@
+import type { EChartsOption, PieSeriesOption } from 'echarts';
+export const getPieOption = (
+  opts: {
+    series?: PieSeriesOption;
+    seriesData: {
+      name: any;
+      value: number;
+    }[];
+    legend?: EChartsOption['legend'];
+    title?: EChartsOption['title'];
+    formatter?: string | (() => string);
+  } & EChartsOption
+): EChartsOption => {
+  const { series, seriesData, title, formatter, ...restOpts } = opts;
+  return {
+    color: [
+      '#2ec7c9',
+      '#b6a2de',
+      '#5ab1ef',
+      '#ffb980',
+      '#d87a80',
+      '#8d98b3',
+      '#e5cf0d',
+      '#97b552',
+      '#95706d',
+      '#dc69aa',
+      '#07a2a4',
+      '#9a7fd1',
+      '#588dd5',
+      '#f5994e',
+      '#c05050',
+      '#59678c',
+      '#c9ab00',
+      '#7eb00a',
+      '#6f5553',
+      '#c14089',
+    ],
+    title: title || {},
+    legend: { top: '2%', left: 'center', type: 'scroll' },
+    tooltip: { trigger: 'item', formatter: formatter || '{b} : {c} ({d}%)' },
+    series: series || [
+      {
+        name: '',
+        type: 'pie',
+        selectedMode: 'single',
+        radius: [0, '65%'],
+        label: {
+          position: 'inner',
+          fontSize: 14,
+          color: '#333',
+          formatter: formatter || '{b} : {c} ({d}%)',
+        },
+        data: seriesData,
+      },
+    ],
+    ...restOpts,
+  };
+};
diff --git a/apps/web/src/modules/analyze/components/SideBar/Menu/MenuItem.tsx b/apps/web/src/modules/analyze/components/SideBar/Menu/MenuItem.tsx
index a51e048c..56556488 100644
--- a/apps/web/src/modules/analyze/components/SideBar/Menu/MenuItem.tsx
+++ b/apps/web/src/modules/analyze/components/SideBar/Menu/MenuItem.tsx
@@ -1,6 +1,8 @@
 import React, { PropsWithChildren, useRef, useState } from 'react';
 import classnames from 'classnames';
 import Popper from '@mui/material/Popper';
+import { useTranslation } from 'next-i18next';
+import Tooltip from '@common/components/Tooltip';
 
 const MenuItem: React.FC<
   PropsWithChildren<{
@@ -20,6 +22,7 @@ const MenuItem: React.FC<
 }) => {
   const popoverAnchor = useRef<HTMLDivElement>(null);
   const [openedPopover, setOpenedPopover] = useState(false);
+  const { t } = useTranslation();
 
   return (
     <div className="group mb-0.5 px-4">
@@ -43,7 +46,13 @@ const MenuItem: React.FC<
             { 'group-hover:bg-gray-100 group-hover:text-black': !disabled }
           )}
         >
-          <span className="truncate">{children}</span>
+          {disabled ? (
+            <Tooltip arrow title={t('analyze:coming_soon')} placement="right">
+              <span className="truncate">{children}</span>
+            </Tooltip>
+          ) : (
+            <span className="truncate">{children}</span>
+          )}
           {leftIcons}
         </a>
       </div>
diff --git a/apps/web/src/modules/analyze/components/SideBar/TopicTab.tsx b/apps/web/src/modules/analyze/components/SideBar/TopicTab.tsx
index 9d233ec6..c3d71a9d 100644
--- a/apps/web/src/modules/analyze/components/SideBar/TopicTab.tsx
+++ b/apps/web/src/modules/analyze/components/SideBar/TopicTab.tsx
@@ -11,9 +11,20 @@ const TopicTab = () => {
     {
       label: t('analyze:collaboration'),
       value: 'collaboration',
+      tabCls: 'min-w-[66px] text-center',
+    },
+    {
+      label: t('analyze:contributor'),
+      value: 'contributor',
+      tabCls: 'min-w-[80px] text-center',
+    },
+    {
+      label: t('analyze:software'),
+      value: 'software',
+      disable: true,
+      tooltip: t('analyze:coming_soon'),
+      tabCls: 'min-w-[60px] text-center',
     },
-    { label: t('analyze:contributor'), value: 'contributor' },
-    { label: t('analyze:software'), value: 'software', disable: true },
   ];
 
   return (
diff --git a/apps/web/src/styles/antd.scss b/apps/web/src/styles/antd.scss
index baa3e8b0..a2fef9f1 100644
--- a/apps/web/src/styles/antd.scss
+++ b/apps/web/src/styles/antd.scss
@@ -1,30 +1,30 @@
 :where(.css-dev-only-do-not-override-pr0fja).ant-btn-primary {
   background-color: #1677ff !important;
 }
-.ant-spin-nested-loading {
-  height: 100%;
-  .ant-spin-container {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-  .ant-table-container {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    .ant-table-body {
-      position: relative;
-      flex: 1;
-      table {
-        position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-      }
-    }
-  }
-  .ant-table {
-    flex: 1;
-  }
-}
+// .ant-spin-nested-loading {
+//   height: 100%;
+//   .ant-spin-container {
+//     height: 100%;
+//     display: flex;
+//     flex-direction: column;
+//   }
+//   .ant-table-container {
+//     height: 100%;
+//     display: flex;
+//     flex-direction: column;
+//     .ant-table-body {
+//       position: relative;
+//       flex: 1;
+//       table {
+//         position: absolute;
+//         left: 0;
+//         top: 0;
+//         right: 0;
+//         bottom: 0;
+//       }
+//     }
+//   }
+//   .ant-table {
+//     flex: 1;
+//   }
+// }