diff --git a/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx b/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx
index 06004602ec..3cfe3be1da 100644
--- a/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx
+++ b/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx
@@ -58,19 +58,21 @@ const ProjectHealthMetricsDetails: FC = () => {
         day: 'numeric',
       })
     ) || []
+
   return (
-    <div className="flex flex-col gap-4">
+    <div className="w-full max-w-full overflow-x-hidden">
       {metricsList && metricsLatest ? (
-        <>
-          <div className="flex items-center justify-between">
-            <div className="flex justify-start">
+        <div className="flex flex-col gap-4">
+          {/* Header */}
+          <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+            <div className="flex items-center gap-2">
               <h1 className="text-2xl font-bold">{metricsLatest.projectName}</h1>
               <MetricsPDFButton
                 path={`${projectKey}/pdf`}
                 fileName={`${projectKey}-health-metrics`}
               />
             </div>
-            <div className="flex items-center gap-2">
+            <div className="flex flex-wrap items-center gap-2">
               <MetricsScoreCircle score={metricsLatest.score} clickable={false} />
               <GeneralCompliantComponent
                 title={
@@ -92,129 +94,154 @@ const ProjectHealthMetricsDetails: FC = () => {
               />
             </div>
           </div>
+
+          {/* Charts */}
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <LineChart
-              title="Stars"
-              icon={FaStar}
-              series={[
-                {
-                  name: 'Stars',
-                  data: metricsList.map((m) => m.starsCount),
-                },
-              ]}
-              labels={labels}
-              round
-            />
-            <LineChart
-              title="Forks"
-              icon={FaCodeFork}
-              series={[
-                {
-                  name: 'Forks',
-                  data: metricsList.map((m) => m.forksCount),
-                },
-              ]}
-              labels={labels}
-              round
-            />
+            <div className="w-full overflow-x-auto">
+              <LineChart
+                title="Stars"
+                icon={FaStar}
+                series={[
+                  {
+                    name: 'Stars',
+                    data: metricsList.map((m) => m.starsCount),
+                  },
+                ]}
+                labels={labels}
+                round
+              />
+            </div>
+
+            <div className="w-full overflow-x-auto">
+              <LineChart
+                title="Forks"
+                icon={FaCodeFork}
+                series={[
+                  {
+                    name: 'Forks',
+                    data: metricsList.map((m) => m.forksCount),
+                  },
+                ]}
+                labels={labels}
+                round
+              />
+            </div>
           </div>
+
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <LineChart
-              title="Issues"
-              icon={FaExclamationCircle}
-              series={[
-                {
-                  name: 'Open Issues',
-                  data: metricsList.map((m) => m.openIssuesCount),
-                },
-                {
-                  name: 'Unassigned Issues',
-                  data: metricsList.map((m) => m.unassignedIssuesCount),
-                },
-                {
-                  name: 'Unanswered Issues',
-                  data: metricsList.map((m) => m.unansweredIssuesCount),
-                },
-                {
-                  name: 'Total Issues',
-                  data: metricsList.map((m) => m.totalIssuesCount),
-                },
-              ]}
-              labels={labels}
-              round
-            />
-            <LineChart
-              title="Open Pull Requests"
-              icon={FaCodePullRequest}
-              series={[
-                {
-                  name: 'Open Pull Requests',
-                  data: metricsList.map((m) => m.openPullRequestsCount),
-                },
-              ]}
-              labels={labels}
-              round
-            />
+            <div className="w-full overflow-x-auto">
+              <LineChart
+                title="Issues"
+                icon={FaExclamationCircle}
+                series={[
+                  {
+                    name: 'Open Issues',
+                    data: metricsList.map((m) => m.openIssuesCount),
+                  },
+                  {
+                    name: 'Unassigned Issues',
+                    data: metricsList.map((m) => m.unassignedIssuesCount),
+                  },
+                  {
+                    name: 'Unanswered Issues',
+                    data: metricsList.map((m) => m.unansweredIssuesCount),
+                  },
+                  {
+                    name: 'Total Issues',
+                    data: metricsList.map((m) => m.totalIssuesCount),
+                  },
+                ]}
+                labels={labels}
+                round
+              />
+            </div>
+
+            <div className="w-full overflow-x-auto">
+              <LineChart
+                title="Open Pull Requests"
+                icon={FaCodePullRequest}
+                series={[
+                  {
+                    name: 'Open Pull Requests',
+                    data: metricsList.map((m) => m.openPullRequestsCount),
+                  },
+                ]}
+                labels={labels}
+                round
+              />
+            </div>
           </div>
+
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <LineChart
-              title="Releases"
-              icon={FaTags}
-              series={[
-                {
-                  name: 'Recent Releases',
-                  data: metricsList.map((m) => m.recentReleasesCount),
-                },
-                {
-                  name: 'Total Releases',
-                  data: metricsList.map((m) => m.totalReleasesCount),
-                },
+            <div className="w-full overflow-x-auto">
+              <LineChart
+                title="Releases"
+                icon={FaTags}
+                series={[
+                  {
+                    name: 'Recent Releases',
+                    data: metricsList.map((m) => m.recentReleasesCount),
+                  },
+                  {
+                    name: 'Total Releases',
+                    data: metricsList.map((m) => m.totalReleasesCount),
+                  },
+                ]}
+                labels={labels}
+                round
+              />
+            </div>
+
+            <div className="w-full overflow-x-auto">
+              <LineChart
+                title="Contributors"
+                icon={FaPeopleGroup}
+                series={[
+                  {
+                    name: 'Contributors',
+                    data: metricsList.map((m) => m.contributorsCount),
+                  },
+                ]}
+                labels={labels}
+                round
+              />
+            </div>
+          </div>
+
+          {/* Bar chart */}
+          <div className="w-full overflow-x-auto">
+            <BarChart
+              title="Days Metrics"
+              icon={FaChartArea}
+              labels={[
+                'Project Age',
+                'Days Since Last Commit',
+                'Days Since Last Release',
+                'Days Since Last Pull Request',
+                'Days Since OWASP Page Last Update',
               ]}
-              labels={labels}
-              round
-            />
-            <LineChart
-              title="Contributors"
-              icon={FaPeopleGroup}
-              series={[
-                {
-                  name: 'Contributors',
-                  data: metricsList.map((m) => m.contributorsCount),
-                },
+              days={[
+                metricsLatest.ageDays,
+                metricsLatest.lastCommitDays,
+                metricsLatest.lastReleaseDays,
+                metricsLatest.lastPullRequestDays,
+                metricsLatest.owaspPageLastUpdateDays,
+              ]}
+              requirements={[
+                metricsLatest.ageDaysRequirement,
+                metricsLatest.lastCommitDaysRequirement,
+                metricsLatest.lastReleaseDaysRequirement,
+                metricsLatest.lastPullRequestDaysRequirement,
+                metricsLatest.owaspPageLastUpdateDaysRequirement,
               ]}
-              labels={labels}
-              round
+              reverseColors={[true, false, false, false, false]}
             />
           </div>
-          <BarChart
-            title="Days Metrics"
-            icon={FaChartArea}
-            labels={[
-              'Project Age',
-              'Days Since Last Commit',
-              'Days Since Last Release',
-              'Days Since Last Pull Request',
-              'Days Since OWASP Page Last Update',
-            ]}
-            days={[
-              metricsLatest.ageDays,
-              metricsLatest.lastCommitDays,
-              metricsLatest.lastReleaseDays,
-              metricsLatest.lastPullRequestDays,
-              metricsLatest.owaspPageLastUpdateDays,
-            ]}
-            requirements={[
-              metricsLatest.ageDaysRequirement,
-              metricsLatest.lastCommitDaysRequirement,
-              metricsLatest.lastReleaseDaysRequirement,
-              metricsLatest.lastPullRequestDaysRequirement,
-              metricsLatest.owaspPageLastUpdateDaysRequirement,
-            ]}
-            reverseColors={[true, false, false, false, false]}
-          />
-        </>
+        </div>
       ) : (
-        <div className="text-center text-gray-500">No metrics data available for this project.</div>
+        <div className="text-center text-gray-500">
+          No metrics data available for this project.
+        </div>
       )}
     </div>
   )
diff --git a/frontend/src/app/projects/dashboard/page.tsx b/frontend/src/app/projects/dashboard/page.tsx
index 6ff4809714..a4fa26d88e 100644
--- a/frontend/src/app/projects/dashboard/page.tsx
+++ b/frontend/src/app/projects/dashboard/page.tsx
@@ -53,32 +53,25 @@ const ProjectsDashboardPage: FC = () => {
     )
   }
 
-  const projectsCardsItems: {
-    type: 'healthy' | 'needsAttention' | 'unhealthy'
-    count: number
-    icon: IconType
-  }[] = [
+  const projectsCardsItems = [
     {
-      type: 'healthy',
+      type: 'healthy' as const,
       count: stats.projectsCountHealthy,
       icon: FaCheck,
     },
     {
-      type: 'needsAttention',
+      type: 'needsAttention' as const,
       count: stats.projectsCountNeedAttention,
       icon: FaTriangleExclamation,
     },
     {
-      type: 'unhealthy',
+      type: 'unhealthy' as const,
       count: stats.projectsCountUnhealthy,
       icon: FaRectangleXmark,
     },
   ]
-  const dashboardCardsItems: {
-    title: string
-    icon: IconType
-    stats?: string
-  }[] = [
+
+  const dashboardCardsItems = [
     {
       title: 'Average Score',
       icon: FaChartLine,
@@ -100,12 +93,17 @@ const ProjectsDashboardPage: FC = () => {
       stats: millify(stats.totalStars),
     },
   ]
+
   return (
-    <>
-      <div className="mb-4 flex items-center justify-start">
+    <div className="w-full max-w-full overflow-x-hidden">
+      <div className="mb-4 flex items-center justify-start gap-2">
         <h1 className="font-semibold">Project Health Dashboard Overview</h1>
-        <MetricsPDFButton path="overview/pdf" fileName="owasp-project-health-metrics-overview" />
+        <MetricsPDFButton
+          path="overview/pdf"
+          fileName="owasp-project-health-metrics-overview"
+        />
       </div>
+
       <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-3">
         {projectsCardsItems.map((item) => (
           <ProjectTypeDashboardCard
@@ -116,37 +114,50 @@ const ProjectsDashboardPage: FC = () => {
           />
         ))}
       </div>
+
       <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-4">
         {dashboardCardsItems.map((item) => (
-          <DashboardCard key={item.title} title={item.title} icon={item.icon} stats={item.stats} />
+          <DashboardCard
+            key={item.title}
+            title={item.title}
+            icon={item.icon}
+            stats={item.stats}
+          />
         ))}
       </div>
+
+      {/* Charts section */}
       <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-[2fr_1fr]">
-        <LineChart
-          title="Overall Project Health Monthly Trend"
-          icon={FaChartColumn}
-          series={[
-            {
-              name: 'Project Health Score',
-              data: stats.monthlyOverallScores,
-            },
-          ]}
-          labels={stats.monthlyOverallScoresMonths.map((month) => {
-            const date = new Date(2025, month - 1, 1)
-            return date.toLocaleString('default', { month: 'short' })
-          })}
-        />
-        <DonutBarChart
-          title="Project Health Distribution"
-          icon={FaHeart}
-          series={[
-            stats.projectsPercentageHealthy,
-            stats.projectsPercentageNeedAttention,
-            stats.projectsPercentageUnhealthy,
-          ]}
-        />
+        <div className="w-full overflow-x-auto">
+          <LineChart
+            title="Overall Project Health Monthly Trend"
+            icon={FaChartColumn}
+            series={[
+              {
+                name: 'Project Health Score',
+                data: stats.monthlyOverallScores,
+              },
+            ]}
+            labels={stats.monthlyOverallScoresMonths.map((month) => {
+              const date = new Date(2025, month - 1, 1)
+              return date.toLocaleString('default', { month: 'short' })
+            })}
+          />
+        </div>
+
+        <div className="w-full overflow-x-auto">
+          <DonutBarChart
+            title="Project Health Distribution"
+            icon={FaHeart}
+            series={[
+              stats.projectsPercentageHealthy,
+              stats.projectsPercentageNeedAttention,
+              stats.projectsPercentageUnhealthy,
+            ]}
+          />
+        </div>
       </div>
-    </>
+    </div>
   )
 }