diff --git a/src/assets/images/commen/icon-medal.png b/src/assets/images/commen/icon-medal.png
new file mode 100644
index 0000000..01738f1
Binary files /dev/null and b/src/assets/images/commen/icon-medal.png differ
diff --git a/src/assets/images/commen/icon-mylesoon.png b/src/assets/images/commen/icon-mylesoon.png
new file mode 100644
index 0000000..57a7dab
Binary files /dev/null and b/src/assets/images/commen/icon-mylesoon.png differ
diff --git a/src/assets/images/commen/icon-route.png b/src/assets/images/commen/icon-route.png
new file mode 100644
index 0000000..4ee8b8a
Binary files /dev/null and b/src/assets/images/commen/icon-route.png differ
diff --git a/src/assets/images/commen/icon-studytime.png b/src/assets/images/commen/icon-studytime.png
new file mode 100644
index 0000000..efa2b85
Binary files /dev/null and b/src/assets/images/commen/icon-studytime.png differ
diff --git a/src/compenents/header/index.tsx b/src/compenents/header/index.tsx
index 93f1dea..0f61872 100644
--- a/src/compenents/header/index.tsx
+++ b/src/compenents/header/index.tsx
@@ -20,6 +20,8 @@ export const Header: React.FC = () => {
       navigate("/login");
     } else if (key === "change_password") {
       navigate("/change-password");
+    } else if (key === "user_center") {
+      navigate("/user-center");
     }
   };
 
diff --git a/src/pages/index/index.module.scss b/src/pages/index/index.module.scss
index e69de29..0cfac35 100644
--- a/src/pages/index/index.module.scss
+++ b/src/pages/index/index.module.scss
@@ -0,0 +1,44 @@
+.top-cont {
+  width: 1200px;
+  height: auto;
+  margin: 0 auto;
+  margin-top: 50px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  .top-item {
+    width: 588px;
+    height: 132px;
+    background: #ffffff;
+    box-shadow: 0px 4px 16px 4px rgba(0, 0, 0, 0.04);
+    border-radius: 12px;
+    box-sizing: border-box;
+    padding: 24px;
+
+    .title {
+      width: 100%;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      .icon {
+        width: 36px;
+        height: 36px;
+        margin-right: 16px;
+      }
+      span {
+        font-size: 20px;
+        font-weight: 600;
+        color: rgba(0, 0, 0, 0.88);
+        line-height: 36px;
+      }
+    }
+    .info {
+      margin-top: 24px;
+      width: 100%;
+      height: 24px;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 8dd5574..4f99438 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -1,5 +1,29 @@
+import styles from "./index.module.scss";
+import myLesoon from "../../assets/images/commen/icon-mylesoon.png";
+import studyTime from "../../assets/images/commen/icon-studytime.png";
+
 const IndexPage = () => {
-  return <>我是首页</>;
+  return (
+    <>
+      <div className={styles["top-cont"]}>
+        <div className={styles["top-item"]}>
+          <div className={styles["title"]}>
+            <img className={styles["icon"]} src={myLesoon} />
+            <span>我的课程</span>
+          </div>
+          <div className={styles["info"]}></div>
+        </div>
+        <div className={styles["top-item"]}>
+          <div className={styles["title"]}>
+            <img className={styles["icon"]} src={studyTime} />
+            <span>学习时长</span>
+          </div>
+          <div className={styles["info"]}></div>
+        </div>
+      </div>
+      我是首页
+    </>
+  );
 };
 
 export default IndexPage;