diff --git a/.vitepress/config.ts b/.vitepress/config.ts
index c4063b4..0d2297b 100644
--- a/.vitepress/config.ts
+++ b/.vitepress/config.ts
@@ -14,7 +14,7 @@ export default defineConfig({
     plugins: [
       Components({
         // Auto import components and icons in Vue and Markdown files
-        dirs: ['../components'],
+        dirs: ['../components', '.'],
         include: [/\.vue($|\?)/, /\.md($|\?)/],
         resolvers: [
           IconsResolver({
diff --git a/content/event.md b/content/event.md
deleted file mode 100644
index b90663d..0000000
--- a/content/event.md
+++ /dev/null
@@ -1,154 +0,0 @@
-<script setup lang="ts">
-import { conference } from '#data/conference'
-import type { CalendarEvent } from 'calendar-link';
-
-const start = conference.startDate.toLocaleDateString()
-const end = conference.endDate.toLocaleDateString()
-
-const venueAddress = '106 台北市大安區基隆路四段 43 號'
-
-// Supported calendar types by `calendar-link`
-type CalendarType = keyof typeof import('calendar-link')
-
-// Create an link or an ICS file to add the event to the user's calendar
-async function addToCalendar(type: CalendarType) {
-  const { [type]: getCalendarLink } = await import('calendar-link')
-
-  const event: CalendarEvent = {
-    title: conference.title,
-    description: `<a href="${document.location.origin}">${conference.description}</a>`,
-    start: conference.startDate,
-    end: conference.endDate,
-    allDay: true,
-    location: venueAddress,
-  }
-
-  const link = getCalendarLink(event) as string
-
-  if (type == 'ics') {
-    // Set the ICS file name by creating an anchor element
-    const anchor = document.createElement('a')
-    anchor.href = link
-    anchor.download = `${conference.title}.ics`
-    anchor.click()
-  } else {
-    window.open(link, '_blank')
-  }
-}
-</script>
-
-# 活動資訊
-
-::: info <IconPhCalendarDots /> 日期
-
-## {{ start }} – {{ end }}
-
-<div class="actions">
-  <VPButton
-    theme="alt"
-    @click="addToCalendar('google')"
-  >
-    <IconPhGoogleLogo /> Google 日曆
-  </VPButton>
-  <VPButton
-    theme="alt"
-    @click="addToCalendar('outlookMobile')"
-  >
-    <IconPhMicrosoftOutlookLogo /> Outlook
-  </VPButton>
-  <VPButton
-    theme="alt"
-    @click="addToCalendar('yahoo')"
-  >
-    <IconPhExclamationMark /> Yahoo
-  </VPButton>
-  <VPButton
-    theme="alt"
-    @click="addToCalendar('ics')"
-  >
-    <IconPhCalendarPlus /> ICS
-  </VPButton>
-</div>
-
-:::
-
-::: info <IconPhMapPin /> 位置
-
-## 國立臺灣科技大學
-
-{{ venueAddress }} <CopyButton :source="venueAddress" />
-
-<LeafletMap class="map" />
-
-<div class="actions">
-  <VPButton
-    theme="alt"
-    href="https://www.openstreetmap.org/relation/5355856"
-    target="_blank"
-  >
-    <IconPhMagnifyingGlass /> 開放街圖
-  </VPButton>
-  <VPButton
-    theme="alt"
-    href="https://www.google.com/maps/search/?api=1&query=國立臺灣科技大學&query_place_id=ChIJrcDEdiGqQjQRVfQp7kRe25A"
-    target="_blank"
-  >
-    <IconPhGoogleLogo /> Google 地圖
-  </VPButton>
-  <VPButton
-    theme="alt"
-    href="https://maps.apple.com/place?auid=1091116063745527859"
-    target="_blank"
-  >
-    <IconPhAppleLogo /> Apple 地圖
-  </VPButton>
-</div>
-:::
-
-## 交通資訊
-
-<style scoped>
-svg {
-  vertical-align: text-bottom;
-  display: inline-block;
-}
-
-.custom-block {
-  .custom-block-title {
-    font-size: large;
-  }
-
-  h2 {
-    margin: 24px 0 16px;
-    padding: 0;
-    border-top: none;
-
-    .header-anchor {
-      display: none;
-    }
-  }
-
-  /* Reset VitePress styles for map buttons */
-  .actions {
-    display: flex;
-    gap: 8px;
-    margin: 8px 0;
-    overflow-x:auto;
-
-    a {
-      text-decoration: none;
-    }
-  }
-
-  :deep(a:hover) {
-    opacity: unset;
-  }
-}
-
-.map {
-  width: 100%;
-  height: 400px;
-  margin: 16px 0;
-  border-radius: 4px;
-}
-</style>
diff --git a/components/LeafletMap.vue b/content/event/LeafletMap.vue
similarity index 100%
rename from components/LeafletMap.vue
rename to content/event/LeafletMap.vue
diff --git a/content/event/index.md b/content/event/index.md
new file mode 100644
index 0000000..c363c5a
--- /dev/null
+++ b/content/event/index.md
@@ -0,0 +1,5 @@
+<script setup lang="ts">
+import Page from './index.vue'
+</script>
+
+<Page />
diff --git a/content/event/index.vue b/content/event/index.vue
new file mode 100644
index 0000000..faa2da9
--- /dev/null
+++ b/content/event/index.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import type { CalendarEvent } from 'calendar-link'
+import { conference } from '#data/conference'
+
+const start = conference.startDate.toLocaleDateString()
+const end = conference.endDate.toLocaleDateString()
+
+const venueAddress = '106 台北市大安區基隆路四段 43 號'
+
+// Supported calendar types by `calendar-link`
+type CalendarType = keyof typeof import('calendar-link')
+
+// Create an link or an ICS file to add the event to the user's calendar
+async function addToCalendar(type: CalendarType) {
+  const { [type]: getCalendarLink } = await import('calendar-link')
+
+  const event: CalendarEvent = {
+    title: conference.title,
+    description: `<a href="${document.location.origin}">${conference.description}</a>`,
+    start: conference.startDate,
+    end: conference.endDate,
+    allDay: true,
+    location: venueAddress,
+  }
+
+  const link = getCalendarLink(event) as string
+
+  if (type === 'ics') {
+    // Set the ICS file name by creating an anchor element
+    const anchor = document.createElement('a')
+    anchor.href = link
+    anchor.download = `${conference.title}.ics`
+    anchor.click()
+  } else {
+    window.open(link, '_blank')
+  }
+}
+</script>
+
+<template>
+  <section class="info custom-block">
+    <div class="info-section">
+      <p class="custom-block-title">
+        <IconPhCalendarDots />日期
+      </p>
+      <h2>{{ start }} – {{ end }}</h2>
+      <div class="actions">
+        <VPButton
+          theme="alt"
+          @click="addToCalendar('google')"
+        >
+          <IconPhGoogleLogo /> Google 日曆
+        </VPButton>
+        <VPButton
+          theme="alt"
+          @click="addToCalendar('outlookMobile')"
+        >
+          <IconPhMicrosoftOutlookLogo /> Outlook
+        </VPButton>
+        <VPButton
+          theme="alt"
+          @click="addToCalendar('yahoo')"
+        >
+          <IconPhExclamationMark /> Yahoo
+        </VPButton>
+        <VPButton
+          theme="alt"
+          @click="addToCalendar('ics')"
+        >
+          <IconPhCalendarPlus /> ICS
+        </VPButton>
+      </div>
+    </div>
+  </section>
+
+  <section class="info custom-block">
+    <div class="info-section">
+      <p class="custom-block-title">
+        <IconPhMapPin />位置
+      </p>
+      <h2>國立臺灣科技大學</h2>
+      <p>{{ venueAddress }}<CopyButton :source="venueAddress" /></p>
+      <LeafletMap class="map" />
+      <div class="actions">
+        <VPButton
+          href="https://www.openstreetmap.org/relation/5355856"
+          target="_blank"
+          theme="alt"
+        >
+          <IconPhMagnifyingGlass /> 開放街圖
+        </VPButton>
+        <VPButton
+          href="https://www.google.com/maps/search/?api=1&query=國立臺灣科技大學&query_place_id=ChIJrcDEdiGqQjQRVfQp7kRe25A"
+          target="_blank"
+          theme="alt"
+        >
+          <IconPhGoogleLogo /> Google 地圖
+        </VPButton>
+        <VPButton
+          href="https://maps.apple.com/place?auid=1091116063745527859"
+          target="_blank"
+          theme="alt"
+        >
+          <IconPhAppleLogo /> Apple 地圖
+        </VPButton>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+svg {
+  vertical-align: text-bottom;
+  display: inline-block;
+}
+
+.custom-block {
+  .custom-block-title {
+    font-size: large;
+  }
+
+  h2 {
+    margin: 24px 0 16px;
+    padding: 0;
+    border-top: none;
+
+    .header-anchor {
+      display: none;
+    }
+  }
+
+  /* Reset VitePress styles for map buttons */
+  .actions {
+    display: flex;
+    gap: 8px;
+    margin: 8px 0;
+    overflow-x: auto;
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  :deep(a:hover) {
+    opacity: unset;
+  }
+}
+
+.map {
+  width: 100%;
+  height: 400px;
+  margin: 16px 0;
+  border-radius: 4px;
+}
+</style>