diff --git a/src/App.vue b/src/App.vue
index ea0c8c4..1cfacd9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,6 +41,16 @@ export default class App extends Vue {
     }
   }
 
+  public isRoot(): boolean {
+    if (
+      this.$route.name == "CFP" ||
+      this.$route.name === "news" ||
+      this.$route.name === "ocfp-news"
+    )
+      return false;
+    else return true;
+  }
+
   private detectDeviceType (mq: (MediaQueryList | MediaQueryListEvent)): void {
     const isDesktop: boolean = mq.matches;
 
@@ -50,17 +60,6 @@ export default class App extends Vue {
       this.toggleDevice(DeviceType.MOBILE);
     }
   }
-  private isRoot (): boolean {
-    if (
-      this.$route.name === 'CFP' ||
-      this.$route.name === 'news' ||
-      this.$route.name === 'ocfp-news'
-    ) {
-      return false;
-    } else {
-      return true;
-    }
-  }
 }
 </script>
 <style lang="scss">
diff --git a/src/assets/images/arrow-left.svg b/src/assets/images/arrow-left.svg
index c74b2f2..9b3c6ec 100644
--- a/src/assets/images/arrow-left.svg
+++ b/src/assets/images/arrow-left.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="74.204" height="98.826" viewBox="0 0 74.204 98.826">
-    <path fill="#1060ff" d="M146.837 161.345l22.812-22.812-19.928-19.928a6.763 6.763 0 0 0-9.559 0l-42.736 42.74a6.757 6.757 0 0 0 0 9.559l42.568 42.568a6.757 6.757 0 0 0 9.559 0l19.928-19.928-22.644-22.644a6.763 6.763 0 0 1 0-9.555z" transform="translate(-95.445 -116.627)"/>
+    <path fill="#2d477b" d="M146.837 161.345l22.812-22.812-19.928-19.928a6.763 6.763 0 0 0-9.559 0l-42.736 42.74a6.757 6.757 0 0 0 0 9.559l42.568 42.568a6.757 6.757 0 0 0 9.559 0l19.928-19.928-22.644-22.644a6.763 6.763 0 0 1 0-9.555z" transform="translate(-95.445 -116.627)"/>
 </svg>
diff --git a/src/assets/images/arrow-right.svg b/src/assets/images/arrow-right.svg
index 3ee986d..5fd91db 100644
--- a/src/assets/images/arrow-right.svg
+++ b/src/assets/images/arrow-right.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="74.204" height="98.826" viewBox="0 0 74.204 98.826">
-    <path fill="#1060ff" d="M220.093 161.177l-42.568-42.572a6.763 6.763 0 0 0-9.559 0l-19.928 19.928 22.644 22.644a6.759 6.759 0 0 1 0 9.556l-22.812 22.812 19.93 19.927a6.757 6.757 0 0 0 9.559 0l42.736-42.74a6.753 6.753 0 0 0-.002-9.555z" transform="translate(-147.87 -116.627)"/>
+    <path fill="#2d477b" d="M220.093 161.177l-42.568-42.572a6.763 6.763 0 0 0-9.559 0l-19.928 19.928 22.644 22.644a6.759 6.759 0 0 1 0 9.556l-22.812 22.812 19.93 19.927a6.757 6.757 0 0 0 9.559 0l42.736-42.74a6.753 6.753 0 0 0-.002-9.555z" transform="translate(-147.87 -116.627)"/>
 </svg>
diff --git a/src/assets/images/title-block.svg b/src/assets/images/title-block.svg
new file mode 100644
index 0000000..8c77521
--- /dev/null
+++ b/src/assets/images/title-block.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30.252" height="30.252" viewBox="0 0 30.252 30.252">
+    <path fill="#1060ff" d="M87.79 130.265l-6.932-6.932-6.1-6.1a2.07 2.07 0 0 0-2.926 0L58.75 130.316a2.068 2.068 0 0 0 0 2.926l13.031 13.031a2.068 2.068 0 0 0 2.926 0l6.1-6.1 6.983-6.983a2.069 2.069 0 0 0 0-2.925z" transform="translate(-58.143 -116.627)"/>
+</svg>
diff --git a/src/assets/scss/agenda.scss b/src/assets/scss/agenda.scss
index 76a6ea8..fa90a36 100644
--- a/src/assets/scss/agenda.scss
+++ b/src/assets/scss/agenda.scss
@@ -1,16 +1,56 @@
+@import './breakpoint';
+@import './color';
+
+$fontFamily: "Noto Serif CJK TC -Black";
+
 #agenda {
-    margin: 0 auto;
-    max-width: 1200px;
+  margin: 0 auto;
+  max-width: 1200px;
 
