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 29c75474..74a9c16e 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx
@@ -23,7 +23,7 @@ const ContributorContribution: React.FC<{
   const [onlyOrg, setOnlyOrg] = useState<boolean>(false);
 
   return (
-    <div className="relative w-[50%] flex-shrink-0 pt-4 ">
+    <div className="relative w-[50%] flex-shrink-0 pt-4 lg:h-[50%] lg:w-full">
       <div className="absolute right-6 z-10 h-4 bg-transparent pl-4 text-xs">
         <PieDropDownMenu
           showOrgModel={true}
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 c2070c42..25bd0634 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorOrganizations.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorOrganizations.tsx
@@ -126,7 +126,10 @@ const ContributorContribution: React.FC<{
   };
 
   return (
-    <div className="w-[50%] flex-shrink-0 pt-4" ref={chartRef}>
+    <div
+      className="w-[50%] flex-shrink-0 pt-4 lg:h-[50%] lg:w-full"
+      ref={chartRef}
+    >
       <MetricChart
         style={{ height: '100%', zIndex: 1 }}
         loading={isLoading}
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/index.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/index.tsx
index 7aaf3842..9c1dc6e0 100644
--- a/apps/web/src/modules/analyze/DataView/MetricDetail/index.tsx
+++ b/apps/web/src/modules/analyze/DataView/MetricDetail/index.tsx
@@ -14,6 +14,7 @@ import LoadingAnalysis from '@modules/analyze/DataView/Status/LoadingAnalysis';
 import LabelItems from '@modules/analyze/components/NavBar/LabelItems';
 import { useRouter } from 'next/router';
 import { useHandleQueryParams } from '@modules/analyze/hooks/useHandleQueryParams';
+import { Select } from 'antd';
 
 const VerifyMetricDetail = () => {
   const { isLoading } = useVerifyDetailRangeQuery();
@@ -79,7 +80,7 @@ const MetricDetail = () => {
             {t('analyze:metric_detail:project_deep_dive_insight')}
           </span>
         </div>
-        <div className="absolute right-1/2 flex translate-x-1/2 justify-center">
+        <div className="absolute right-1/2 flex translate-x-1/2 justify-center lg:hidden">
           <MyTab
             options={tabOptions}
             value={tab}
@@ -89,6 +90,17 @@ const MetricDetail = () => {
             }}
           />
         </div>
+        <div className=">lg:hidden absolute right-1/2 flex translate-x-1/2 justify-center">
+          <Select
+            style={{ width: 120 }}
+            onChange={(v) => {
+              setTab(v);
+              handleQueryParams({ tab: v });
+            }}
+            value={tab}
+            options={tabOptions}
+          />
+        </div>
         <div className="absolute right-6">
           <MerticDatePicker />
         </div>