diff --git a/src/assets/images/commen/empty.png b/src/assets/images/commen/empty.png
new file mode 100644
index 0000000..5e867fa
Binary files /dev/null and b/src/assets/images/commen/empty.png differ
diff --git a/src/compenents/empty/index.module.scss b/src/compenents/empty/index.module.scss
new file mode 100644
index 0000000..be48ad6
--- /dev/null
+++ b/src/compenents/empty/index.module.scss
@@ -0,0 +1,4 @@
+.img-box {
+  width: 100%;
+  height: auto;
+}
diff --git a/src/compenents/empty/index.tsx b/src/compenents/empty/index.tsx
new file mode 100644
index 0000000..15952a2
--- /dev/null
+++ b/src/compenents/empty/index.tsx
@@ -0,0 +1,12 @@
+import styles from "./index.module.scss";
+import React from "react";
+import { Image } from "antd";
+import empty from "../../assets/images/commen/empty.png";
+
+export const Empty: React.FC = () => {
+  return (
+    <div className={styles["img-box"]}>
+      <Image src={empty} width={400} height={400} preview={false} />
+    </div>
+  );
+};
diff --git a/src/compenents/index.ts b/src/compenents/index.ts
index f890b50..a795638 100644
--- a/src/compenents/index.ts
+++ b/src/compenents/index.ts
@@ -4,3 +4,4 @@ export * from "./no-header";
 export * from "./header";
 export * from "./change-password";
 export * from "./user-info"
+export * from "./empty"
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 23bdda8..ca9de95 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
-import { Row, Col, Empty, Spin, Image } from "antd";
+import { Row, Col, Spin, Image } from "antd";
 import type { TabsProps } from "antd";
 import { user } from "../../api/index";
 import styles from "./index.module.scss";
 import { useSelector } from "react-redux";
 import { CoursesModel } from "./compenents/courses-model";
+import { Empty } from "../../compenents";
 import myLesoon from "../../assets/images/commen/icon-mylesoon.png";
 import studyTime from "../../assets/images/commen/icon-studytime.png";
 import iconRoute from "../../assets/images/commen/icon-route.png";
@@ -249,7 +250,7 @@ const IndexPage = () => {
           }}
         >
           <Col span={24}>
-            <Empty description="暂无课程" />
+            <Empty />
           </Col>
         </Row>
       )}
diff --git a/src/pages/latest-learn/index.tsx b/src/pages/latest-learn/index.tsx
index fb27841..5926434 100644
--- a/src/pages/latest-learn/index.tsx
+++ b/src/pages/latest-learn/index.tsx
@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from "react";
 import styles from "./index.module.scss";
 import { course } from "../../api/index";
-import { Row, Col, Empty, Spin, Image, Progress } from "antd";
+import { Row, Col, Spin, Image, Progress } from "antd";
+import { Empty } from "../../compenents";
 import mediaIcon from "../../assets/images/commen/icon-medal.png";
 import { useNavigate } from "react-router-dom";
 
@@ -25,19 +26,22 @@ const LatestLearnPage = () => {
   return (
     <div>
       <div className={styles["content"]}>
-        <Row style={{ width: 1200 }}>
-          {loading && (
+        {loading && (
+          <Row style={{ width: 1200 }}>
             <div className="float-left d-j-flex mt-50">
               <Spin size="large" />
             </div>
-          )}
-          {courses.length === 0 && (
+          </Row>
+        )}
+        {!loading && courses.length === 0 && (
+          <Row style={{ width: 1200 }}>
             <Col span={24}>
-              <Empty description="暂无记录" />
+              <Empty />
             </Col>
-          )}
-        </Row>
-        {courses.length > 0 &&
+          </Row>
+        )}
+        {!loading &&
+          courses.length > 0 &&
           courses.map((item: any) => (
             <div
               key={item.course.id}