diff --git a/assets/vue/components/course/CatalogueCourseCard.vue b/assets/vue/components/course/CatalogueCourseCard.vue
new file mode 100644
index 00000000000..13e08390e49
--- /dev/null
+++ b/assets/vue/components/course/CatalogueCourseCard.vue
@@ -0,0 +1,180 @@
+<template>
+  <div
+    class="course-card hover:shadow-lg transition duration-300 rounded-2xl overflow-hidden border border-gray-300 bg-white flex flex-col"
+  >
+    <img
+      :src="course.illustrationUrl"
+      :alt="course.title"
+      class="w-full h-40 object-cover"
+    />
+    <div class="p-4 flex flex-col flex-grow gap-2">
+      <h3 class="text-xl font-semibold text-gray-800">{{ course.title }}</h3>
+      <p class="text-sm text-gray-600 line-clamp-3">{{ course.description }}</p>
+
+      <div
+        v-if="course.duration"
+        class="text-sm text-gray-700"
+      >
+        <strong>{{ $t("Duration") }}:</strong> {{ durationInHours }}
+      </div>
+
+      <div
+        v-if="course.dependencies?.length"
+        class="text-sm text-gray-700"
+      >
+        <strong>{{ $t("Dependencies") }}:</strong>
+        {{ course.dependencies.map((dep) => dep.title).join(", ") }}
+      </div>
+
+      <div
+        v-if="course.price !== undefined"
+        class="text-sm text-gray-700"
+      >
+        <strong>{{ $t("Price") }}:</strong>
+        {{ course.price > 0 ? "S/. " + course.price.toFixed(2) : $t("Free") }}
+      </div>
+
+      <div
+        v-if="course.categories?.length"
+        class="flex flex-wrap gap-1"
+      >
+        <span
+          v-for="cat in course.categories"
+          :key="cat.id"
+          class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full"
+        >
+          {{ cat.title }}
+        </span>
+      </div>
+
+      <div class="text-sm text-gray-700">
+        <strong>{{ $t("Language") }}:</strong> {{ course.courseLanguage }}
+      </div>
+
+      <div
+        v-if="course.teachers?.length"
+        class="text-sm text-gray-700"
+      >
+        <strong>{{ $t("Teachers") }}:</strong>
+        {{ course.teachers.map((t) => t.user.fullName).join(", ") }}
+      </div>
+
+      <Rating
+        :model-value="course.userVote?.vote || 0"
+        :stars="5"
+        :cancel="false"
+        @change="emitRating"
+        class="mt-2"
+      />
+      <div
+        class="text-xs text-gray-600 mt-1"
+        v-if="course.popularity || course.userVote?.vote"
+      >
+        {{ course.popularity || 0 }} Vote<span v-if="course.popularity !== 1">s</span>
+        |
+        {{ course.nbVisits || 0 }} Visite<span v-if="course.nbVisits !== 1">s</span>
+        <span v-if="course.userVote?.vote">
+          |
+          {{ $t("Your vote") }} [{{ course.userVote.vote }}]
+        </span>
+      </div>
+
+      <div class="mt-auto pt-2">
+        <router-link
+          v-if="course.visibility === 3 || (course.visibility === 2 && isUserInCourse)"
+          :to="{ name: 'CourseHome', params: { id: course.id } }"
+        >
+          <Button
+            :label="$t('Go to the course')"
+            icon="pi pi-external-link"
+            class="w-full"
+          />
+        </router-link>
+
+        <Button
+          v-else-if="course.visibility === 2 && course.subscribe && !isUserInCourse"
+          :label="$t('Subscribe')"
+          icon="pi pi-sign-in"
+          class="w-full"
+          @click="subscribeToCourse"
+        />
+
+        <Button
+          v-else-if="course.visibility === 2 && !course.subscribe && !isUserInCourse"
+          :label="$t('Subscription not allowed')"
+          icon="pi pi-ban"
+          disabled
+          class="w-full"
+        />
+
+        <Button
+          v-else-if="course.visibility === 1"
+          :label="$t('Private course')"
+          icon="pi pi-lock"
+          disabled
+          class="w-full"
+        />
+
+        <Button
+          v-else
+          :label="$t('Not available')"
+          icon="pi pi-eye-slash"
+          disabled
+          class="w-full"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import Rating from "primevue/rating"
+import Button from "primevue/button"
+import { computed, ref } from "vue"
+import courseRelUserService from "../../services/courseRelUserService"
+import { useRouter } from "vue-router"
+import { useNotification } from "../../composables/notification"
+
+const props = defineProps({
+  course: Object,
+  currentUserId: Number,
+})
+
+const emit = defineEmits(["rate", "subscribed"])
+
+const router = useRouter()
+const { showErrorNotification, showSuccessNotification } = useNotification()
+
+const isUserInCourse = computed(() => {
+  return props.course.users?.some((user) => user.user.id === props.currentUserId)
+})
+
+const durationInHours = computed(() => {
+  if (!props.course.duration) return "-"
+  const duration = props.course.duration / 3600
+  return props.course.durationExtra ? `${duration.toFixed(2)}+ h` : `${duration.toFixed(2)} h`
+})
+
+const emitRating = (event) => {
+  emit("rate", { value: event.value, course: props.course })
+}
+
+const subscribing = ref(false)
+const subscribeToCourse = async () => {
+  try {
+    subscribing.value = true
+
+    const response = await courseRelUserService.subscribe({
+      userId: props.currentUserId,
+      courseId: props.course.id,
+    })
+
+    emit("subscribed", { courseId: props.course.id, newUser: response })
+    showSuccessNotification("You have successfully subscribed to this course.")
+    router.push({ name: "CourseHome", params: { id: props.course.id } })
+  } catch (e) {
+    showErrorNotification("Failed to subscribe to the course.")
+  } finally {
+    subscribing.value = false
+  }
+}
+</script>
diff --git a/assets/vue/components/session/CatalogueSessionCard.vue b/assets/vue/components/session/CatalogueSessionCard.vue
new file mode 100644
index 00000000000..5c74722c2a3
--- /dev/null
+++ b/assets/vue/components/session/CatalogueSessionCard.vue
@@ -0,0 +1,296 @@
+<template>
+  <div
+    class="course-card hover:shadow-lg transition duration-300 rounded-2xl overflow-hidden border border-gray-300 bg-white flex flex-col"
+  >
+    <div
+      v-if="!hasThumbnail"
+      class="w-full h-40 bg-gray-30 flex items-center justify-center"
+    >
+      <i class="pi pi-calendar text-5xl text-gray-400" />
+    </div>
+    <img
+      v-else
+      :src="thumbnail"
+      :alt="session.title"
+      class="w-full h-40 object-cover"
+      @error="onImageError"
+    />
+
+    <div class="p-4 flex flex-col flex-grow gap-2">
+      <h3 class="text-xl font-semibold text-gray-800">{{ session.title }}</h3>
+      <p
+        v-if="session.description"
+        class="text-sm text-gray-600 line-clamp-3"
+        v-html="session.description"
+      />
+
+      <div class="text-sm text-gray-700">
+        <strong>{{ $t("Duration") }}:</strong> {{ duration }}
+      </div>
+
+      <div class="text-sm text-gray-700">
+        <strong>{{ $t("Start date") }}:</strong> {{ formattedStartDate }}
+      </div>
+
+      <div class="text-sm text-gray-700">
+        <strong>{{ $t("End date") }}:</strong> {{ formattedEndDate }}
+      </div>
+
+      <div
+        class="text-sm text-blue-600 cursor-pointer underline"
+        @click="showCourseDialog = true"
+      >
+        {{ courseCount }} {{ $t("course") }}<span v-if="courseCount !== 1">s</span>
+      </div>
+
+      <div
+        v-if="session.category"
+        class="text-sm text-gray-700"
+      >
+        <strong>{{ $t("Category") }}:</strong> {{ session.category.title }}
+      </div>
+
+      <div
+        v-if="languages.length"
+        class="text-sm text-gray-700"
+      >
+        <strong>{{ $t("Languages") }}:</strong> {{ languages.join(", ") }}
+      </div>
+
+      <div
+        v-if="teachers.length"
+        class="text-sm text-gray-700"
+      >
+        <strong>{{ $t("Teachers") }}:</strong> {{ teachers.join(", ") }}
+      </div>
+
+      <Rating
+        :model-value="session.userVote?.vote || 0"
+        :stars="5"
+        :cancel="false"
+        @change="emitRating"
+        class="mt-2"
+      />
+      <div class="text-xs text-gray-600 mt-1">
+        {{ session.popularity || 0 }} Vote<span v-if="session.popularity !== 1">s</span>
+        |
+        {{ session.nbVisits || 0 }} Visite<span v-if="session.nbVisits !== 1">s</span>
+        <span v-if="session.userVote?.vote">
+          |
+          {{ $t("Your vote") }} [{{ session.userVote.vote }}]
+        </span>
+      </div>
+
+      <div class="mt-auto pt-2">
+        <Button
+          v-if="isPast"
+          :label="$t('Not available')"
+          icon="pi pi-lock"
+          class="w-full"
+          disabled
+        />
+
+        <Button
+          v-else-if="!session.isSubscribed"
+          :label="$t('Subscribe')"
+          icon="pi pi-user-plus"
+          class="w-full p-button-success"
+          @click="subscribeToSession"
+        />
+
+        <Button
+          v-else-if="isFuture"
+          :label="$t('Registered')"
+          icon="pi pi-check"
+          class="w-full p-button- p-button-outlined"
+          disabled
+        />
+
+        <Button
+          v-else
+          :label="$t('Go to the session')"
+          icon="pi pi-external-link"
+          class="w-full"
+          @click="showGoDialog = true"
+        />
+      </div>
+    </div>
+
+    <Dialog
+      v-model:visible="showCourseDialog"
+      :header="$t('Courses')"
+      modal
+      class="w-96"
+    >
+      <ul class="list-disc pl-5 text-sm text-gray-700">
+        <template v-if="validCourses.length">
+          <li
+            v-for="item in validCourses"
+            :key="item.id"
+          >
+            {{ item.title }}
+          </li>
+        </template>
+        <template v-else>
+          <li class="text-gray-500 italic">{{ $t("No courses available") }}</li>
+        </template>
+      </ul>
+    </Dialog>
+    <Dialog
+      v-model:visible="showGoDialog"
+      :header="$t('Select a course')"
+      modal
+      class="w-96"
+    >
+      <ul class="pl-2 text-sm text-gray-800 space-y-3">
+        <template v-if="validCourses.length">
+          <li
+            v-for="item in validCourses"
+            :key="item.id"
+            class="flex justify-between items-center border-b pb-1"
+          >
+            <span class="w-2/3 truncate">{{ item.title }}</span>
+            <a
+              :href="`/course/${item.id}/home?sid=${session.id}`"
+              target="_blank"
+            >
+              <Button
+                icon="pi pi-sign-in"
+                :label="$t('Go')"
+                size="small"
+                class="p-button-sm p-button-text"
+              />
+            </a>
+          </li>
+        </template>
+        <template v-else>
+          <li class="text-gray-500 italic">{{ $t("No courses available") }}</li>
+        </template>
+      </ul>
+    </Dialog>
+  </div>
+</template>
+<script setup>
+import { ref, computed, watchEffect } from "vue"
+import Rating from "primevue/rating"
+import Button from "primevue/button"
+import Dialog from "primevue/dialog"
+import axios from "axios"
+import { useSecurityStore } from "../../store/securityStore"
+
+const showGoDialog = ref(false)
+const isLoading = ref(false)
+const emit = defineEmits(["rate", "subscribed"])
+const emitRating = (event) => {
+  emit("rate", { value: event.value, session: props.session })
+}
+
+const props = defineProps({
+  session: Object,
+})
+
+const securityStore = useSecurityStore()
+
+const showCourseDialog = ref(false)
+const fallback = ref(false)
+
+const thumbnail = computed(() => (!fallback.value ? props.session.imageUrl || null : null))
+const hasThumbnail = computed(() => !!props.session.imageUrl && !fallback.value)
+
+const now = new Date()
+const startDate = computed(() => new Date(props.session.startDate))
+const endDate = computed(() => new Date(props.session.endDate))
+
+const isFuture = computed(() => startDate.value > now)
+const isPast = computed(() => endDate.value < now)
+
+const onImageError = () => {
+  fallback.value = true
+}
+
+watchEffect(() => {
+  console.log("session.courses =", props.session.courses)
+  if (props.session.courses) {
+    props.session.courses.forEach((c, i) => console.log(`Course[${i}]`, c.course?.title))
+  }
+})
+
+const subscribeToSession = async () => {
+  isLoading.value = true
+  try {
+    const userId = securityStore.user.id
+    const sessionId = props.session.id
+
+    await axios.post("/api/session_rel_users", {
+      user: `/api/users/${userId}`,
+      session: `/api/sessions/${sessionId}`,
+      relationType: 0,
+      duration: 0,
+    })
+
+    const promises = (props.session.courses || []).map((c) =>
+      axios.post("/api/session_rel_course_rel_users", {
+        user: `/api/users/${userId}`,
+        session: `/api/sessions/${sessionId}`,
+        course: `/api/courses/${c.id}`,
+        status: 0,
+        visibility: 1,
+        legalAgreement: 0,
+        progress: 0,
+      }),
+    )
+
+    await Promise.all(promises)
+    emit("subscribed", props.session.id)
+  } catch (error) {
+    console.error("Error subscribing to session:", error)
+    alert("There was an error subscribing. Please try again.")
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const validCourses = computed(() => {
+  return (props.session.courses || []).filter((item) => item.title)
+})
+
+const courseCount = computed(() => validCourses.value.length)
+
+const formattedStartDate = computed(() => {
+  const d = new Date(props.session.startDate)
+  return isNaN(d) ? "-" : d.toLocaleDateString()
+})
+
+const formattedEndDate = computed(() => {
+  const d = new Date(props.session.endDate)
+  return isNaN(d) ? "-" : d.toLocaleDateString()
+})
+
+const duration = computed(() => {
+  const durations = (props.session.courses || []).map((item) => item.duration).filter((d) => typeof d === "number")
+
+  const total = durations.reduce((a, b) => a + b, 0)
+  const inHours = total / 3600
+  const hasMissing = (props.session.courses || []).some((item) => item.duration == null)
+  return hasMissing ? `${inHours.toFixed(2)}+ h` : `${inHours.toFixed(2)} h`
+})
+
+const languages = computed(() => {
+  const langs = new Set()
+  for (const item of props.session.courses || []) {
+    const lang = item.courseLanguage
+    if (lang) langs.add(lang)
+  }
+  return [...langs]
+})
+
+const teachers = computed(() => {
+  const all = []
+  for (const item of props.session.courses || []) {
+    for (const t of item.teachers || []) {
+      if (t.fullName) all.push(t.fullName)
+    }
+  }
+  return [...new Set(all)]
+})
+</script>
diff --git a/assets/vue/services/courseRelUserService.js b/assets/vue/services/courseRelUserService.js
index 8e22a521854..841e52c0850 100644
--- a/assets/vue/services/courseRelUserService.js
+++ b/assets/vue/services/courseRelUserService.js
@@ -8,6 +8,23 @@ async function findAll(searchParams) {
   return await baseService.getCollection("/api/course_rel_users", searchParams)
 }
 
+/**
+ * Subscribes a user to a course.
+ * @param {Object} params
+ * @param {number} params.userId
+ * @param {number} params.courseId
+ * @returns {Promise<Object>}
+ */
+async function subscribe({ userId, courseId }) {
+  return await baseService.post("/api/course_rel_users", {
+    user: `/api/users/${userId}`,
+    course: `/api/courses/${courseId}`,
+    relationType: 0,
+    status: 5,
+  })
+}
+
 export default {
   findAll,
+  subscribe,
 }
diff --git a/assets/vue/services/userRelCourseVoteService.js b/assets/vue/services/userRelCourseVoteService.js
index 32756f23b2d..264da1df060 100644
--- a/assets/vue/services/userRelCourseVoteService.js
+++ b/assets/vue/services/userRelCourseVoteService.js
@@ -11,13 +11,16 @@ import baseService from "./baseService"
  * @returns {Promise<Object>}
  */
 export async function saveVote({ courseIri, userId, vote, sessionId = null, urlId }) {
-  return await baseService.post("/api/user_rel_course_votes", {
-    course: courseIri,
+  const payload = {
     user: `/api/users/${userId}`,
     vote,
-    session: sessionId ? `/api/sessions/${sessionId}` : null,
     url: `/api/access_urls/${urlId}`,
-  })
+  }
+
+  if (courseIri) payload.course = courseIri
+  if (sessionId) payload.session = `/api/sessions/${sessionId}`
+
+  return await baseService.post("/api/user_rel_course_votes", payload)
 }
 
 /**
@@ -57,17 +60,19 @@ export async function updateVote({ iri, vote, sessionId = null, urlId }) {
  */
 export async function getUserVote({ userId, courseId, sessionId = null, urlId }) {
   try {
-    let query = `/api/user_rel_course_votes?user.id=${userId}&course.id=${courseId}`
+    let query = `/api/user_rel_course_votes?user.id=${userId}`
+
     if (urlId) query += `&url.id=${urlId}`
 
-    // Remove session.id if null
-    if (sessionId) {
-      query += `&session.id=${sessionId}`
+    if (courseId && courseId !== 0) {
+      query += `&course.id=${courseId}`
+    } else if (sessionId) {
+      query += `&session.id=${sessionId}&course=null`
     }
 
     const response = await baseService.get(query)
 
-    if (response && response["hydra:member"] && response["hydra:member"].length > 0) {
+    if (response?.["hydra:member"]?.length > 0) {
       return response["hydra:member"][0]
     }
 
diff --git a/assets/vue/views/course/CatalogueCourses.vue b/assets/vue/views/course/CatalogueCourses.vue
index 1d03746d6e8..b6a00ee701b 100644
--- a/assets/vue/views/course/CatalogueCourses.vue
+++ b/assets/vue/views/course/CatalogueCourses.vue
@@ -1,236 +1,129 @@
 <template>
-  <div class="card">
-    <DataTable
-      v-model:filters="filters"
-      :global-filter-fields="['title', 'description', 'category.title', 'courseLanguage']"
-      :loading="status"
-      :paginator="true"
-      :rows="9"
-      :value="courses"
-      class="p-datatable-courses p-datatable-lg"
-      data-key="id"
-      edit-mode="cell"
-      filter-display="menu"
-      responsive-layout="scroll"
-      striped-rows
-    >
-      <template #header>
-        <div class="table-header-container">
-          <div class="flex justify-content-end">
-            <Button
-              :label="$t('Clear filter results')"
-              class="p-button-outlined mr-2"
-              icon="pi pi-filter-slash"
-              type="button"
-              @click="clearFilter()"
-            />
-            <span class="p-input-icon-left">
-              <i class="pi pi-search" />
-              <InputText
-                v-model="filters['global'].value"
-                :placeholder="$t('Search')"
-              />
-            </span>
-          </div>
-        </div>
-      </template>
-      <template #empty>
-        {{ $t("No course available") }}
-      </template>
-      <template #loading>
-        {{ $t("Loading courses. Please wait.") }}
-      </template>
-      <Column
-        header=""
-        style="min-width: 5rem"
-      >
-        <template #body="{ data }">
-          <img
-            :alt="data.title"
-            :src="data.illustrationUrl"
-            class="course-image"
+  <div class="catalogue-courses p-4">
+    <div class="flex flex-wrap justify-between items-center mb-6 gap-4">
+      <div>
+        <strong>{{ $t("Total number of courses") }}:</strong>
+        {{ courses?.length || 0 }}<br />
+        <strong>{{ $t("Matching courses") }}:</strong>
+        {{ filteredCourses.length }}
+      </div>
+      <div class="flex gap-3">
+        <Button
+          :label="$t('Clear filter results')"
+          class="p-button-outlined"
+          icon="pi pi-filter-slash"
+          @click="clearFilter()"
+        />
+        <span class="p-input-icon-left">
+          <i class="pi pi-search" />
+          <InputText
+            v-model="filters['global'].value"
+            :placeholder="$t('Search')"
+            class="w-64"
           />
-        </template>
-      </Column>
-      <Column
-        :header="$t('Title')"
-        :sortable="true"
-        field="title"
-        style="min-width: 8rem; text-align: center"
-      >
-        <template #body="{ data }">
-          {{ data.title }}
-        </template>
-      </Column>
-      <Column
-        v-if="showCourseDuration"
-        :header="$t('Course description')"
-        :sortable="true"
-        field="description"
-        style="min-width: 8rem; text-align: center"
-      >
-        <template #body="{ data }">
-          {{ data.description }}
-        </template>
-      </Column>
-
-      <Column
-        :header="$t('Duration')"
-        :sortable="true"
-        field="duration"
-        style="min-width: 8rem; text-align: center"
-      >
-        <template #body="{ data }">
-          <div
-            v-if="data.duration"
-            class="course-duration"
-          >
-            {{ (data.duration / 60 / 60).toFixed(2) }} hours
-          </div>
-        </template>
-      </Column>
+        </span>
+      </div>
+    </div>
 
-      <Column
-        :header="$t('Teachers')"
-        :sortable="true"
-        field="teachers"
-        style="min-width: 10rem; text-align: center"
-      >
-        <template #body="{ data }">
-          <div v-if="data.teachers && data.teachers.length > 0">
-            {{ data.teachers.map((teacher) => teacher.user.fullName).join(", ") }}
-          </div>
-        </template>
-      </Column>
-      <Column
-        :header="$t('Language')"
-        :sortable="true"
-        field="courseLanguage"
-        style="min-width: 5rem; text-align: center"
-      >
-        <template #body="{ data }">
-          {{ data.courseLanguage }}
-        </template>
-      </Column>
-      <Column
-        :header="$t('Categories')"
-        :sortable="true"
-        field="categories"
-        style="min-width: 8rem; text-align: center"
-      >
-        <template #body="{ data }">
-          <span
-            v-for="category in data.categories"
-            :key="category.id"
-          >
-            <em class="pi pi-tag course-category-icon" />
-            <span class="course-category">{{ category.title }}</span
-            ><br />
-          </span>
-        </template>
-      </Column>
-      <Column
-        :header="$t('Ranking')"
-        :sortable="true"
-        field="trackCourseRanking.realTotalScore"
-        style="min-width: 10rem; text-align: center"
-      >
-        <template #body="{ data }">
-          <Rating
-            :cancel="false"
-            :model-value="data.trackCourseRanking ? data.trackCourseRanking.realTotalScore : 0"
-            :stars="5"
-            class="pointer-events: none"
-            @change="onRatingChange($event, data.trackCourseRanking, data.id)"
-          />
-        </template>
-      </Column>
-      <Column
-        field="link"
-        header=""
-        style="min-width: 10rem; text-align: center"
-      >
-        <template #body="{ data }">
-          <router-link
-            v-if="data.visibility === 3"
-            :to="{ name: 'CourseHome', params: { id: data.id } }"
-          >
-            <Button
-              :label="$t('Go to the course')"
-              class="btn btn--primary text-white"
-              icon="pi pi-external-link"
-            />
-          </router-link>
-          <router-link
-            v-else-if="data.visibility === 2 && isUserInCourse(data)"
-            :to="{ name: 'CourseHome', params: { id: data.id } }"
-          >
-            <Button
-              :label="$t('Go to the course')"
-              class="btn btn--primary text-white"
-              icon="pi pi-external-link"
-            />
-          </router-link>
-          <Button
-            v-else-if="data.visibility === 2 && !isUserInCourse(data)"
-            :label="$t('Not subscribed')"
-            class="btn btn--primary text-white"
-            disabled
-            icon="pi pi-times"
-          />
-          <Button
-            v-else
-            :label="$t('Private course')"
-            class="btn btn--primary text-white"
-            disabled
-            icon="pi pi-lock"
-          />
-        </template>
-      </Column>
-      <template #footer>
-        {{ $t("Total number of courses").concat(": ", courses ? courses.length.toString() : "0") }}
-      </template>
-    </DataTable>
+    <div
+      v-if="status"
+      class="text-center text-gray-500 py-6"
+    >
+      {{ $t("Loading courses. Please wait.") }}
+    </div>
+    <div
+      v-else-if="!filteredCourses.length"
+      class="text-center text-gray-500 py-6"
+    >
+      {{ $t("No course available") }}
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 px-4">
+      <CatalogueCourseCard
+        v-for="course in visibleCourses"
+        :key="course.id"
+        :course="course"
+        :current-user-id="currentUserId"
+        @rate="onRatingChange"
+        @subscribed="onUserSubscribed"
+      />
+    </div>
+
+    <div
+      v-if="loadingMore"
+      class="text-center text-gray-400 py-4"
+    >
+      {{ $t("Loading more courses...") }}
+    </div>
   </div>
 </template>
 <script setup>
-import { ref } from "vue"
-import { FilterMatchMode } from "primevue/api"
+import { computed, onMounted, onUnmounted, ref, watch } from "vue"
+import InputText from "primevue/inputtext"
 import Button from "primevue/button"
-import DataTable from "primevue/datatable"
-import Column from "primevue/column"
-import Rating from "primevue/rating"
-import { usePlatformConfig } from "../../store/platformConfig"
-import { useSecurityStore } from "../../store/securityStore"
-
+import { FilterMatchMode } from "primevue/api"
 import courseService from "../../services/courseService"
-import * as trackCourseRanking from "../../services/trackCourseRankingService"
-
 import { useNotification } from "../../composables/notification"
 import { useLanguage } from "../../composables/language"
+import { useSecurityStore } from "../../store/securityStore"
+import CatalogueCourseCard from "../../components/course/CatalogueCourseCard.vue"
+import * as userRelCourseVoteService from "../../services/userRelCourseVoteService"
+import { useRouter } from "vue-router"
 
 const { showErrorNotification } = useNotification()
-const { findByIsoCode: findLanguageByIsoCode } = useLanguage()
-
+const { findByIsoCode } = useLanguage()
+const router = useRouter()
 const securityStore = useSecurityStore()
+
+if (!securityStore.user?.id) {
+  router.push({ name: "Login" })
+  throw new Error("No active session. Redirecting to login.")
+}
+
+const currentUserId = securityStore.user.id
 const status = ref(false)
 const courses = ref([])
-const filters = ref(null)
-const currentUserId = securityStore.user.id
+const filters = ref({ global: { value: null, matchMode: FilterMatchMode.CONTAINS } })
 
-const platformConfigStore = usePlatformConfig()
-const showCourseDuration = "true" === platformConfigStore.getSetting("course.show_course_duration")
+const rowsPerScroll = 9
+const visibleCount = ref(rowsPerScroll)
+const loadingMore = ref(false)
 
-async function load() {
-  status.value = true
+const onUserSubscribed = ({ courseId, newUser }) => {
+  const course = courses.value.find((c) => c.id === courseId)
+  if (course) {
+    course.users.push(newUser)
+  }
+}
 
+const load = async () => {
+  status.value = true
   try {
     const { items } = await courseService.listAll()
-
     courses.value = items.map((course) => ({
       ...course,
-      courseLanguage: findLanguageByIsoCode(course.courseLanguage)?.originalName,
+      courseLanguage: findByIsoCode(course.courseLanguage)?.originalName || course.courseLanguage,
+      userVote: null,
     }))
+
+    const votes = await userRelCourseVoteService.getUserVotes({
+      userId: currentUserId,
+      urlId: window.access_url_id,
+    })
+
+    for (const vote of votes) {
+      let courseId
+      if (typeof vote.course === "object" && vote.course !== null) {
+        courseId = vote.course.id
+      } else if (typeof vote.course === "string") {
+        courseId = parseInt(vote.course.split("/").pop())
+      }
+
+      const course = courses.value.find((c) => c.id === courseId)
+      if (course) {
+        course.userVote = vote
+      }
+    }
   } catch (error) {
     showErrorNotification(error)
   } finally {
@@ -238,95 +131,108 @@ async function load() {
   }
 }
 
-async function updateRating(id, value) {
-  status.value = true
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll)
+  load()
+})
 
-  try {
-    const response = await trackCourseRanking.updateRanking({
-      iri: `/api/track_course_rankings/${id}`,
-      totalScore: value,
-    })
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll)
+})
 
-    courses.value.forEach((course) => {
-      if (course.trackCourseRanking && course.trackCourseRanking.id === id) {
-        course.trackCourseRanking.realTotalScore = response.realTotalScore
-      }
-    })
-  } catch (e) {
-    showErrorNotification(e)
-  } finally {
-    status.value = false
+const clearFilter = () => {
+  filters.value.global.value = null
+  visibleCount.value = rowsPerScroll
+}
+
+const filteredCourses = computed(() => {
+  const keyword = filters.value.global.value?.toLowerCase()
+  if (!keyword) return courses.value
+  return courses.value.filter(
+    (course) =>
+      course.title?.toLowerCase().includes(keyword) ||
+      course.description?.toLowerCase().includes(keyword) ||
+      course.categories?.some((cat) => cat.title.toLowerCase().includes(keyword)) ||
+      course.courseLanguage?.toLowerCase().includes(keyword),
+  )
+})
+
+const visibleCourses = computed(() => {
+  return filteredCourses.value.slice(0, visibleCount.value)
+})
+
+const handleScroll = () => {
+  if (loadingMore.value) return
+
+  const threshold = 150
+  const scrollTop = window.scrollY
+  const viewportHeight = window.innerHeight
+  const fullHeight = document.documentElement.scrollHeight
+
+  if (scrollTop + viewportHeight + threshold >= fullHeight) {
+    if (visibleCount.value < filteredCourses.value.length) {
+      loadingMore.value = true
+      setTimeout(() => {
+        visibleCount.value += rowsPerScroll
+        loadingMore.value = false
+      }, 400)
+    }
   }
 }
 
-const newRating = async function (courseId, value) {
-  status.value = true
+watch(
+  () => filters.value.global.value,
+  () => {
+    visibleCount.value = rowsPerScroll
+  },
+)
 
+const saveOrUpdateVote = async (course, value) => {
   try {
-    const response = await trackCourseRanking.saveRanking({
-      totalScore: value,
-      courseIri: `/api/courses/${courseId}`,
-      urlId: window.access_url_id,
-      sessionId: 0,
+    const sessionId = 0
+    const urlId = window.access_url_id
+    const courseId = course.id
+    const courseIri = `/api/courses/${courseId}`
+
+    const existingVote = await userRelCourseVoteService.getUserVote({
+      userId: currentUserId,
+      courseId,
+      sessionId,
+      urlId,
     })
 
-    courses.value.forEach((course) => {
-      if (course.id === courseId) {
-        course.trackCourseRanking = response
-      }
-    })
+    if (existingVote?.["@id"]) {
+      const updated = await userRelCourseVoteService.updateVote({
+        iri: existingVote["@id"],
+        vote: value,
+        sessionId,
+        urlId,
+      })
+
+      course.userVote = { ...existingVote, vote: updated.vote }
+    } else {
+      const newVote = await userRelCourseVoteService.saveVote({
+        courseIri,
+        userId: currentUserId,
+        vote: value,
+        sessionId,
+        urlId,
+      })
+      course.userVote = newVote
+    }
   } catch (e) {
     showErrorNotification(e)
-  } finally {
-    status.value = false
-  }
-}
-
-const isUserInCourse = (course) => {
-  return course.users.some((user) => user.user.id === currentUserId)
-}
-
-const clearFilter = function () {
-  initFilters()
-}
-
-const initFilters = function () {
-  filters.value = {
-    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
   }
 }
 
-const onRatingChange = function (event, trackCourseRanking, courseId) {
-  let { value } = event
+const onRatingChange = ({ value, course }) => {
   if (value > 0) {
-    if (trackCourseRanking) updateRating(trackCourseRanking.id, value)
-    else newRating(courseId, value)
-  } else {
-    event.preventDefault()
+    saveOrUpdateVote(course, value)
   }
 }
-
-load()
-initFilters()
 </script>
 <style scoped>
-.p-datatable .p-datatable-thead > tr > th {
-  text-align: center !important;
-}
-
-.course-image {
-  width: 100px;
-  height: auto;
-}
-
-.course-duration {
-  text-align: center;
-  font-weight: bold;
-}
-
-.btn--primary {
-  background-color: #007bff;
-  border-color: #007bff;
-  color: #fff;
+.catalogue-courses {
+  width: 100%;
 }
 </style>
diff --git a/assets/vue/views/course/CatalogueSessions.vue b/assets/vue/views/course/CatalogueSessions.vue
index 7b6998c120b..7b3267a527f 100644
--- a/assets/vue/views/course/CatalogueSessions.vue
+++ b/assets/vue/views/course/CatalogueSessions.vue
@@ -1,278 +1,239 @@
 <template>
-  <div class="card">
-    <DataTable
-      v-model:expandedRows="expandedRows"
-      v-model:filters="filters"
-      :global-filter-fields="['title', 'description', 'category.title', 'course.courseLanguage']"
-      :loading="status"
-      :paginator="true"
-      :rows="9"
-      :value="sessions"
-      class="p-datatable-sessions p-datatable-lg"
-      data-key="id"
-      filter-display="menu"
-      responsive-layout="scroll"
-      striped-rows
+  <div class="catalogue-sessions p-4">
+    <div class="flex flex-wrap justify-between items-center mb-6 gap-4">
+      <div>
+        <strong>{{ $t("Total number of sessions") }}:</strong>
+        {{ sessions?.length || 0 }}<br />
+        <strong>{{ $t("Matching sessions") }}:</strong>
+        {{ filteredSessions.length }}
+      </div>
+      <div class="flex gap-3">
+        <Button
+          :label="$t('Clear filter results')"
+          class="p-button-outlined"
+          icon="pi pi-filter-slash"
+          @click="clearFilter()"
+        />
+        <span class="p-input-icon-left">
+          <i class="pi pi-search" />
+          <InputText
+            v-model="filters['global'].value"
+            :placeholder="$t('Search')"
+            class="w-64"
+          />
+        </span>
+      </div>
+    </div>
+
+    <div
+      v-if="status"
+      class="text-center text-gray-500 py-6"
+    >
+      {{ $t("Loading sessions. Please wait.") }}
+    </div>
+
+    <div
+      v-else-if="!filteredSessions.length"
+      class="text-center text-gray-500 py-6"
     >
-      <template #header>
-        <div class="table-header-container">
-          <div class="flex justify-space-between">
-            <div class="justify-content-left">
-              <Button
-                :label="$t('Expand')"
-                class="mr-2"
-                icon="pi pi-plus"
-                @click="expandAll"
-              />
-              <Button
-                :label="$t('Collapse')"
-                icon="pi pi-minus"
-                @click="collapseAll"
-              />
-            </div>
-            <div class="justify-content-right">
-              <Button
-                :label="$t('Clear filter results')"
-                class="p-button-outlined mr-2"
-                icon="pi pi-filter-slash"
-                type="button"
-                @click="clearFilter()"
-              />
-              <span class="p-input-icon-left">
-                <i class="mdi mdi-search" />
-                <InputText
-                  v-model="filters['global'].value"
-                  :placeholder="$t('Search')"
-                />
-              </span>
-            </div>
-          </div>
-        </div>
-      </template>
-      <template #empty>
-        {{ $t("There are no sessions available") }}
-      </template>
-      <template #loading>
-        {{ $t("Loading sessions. Please wait.") }}
-      </template>
-      <Column
-        :expander="true"
-        header-style="width: 3rem"
+      {{ $t("No session available") }}
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 px-4">
+      <CatalogueSessionCard
+        v-for="session in visibleSessions"
+        :key="session.id"
+        :session="session"
+        @rate="onRatingChange"
+        @subscribed="onSessionSubscribed"
       />
-      <Column
-        :header="$t('Title')"
-        :sortable="true"
-        class="session-name"
-        field="title"
-        style="min-width: 12rem"
-      >
-        <template #body="{ data }">
-          {{ data.title }}
-        </template>
-      </Column>
-      <Column
-        :header="$t('Session description')"
-        :sortable="true"
-        field="description"
-        style="min-width: 12rem"
-      >
-        <template #body="{ data }">
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <span v-html="data.description" />
-        </template>
-      </Column>
-      <Column
-        :header="$t('Category')"
-        :sortable="true"
-        field="category"
-        style="min-width: 12rem"
-      >
-        <template #body="{ data }">
-          <span v-if="data.category">
-            <em class="pi pi-tag course-category-icon" />
-            {{ data.category.title }}
-          </span>
-        </template>
-      </Column>
-      <Column
-        :header="$t('Start Date')"
-        :sortable="true"
-        field="displayStartDate"
-        style="min-width: 12rem"
-      >
-        <template #body="{ data }">
-          <i class="pi pi-calendar-times" /> {{ formatDate(data.displayStartDate) }}
-        </template>
-      </Column>
-      <Column
-        field="sessionlink"
-        header=""
-        style="min-width: 8rem"
-      >
-        <template #body="{ data }">
-          <BaseAppLink
-            :url="'/main/session/resume_session.php?id_session=' + data.id"
-            class="p-button-sm"
-          >
-            <BaseIcon icon="link-external" />
-            {{ $t("Go to the session") }}
-          </BaseAppLink>
-        </template>
-      </Column>
-      <template #expansion="item">
-        <div class="orders-subtable">
-          <h5>{{ $t("Courses in this session") + " - " + item.data.title }}</h5>
-          <DataTable
-            :value="item.data.courses"
-            responsive-layout="scroll"
-            striped-rows
-          >
-            <Column header="">
-              <template #body="{ data }">
-                <img
-                  :alt="data.course.title"
-                  :src="data.course.illustrationUrl"
-                  class="course-image"
-                />
-              </template>
-            </Column>
-            <Column
-              :header="$t('Title')"
-              :sortable="true"
-              field="course.title"
-            >
-              <template #body="{ data }">
-                {{ data.course.title }}
-              </template>
-            </Column>
-            <Column
-              :header="$t('Language')"
-              :sortable="true"
-              field="course.courseLanguage"
-              style="min-width: 6rem"
-            >
-              <template #body="{ data }">
-                {{ getOriginalLanguageName(data.course.courseLanguage) }}
-              </template>
-            </Column>
-            <Column
-              :header="$t('Categories')"
-              :sortable="true"
-              field="course.categories"
-              style="min-width: 8rem"
-            >
-              <template #body="{ data }">
-                <span
-                  v-for="category in data.course.categories"
-                  :key="category.id"
-                >
-                  <em class="pi pi-tag course-category-icon" />
-                  <span class="course-category">{{ category.title }}</span
-                  ><br />
-                </span>
-              </template>
-            </Column>
-            <Column
-              field="link"
-              header=""
-              style="min-width: 8rem"
-            >
-              <template #body="{ data }">
-                <BaseAppLink :to="{ name: 'CourseHome', params: { id: data.course.id } }">
-                  <BaseIcon
-                    class="p-button-sm"
-                    icon="link-external"
-                  />
-                  {{ $t("Go to the course") }}
-                </BaseAppLink>
-              </template>
-            </Column>
-          </DataTable>
-        </div>
-      </template>
-      <template #footer>
-        {{ $t("Number of sessions").concat(": ", sessions ? sessions.length.toString() : "0") }}
-      </template>
-    </DataTable>
+    </div>
+
+    <div
+      v-if="loadingMore"
+      class="text-center text-gray-400 py-4"
+    >
+      {{ $t("Loading more sessions...") }}
+    </div>
   </div>
 </template>
-<script>
-import { ENTRYPOINT } from "../../config/entrypoint"
-import axios from "axios"
-import { FilterMatchMode } from "primevue/api"
+<script setup>
+import { computed, onMounted, onUnmounted, ref, watch } from "vue"
+import InputText from "primevue/inputtext"
 import Button from "primevue/button"
-import DataTable from "primevue/datatable"
-import Column from "primevue/column"
-import BaseAppLink from "../../components/basecomponents/BaseAppLink.vue"
-import BaseIcon from "../../components/basecomponents/BaseIcon.vue"
+import { FilterMatchMode } from "primevue/api"
+import axios from "axios"
+import CatalogueSessionCard from "../../components/session/CatalogueSessionCard.vue"
+import { useSecurityStore } from "../../store/securityStore"
+import * as userRelCourseVoteService from "../../services/userRelCourseVoteService"
+import { useRouter } from "vue-router"
 
-export default {
-  name: "SessionCatalog",
-  components: {
-    BaseIcon,
-    BaseAppLink,
-    DataTable,
-    Column,
-    Button,
-  },
-  data() {
-    return {
-      status: null,
-      sessions: [],
-      filters: null,
-      expandedRows: [],
+const router = useRouter()
+const securityStore = useSecurityStore()
+
+if (!securityStore.user?.id) {
+  router.push({ name: "Login" })
+  throw new Error("No active session. Redirecting to login.")
+}
+
+const currentUserId = securityStore.user.id
+const urlId = window.access_url_id
+
+const status = ref(false)
+const sessions = ref([])
+const filters = ref({ global: { value: null, matchMode: FilterMatchMode.CONTAINS } })
+
+const rowsPerScroll = 9
+const visibleCount = ref(rowsPerScroll)
+const loadingMore = ref(false)
+
+const saveOrUpdateVote = async (session, value) => {
+  try {
+    const sessionId = session.id
+    const allVotes = await userRelCourseVoteService.getUserVotes({
+      userId: currentUserId,
+      urlId,
+    })
+
+    const existingVote = allVotes.find(
+      (v) =>
+        v.session &&
+        parseInt(v.session.split("/").pop()) === sessionId &&
+        (v.course === null || v.course === undefined),
+    )
+
+    if (existingVote?.["@id"]) {
+      const updated = await userRelCourseVoteService.updateVote({
+        iri: existingVote["@id"],
+        vote: value,
+        sessionId,
+        urlId,
+      })
+      session.userVote = { ...existingVote, vote: updated.vote }
+    } else {
+      session.userVote = await userRelCourseVoteService.saveVote({
+        courseIri: null,
+        userId: currentUserId,
+        vote: value,
+        sessionId,
+        urlId,
+      })
     }
-  },
-  created: function () {
-    this.load()
-    this.initFilters()
-  },
-  mounted: function () {},
-  methods: {
-    load: function () {
-      this.status = true
-      axios
-        .get("/catalogue/sessions-list")
-        .then((response) => {
-          this.status = false
-          if (Array.isArray(response.data)) {
-            this.sessions = response.data
-          }
-        })
-        .catch((error) => {
-          console.log(error)
-        })
-    },
-    clearFilter() {
-      this.initFilters()
-    },
-    initFilters() {
-      this.filters = {
-        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+  } catch (e) {
+    console.error("Error saving/updating vote:", e)
+  }
+}
+
+const onRatingChange = ({ value, session }) => {
+  if (value > 0) {
+    saveOrUpdateVote(session, value)
+  }
+}
+
+const onSessionSubscribed = (sessionId) => {
+  const session = sessions.value.find((s) => s.id === sessionId)
+  if (session) {
+    session.isSubscribed = true
+  }
+}
+
+const load = async () => {
+  status.value = true
+  try {
+    const response = await axios.get("/catalogue/sessions-list")
+    sessions.value = response.data.map((s) => ({
+      ...s,
+      userVote: null,
+    }))
+
+    const votes = await userRelCourseVoteService.getUserVotes({
+      userId: currentUserId,
+      urlId,
+    })
+
+    for (const vote of votes) {
+      const sessionId = vote.session?.id ?? parseInt(vote.session?.split("/")?.pop())
+      const session = sessions.value.find((s) => s.id === sessionId)
+      if (session) {
+        session.userVote = vote
       }
-    },
-    expandAll() {
-      this.expandedRows = this.sessions.filter((p) => p.id)
-    },
-    collapseAll() {
-      this.expandedRows = null
-    },
-    formatDate(value) {
-      return new Date(value).toLocaleDateString(undefined, {
-        month: "long",
-        day: "numeric",
-        year: "numeric",
-      })
-    },
-    getOriginalLanguageName(courseLanguage) {
-      const languages = window.languages
-      let language = languages.find((element) => element.isocode === courseLanguage)
-      if (language) {
-        return language.originalName
-      } else {
-        return ""
+    }
+
+    const sessionSubs = await axios.get(`/api/session_rel_users?user=${currentUserId}`)
+
+    for (const sub of sessionSubs.data["hydra:member"]) {
+      const sessionId = sub.session?.id ?? parseInt(sub.session?.split("/")?.pop())
+      const session = sessions.value.find((s) => s.id === sessionId)
+      if (session) {
+        session.isSubscribed = true
       }
-    },
-  },
+    }
+  } catch (error) {
+    console.log(error)
+  } finally {
+    status.value = false
+  }
 }
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll)
+  load()
+})
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll)
+})
+
+const clearFilter = () => {
+  filters.value.global.value = null
+  visibleCount.value = rowsPerScroll
+}
+
+const filteredSessions = computed(() => {
+  const keyword = filters.value.global.value?.toLowerCase()
+  if (!keyword) return sessions.value
+  return sessions.value.filter((session) => {
+    return (
+      session.title?.toLowerCase().includes(keyword) ||
+      session.description?.toLowerCase().includes(keyword) ||
+      session.category?.title?.toLowerCase().includes(keyword) ||
+      session.courses?.some((sc) => sc.courseLanguage?.toLowerCase().includes(keyword))
+    )
+  })
+})
+
+const visibleSessions = computed(() => {
+  return filteredSessions.value.slice(0, visibleCount.value)
+})
+
+const handleScroll = () => {
+  if (loadingMore.value) return
+
+  const threshold = 150
+  const scrollTop = window.scrollY
+  const viewportHeight = window.innerHeight
+  const fullHeight = document.documentElement.scrollHeight
+
+  if (scrollTop + viewportHeight + threshold >= fullHeight) {
+    if (visibleCount.value < filteredSessions.value.length) {
+      loadingMore.value = true
+      setTimeout(() => {
+        visibleCount.value += rowsPerScroll
+        loadingMore.value = false
+      }, 400)
+    }
+  }
+}
+
+watch(
+  () => filters.value.global.value,
+  () => {
+    visibleCount.value = rowsPerScroll
+  },
+)
 </script>
+<style scoped>
+.catalogue-sessions {
+  width: 100%;
+}
+</style>
diff --git a/src/CoreBundle/Controller/CatalogueController.php b/src/CoreBundle/Controller/CatalogueController.php
index 62afe2e49d5..c6a100f5da8 100644
--- a/src/CoreBundle/Controller/CatalogueController.php
+++ b/src/CoreBundle/Controller/CatalogueController.php
@@ -11,6 +11,7 @@
 use Chamilo\CoreBundle\Entity\Course;
 use Chamilo\CoreBundle\Entity\Session;
 use Chamilo\CoreBundle\Entity\UsergroupRelUser;
+use Chamilo\CoreBundle\Entity\UserRelCourseVote;
 use Chamilo\CoreBundle\Repository\Node\CourseRepository;
 use Chamilo\CoreBundle\Repository\SessionRepository;
 use Chamilo\CoreBundle\ServiceHelper\AccessUrlHelper;
@@ -83,6 +84,7 @@ public function listSessions(): JsonResponse
 
         $relRepo = $this->em->getRepository(CatalogueSessionRelAccessUrlRelUsergroup::class);
         $userGroupRepo = $this->em->getRepository(UsergroupRelUser::class);
+        $voteRepo = $this->em->getRepository(UserRelCourseVote::class);
 
         $relations = $relRepo->findBy(['accessUrl' => $accessUrl]);
 
@@ -98,7 +100,7 @@ public function listSessions(): JsonResponse
                 $session = $rel->getSession();
                 $usergroup = $rel->getUsergroup();
 
-                if (null === $usergroup || \in_array($usergroup->getId(), $userGroupIds)) {
+                if (null === $usergroup || in_array($usergroup->getId(), $userGroupIds)) {
                     $visibleSessions[$session->getId()] = $session;
                 }
             }
@@ -106,7 +108,43 @@ public function listSessions(): JsonResponse
             $sessions = array_values($visibleSessions);
         }
 
-        $data = array_map(function (Session $session) {
+        $data = array_map(function (Session $session) use ($voteRepo, $user) {
+            $courses = [];
+
+            foreach ($session->getCourses() as $rel) {
+                $course = $rel->getCourse();
+                if (!$course) {
+                    continue;
+                }
+
+                $teachers = [];
+                foreach ($session->getGeneralCoachesSubscriptions() as $coachRel) {
+                    $userObj = $coachRel->getUser();
+                    if ($userObj) {
+                        $teachers[] = [
+                            'id' => $userObj->getId(),
+                            'fullName' => $userObj->getFullname(),
+                        ];
+                    }
+                }
+
+                $courses[] = [
+                    'id' => $course->getId(),
+                    'title' => $course->getTitle(),
+                    'duration' => $course->getDuration(),
+                    'courseLanguage' => $course->getCourseLanguage(),
+                    'teachers' => $teachers,
+                ];
+            }
+
+            $voteCount = (int) $voteRepo->createQueryBuilder('v')
+                ->select('COUNT(DISTINCT v.user)')
+                ->where('v.session = :session')
+                ->andWhere('v.course IS NULL')
+                ->setParameter('session', $session->getId())
+                ->getQuery()
+                ->getSingleScalarResult();
+
             return [
                 'id' => $session->getId(),
                 'title' => $session->getTitle(),
@@ -117,6 +155,9 @@ public function listSessions(): JsonResponse
                 'nbrCourses' => $session->getNbrCourses(),
                 'startDate' => $session->getAccessStartDate()?->format('Y-m-d'),
                 'endDate' => $session->getAccessEndDate()?->format('Y-m-d'),
+                'courses' => $courses,
+                'popularity' => $voteCount,
+                'isSubscribed' => $session->hasUserInSession($user, Session::STUDENT),
             ];
         }, $sessions);
 
diff --git a/src/CoreBundle/Entity/Course.php b/src/CoreBundle/Entity/Course.php
index 4945c94f41a..3a45e745e0a 100644
--- a/src/CoreBundle/Entity/Course.php
+++ b/src/CoreBundle/Entity/Course.php
@@ -300,10 +300,12 @@ class Course extends AbstractResource implements ResourceInterface, ResourceWith
     protected ?DateTime $expirationDate = null;
 
     #[Assert\NotNull]
+    #[Groups(['course:read'])]
     #[ORM\Column(name: 'subscribe', type: 'boolean', unique: false, nullable: false)]
     protected bool $subscribe;
 
     #[Assert\NotNull]
+    #[Groups(['course:read'])]
     #[ORM\Column(name: 'unsubscribe', type: 'boolean', unique: false, nullable: false)]
     protected bool $unsubscribe;
 
diff --git a/src/CoreBundle/Entity/CourseRelUser.php b/src/CoreBundle/Entity/CourseRelUser.php
index cd08150e1c3..de59e9c518b 100644
--- a/src/CoreBundle/Entity/CourseRelUser.php
+++ b/src/CoreBundle/Entity/CourseRelUser.php
@@ -26,7 +26,7 @@
     operations: [
         new Get(security: "is_granted('ROLE_ADMIN') or object.user == user"),
         new GetCollection(security: "is_granted('ROLE_ADMIN')"),
-        new Post(security: "is_granted('ROLE_ADMIN')"),
+        new Post(security: "is_granted('ROLE_ADMIN') or is_granted('ROLE_USER')"),
     ],
     normalizationContext: [
         'groups' => ['course_rel_user:read'],
diff --git a/src/CoreBundle/Entity/SessionRelUser.php b/src/CoreBundle/Entity/SessionRelUser.php
index 5b4d104e726..5f56216787f 100644
--- a/src/CoreBundle/Entity/SessionRelUser.php
+++ b/src/CoreBundle/Entity/SessionRelUser.php
@@ -30,7 +30,7 @@
     operations: [
         new Get(security: "is_granted('ROLE_ADMIN') or object.user == user"),
         new GetCollection(security: "is_granted('ROLE_USER')"),
-        new Post(security: "is_granted('ROLE_ADMIN')"),
+        new Post(security: "is_granted('ROLE_ADMIN') or is_granted('ROLE_USER')"),
     ],
     normalizationContext: [
         'groups' => [
diff --git a/src/CoreBundle/Entity/UserRelCourseVote.php b/src/CoreBundle/Entity/UserRelCourseVote.php
index 1f6e39b5446..efb34c66a38 100644
--- a/src/CoreBundle/Entity/UserRelCourseVote.php
+++ b/src/CoreBundle/Entity/UserRelCourseVote.php
@@ -62,9 +62,9 @@ class UserRelCourseVote
     protected User $user;
 
     #[ORM\ManyToOne(targetEntity: Course::class)]
-    #[ORM\JoinColumn(name: 'c_id', referencedColumnName: 'id', onDelete: 'CASCADE')]
+    #[ORM\JoinColumn(name: 'c_id', referencedColumnName: 'id', nullable: true, onDelete: 'CASCADE')]
     #[Groups(['userRelCourseVote:read', 'userRelCourseVote:write'])]
-    protected Course $course;
+    protected ?Course $course = null;
 
     #[ORM\ManyToOne(targetEntity: Session::class)]
     #[ORM\JoinColumn(name: 'session_id', referencedColumnName: 'id', nullable: true, onDelete: 'CASCADE')]
@@ -109,12 +109,12 @@ public function setUser(User $user): self
         return $this;
     }
 
-    public function getCourse(): Course
+    public function getCourse(): ?Course
     {
         return $this->course;
     }
 
-    public function setCourse(Course $course): self
+    public function setCourse(?Course $course): self
     {
         $this->course = $course;
 
diff --git a/src/CoreBundle/EventListener/UserRelCourseVoteListener.php b/src/CoreBundle/EventListener/UserRelCourseVoteListener.php
index 44388703342..e041dc0fdb6 100644
--- a/src/CoreBundle/EventListener/UserRelCourseVoteListener.php
+++ b/src/CoreBundle/EventListener/UserRelCourseVoteListener.php
@@ -34,14 +34,17 @@ private function updateCoursePopularity(UserRelCourseVote $vote, EntityManagerIn
     {
         $course = $vote->getCourse();
 
+        if (!$course) {
+            return;
+        }
+
         $uniqueUsers = (int) $entityManager->createQueryBuilder()
             ->select('COUNT(DISTINCT v.user)')
             ->from(UserRelCourseVote::class, 'v')
             ->where('v.course = :course')
             ->setParameter('course', $course->getId())
             ->getQuery()
-            ->getSingleScalarResult()
-        ;
+            ->getSingleScalarResult();
 
         $course->setPopularity($uniqueUsers);
         $entityManager->persist($course);