diff --git a/front/src/MusicPage.js b/front/src/MusicPage.js
index 4a9c465..b39b0ee 100644
--- a/front/src/MusicPage.js
+++ b/front/src/MusicPage.js
@@ -22,11 +22,11 @@
 ];
 
 const areaTabs = [
-  { label: "大陆", icon: <MovieIcon fontSize="small" /> },
-  { label: "港台", icon: <EmailIcon fontSize="small" /> },
-  { label: "欧美", icon: <PersonIcon fontSize="small" /> },
-  { label: "日韩", icon: <EmojiPeopleIcon fontSize="small" /> },
-  { label: "其他", icon: <PersonIcon fontSize="small" /> },
+  { label: "古典音乐", icon: <MovieIcon fontSize="small" /> },
+  { label: "流行音乐", icon: <EmailIcon fontSize="small" /> },
+  { label: "摇滚", icon: <PersonIcon fontSize="small" /> },
+  { label: "电子音乐", icon: <EmojiPeopleIcon fontSize="small" /> },
+  { label: "说唱", icon: <PersonIcon fontSize="small" /> },
 ];
 
 const exampleTorrents = [
@@ -38,6 +38,7 @@
 export default function MusicPage() {
   const navigate = useNavigate();
   const [activeTab, setActiveTab] = React.useState(0);
+  const [musicList, setMusicList] = React.useState([]);
 
   // 每个tab对应的音乐类型
   const musicTypesList = [
@@ -49,6 +50,15 @@
   ];
   const musicTypes = musicTypesList[activeTab] || [];
 
+  React.useEffect(() => {
+    // 假设后端接口为 /api/musics?area=大陆
+    const area = areaTabs[activeTab].label;
+    fetch(`http://192.168.5.9:8080/api/get-seed-list-by-tag?tag=${encodeURIComponent(area)}`)
+      .then(res => res.json())
+      .then(data => setMusicList(data))
+      .catch(() => setMusicList([]));
+  }, [activeTab]);
+
   return (
     <div className="container music-bg">
       {/* 顶部空白与音乐界面一致，用户栏绝对定位在页面右上角 */}
@@ -106,21 +116,39 @@
             </tr>
           </thead>
           <tbody>
-            {musicTypes.map((type, index) => (
-              <tr key={type}>
-                <td>
-                  <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                    {type}
-                  </a>
-                </td>
-                <td>
-                  <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                    种子{index + 1}
-                  </a>
-                </td>
-                <td>发布者{index + 1}</td>
-              </tr>
-            ))}
+            {musicList.length > 0 ? (
+              musicList.map((item, index) => (
+                <tr key={item.id || index}>
+                  <td>
+                    <a href={`/torrent/${item.seedid}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
+                      {item.seedtag}
+                    </a>
+                  </td>
+                  <td>
+                    <a href={`/torrent/${item.seedid}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
+                      {item.title}
+                    </a>
+                  </td>
+                  <td>{item.user.username}</td>
+                </tr>
+              ))
+            ) : (
+              musicTypes.map((type, index) => (
+                <tr key={type}>
+                  <td>
+                    <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
+                      {type}
+                    </a>
+                  </td>
+                  <td>
+                    <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
+                      种子{index + 1}
+                    </a>
+                  </td>
+                  <td>发布者{index + 1}</td>
+                </tr>
+              ))
+            )}
           </tbody>
         </table>
       </div>