diff --git a/components/admin/team-detail/team-overview-tab.tsx b/components/admin/team-detail/team-overview-tab.tsx
index 274997a..1a87375 100644
--- a/components/admin/team-detail/team-overview-tab.tsx
+++ b/components/admin/team-detail/team-overview-tab.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Star, BarChart3, Target } from "lucide-react";
+import { BarChart3, Target, Star } from "lucide-react";
 import { TeamStats } from "@/services/admin-service";
 import { TechIcon } from "@/components/icons/tech-icon";
 
@@ -125,75 +125,74 @@ export function TeamOverviewTab({
         <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
           <h3 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
             <BarChart3 className="h-5 w-5 text-blue-400" />
-            Répartition des niveaux
+            Répartition des niveaux par compétence
           </h3>
           <div className="space-y-4">
-            {[
-              {
-                label: "Expert",
-                count: team.members.filter(
-                  (m) =>
-                    m.skills.reduce((avg, s) => avg + s.level, 0) /
-                      m.skills.length >=
-                    2.5
-                ).length,
-                color: "bg-green-500",
-              },
-              {
-                label: "Avancé",
-                count: team.members.filter((m) => {
-                  const avg =
-                    m.skills.reduce((avg, s) => avg + s.level, 0) /
-                    m.skills.length;
-                  return avg >= 2 && avg < 2.5;
-                }).length,
-                color: "bg-blue-500",
-              },
-              {
-                label: "Intermédiaire",
-                count: team.members.filter((m) => {
-                  const avg =
-                    m.skills.reduce((avg, s) => avg + s.level, 0) /
-                    m.skills.length;
-                  return avg >= 1 && avg < 2;
-                }).length,
-                color: "bg-orange-500",
-              },
-              {
-                label: "Débutant",
-                count: team.members.filter(
-                  (m) =>
-                    m.skills.reduce((avg, s) => avg + s.level, 0) /
-                      m.skills.length <
-                    1
-                ).length,
-                color: "bg-red-500",
-              },
-            ].map((level, idx) => (
-              <div
-                key={idx}
-                className="flex items-center justify-between p-3 bg-white/5 rounded-lg"
-              >
-                <div className="flex items-center gap-3">
-                  <div className={`w-3 h-3 rounded-full ${level.color}`} />
-                  <span className="text-white font-medium">{level.label}</span>
-                </div>
-                <div className="flex items-center gap-3">
-                  <span className="text-white font-bold">{level.count}</span>
-                  <div className="w-16 bg-white/10 rounded-full h-2">
-                    <div
-                      className={`h-2 rounded-full ${level.color}`}
-                      style={{
-                        width: `${(level.count / team.totalMembers) * 100}%`,
-                      }}
-                    />
+            {(() => {
+              // Calculer la répartition par compétence individuelle
+              const allSkills = team.members.flatMap((m) => m.skills);
+              const totalSkills = allSkills.length;
+
+              const levelDistribution = {
+                expert: allSkills.filter((s) => s.level === 3).length,
+                autonomous: allSkills.filter((s) => s.level === 2).length,
+                notAutonomous: allSkills.filter((s) => s.level === 1).length,
+                never: allSkills.filter((s) => s.level === 0).length,
+              };
+
+              return [
+                {
+                  label: "Expert",
+                  count: levelDistribution.expert,
+                  total: totalSkills,
+                  color: "bg-green-500",
+                },
+                {
+                  label: "Autonome",
+                  count: levelDistribution.autonomous,
+                  total: totalSkills,
+                  color: "bg-blue-500",
+                },
+                {
+                  label: "Pas autonome",
+                  count: levelDistribution.notAutonomous,
+                  total: totalSkills,
+                  color: "bg-orange-500",
+                },
+                {
+                  label: "Jamais utilisé",
+                  count: levelDistribution.never,
+                  total: totalSkills,
+                  color: "bg-red-500",
+                },
+              ].map((level, idx) => (
+                <div
+                  key={idx}
+                  className="flex items-center justify-between p-3 bg-white/5 rounded-lg"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className={`w-3 h-3 rounded-full ${level.color}`} />
+                    <span className="text-white font-medium">
+                      {level.label}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <span className="text-white font-bold">{level.count}</span>
+                    <div className="w-16 bg-white/10 rounded-full h-2">
+                      <div
+                        className={`h-2 rounded-full ${level.color}`}
+                        style={{
+                          width: `${(level.count / level.total) * 100}%`,
+                        }}
+                      />
+                    </div>
+                    <span className="text-xs text-slate-400 w-10 text-right">
+                      {((level.count / level.total) * 100).toFixed(0)}%
+                    </span>
                   </div>
-                  <span className="text-xs text-slate-400 w-10 text-right">
-                    {((level.count / team.totalMembers) * 100).toFixed(0)}%
-                  </span>
                 </div>
-              </div>
-            ))}
+              ));
+            })()}
           </div>
         </div>
 
@@ -221,16 +220,6 @@ export function TeamOverviewTab({
                 {teamInsights.totalLearners}
               </span>
             </div>
-            <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
-              <span className="text-slate-300">Mentors disponibles</span>
-              <span className="text-white font-bold">
-                {skillAnalysis.reduce(
-                  (sum, skill) =>
-                    sum + skill.experts.filter((e) => e.canMentor).length,
-                  0
-                )}
-              </span>
-            </div>
           </div>
         </div>
       </div>
diff --git a/components/admin/team-detail/team-skills-tab.tsx b/components/admin/team-detail/team-skills-tab.tsx
index 3038aab..a6e74dc 100644
--- a/components/admin/team-detail/team-skills-tab.tsx
+++ b/components/admin/team-detail/team-skills-tab.tsx
@@ -95,19 +95,21 @@ export function TeamSkillsTab({ skillAnalysis }: TeamSkillsTabProps) {
       </div>
 
       {/* Liste des compétences détaillée */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
         {filteredSkills.map((skill, idx) => (
           <div
             key={idx}
-            className="bg-white/5 border border-white/10 rounded-xl p-4 hover:bg-white/10 transition-colors"
+            className="bg-white/5 border border-white/10 rounded-lg p-3 hover:bg-white/10 transition-colors"
           >
-            <div className="flex items-center justify-between mb-3">
-              <div>
-                <h4 className="font-medium text-white">{skill.skillName}</h4>
+            <div className="flex items-center justify-between mb-2">
+              <div className="min-w-0 flex-1">
+                <h4 className="font-medium text-white text-sm truncate">
+                  {skill.skillName}
+                </h4>
                 <p className="text-xs text-slate-400">{skill.category}</p>
               </div>
               <div
-                className={`px-2 py-1 border rounded-lg text-center ${getSkillLevelBadgeClasses(
+                className={`px-2 py-1 border rounded text-center ml-2 flex-shrink-0 ${getSkillLevelBadgeClasses(
                   skill.averageLevel
                 )}`}
               >
@@ -117,17 +119,17 @@ export function TeamSkillsTab({ skillAnalysis }: TeamSkillsTabProps) {
               </div>
             </div>
 
-            <div className="space-y-3">
+            <div className="space-y-2">
               <div className="flex items-center justify-between">
-                <span className="text-sm text-slate-300">Niveau moyen:</span>
-                <span className="text-white font-semibold">
+                <span className="text-xs text-slate-300">Niveau:</span>
+                <span className="text-white font-semibold text-sm">
                   {skill.averageLevel.toFixed(1)}/3
                 </span>
               </div>
 
-              <div className="w-full bg-white/10 rounded-full h-2">
+              <div className="w-full bg-white/10 rounded-full h-1.5">
                 <div
-                  className={`h-2 rounded-full transition-all ${getSkillLevelColor(
+                  className={`h-1.5 rounded-full transition-all ${getSkillLevelColor(
                     skill.averageLevel
                   )
                     .replace("bg-", "bg-gradient-to-r from-")
@@ -137,32 +139,30 @@ export function TeamSkillsTab({ skillAnalysis }: TeamSkillsTabProps) {
                 />
               </div>
 
-              <div className="grid grid-cols-3 gap-2 text-xs">
+              <div className="grid grid-cols-3 gap-1 text-xs">
                 <div className="text-center">
                   <div className="text-white font-semibold">
                     {skill.totalEvaluations}
                   </div>
-                  <div className="text-slate-400">Évaluations</div>
+                  <div className="text-slate-400 text-xs">Éval.</div>
                 </div>
                 <div className="text-center">
                   <div className="text-green-300 font-semibold">
                     {skill.expertCount}
                   </div>
-                  <div className="text-slate-400">Experts</div>
+                  <div className="text-slate-400 text-xs">Experts</div>
                 </div>
                 <div className="text-center">
                   <div className="text-blue-300 font-semibold">
                     {skill.learnerCount}
                   </div>
-                  <div className="text-slate-400">Apprenants</div>
+                  <div className="text-slate-400 text-xs">Appren.</div>
                 </div>
               </div>
 
               {skill.experts.filter((e) => e.canMentor).length > 0 && (
                 <div className="pt-2 border-t border-white/10">
-                  <div className="text-xs text-slate-400 mb-1">
-                    Mentors disponibles:
-                  </div>
+                  <div className="text-xs text-slate-400 mb-1">Mentors:</div>
                   <div className="flex flex-wrap gap-1">
                     {skill.experts
                       .filter((e) => e.canMentor)
@@ -171,15 +171,15 @@ export function TeamSkillsTab({ skillAnalysis }: TeamSkillsTabProps) {
                         <Badge
                           key={i}
                           variant="outline"
-                          className="text-xs text-green-300 border-green-500/30"
+                          className="text-xs text-green-300 border-green-500/30 px-1 py-0.5"
                         >
-                          {expert.name}
+                          {expert.name.split(" ")[0]}
                         </Badge>
                       ))}
                     {skill.experts.filter((e) => e.canMentor).length > 2 && (
                       <Badge
                         variant="outline"
-                        className="text-xs text-slate-400 border-slate-500/30"
+                        className="text-xs text-slate-400 border-slate-500/30 px-1 py-0.5"
                       >
                         +{skill.experts.filter((e) => e.canMentor).length - 2}
                       </Badge>
diff --git a/lib/score-utils.ts b/lib/score-utils.ts
index e03b424..fcab5d2 100644
--- a/lib/score-utils.ts
+++ b/lib/score-utils.ts
@@ -49,3 +49,20 @@ export function getSkillLevelLabel(level: string): string {
       return "";
   }
 }
+
+/**
+ * Calcule la répartition des niveaux par compétence individuelle
+ */
+export function calculateSkillLevelDistribution(
+  members: Array<{ skills: Array<{ level: number }> }>
+) {
+  const allSkills = members.flatMap((m) => m.skills);
+
+  return {
+    expert: allSkills.filter((s) => s.level === 3).length,
+    autonomous: allSkills.filter((s) => s.level === 2).length,
+    notAutonomous: allSkills.filter((s) => s.level === 1).length,
+    never: allSkills.filter((s) => s.level === 0).length,
+    total: allSkills.length,
+  };
+}