public/css/courses.css

@@ -162,6 +162,26 @@
     transform: rotate(180deg);
 }
 
+.course-row--header {
+    height: 48px;
+    padding: 0 20px;
+    background: var(--paper-2);
+    border-bottom: 1px solid var(--line);
+    cursor: default;
+}
+
+.course-row--header:hover {
+    background: var(--paper-2);
+}
+
+.course-header-cell {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--ink-3);
+}
+
 .course-cell {
     display: flex;
     flex-direction: column;

views/partials/course-table.ejs

@@ -2,6 +2,12 @@
   <p style="text-align: center; color: var(--ink-3); padding: 40px 0;">No courses found. Use "Import from Tjing" or scrape courses from PDGA.</p>
 <% } else { %>
 <div class="course-grid" data-total-count="<%= courses.length %>">
+  <div class="course-row course-row--header" role="row">
+    <div class="course-header-cell">Course</div>
+    <div class="course-header-cell">City</div>
+    <div class="course-header-cell">Last updated</div>
+    <div class="course-header-cell"></div>
+  </div>
   <% courses.forEach(function(course) {
       var layoutCount = course.layoutCount || 0;
       var activeLayoutCount = course.activeLayoutCount || 0;