diff --git a/front/src/SportPage.js b/front/src/SportPage.js
new file mode 100644
index 0000000..81bc2a2
--- /dev/null
+++ b/front/src/SportPage.js
@@ -0,0 +1,200 @@
+import React from "react";
+import MovieIcon from "@mui/icons-material/Movie";
+import EmailIcon from "@mui/icons-material/Email";
+import MusicNoteIcon from "@mui/icons-material/MusicNote";
+import EmojiPeopleIcon from "@mui/icons-material/EmojiPeople";
+import SportsEsportsIcon from "@mui/icons-material/SportsEsports";
+import SportsMartialArtsIcon from "@mui/icons-material/SportsMartialArts";
+import PersonIcon from "@mui/icons-material/Person";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import "./App.css";
+import { useNavigate } from "react-router-dom";
+
+const navItems = [
+  { label: "电影", icon: <MovieIcon />, path: "/movie" },
+  { label: "剧集", icon: <EmailIcon />, path: "/tv" },
+  { label: "音乐", icon: <MusicNoteIcon />, path: "/music" },
+  { label: "动漫", icon: <EmojiPeopleIcon />, path: "/anime" },
+  { label: "游戏", icon: <SportsEsportsIcon />, path: "/game" },
+  { label: "体育", icon: <SportsMartialArtsIcon />, path: "/sport" },
+  { label: "资料", icon: <PersonIcon />, path: "/info" },
+];
+
+const sportTypes = [""];
+
+const areaTabs = [
+  { label: "篮球", icon: <MovieIcon fontSize="small" /> },
+  { label: "足球", icon: <EmailIcon fontSize="small" /> },
+  { label: "羽毛球", icon: <EmojiPeopleIcon fontSize="small" /> },
+  { label: "排球", icon: <PersonIcon fontSize="small" /> },
+  { label: "电竞", icon: <PersonIcon fontSize="small" />, active: true },
+];
+
+export default function SportPage() {
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = React.useState(0);
+
+  // 每个tab对应的运动类型
+  const sportTypesList = [
+    ["篮球赛事", "篮球技巧", "篮球明星"], // 篮球
+    ["足球赛事", "足球技巧", "足球明星"], // 足球
+    ["羽毛球赛事", "羽毛球技巧"], // 羽毛球
+    ["排球赛事", "排球技巧"], // 排球
+    ["电竞赛事", "电竞技巧"], // 电竞
+  ];
+  const sportTypes = sportTypesList[activeTab] || [];
+
+  return (
+    <div className="container">
+      {/* 顶部空白与音乐界面一致，用户栏绝对定位在页面右上角 */}
+      <div style={{ height: 80 }} />
+      <div
+        className="user-bar"
+        style={{
+          position: "fixed",
+          top: 18,
+          right: 42,
+          zIndex: 100,
+          display: "flex",
+          alignItems: "center",
+          background: "#e0f3ff",
+          borderRadius: 12,
+          padding: "6px 18px",
+          boxShadow: "0 2px 8px #b2d8ea",
+          minWidth: 320,
+          minHeight: 48,
+          width: 420,
+        }}
+      >
+        <div
+          style={{ cursor: "pointer", marginRight: 16 }}
+          onClick={() => navigate("/user")}
+        >
+          <AccountCircleIcon
+            style={{
+              fontSize: 38,
+              color: "#1a237e",
+              background: "#e0f3ff",
+              borderRadius: "50%",
+            }}
+          />
+        </div>
+        <div style={{ color: "#222", fontWeight: 500, marginRight: 24 }}>
+          用户栏
+        </div>
+        <div
+          style={{
+            display: "flex",
+            gap: 28,
+            flex: 1,
+            justifyContent: "flex-end",
+            alignItems: "center",
+          }}
+        >
+          <span style={{ color: "#1976d2", fontWeight: 500 }}>
+            魔力值: <b>12345</b>
+          </span>
+          <span style={{ color: "#1976d2", fontWeight: 500 }}>
+            分享率: <b>2.56</b>
+          </span>
+          <span style={{ color: "#1976d2", fontWeight: 500 }}>
+            上传量: <b>100GB</b>
+          </span>
+          <span style={{ color: "#1976d2", fontWeight: 500 }}>
+            下载量: <b>50GB</b>
+          </span>
+        </div>
+      </div>
+      {/* 下方内容整体下移，留出与音乐界面一致的间距 */}
+      <div style={{ height: 32 }} />
+      <nav className="nav-bar card">
+        {navItems.map((item) => (
+          <div
+            key={item.label}
+            className={item.label === "体育" ? "nav-item active" : "nav-item"}
+            onClick={() => navigate(item.path)}
+          >
+            {item.icon}
+            <span>{item.label}</span>
+          </div>
+        ))}
+      </nav>
+      <div className="search-section card">
+        <input className="search-input" placeholder="输入搜索关键词" />
+        <button className="search-btn">
+          <span role="img" aria-label="search">
+            🔍
+          </span>
+        </button>
+      </div>
+      <div
+        className="area-tabs"
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          gap: 24,
+          margin: "18px 0",
+        }}
+      >
+        {areaTabs.map((tab, idx) => (
+          <div
+            key={tab.label}
+            className={activeTab === idx ? "area-tab active" : "area-tab"}
+            onClick={() => setActiveTab(idx)}
+          >
+            {tab.icon} <span>{tab.label}</span>
+          </div>
+        ))}
+      </div>
+      <div className="table-section">
+        <table className="movie-table">
+          <thead>
+            <tr>
+              <th>类型</th>
+              <th>标题</th>
+              <th>发布者</th>
+            </tr>
+          </thead>
+          <tbody>
+            {sportTypes.map((type) => (
+              <tr key={type}>
+                <td>{type}</td>
+                <td></td>
+                <td></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div style={{ height: 32 }} />
+      <Pagination />
+    </div>
+  );
+}
+
+function Pagination() {
+  const [page, setPage] = React.useState(3);
+  const total = 5;
+  return (
+    <div className="pagination">
+      <button
+        onClick={() => setPage((p) => Math.max(1, p - 1))}
+        disabled={page === 1}
+      >
+        上一页
+      </button>
+      <span className="page-num">
+        {page}/{total}
+      </span>
+      <button
+        onClick={() => setPage((p) => Math.min(total, p + 1))}
+        disabled={page === total}
+      >
+        下一页
+      </button>
+      <span className="page-info">
+        第 <b>{page}</b> 页
+      </span>
+    </div>
+  );
+}