diff --git a/packages/uni_app/lib/view/course_unit_info/widgets/course_unit_classes.dart b/packages/uni_app/lib/view/course_unit_info/widgets/course_unit_classes.dart
index 5c5822c06..1510e697d 100644
--- a/packages/uni_app/lib/view/course_unit_info/widgets/course_unit_classes.dart
+++ b/packages/uni_app/lib/view/course_unit_info/widgets/course_unit_classes.dart
@@ -5,43 +5,67 @@ import 'package:uni/model/providers/startup/session_provider.dart';
 import 'package:uni/view/course_unit_info/widgets/course_unit_info_card.dart';
 import 'package:uni/view/course_unit_info/widgets/course_unit_student_row.dart';
 
-class CourseUnitClassesView extends StatelessWidget {
+class CourseUnitClassesView extends StatefulWidget {
   const CourseUnitClassesView(this.classes, {super.key});
 
   final List<CourseUnitClass> classes;
 
+  @override
+  _CourseUnitClassesViewState createState() => _CourseUnitClassesViewState();
+}
+
+class _CourseUnitClassesViewState extends State<CourseUnitClassesView> {
+  int selectedIndex = 0;
+
   @override
   Widget build(BuildContext context) {
     final session = context.read<SessionProvider>().state!;
-    final cards = <CourseUnitInfoCard>[];
-    for (final courseUnitClass in classes) {
-      final isMyClass = courseUnitClass.students
-          .where(
-            (student) =>
-                student.number ==
-                (int.tryParse(
-                      session.username.replaceAll(RegExp(r'\D'), ''),
-                    ) ??
-                    0),
-          )
-          .isNotEmpty;
-      cards.add(
-        CourseUnitInfoCard(
-          isMyClass
-              ? '${courseUnitClass.className} *'
-              : courseUnitClass.className,
-          Column(
-            children: courseUnitClass.students
-                .map((student) => CourseUnitStudentRow(student, session))
-                .toList(),
-          ),
-        ),
-      );
-    }
+    final studentNumber =
+        int.tryParse(session.username.replaceAll(RegExp(r'\D'), '')) ?? 0;
 
-    return Container(
-      padding: const EdgeInsets.only(left: 10, right: 10),
-      child: ListView(children: cards),
+    return SingleChildScrollView(
+      child: Column(
+        children: [
+          SizedBox(
+            height: 50,
+            child: ListView.builder(
+              scrollDirection: Axis.horizontal,
+              itemCount: widget.classes.length,
+              itemBuilder: (context, index) {
+                final courseUnitClass = widget.classes[index];
+                final isMyClass = courseUnitClass.students
+                    .any((student) => student.number == studentNumber);
+                final isSelected = index == selectedIndex;
+                return GestureDetector(
+                  onTap: () {
+                    setState(() {
+                      selectedIndex = index;
+                    });
+                  },
+                  child: Container(
+                    padding: const EdgeInsets.symmetric(horizontal: 10),
+                    alignment: Alignment.center,
+                    child: Text(
+                      isMyClass
+                          ? '${courseUnitClass.className} *'
+                          : courseUnitClass.className,
+                      style: TextStyle(
+                        fontWeight:
+                            isSelected ? FontWeight.bold : FontWeight.normal,
+                      ),
+                    ),
+                  ),
+                );
+              },
+            ),
+          ),
+          Column(
+              children: widget.classes[selectedIndex].students
+                  .map((student) => CourseUnitStudentRow(student, session))
+                  .toList(),
+            ),
+        ],
+      ),
     );
   }
 }