diff --git a/src/main.scss b/src/main.scss
index b2f03c4..e71e598 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -32,6 +32,13 @@ code {
   float: left;
   height: auto;
 }
+
+.float-left {
+  width: 100%;
+  height: auto;
+  float: left;
+}
+
 .main-header {
   position: relative;
   width: 100%;
diff --git a/src/pages/index/index.module.scss b/src/pages/index/index.module.scss
index 8ab7721..f66752b 100644
--- a/src/pages/index/index.module.scss
+++ b/src/pages/index/index.module.scss
@@ -107,7 +107,7 @@
   width: 100%;
   height: auto;
   box-sizing: border-box;
-  padding: 96px 20px 55px 20px;
+  padding: 0px 20px 55px 20px;
   text-align: left;
   overflow-x: hidden;
   overflow-y: auto;
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 83d66c9..eec950d 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
-import { Dropdown, Skeleton, Tabs } from "antd-mobile";
+import { Dropdown, PullToRefresh, Skeleton, Tabs } from "antd-mobile";
+import { sleep } from "antd-mobile/es/utils/sleep";
 import { DropdownRef } from "antd-mobile/es/components/dropdown";
 import { user } from "../../api/index";
 import styles from "./index.module.scss";
@@ -71,14 +72,15 @@ const IndexPage = () => {
   }, []);
 
   useEffect(() => {
+    setLoading(true);
     if (currentDepId === 0) {
+      setLoading(false);
       return;
     }
     getData();
   }, [currentDepId, categoryId]);
 
   const getData = () => {
-    setLoading(true);
     user.courses(currentDepId, categoryId).then((res: any) => {
       const records = res.data.learn_course_records;
       setLearnCourseRecords(records);
@@ -265,61 +267,74 @@ const IndexPage = () => {
           </Dropdown.Item>
         </Dropdown>
       </div>
-      <div className={styles["list-box"]}>
-        {loading &&
-          Array.from({ length: 2 }).map((_, i) => (
-            <div
-              style={{
-                width: "100%",
-                height: 75,
-                display: "flex",
-                alignItems: "center",
-                marginBottom: 30,
-                marginTop: 30,
-              }}
-              key={i}
-            >
-              <Skeleton
-                animated
-                style={{
-                  width: 100,
-                  height: 75,
-                  borderRadius: 8,
-                  marginRight: 15,
-                }}
-              />
-              <div
-                style={{
-                  flex: 1,
-                  height: 75,
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "space-between",
-                }}
-              >
-                <Skeleton animated style={{ width: "100%", height: 21 }} />
-                <Skeleton animated style={{ width: "100%", height: 24 }} />
-              </div>
-            </div>
-          ))}
-        {!loading && coursesList.length === 0 && <Empty></Empty>}
-        {!loading && coursesList.length > 0 && (
-          <>
-            {coursesList.map((item: any) => (
-              <div className={styles["item"]} key={item.id}>
-                <CoursesModel
-                  id={item.id}
-                  title={item.title}
-                  thumb={item.thumb}
-                  isRequired={item.is_required}
-                  record={learnCourseRecords[item.id]}
-                  hourCount={learnCourseHourCount[item.id]}
-                ></CoursesModel>
-              </div>
-            ))}
-            <Footer></Footer>
-          </>
-        )}
+      <div
+        className="float-left"
+        style={{ position: "relative", paddingTop: 96 }}
+      >
+        <PullToRefresh
+          onRefresh={async () => {
+            setLoading(true);
+            await sleep(700);
+            getData();
+          }}
+        >
+          <div className={styles["list-box"]}>
+            {loading &&
+              Array.from({ length: 2 }).map((_, i) => (
+                <div
+                  style={{
+                    width: "100%",
+                    height: 75,
+                    display: "flex",
+                    alignItems: "center",
+                    marginBottom: 30,
+                    marginTop: 30,
+                  }}
+                  key={i}
+                >
+                  <Skeleton
+                    animated
+                    style={{
+                      width: 100,
+                      height: 75,
+                      borderRadius: 8,
+                      marginRight: 15,
+                    }}
+                  />
+                  <div
+                    style={{
+                      flex: 1,
+                      height: 75,
+                      display: "flex",
+                      flexDirection: "column",
+                      justifyContent: "space-between",
+                    }}
+                  >
+                    <Skeleton animated style={{ width: "100%", height: 21 }} />
+                    <Skeleton animated style={{ width: "100%", height: 24 }} />
+                  </div>
+                </div>
+              ))}
+            {!loading && coursesList.length === 0 && <Empty></Empty>}
+            {!loading && coursesList.length > 0 && (
+              <>
+                {coursesList.map((item: any) => (
+                  <div className={styles["item"]} key={item.id}>
+                    <CoursesModel
+                      id={item.id}
+                      title={item.title}
+                      thumb={item.thumb}
+                      isRequired={item.is_required}
+                      record={learnCourseRecords[item.id]}
+                      hourCount={learnCourseHourCount[item.id]}
+                    ></CoursesModel>
+                  </div>
+                ))}
+                <Footer></Footer>
+              </>
+            )}
+          </div>{" "}
+        </PullToRefresh>
       </div>
     </div>
   );
diff --git a/src/pages/study/index.tsx b/src/pages/study/index.tsx
index 1b87bb1..9326999 100644
--- a/src/pages/study/index.tsx
+++ b/src/pages/study/index.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
-import { Skeleton } from "antd-mobile";
+import { PullToRefresh, Skeleton } from "antd-mobile";
+import { sleep } from "antd-mobile/es/utils/sleep";
 import styles from "./index.module.scss";
 import { course } from "../../api/index";
 import { Empty } from "../../components";
@@ -17,14 +18,11 @@ const StudyPage = () => {
   }, []);
 
   useEffect(() => {
+    setLoading(true);
     getCourses();
   }, []);
 
   const getCourses = () => {
-    if (loading) {
-      return;
-    }
-    setLoading(true);
     course
       .latestLearn()
       .then((res: any) => {
@@ -61,87 +59,97 @@ const StudyPage = () => {
   return (
     <div className="main-body">
       <div className={styles["title"]}>最近学习</div>
-      <div className={styles["list-box"]}>
-        {loading &&
-          Array.from({ length: 2 }).map((_, i) => (
-            <div className={styles["item"]} key={i}>
-              <Skeleton
-                animated
-                style={{
-                  width: 100,
-                  height: 75,
-                  borderRadius: 8,
-                  marginRight: 15,
-                }}
-              />
-              <div className={styles["item-info"]}>
-                <Skeleton animated style={{ width: "100%", height: 21 }} />
-                <Skeleton animated style={{ width: "100%", height: 24 }} />
-              </div>
-            </div>
-          ))}
-        {!loading &&
-          courses.length === 0 &&
-          todayCourses.length === 0 &&
-          yesterdayCourses.length === 0 && <Empty></Empty>}
-        {!loading && (
-          <>
-            {todayCourses.length > 0 && (
-              <>
-                <div className={styles["label"]}>今日</div>
-                {todayCourses.map((item: any, index: number) => (
-                  <div key={index} style={{ width: "100%" }}>
-                    {item.course && (
-                      <CoursesModel
-                        id={item.course.id}
-                        title={item.course.title}
-                        thumb={item.course.thumb}
-                        isRequired={item.course.is_required}
-                        record={item.record}
-                      ></CoursesModel>
-                    )}
+      <div className="float-left" style={{ position: "relative" }}>
+        <PullToRefresh
+          onRefresh={async () => {
+            setLoading(true);
+            await sleep(700);
+            getCourses();
+          }}
+        >
+          <div className={styles["list-box"]}>
+            {loading &&
+              Array.from({ length: 2 }).map((_, i) => (
+                <div className={styles["item"]} key={i}>
+                  <Skeleton
+                    animated
+                    style={{
+                      width: 100,
+                      height: 75,
+                      borderRadius: 8,
+                      marginRight: 15,
+                    }}
+                  />
+                  <div className={styles["item-info"]}>
+                    <Skeleton animated style={{ width: "100%", height: 21 }} />
+                    <Skeleton animated style={{ width: "100%", height: 24 }} />
                   </div>
-                ))}
+                </div>
+              ))}
+            {!loading &&
+              courses.length === 0 &&
+              todayCourses.length === 0 &&
+              yesterdayCourses.length === 0 && <Empty></Empty>}
+            {!loading && (
+              <>
+                {todayCourses.length > 0 && (
+                  <>
+                    <div className={styles["label"]}>今日</div>
+                    {todayCourses.map((item: any, index: number) => (
+                      <div key={index} style={{ width: "100%" }}>
+                        {item.course && (
+                          <CoursesModel
+                            id={item.course.id}
+                            title={item.course.title}
+                            thumb={item.course.thumb}
+                            isRequired={item.course.is_required}
+                            record={item.record}
+                          ></CoursesModel>
+                        )}
+                      </div>
+                    ))}
+                  </>
+                )}
+                {yesterdayCourses.length > 0 && (
+                  <>
+                    <div className={styles["label"]}>昨日</div>
+                    {yesterdayCourses.map((item: any, index: number) => (
+                      <div key={index} style={{ width: "100%" }}>
+                        {item.course && (
+                          <CoursesModel
+                            id={item.course.id}
+                            title={item.course.title}
+                            thumb={item.course.thumb}
+                            isRequired={item.course.is_required}
+                            record={item.record}
+                          ></CoursesModel>
+                        )}
+                      </div>
+                    ))}
+                  </>
+                )}
+                {courses.length > 0 && (
+                  <>
+                    <div className={styles["label"]}>更早</div>
+                    {courses.map((item: any, index: number) => (
+                      <div key={index} style={{ width: "100%" }}>
+                        {item.course && (
+                          <CoursesModel
+                            id={item.course.id}
+                            title={item.course.title}
+                            thumb={item.course.thumb}
+                            isRequired={item.course.is_required}
+                            record={item.record}
+                          ></CoursesModel>
+                        )}
+                      </div>
+                    ))}
+                  </>
+                )}
               </>
             )}
-            {yesterdayCourses.length > 0 && (
-              <>
-                <div className={styles["label"]}>昨日</div>
-                {yesterdayCourses.map((item: any, index: number) => (
-                  <div key={index} style={{ width: "100%" }}>
-                    {item.course && (
-                      <CoursesModel
-                        id={item.course.id}
-                        title={item.course.title}
-                        thumb={item.course.thumb}
-                        isRequired={item.course.is_required}
-                        record={item.record}
-                      ></CoursesModel>
-                    )}
-                  </div>
-                ))}
-              </>
-            )}
-            {courses.length > 0 && (
-              <>
-                <div className={styles["label"]}>更早</div>
-                {courses.map((item: any, index: number) => (
-                  <div key={index} style={{ width: "100%" }}>
-                    {item.course && (
-                      <CoursesModel
-                        id={item.course.id}
-                        title={item.course.title}
-                        thumb={item.course.thumb}
-                        isRequired={item.course.is_required}
-                        record={item.record}
-                      ></CoursesModel>
-                    )}
-                  </div>
-                ))}
-              </>
-            )}
-          </>
-        )}
+          </div>
+        </PullToRefresh>
       </div>
     </div>
   );