prof_pic

app/page.tsx

@@ -235,12 +235,25 @@ function Home() {
       <div className="w-full p-4 flex flex-col items-center justify-center">
         <div className="w-full max-w-4xl">
           {leaderboardData.map((item) => (
-            <motion.div key ="id" whileHover={{scale:1.1, transition:{duration:0.2}}}>
-            <div key={item["id"]} className={`leaderboard-card glassmorphism ${item["points"] >= 0 ? 'positive' : 'negative'} mx-auto mb-4`} onClick={() => openModal(item)}>
-              <p className="text-center font-bold">{item["username"]}</p>
-              <p className="text-center">{parseFloat(item["points"]).toFixed(2)}x</p>
+            <motion.div key="id" whileHover={{ scale: 1.1, transition: { duration: 0.2 } }}>
+            <div 
+              key={item["id"]} 
+              className={`leaderboard-card glassmorphism ${item["points"] >= 0 ? 'positive' : 'negative'} mx-auto mb-4`} 
+              onClick={() => openModal(item)}
+            >
+              <div className="flex items-center space-x-4">
+                <img 
+                  src={item["img_url"]} 
+                  alt={`${item["username"]}'s profile`} 
+                  className="w-12 h-12 rounded-full mr-4"
+                />
+                <div>
+                  <p className="text-center font-bold">{item["username"]}</p>
+                  <p className="text-center">{parseFloat(item["points"]).toFixed(2)}x</p>
+                </div>
+              </div>
             </div>
-            </motion.div>
+          </motion.div>
           ))}
         </div>
       </div>