-    div.event.container {
-        display: grid;
-        grid-template-columns: min-content repeat(6, 1fr) min-content;
-        column-gap: 30px;
+  font-family: $fontFamily;
+  font-size: 22px;
 
-        img.arrow {
-            margin: auto;
-            width: fit-content;
-            height: calc(99/217 * 100%);
-        }
+  article {
+    white-space: pre-wrap;
+    line-height: 2;
+  }
+
+  p.vote {
+    text-align: center;
+    padding: 80px 0;
+
+    a.vote.button {
+      display: inline-block;
+      padding: 7px 20px;
+     
+      background-color: $indigo-blue;
+      border: none;
+      border-radius: 32px;
+      
+      font: inherit;
+      color: white;
+      font-size: 26px;
+      line-height: 1.44;
     }
+  }
+
+  ol.vote.rule {
+    counter-reset: 0;
+
+    li {
+      line-height: 2;
+    }
+  }
+
+  div.event.container {
+    display: grid;
+    grid-template-columns: min-content repeat(6, 1fr) min-content;
+    column-gap: 30px;
+
+    img.arrow {
+      margin: auto;
+      width: fit-content;
+      height: calc(99/217 * 100%);
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/assets/scss/blocktitle.scss b/src/assets/scss/blocktitle.scss
new file mode 100644
index 0000000..b19823f
--- /dev/null
+++ b/src/assets/scss/blocktitle.scss
@@ -0,0 +1,37 @@
+$fontFamily: "Noto Serif CJK TC -Black";
+
+div.block.title {
+    display: flex;
+    justify-content: center;
+
+    font-size: 26px;
+    font-family: $fontFamily;
+    font-weight: bold;
+
+    line-height: 1.44;
+    
+    margin: 36px 0;
+    
+    span.text {
+        display: contents;
+
+        &::before, &::after {
+            display: inline-block;
+            content: '';
+            width: 1.44em;
+            height: 1.44em;
+            margin: auto;
+            vertical-align: middle;
+            background-image: url('../assets/images/title-block.svg');
+            background-size: contain;
+        }
+    
+        &::before {
+            margin-right: 18px;
+        }
+    
+        &::after {
+            margin-left: 18px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/BlockTitle.vue b/src/components/BlockTitle.vue
new file mode 100644
index 0000000..e81a78b
--- /dev/null
+++ b/src/components/BlockTitle.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="block title">
+    <span class="text">{{ text }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class BlockTitle extends Vue {
+  @Prop({ default: '' }) private text!: string;
+}
+</script>
+<style lang="scss">
+@import '@/assets/scss/blocktitle';
+</style>
\ No newline at end of file
diff --git a/src/pages/Agenda.vue b/src/pages/Agenda.vue
index aa742bc..1a43fb0 100644
--- a/src/pages/Agenda.vue
+++ b/src/pages/Agenda.vue
@@ -1,6 +1,27 @@
 <template>
   <div id="agenda">
-    <div class="event container">
+    <!-- Vote Section -->
+    <BlockTitle text="人氣投票" id="#vote" />
+    <article>
+      投票時間：4/2 (五) 20:00 至 4/9 (五) 23:59（UTC+8）<br />
+      投票資格：於 4/9 (五) 23:59 前取得 2021 年會門票的與會者（不分票種）、2021 年會志工、2021 年會講者
+    </article>
+    <p class="vote"><a class="vote button" href="https://docs.google.com/forms/d/e/1FAIpQLSdWJtLP96bqXWukmOEar0xiBfGScm3qAlp-Xii05-cmU2Gxlg/viewform" target="_blank" rel="noopeener">投票去</a></p>
+    <article>
+     【注意事項】
+      <ol class="vote rule">
+        <li>0. 事前人氣投票結果，將作為議程組與審稿委員會於安排議程時段與會議廳的參考依據之一。</li>
+        <li>1. 投票為「記名投票」，使用 KKTIX 四碼檢查碼作為投票依據。議程組以檢查碼辨識投票的人是否持有年會門票，不對外公布各組檢查碼的具體投票內容。</li>
+        <li>2. 三個議程種類（Espresso、Double Espresso 與 Presentation）可各選擇投給 1 個議程。</li>
+        <li>3. 若同一議程種類選擇超過一個議程，或不選擇任何議程，視為無效票。各個議程種類的選票有效性互相獨立，無效票不影響其他議程種類的選票認定，舉例來說，若 Espresso 選擇 2 個議程、Double Espresso 選擇 1 個議程、Presentation 選擇 0 個議程，則 Double Espresso 的部分為有效票，其他二種議程為無效票。</li>
+        <li>4. 此投票表單使用 Google Forms「隨機決定問題順序」功能決定各個議程的顯示順序。</li>
+        <li>5. 在投票截止前，可以使用同一組檢查碼重複投票。計票時以最新一筆投票記錄為準。</li>
+      </ol>
+    </article>
+    <!-- Vote Section End -->
+    <!-- Event Section -->
+    <BlockTitle text="活動" id="#event" />
+    <div v-if="!isMobile()" class="event container">
       <img class="arrow" src="@/assets/images/arrow-left.svg">
       <EventBlock icon="union" text="大地遊戲"/>
       <EventBlock icon="stall-outline" text="社群攤位"/>
@@ -10,19 +31,32 @@
       <EventBlock text="開放式\n議程"/>
       <img class="arrow" src="@/assets/images/arrow-right.svg">
     </div>
+    <div v-if="isMobile()" class="mobile event container">
+      <!-- TODO -->
+    </div>
+    <!-- Event Section End -->
   </div>
 </template>
 <script lang="ts">
 import { Watch, Component, Prop, Vue } from 'vue-property-decorator';
+import { Action, Getter } from 'vuex-class';
+
+import { DeviceType } from '@/store/types/app';
 
 import EventBlock from '../components/EventBlock.vue';
+import BlockTitle from '../components/BlockTitle.vue';
 @Component({
   components: {
-    EventBlock
+    EventBlock,
+    BlockTitle
   }
 })
 export default class Agenda extends Vue {
+  @Getter('device', { namespace: 'app' }) private device!: DeviceType;
 
+  private isMobile (): boolean {
+    return this.device === DeviceType.MOBILE;
+  }
 }
 </script>
 <style lang="scss">