diff --git a/app/api/leaderboard/route.ts b/app/api/leaderboard/route.ts
index 538e929..4797739 100644
--- a/app/api/leaderboard/route.ts
+++ b/app/api/leaderboard/route.ts
@@ -11,6 +11,7 @@ export async function GET() {
       select: {
         id: true,
         username: true,
+        email: true,
         score: true,
         level: true,
         avatar: true,
@@ -24,6 +25,7 @@ export async function GET() {
         user: {
           id: string;
           username: string;
+          email: string;
           score: number;
           level: number;
           avatar: string | null;
@@ -34,6 +36,7 @@ export async function GET() {
       ) => ({
         rank: index + 1,
         username: user.username,
+        email: user.email,
         score: user.score,
         level: user.level,
         avatar: user.avatar,
diff --git a/app/leaderboard/page.tsx b/app/leaderboard/page.tsx
index fbe42d3..80e55cb 100644
--- a/app/leaderboard/page.tsx
+++ b/app/leaderboard/page.tsx
@@ -6,6 +6,7 @@ import { getBackgroundImage } from "@/lib/preferences";
 interface LeaderboardEntry {
   rank: number;
   username: string;
+  email: string;
   score: number;
   level: number;
   avatar: string | null;
@@ -22,6 +23,7 @@ export default async function LeaderboardPage() {
     select: {
       id: true,
       username: true,
+      email: true,
       score: true,
       level: true,
       avatar: true,
@@ -33,6 +35,7 @@ export default async function LeaderboardPage() {
   const leaderboard: LeaderboardEntry[] = users.map((user, index) => ({
     rank: index + 1,
     username: user.username,
+    email: user.email,
     score: user.score,
     level: user.level,
     avatar: user.avatar,
diff --git a/components/Leaderboard.tsx b/components/Leaderboard.tsx
index 8680090..97a75ec 100644
--- a/components/Leaderboard.tsx
+++ b/components/Leaderboard.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 interface LeaderboardEntry {
   rank: number;
   username: string;
+  email: string;
   score: number;
   level: number;
   avatar?: string | null;
@@ -20,6 +21,9 @@ const formatScore = (score: number): string => {
 export default function Leaderboard() {
   const [leaderboard, setLeaderboard] = useState<LeaderboardEntry[]>([]);
   const [loading, setLoading] = useState(true);
+  const [selectedEntry, setSelectedEntry] = useState<LeaderboardEntry | null>(
+    null
+  );
 
   useEffect(() => {
     fetch("/api/leaderboard")
@@ -83,82 +87,31 @@ export default function Leaderboard() {
                     {entry.rank}
                   </span>
                 </div>
-                <div className="col-span-5 flex items-center gap-2 relative group">
-                  <span className="font-bold text-pixel-gold cursor-pointer relative z-10">
-                    {entry.username}
-                  </span>
-                  {entry.characterClass && (
-                    <span className="text-xs text-gray-400 uppercase tracking-wider">
-                      [{entry.characterClass === "WARRIOR" && "⚔️ Guerrier"}
-                      {entry.characterClass === "MAGE" && "🔮 Mage"}
-                      {entry.characterClass === "ROGUE" && "🗡️ Voleur"}
-                      {entry.characterClass === "RANGER" && "🏹 Rôdeur"}
-                      {entry.characterClass === "PALADIN" && "🛡️ Paladin"}
-                      {entry.characterClass === "ENGINEER" && "⚙️ Ingénieur"}
-                      {entry.characterClass === "MERCHANT" && "💰 Marchand"}
-                      {entry.characterClass === "SCHOLAR" && "📚 Érudit"}
-                      {entry.characterClass === "BERSERKER" && "🔥 Berserker"}
-                      {entry.characterClass === "NECROMANCER" &&
-                        "💀 Nécromancien"}
-                      ]
+                <div className="col-span-5 flex items-center gap-2">
+                  <div
+                    className="flex items-center gap-2 cursor-pointer hover:text-pixel-gold transition"
+                    onClick={() => setSelectedEntry(entry)}
+                  >
+                    <span className="font-bold text-pixel-gold">
+                      {entry.username}
                     </span>
-                  )}
-                  {(entry.bio || entry.characterClass) && (
-                    <div className="absolute left-0 top-full mt-1 z-[100] w-72 p-4 bg-black border-2 border-pixel-gold/70 rounded-lg shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none">
-                      {entry.characterClass && (
-                        <div className="mb-3">
-                          <div className="text-xs text-pixel-gold uppercase tracking-widest mb-1 font-bold">
-                            Classe
-                          </div>
-                          <div className="text-sm text-gray-200 flex items-center gap-2">
-                            <span>
-                              {entry.characterClass === "WARRIOR" && "⚔️"}
-                              {entry.characterClass === "MAGE" && "🔮"}
-                              {entry.characterClass === "ROGUE" && "🗡️"}
-                              {entry.characterClass === "RANGER" && "🏹"}
-                              {entry.characterClass === "PALADIN" && "🛡️"}
-                              {entry.characterClass === "ENGINEER" && "⚙️"}
-                              {entry.characterClass === "MERCHANT" && "💰"}
-                              {entry.characterClass === "SCHOLAR" && "📚"}
-                              {entry.characterClass === "BERSERKER" && "🔥"}
-                              {entry.characterClass === "NECROMANCER" && "💀"}
-                            </span>
-                            <span className="uppercase tracking-wider">
-                              {entry.characterClass === "WARRIOR" && "Guerrier"}
-                              {entry.characterClass === "MAGE" && "Mage"}
-                              {entry.characterClass === "ROGUE" && "Voleur"}
-                              {entry.characterClass === "RANGER" && "Rôdeur"}
-                              {entry.characterClass === "PALADIN" && "Paladin"}
-                              {entry.characterClass === "ENGINEER" &&
-                                "Ingénieur"}
-                              {entry.characterClass === "MERCHANT" &&
-                                "Marchand"}
-                              {entry.characterClass === "SCHOLAR" && "Érudit"}
-                              {entry.characterClass === "BERSERKER" &&
-                                "Berserker"}
-                              {entry.characterClass === "NECROMANCER" &&
-                                "Nécromancien"}
-                            </span>
-                          </div>
-                        </div>
-                      )}
-                      {entry.bio && (
-                        <>
-                          {entry.characterClass && (
-                            <div className="border-b border-pixel-gold/30 mb-3 pb-3"></div>
-                          )}
-                          <div>
-                            <div className="text-xs text-pixel-gold uppercase tracking-widest mb-2 border-b border-pixel-gold/30 pb-1 font-bold">
-                              Bio
-                            </div>
-                            <p className="text-sm text-gray-200 leading-relaxed whitespace-pre-wrap break-words">
-                              {entry.bio}
-                            </p>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  )}
+                    {entry.characterClass && (
+                      <span className="text-xs text-gray-400 uppercase tracking-wider">
+                        [{entry.characterClass === "WARRIOR" && "⚔️ Guerrier"}
+                        {entry.characterClass === "MAGE" && "🔮 Mage"}
+                        {entry.characterClass === "ROGUE" && "🗡️ Voleur"}
+                        {entry.characterClass === "RANGER" && "🏹 Rôdeur"}
+                        {entry.characterClass === "PALADIN" && "🛡️ Paladin"}
+                        {entry.characterClass === "ENGINEER" && "⚙️ Ingénieur"}
+                        {entry.characterClass === "MERCHANT" && "💰 Marchand"}
+                        {entry.characterClass === "SCHOLAR" && "📚 Érudit"}
+                        {entry.characterClass === "BERSERKER" && "🔥 Berserker"}
+                        {entry.characterClass === "NECROMANCER" &&
+                          "💀 Nécromancien"}
+                        ]
+                      </span>
+                    )}
+                  </div>
                 </div>
                 <div className="col-span-3 text-right flex items-center justify-end">
                   <span className="font-mono text-gray-300">
@@ -180,6 +133,127 @@ export default function Leaderboard() {
           <p>Compete with players worldwide and climb the ranks!</p>
         </div>
       </div>
+
+      {/* Character Modal */}
+      {selectedEntry && (
+        <div
+          className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
+          onClick={() => setSelectedEntry(null)}
+        >
+          <div
+            className="bg-black border-2 border-pixel-gold/70 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-2xl"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="p-8">
+              {/* Header */}
+              <div className="flex items-center justify-between mb-6">
+                <h2 className="text-3xl font-bold text-pixel-gold uppercase tracking-wider">
+                  {selectedEntry.username}
+                </h2>
+                <button
+                  onClick={() => setSelectedEntry(null)}
+                  className="text-gray-400 hover:text-pixel-gold text-2xl font-bold transition"
+                >
+                  ×
+                </button>
+              </div>
+
+              {/* Avatar and Class */}
+              <div className="flex items-center gap-6 mb-6">
+                {selectedEntry.avatar ? (
+                  <div className="w-24 h-24 rounded-full border-4 border-pixel-gold/50 overflow-hidden">
+                    <img
+                      src={selectedEntry.avatar}
+                      alt={selectedEntry.username}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                ) : (
+                  <div className="w-24 h-24 rounded-full border-4 border-pixel-gold/50 bg-gray-900 flex items-center justify-center">
+                    <span className="text-pixel-gold text-4xl font-bold">
+                      {selectedEntry.username.charAt(0).toUpperCase()}
+                    </span>
+                  </div>
+                )}
+                <div>
+                  <div className="text-xs text-gray-400 uppercase tracking-widest mb-2">
+                    Rank #{selectedEntry.rank}
+                  </div>
+                  <div className="text-sm text-gray-300 mb-2">
+                    {selectedEntry.email}
+                  </div>
+                  {selectedEntry.characterClass && (
+                    <div className="flex items-center gap-2">
+                      <span className="text-2xl">
+                        {selectedEntry.characterClass === "WARRIOR" && "⚔️"}
+                        {selectedEntry.characterClass === "MAGE" && "🔮"}
+                        {selectedEntry.characterClass === "ROGUE" && "🗡️"}
+                        {selectedEntry.characterClass === "RANGER" && "🏹"}
+                        {selectedEntry.characterClass === "PALADIN" && "🛡️"}
+                        {selectedEntry.characterClass === "ENGINEER" && "⚙️"}
+                        {selectedEntry.characterClass === "MERCHANT" && "💰"}
+                        {selectedEntry.characterClass === "SCHOLAR" && "📚"}
+                        {selectedEntry.characterClass === "BERSERKER" && "🔥"}
+                        {selectedEntry.characterClass === "NECROMANCER" && "💀"}
+                      </span>
+                      <span className="text-lg font-bold text-pixel-gold uppercase tracking-wider">
+                        {selectedEntry.characterClass === "WARRIOR" &&
+                          "Guerrier"}
+                        {selectedEntry.characterClass === "MAGE" && "Mage"}
+                        {selectedEntry.characterClass === "ROGUE" && "Voleur"}
+                        {selectedEntry.characterClass === "RANGER" && "Rôdeur"}
+                        {selectedEntry.characterClass === "PALADIN" &&
+                          "Paladin"}
+                        {selectedEntry.characterClass === "ENGINEER" &&
+                          "Ingénieur"}
+                        {selectedEntry.characterClass === "MERCHANT" &&
+                          "Marchand"}
+                        {selectedEntry.characterClass === "SCHOLAR" && "Érudit"}
+                        {selectedEntry.characterClass === "BERSERKER" &&
+                          "Berserker"}
+                        {selectedEntry.characterClass === "NECROMANCER" &&
+                          "Nécromancien"}
+                      </span>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Stats */}
+              <div className="grid grid-cols-2 gap-4 mb-6">
+                <div className="bg-black/60 border border-pixel-gold/30 rounded p-4">
+                  <div className="text-xs text-gray-400 uppercase tracking-widest mb-1">
+                    Score
+                  </div>
+                  <div className="text-2xl font-bold text-pixel-gold">
+                    {formatScore(selectedEntry.score)}
+                  </div>
+                </div>
+                <div className="bg-black/60 border border-pixel-gold/30 rounded p-4">
+                  <div className="text-xs text-gray-400 uppercase tracking-widest mb-1">
+                    Niveau
+                  </div>
+                  <div className="text-2xl font-bold text-pixel-gold">
+                    Lv.{selectedEntry.level}
+                  </div>
+                </div>
+              </div>
+
+              {/* Bio */}
+              {selectedEntry.bio && (
+                <div className="border-t border-pixel-gold/30 pt-6">
+                  <div className="text-xs text-pixel-gold uppercase tracking-widest mb-3 font-bold">
+                    Bio
+                  </div>
+                  <p className="text-gray-200 leading-relaxed whitespace-pre-wrap break-words">
+                    {selectedEntry.bio}
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
     </section>
   );
 }
diff --git a/components/LeaderboardSection.tsx b/components/LeaderboardSection.tsx
index 52bc934..cff9934 100644
--- a/components/LeaderboardSection.tsx
+++ b/components/LeaderboardSection.tsx
@@ -1,8 +1,11 @@
 "use client";
 
+import { useState } from "react";
+
 interface LeaderboardEntry {
   rank: number;
   username: string;
+  email: string;
   score: number;
   level: number;
   avatar?: string | null;
@@ -24,6 +27,10 @@ export default function LeaderboardSection({
   leaderboard,
   backgroundImage,
 }: LeaderboardSectionProps) {
+  const [selectedEntry, setSelectedEntry] = useState<LeaderboardEntry | null>(
+    null
+  );
+
   return (
     <section className="relative w-full min-h-screen flex flex-col items-center justify-center pt-24 pb-16">
       {/* Background Image */}
@@ -97,7 +104,7 @@ export default function LeaderboardSection({
                 </div>
 
                 {/* Player */}
-                <div className="col-span-6 flex items-center gap-3 relative group">
+                <div className="col-span-6 flex items-center gap-3">
                   {entry.avatar ? (
                     <div className="w-10 h-10 rounded-full border border-pixel-gold/30 overflow-hidden">
                       <img
@@ -113,86 +120,35 @@ export default function LeaderboardSection({
                       </span>
                     </div>
                   )}
-                  <span
-                    className={`font-bold cursor-pointer relative z-10 ${
-                      entry.rank <= 3 ? "text-pixel-gold" : "text-white"
-                    }`}
+                  <div
+                    className="flex items-center gap-2 cursor-pointer hover:opacity-80 transition"
+                    onClick={() => setSelectedEntry(entry)}
                   >
-                    {entry.username}
-                  </span>
-                  {entry.characterClass && (
-                    <span className="text-xs text-gray-400 uppercase tracking-wider">
-                      [{entry.characterClass === "WARRIOR" && "⚔️"}
-                      {entry.characterClass === "MAGE" && "🔮"}
-                      {entry.characterClass === "ROGUE" && "🗡️"}
-                      {entry.characterClass === "RANGER" && "🏹"}
-                      {entry.characterClass === "PALADIN" && "🛡️"}
-                      {entry.characterClass === "ENGINEER" && "⚙️"}
-                      {entry.characterClass === "MERCHANT" && "💰"}
-                      {entry.characterClass === "SCHOLAR" && "📚"}
-                      {entry.characterClass === "BERSERKER" && "🔥"}
-                      {entry.characterClass === "NECROMANCER" && "💀"}]
+                    <span
+                      className={`font-bold ${
+                        entry.rank <= 3 ? "text-pixel-gold" : "text-white"
+                      }`}
+                    >
+                      {entry.username}
                     </span>
-                  )}
-                  {entry.rank <= 3 && (
-                    <span className="text-pixel-gold text-xs">✦</span>
-                  )}
-                  {(entry.bio || entry.characterClass) && (
-                    <div className="absolute left-0 top-full mt-1 z-[100] w-72 p-4 bg-black border-2 border-pixel-gold/70 rounded-lg shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none">
-                      {entry.characterClass && (
-                        <div className="mb-3">
-                          <div className="text-xs text-pixel-gold uppercase tracking-widest mb-1 font-bold">
-                            Classe
-                          </div>
-                          <div className="text-sm text-gray-200 flex items-center gap-2">
-                            <span>
-                              {entry.characterClass === "WARRIOR" && "⚔️"}
-                              {entry.characterClass === "MAGE" && "🔮"}
-                              {entry.characterClass === "ROGUE" && "🗡️"}
-                              {entry.characterClass === "RANGER" && "🏹"}
-                              {entry.characterClass === "PALADIN" && "🛡️"}
-                              {entry.characterClass === "ENGINEER" && "⚙️"}
-                              {entry.characterClass === "MERCHANT" && "💰"}
-                              {entry.characterClass === "SCHOLAR" && "📚"}
-                              {entry.characterClass === "BERSERKER" && "🔥"}
-                              {entry.characterClass === "NECROMANCER" && "💀"}
-                            </span>
-                            <span className="uppercase tracking-wider">
-                              {entry.characterClass === "WARRIOR" && "Guerrier"}
-                              {entry.characterClass === "MAGE" && "Mage"}
-                              {entry.characterClass === "ROGUE" && "Voleur"}
-                              {entry.characterClass === "RANGER" && "Rôdeur"}
-                              {entry.characterClass === "PALADIN" && "Paladin"}
-                              {entry.characterClass === "ENGINEER" &&
-                                "Ingénieur"}
-                              {entry.characterClass === "MERCHANT" &&
-                                "Marchand"}
-                              {entry.characterClass === "SCHOLAR" && "Érudit"}
-                              {entry.characterClass === "BERSERKER" &&
-                                "Berserker"}
-                              {entry.characterClass === "NECROMANCER" &&
-                                "Nécromancien"}
-                            </span>
-                          </div>
-                        </div>
-                      )}
-                      {entry.bio && (
-                        <>
-                          {entry.characterClass && (
-                            <div className="border-b border-pixel-gold/30 mb-3 pb-3"></div>
-                          )}
-                          <div>
-                            <div className="text-xs text-pixel-gold uppercase tracking-widest mb-2 border-b border-pixel-gold/30 pb-1 font-bold">
-                              Bio
-                            </div>
-                            <p className="text-sm text-gray-200 leading-relaxed whitespace-pre-wrap break-words">
-                              {entry.bio}
-                            </p>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  )}
+                    {entry.characterClass && (
+                      <span className="text-xs text-gray-400 uppercase tracking-wider">
+                        [{entry.characterClass === "WARRIOR" && "⚔️"}
+                        {entry.characterClass === "MAGE" && "🔮"}
+                        {entry.characterClass === "ROGUE" && "🗡️"}
+                        {entry.characterClass === "RANGER" && "🏹"}
+                        {entry.characterClass === "PALADIN" && "🛡️"}
+                        {entry.characterClass === "ENGINEER" && "⚙️"}
+                        {entry.characterClass === "MERCHANT" && "💰"}
+                        {entry.characterClass === "SCHOLAR" && "📚"}
+                        {entry.characterClass === "BERSERKER" && "🔥"}
+                        {entry.characterClass === "NECROMANCER" && "💀"}]
+                      </span>
+                    )}
+                    {entry.rank <= 3 && (
+                      <span className="text-pixel-gold text-xs">✦</span>
+                    )}
+                  </div>
                 </div>
 
                 {/* Score */}
@@ -223,6 +179,127 @@ export default function LeaderboardSection({
           </p>
         </div>
       </div>
+
+      {/* Character Modal */}
+      {selectedEntry && (
+        <div
+          className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
+          onClick={() => setSelectedEntry(null)}
+        >
+          <div
+            className="bg-black border-2 border-pixel-gold/70 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-2xl"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="p-8">
+              {/* Header */}
+              <div className="flex items-center justify-between mb-6">
+                <h2 className="text-3xl font-bold text-pixel-gold uppercase tracking-wider">
+                  {selectedEntry.username}
+                </h2>
+                <button
+                  onClick={() => setSelectedEntry(null)}
+                  className="text-gray-400 hover:text-pixel-gold text-2xl font-bold transition"
+                >
+                  ×
+                </button>
+              </div>
+
+              {/* Avatar and Class */}
+              <div className="flex items-center gap-6 mb-6">
+                {selectedEntry.avatar ? (
+                  <div className="w-24 h-24 rounded-full border-4 border-pixel-gold/50 overflow-hidden">
+                    <img
+                      src={selectedEntry.avatar}
+                      alt={selectedEntry.username}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                ) : (
+                  <div className="w-24 h-24 rounded-full border-4 border-pixel-gold/50 bg-gray-900 flex items-center justify-center">
+                    <span className="text-pixel-gold text-4xl font-bold">
+                      {selectedEntry.username.charAt(0).toUpperCase()}
+                    </span>
+                  </div>
+                )}
+                <div>
+                  <div className="text-xs text-gray-400 uppercase tracking-widest mb-2">
+                    Rank #{selectedEntry.rank}
+                  </div>
+                  <div className="text-sm text-gray-300 mb-2">
+                    {selectedEntry.email}
+                  </div>
+                  {selectedEntry.characterClass && (
+                    <div className="flex items-center gap-2">
+                      <span className="text-2xl">
+                        {selectedEntry.characterClass === "WARRIOR" && "⚔️"}
+                        {selectedEntry.characterClass === "MAGE" && "🔮"}
+                        {selectedEntry.characterClass === "ROGUE" && "🗡️"}
+                        {selectedEntry.characterClass === "RANGER" && "🏹"}
+                        {selectedEntry.characterClass === "PALADIN" && "🛡️"}
+                        {selectedEntry.characterClass === "ENGINEER" && "⚙️"}
+                        {selectedEntry.characterClass === "MERCHANT" && "💰"}
+                        {selectedEntry.characterClass === "SCHOLAR" && "📚"}
+                        {selectedEntry.characterClass === "BERSERKER" && "🔥"}
+                        {selectedEntry.characterClass === "NECROMANCER" && "💀"}
+                      </span>
+                      <span className="text-lg font-bold text-pixel-gold uppercase tracking-wider">
+                        {selectedEntry.characterClass === "WARRIOR" &&
+                          "Guerrier"}
+                        {selectedEntry.characterClass === "MAGE" && "Mage"}
+                        {selectedEntry.characterClass === "ROGUE" && "Voleur"}
+                        {selectedEntry.characterClass === "RANGER" && "Rôdeur"}
+                        {selectedEntry.characterClass === "PALADIN" &&
+                          "Paladin"}
+                        {selectedEntry.characterClass === "ENGINEER" &&
+                          "Ingénieur"}
+                        {selectedEntry.characterClass === "MERCHANT" &&
+                          "Marchand"}
+                        {selectedEntry.characterClass === "SCHOLAR" && "Érudit"}
+                        {selectedEntry.characterClass === "BERSERKER" &&
+                          "Berserker"}
+                        {selectedEntry.characterClass === "NECROMANCER" &&
+                          "Nécromancien"}
+                      </span>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Stats */}
+              <div className="grid grid-cols-2 gap-4 mb-6">
+                <div className="bg-black/60 border border-pixel-gold/30 rounded p-4">
+                  <div className="text-xs text-gray-400 uppercase tracking-widest mb-1">
+                    Score
+                  </div>
+                  <div className="text-2xl font-bold text-pixel-gold">
+                    {formatScore(selectedEntry.score)}
+                  </div>
+                </div>
+                <div className="bg-black/60 border border-pixel-gold/30 rounded p-4">
+                  <div className="text-xs text-gray-400 uppercase tracking-widest mb-1">
+                    Niveau
+                  </div>
+                  <div className="text-2xl font-bold text-pixel-gold">
+                    Lv.{selectedEntry.level}
+                  </div>
+                </div>
+              </div>
+
+              {/* Bio */}
+              {selectedEntry.bio && (
+                <div className="border-t border-pixel-gold/30 pt-6">
+                  <div className="text-xs text-pixel-gold uppercase tracking-widest mb-3 font-bold">
+                    Bio
+                  </div>
+                  <p className="text-gray-200 leading-relaxed whitespace-pre-wrap break-words">
+                    {selectedEntry.bio}
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
     </section>
   );
 }