diff --git a/front/src/MusicPage.js b/front/src/MusicPage.js
index 1a63a89..4a9c465 100644
--- a/front/src/MusicPage.js
+++ b/front/src/MusicPage.js
@@ -18,6 +18,7 @@
   { label: "游戏", icon: <SportsEsportsIcon />, path: "/game" },
   { label: "体育", icon: <SportsMartialArtsIcon />, path: "/sport" },
   { label: "资料", icon: <PersonIcon />, path: "/info" },
+  { label: "发布", icon: <AccountCircleIcon />, path: "/publish" }, // Added Publish option
 ];
 
 const areaTabs = [
@@ -28,6 +29,12 @@
   { label: "其他", icon: <PersonIcon fontSize="small" /> },
 ];
 
+const exampleTorrents = [
+  { type: "Pop", title: "实例1", id: 1 },
+  { type: "Rock", title: "实例2", id: 2 },
+  { type: "Jazz", title: "实例3", id: 3 },
+];
+
 export default function MusicPage() {
   const navigate = useNavigate();
   const [activeTab, setActiveTab] = React.useState(0);
@@ -89,8 +96,8 @@
           </div>
         ))}
       </div>
-      <div className="table-section card">
-        <table className="movie-table">
+      <div className="table-section">
+        <table className="music-table">
           <thead>
             <tr>
               <th>音乐类型</th>
@@ -99,11 +106,19 @@
             </tr>
           </thead>
           <tbody>
-            {musicTypes.map(type => (
+            {musicTypes.map((type, index) => (
               <tr key={type}>
-                <td>{type}</td>
-                <td></td>
-                <td></td>
+                <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>