diff --git a/app/components/feature/CpSessionList.vue b/app/components/feature/CpSessionList.vue
new file mode 100644
index 0000000..ff289b4
--- /dev/null
+++ b/app/components/feature/CpSessionList.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import type { SessionSummary } from '#shared/types/session'
+import { useI18n } from '#imports'
+import CpSessionItem from './CpSessionItem.vue'
+
+const { sessions: _sessions } = defineProps<{ sessions: SessionSummary[] }>()
+
+const { locale } = useI18n()
+
+const sessions = computed(() => {
+  if (!_sessions) {
+    return {}
+  }
+
+  return Object.groupBy(
+    _sessions
+      .filter((session) => session.start && session.end && session.room).map((session) => ({
+        id: session.id,
+        title: session[locale.value].title,
+        speakers: session.speakers?.map((s) => s[locale.value].name).join(', '),
+        start: session.start!.slice(11, 16),
+        end: session.end!.slice(11, 16),
+        tags: [],
+      })),
+    (session) => session.start,
+  )
+})
+
+const times = Object.keys(sessions.value).sort()
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <section
+      v-for="time in times"
+      :key="time"
+    >
+      <h3 class="text-lg text-primary-400 font-medium mb-2 py-1 bg-white top-0 sticky z-1">
+        {{ time }}
+      </h3>
+      <div class="flex flex-col gap-2">
+        <NuxtLink
+          v-for="session in sessions[time]"
+          :key="session.id"
+          :to="`/session/${session.id}`"
+        >
+          <CpSessionItem
+            :end="session.end"
+            :speaker="session.speakers"
+            :start="session.start"
+            :tags="session.tags"
+            :title="session.title"
+          />
+        </NuxtLink>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/app/pages/session.vue b/app/pages/session.vue
index f5bb60e..11ed5af 100644
--- a/app/pages/session.vue
+++ b/app/pages/session.vue
@@ -2,6 +2,7 @@
 import { prerenderRoutes } from 'nuxt/app'
 import { useI18n } from 'vue-i18n'
 import CpSessionDaySelector from '~/components/feature/CpSessionDaySelector.vue'
+import CpSessionList from '~/components/feature/CpSessionList.vue'
 import CpSessionTable from '~/components/feature/CpSessionTable.vue'
 
 const { t } = useI18n()
@@ -24,22 +25,36 @@ prerenderRoutes(
 </script>
 
 <template>
-  <main>
+  <main v-if="selectedDay">
     <NuxtPage />
-    <template v-if="selectedDay">
+
+    <div class="flex flex-col-reverse sm:flex-col">
       <CpSessionDaySelector
         v-model="selectedDay"
+        class="bottom-0 sticky z-10 sm:bottom-auto"
         :days="days"
       />
+
+      <CpSessionList
+        class="sm:hidden"
+        :sessions="data?.[selectedDay] ?? []"
+      />
       <CpSessionTable
+        class="hidden sm:grid"
         :day="selectedDay"
         :interval="5"
         :row-height="50"
         :sessions="data?.[selectedDay] ?? []"
         :time-range="['09:00', '17:30']"
       />
-    </template>
-    <p v-else>
+    </div>
+
+    <p v-if="!data?.[selectedDay]?.length">
+      {{ t('noSession') }}
+    </p>
+  </main>
+  <main v-else>
+    <p>
       {{ t('noSession') }}
     </p>
   </main>