diff --git a/app/templates/attendance.html b/app/templates/attendance.html
index 8f26bf8..ce32e09 100644
--- a/app/templates/attendance.html
+++ b/app/templates/attendance.html
@@ -44,9 +44,10 @@
     </div>
     <div class="layui-body">
         <div id="sign-in-reminder" class="layui-container">
-            <h1>课程签到</h1>
-            <p>课程即将开始，请抓紧时间签到！</p>
-            <!-- 操作按钮 -->
+            <blockquote class="layui-elem-quote layui-text" id="title">
+                课程签到
+            </blockquote>
+            <div class="layui-text" id="course-info"></div>
             <div class="layui-row" style="margin-top: 20px;">
                 <div class="layui-col-xs12">
                     <button class="layui-btn" id="sign-in-btn">立即签到</button>
@@ -62,7 +63,41 @@
 <script src="/static/js/menu.js"></script>
 <script src="/static/js/logout.js"></script>
 <script>
-    // 请求后端获取菜单数
+    $(document).ready(function () {
+        // 获取课程名称或状态
+        $.get("/api/get-course-name", function (response) {
+
+            if (response.msg === "ok") {
+                // 如果后端返回课程名
+                $("#course-info").text("课程：" +  response.data.course_name +" 在上课时间内，请及时签到");
+                // 启用签到按钮
+                $("#sign-in-btn").prop('disabled', false);
+            } else {
+                // 根据不同的消息更新状态
+                $("#course-info").text(response.msg); // 显示没有课程的消息
+                // 禁用签到按钮
+                $("#sign-in-btn").prop('disabled', true);
+            }
+        });
+
+        // 绑定签到按钮事件
+        $("#sign-in-btn").click(function () {
+            if (!$(this).prop('disabled')) {
+                // 发送签到请求到后端
+                $.post("/api/student-sign-in", function (response) {
+                    // 处理签到后的响应
+                    if (response.success) {
+                        layer.msg('签到成功!');
+                    } else {
+                        layer.msg("签到失败!");
+                    }
+                });
+            } else {
+                alert("当前不可签到"); // Or handle disabled button click as needed
+            }
+        });
+    });
 </script>
+
 </body>
 </html>