diff --git a/app/templates/course-info.html b/app/templates/course-info.html
index 152dbf7..eb359a0 100644
--- a/app/templates/course-info.html
+++ b/app/templates/course-info.html
@@ -42,6 +42,36 @@
             </ul>
         </div>
     </div>
+    <div class="layui-body">
+        <!-- 内容主体区域 -->
+        <div style="padding: 15px;">
+            <blockquote class="layui-elem-quote layui-text">
+                课程信息
+            </blockquote>
+            <table class="layui-table">
+                <colgroup>
+                    <col width="150">
+                    <col width="150">
+                    <col width="150">
+                    <col width="100">
+                    <col>
+                </colgroup>
+                <thead>
+                <tr>
+                    <th>课程名称</th>
+                    <th>课程代码</th>
+                    <th>任课教师</th>
+                    <th>学分</th>
+                    <th>课程描述</th>
+                </tr>
+                </thead>
+                <tbody>
+                <!-- 动态生成的课程信息将填充在这里 -->
+                </tbody>
+            </table>
+        </div>
+    </div>
+
 </div>
 
 <script src="static/jquery.min.js"></script> <!-- 确保已经引入jQuery -->
@@ -60,6 +90,21 @@
         layui.element.render('nav', 'test');
     });
 
+    $.get('/api/get-course-info', function (courses) {
+        var tbody = $('.layui-table tbody');
+        tbody.empty(); // 清空表格现有内容
+        courses.forEach(function (course) {
+            var row = '<tr>' +
+                '<td>' + course.course_name + '</td>' +
+                '<td>' + course.course_code + '</td>' +
+                '<td>' + course.instructor_name + '</td>' +
+                '<td>' + course.credits + '</td>' +
+                '<td>' + course.description + '</td>' +
+                '</tr>';
+            tbody.append(row); // 将新行添加到表格中
+        });
+    });
+
     layui.use(['jquery'], function () {
         var $ = layui.jquery; // 获取Layui的jQuery对象