diff --git a/.vitepress/config/zh_tw.ts b/.vitepress/config/zh_tw.ts
index 4d757ff2..f980fb37 100644
--- a/.vitepress/config/zh_tw.ts
+++ b/.vitepress/config/zh_tw.ts
@@ -8,6 +8,7 @@ export const zh_tw = defineConfig({
       { text: '首頁', link: '/' },
       { text: '年會資訊', link: '/event' },
       { text: '關於我們', link: '/about' },
+      { text: '會場狀態', link: '/room' },
     ],
     sidebar: {},
     socialLinks: [
diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
index b8463b5a..71b92180 100644
--- a/.vitepress/theme/style.css
+++ b/.vitepress/theme/style.css
@@ -68,6 +68,11 @@
   --vp-c-danger-2: var(--vp-c-red-2);
   --vp-c-danger-3: var(--vp-c-red-3);
   --vp-c-danger-soft: var(--vp-c-red-soft);
+
+  --vp-c-success-1: var(--vp-c-green-1);
+  --vp-c-success-2: var(--vp-c-green-2);
+  --vp-c-success-3: var(--vp-c-green-3);
+  --vp-c-success-soft: var(--vp-c-green-soft);
 }
 
 /**
diff --git a/content/zh_tw/room/Room.vue b/content/zh_tw/room/Room.vue
new file mode 100644
index 00000000..94f449ba
--- /dev/null
+++ b/content/zh_tw/room/Room.vue
@@ -0,0 +1,306 @@
+<script setup>
+import { data } from '#loaders/room.data'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import Status from './Status.vue'
+
+const { sessions, rooms, session_types } = data
+const testMode = ref(false)
+const currentTime = ref(new Date())
+const timer = ref(null)
+const crowd = ref([])
+
+const roomStatus = computed(() => {
+  return rooms.map((room) => {
+    const roomSessions = sessions[room]
+    const now = currentTime.value
+
+    const currentSession = roomSessions.find((session) => {
+      const start = new Date(session.start)
+      const end = new Date(session.end)
+      return start <= now && now <= end
+    })
+
+    if (currentSession) {
+      return {
+        room,
+        course: {
+          title: currentSession.zh.title,
+          start: currentSession.start,
+          end: currentSession.end,
+          uri: currentSession.uri,
+        },
+        type: currentSession.type,
+      }
+    }
+
+    // no currentSession => find nextSession
+
+    const nextSession = roomSessions.find((session) => new Date(session.start) > now)
+    if (nextSession) {
+      const nextSessionStart = new Date(nextSession.start)
+      if (nextSessionStart.getDate() === now.getDate()) {
+        return {
+          room,
+          course: `下一場 ${nextSession.zh.title} 將於 ${formatTime(nextSession.start, false)} 開始`,
+          uri: nextSession.uri,
+          type: nextSession.type,
+        }
+      }
+    }
+
+    // no nextSession
+    return {
+      room,
+      course: null,
+      type: '',
+    }
+  })
+})
+
+onMounted(() => {
+  const query = new URLSearchParams(window.location.search)
+  testMode.value = query.get('test') === 'true'
+  startClock()
+  crowd.value = rooms.reduce((acc, item) => {
+    acc[item] = Math.round(Math.random() * 100)
+    return acc
+  }, {})
+})
+
+onUnmounted(() => {
+  if (timer.value !== null) {
+    clearInterval(timer.value)
+  }
+})
+
+function startClock() {
+  if (testMode.value) {
+    currentTime.value = new Date('2024-08-03T08:30:00')
+
+    timer.value = setInterval(() => {
+      currentTime.value = new Date(currentTime.value.getTime() + 60 * 100)
+    }, 100)
+  } else {
+    timer.value = setInterval(() => {
+      currentTime.value = new Date()
+    }, 10 * 1000)
+  }
+}
+
+function formatTime(time, date = true) {
+  const d = new Date(time)
+  const MM = String(d.getMonth() + 1).padStart(2, '0')
+  const DD = String(d.getDate()).padStart(2, '0')
+  const hh = String(d.getHours()).padStart(2, '0')
+  const mm = String(d.getMinutes()).padStart(2, '0')
+  const weekdays = ['日', '一', '二', '三', '四', '五', '六']
+  const dayName = weekdays[d.getDay()]
+
+  if (date) {
+    return `${MM}/${DD}(${dayName}) ${hh}:${mm}`
+  } else {
+    return `${hh}:${mm}`
+  }
+}
+
+function interpolateColor(color1, color2, factor) {
+  const r = Math.round(color1.r + factor * (color2.r - color1.r))
+  const g = Math.round(color1.g + factor * (color2.g - color1.g))
+  const b = Math.round(color1.b + factor * (color2.b - color1.b))
+  const a = color1.a + factor * (color2.a - color1.a)
+  return `rgba(${r}, ${g}, ${b}, ${a})`
+}
+
+function getCssVar(name, soft = true) {
+  if (soft) {
+    const rgba = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+    const parts = rgba.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/)
+
+    return {
+      r: Number(parts[1]),
+      g: Number(parts[2]),
+      b: Number(parts[3]),
+      a: Number(parts[4]),
+    }
+  } else {
+    const hex = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+    return {
+      r: Number.parseInt(result[1], 16),
+      g: Number.parseInt(result[2], 16),
+      b: Number.parseInt(result[3], 16),
+      a: 1,
+    }
+  }
+}
+
+function getColor(type, value, soft = true) {
+  if (typeof type === 'string' || type === null) {
+    return 'transparent'
+  }
+
+  let yellow, red, green
+
+  if (soft) {
+    yellow = getCssVar('--vp-c-warning-soft')
+    red = getCssVar('--vp-c-danger-soft')
+    green = getCssVar('--vp-c-success-soft')
+  } else {
+    yellow = getCssVar('--vp-c-warning-3', false)
+    red = getCssVar('--vp-c-danger-3', false)
+    green = getCssVar('--vp-c-success-3', false)
+  }
+
+  if (value <= 50) {
+    return interpolateColor(green, yellow, value / 50)
+  } else {
+    return interpolateColor(yellow, red, (value - 50) / 50)
+  }
+}
+
+function getStatusText(type, value) {
+  if (typeof type === 'string' || type === null) {
+    return ''
+  }
+  const words = ['空曠', '寬敞', '適中', '熱絡', '滿座']
+  return words[Math.min(Math.round(value / 20), 4)]
+}
+</script>
+
+<template>
+  <div>
+    <p>現在時間：{{ formatTime(currentTime) }}</p>
+    <div class="grid-table">
+      <div class="header">
+        會議室
+      </div>
+      <div class="header">
+        議程軌
+      </div>
+      <div class="header">
+        教室狀態
+      </div>
+      <div class="header">
+        議程
+      </div>
+
+      <template
+        v-for="session in roomStatus"
+        :key="session.room"
+      >
+        <div
+          :class="(session.course === null || typeof session.course === 'string') ? 'cell' : 'cell tag-padding'"
+          :style="{ '--tag-color': getColor(session.course, crowd[session.room], false) }"
+          :tag-text="getStatusText(session.course, crowd[session.room])"
+        >
+          {{ session.room }}
+        </div>
+        <div class="cell">
+          {{ session.type ? session_types[session.type] : session.type }}
+        </div>
+        <div
+          class="cell"
+          :style="{ 'background-color': `${getColor(session.course, crowd[session.room])}` }"
+        >
+          {{ getStatusText(session.course, crowd[session.room]) }}
+        </div>
+        <div class="cell session-room">
+          <span
+            v-if="session.course === null"
+            class="empty-room"
+          > 今日議程已結束 </span>
+          <span
+            v-else-if="typeof session.course === 'string'"
+            class="empty-room"
+          ><a :href="session.uri">{{ session.course }}</a></span>
+          <Status
+            v-else
+            :current-time="currentTime"
+            :data="session.course"
+          />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.grid-table {
+  display: grid;
+  grid-template-columns: 6em 20% 6em auto;
+  border-collapse: collapse;
+  overflow-wrap: break-word;
+}
+
+.header {
+  font-weight: bold;
+  text-align: center;
+  background-color: var(--vp-c-default-2);
+  padding: 8px;
+  border: 1px solid var(--vp-c-default-1);
+}
+
+.cell {
+  padding: 8px;
+  border: 1px solid var(--vp-c-default-1);
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.session-room {
+  padding: 0;
+  display: flex;
+  align-items: stretch;
+}
+
+.session-room > * {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.empty-room {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 8px;
+}
+
+a {
+  text-decoration: none;
+  color: var(--vp-custom-block-tip-text);
+}
+
+@media (max-width: 600px) {
+  .grid-table {
+    grid-template-columns: 6em auto;
+  }
+  .cell:nth-child(4n + 2),
+  .cell:nth-child(4n + 3),
+  .header:nth-child(4n + 2),
+  .header:nth-child(4n + 3) {
+    display: none;
+  }
+  .cell:nth-child(4n + 1)::before {
+    content: attr(tag-text);
+    position: absolute;
+    bottom: 0.6em;
+    width: 4em;
+    background-color: var(--tag-color);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+    color: white;
+    white-space: nowrap;
+  }
+  .tag-padding {
+    box-sizing: border-box;
+    padding-bottom: 35px;
+  }
+}
+</style>
diff --git a/content/zh_tw/room/Status.vue b/content/zh_tw/room/Status.vue
new file mode 100644
index 00000000..09d89ec6
--- /dev/null
+++ b/content/zh_tw/room/Status.vue
@@ -0,0 +1,79 @@
+<script setup>
+const props = defineProps({
+  data: Object,
+  currentTime: Date,
+})
+
+function getProgress(startTime, endTime) {
+  const start = new Date(startTime)
+  const end = new Date(endTime)
+
+  const total = end - start
+  const passed = props.currentTime - start
+  return Math.round((passed / total) * 100)
+}
+
+function formatTime(time) {
+  const d = new Date(time)
+  const hh = String(d.getHours()).padStart(2, '0')
+  const mm = String(d.getMinutes()).padStart(2, '0')
+
+  return `${hh}:${mm}`
+}
+</script>
+
+<template>
+  <a :href="props.data.uri">
+    <div class="status">
+      <div
+        class="progress-bar"
+        :style="{ width: `${getProgress(props.data.start, props.data.end)}%` }"
+      />
+      <p class="start">
+        {{ formatTime(props.data.start) }}
+      </p>
+      <p class="title">
+        {{ props.data.title }}
+      </p>
+      <p class="end">
+        {{ formatTime(props.data.end) }}
+      </p>
+    </div>
+  </a>
+</template>
+
+<style scoped>
+.status {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 8px 16px;
+}
+.progress-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--vp-c-default-soft);
+  height: 100%;
+}
+p {
+  margin: 0;
+}
+.start {
+  flex: 1;
+  text-align: left;
+}
+.title {
+  flex: 5;
+  text-align: center;
+}
+.end {
+  flex: 1;
+  text-align: right;
+}
+a {
+  text-decoration: none;
+  color: var(--vp-custom-block-tip-text);
+}
+</style>
diff --git a/content/zh_tw/room/index.md b/content/zh_tw/room/index.md
new file mode 100644
index 00000000..a15f4d1b
--- /dev/null
+++ b/content/zh_tw/room/index.md
@@ -0,0 +1,5 @@
+---
+aside: false
+---
+
+<Room />
diff --git a/loaders/room.data.ts b/loaders/room.data.ts
new file mode 100644
index 00000000..a872e1c1
--- /dev/null
+++ b/loaders/room.data.ts
@@ -0,0 +1,106 @@
+import { defineLoader } from 'vitepress'
+
+interface Session {
+  id: string
+  type: string
+  room: string
+  start: string
+  end: string
+  language: string
+  zh: {
+    title: string
+    description: string
+  }
+  en: {
+    title: string
+    description: string
+  }
+  speakers: string[]
+  tags: string[]
+  co_write: string
+  qa: null
+  slide: null
+  record: null
+  uri: string
+}
+
+interface SessionType {
+  id: string
+  zh: {
+    name: string
+  }
+  en: {
+    name: string
+  }
+}
+
+interface Speaker {
+  id: string
+  avatar: string
+  zh: {
+    name: string
+    bio: string
+  }
+  en: {
+    name: string
+    bio: string
+  }
+}
+
+interface Room {
+  id: string
+  zh: {
+    name: string
+  }
+  en: {
+    name: string
+  }
+}
+
+interface Tag {
+  id: string
+  zh: {
+    name: string
+  }
+  en: {
+    name: string
+  }
+}
+
+interface Data {
+  sessions: Session[]
+  speakers: Speaker[]
+  session_types: SessionType[]
+  rooms: Room[]
+  tags: Tag[]
+}
+
+interface RoomData {
+  sessions: Record<string, Session[]>
+  rooms: string[]
+  session_types: Record<string, string>
+}
+
+export default defineLoader({
+  async load(): Promise<RoomData> {
+    const res = await fetch('https://coscup.org/2024/json/session.json')
+    const data: Data = await res.json()
+
+    const session_types: Record<string, string> = data.session_types.reduce((acc: Record<string, string>, item: SessionType) => {
+      acc[item.id] = item.zh.name
+      return acc
+    }, {})
+    const unsorted_rooms = new Set<string>(data.sessions.map((session: Session) => session.room))
+    const rooms = [...unsorted_rooms].sort((a, b) => a.localeCompare(b))
+    const sessions: Record<string, Session[]> = rooms.reduce((acc: Record<string, Session[]>, item) => {
+      acc[item] = data.sessions.filter((session: Session) => session.room === item).sort((a: Session, b: Session) => new Date(a.start).getTime() - new Date(b.start).getTime())
+      return acc
+    }, {})
+
+    return {
+      sessions,
+      rooms,
+      session_types,
+    }
+  },
+})