diff --git a/app/components/DC.vue b/app/components/DC.vue
new file mode 100644
index 0000000..e3af5b6
--- /dev/null
+++ b/app/components/DC.vue
@@ -0,0 +1,36 @@
+<script>
+export default {
+  name: 'DC',
+  props: {
+    userId: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    href() {
+      return `https://discord.com/users/${this.userId}`
+    },
+  },
+}
+</script>
+
+<template>
+  <a
+    class="dc-at"
+    :href="href"
+    target="_blank"
+  >
+    <slot />
+  </a>
+</template>
+
+<style scoped>
+.dc-at {
+  background-color: #40447e;
+  color: white;
+  font-weight: 700;
+  padding: 0.1rem 0.3rem;
+  border-radius: 0.3rem;
+}
+</style>
diff --git a/app/pages/Instructions.vue b/app/pages/Instructions.vue
new file mode 100644
index 0000000..8a1cacb
--- /dev/null
+++ b/app/pages/Instructions.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="npc-paragraph">
+    <div class="npc-box">
+      <strong>
+        <h2>
+          入社流程
+        </h2>
+      </strong>
+      <div class="project-content">
+        <div class="project-description">
+          <p>
+            首先請加入 <a
+              href="https://to.ntut.club/discord"
+              target="_blank"
+            >Discord 伺服器</a>，並透過以下幾種方式聯絡我們
+          </p>
+          <!-- <a
+            href="https://to.ntut.club/discord"
+            target="_blank"
+          >
+            <div class="discord-channel">
+              <svg
+                aria-hidden="true"
+                class="icon__2ea32"
+                fill="none"
+                height="24"
+                role="svg"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              ><path
+                class=""
+                clip-rule="evenodd"
+                d="M15 2a3 3 0 0 1 3 3v12H5.5a1.5 1.5 0 0 0 0 3h14a.5.5 0 0 0 .5-.5V5h1a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h10Zm-.3 5.7a1 1 0 0 0-1.4-1.4L9 10.58l-2.3-2.3a1 1 0 0 0-1.4 1.42l3 3a1 1 0 0 0 1.4 0l5-5Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              /></svg>
+              <strong>北科程式設計研究社</strong>
+            </div>
+          </a> -->
+          <ul>
+            <li>
+              <h4>
+                Instagram <a href="https://instagram.com/npc.designer">@npc.designer</a>
+              </h4>
+            </li>
+
+            <li>
+              <h4>
+                於社課期間到上課教室
+              </h4>
+            </li>
+            <li>
+              <h4>
+                Discord 伺服器首頁點選私訊
+                <!-- <DC user-id="1171113302739394628"> -->
+                @小N
+                <!-- </DC> -->
+              </h4>
+            </li>
+            <li>
+              <h4>
+                Email <a href="mailto:contact@ntut.club">contact@ntut.club</a>
+              </h4>
+            </li>
+          </ul>
+          <br>
+          <p>並告訴我們你的 <strong>姓名</strong>、<strong>學號</strong> 和 <strong>Discord 使用者名稱</strong>，我們將為您安排時間繳費與領取社服</p>
+        </div>
+      </div>
+      <NuxtLink to="/join">
+        <button>
+          返回
+        </button>
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.discord-channel {
+  display: flex;
+  align-items: center;
+  background-color: #353535;
+  width: fit-content;
+  padding: 0.3rem 0.5rem;
+  border-radius: 0.5rem;
+  margin: 0.5rem;
+  cursor: pointer;
+  svg {
+    margin-right: 0.5rem;
+    color: white;
+  }
+  strong {
+    margin-right: 2rem;
+    color: white;
+  }
+  &:hover {
+    background-color: #494949;
+    transform: scale(1.02);
+  }
+}
+.dc-at {
+  background-color: #40447e;
+  color: white;
+  font-weight: 700;
+  padding: 0.1rem 0.3rem;
+  border-radius: 0.3rem;
+}
+</style>
diff --git a/app/pages/join.vue b/app/pages/join.vue
index 00e02ab..10db347 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -11,7 +11,7 @@
         >
         <div class="project-description">
           <h3>🌟 加入我們的社團吧！🌟</h3>
-          <p>🎉 成為 <strong>我們的一員</strong>，您將獲得：</p>
+          <p>🎉 成為 <strong>NPC</strong> 的一員，您將獲得：</p>
           <ul>
             <li>獨家社服一件，展現您的團隊精神！</li>
             <li>精彩的社課，提升您的技能與知識！</li>
@@ -21,19 +21,15 @@
           <p>💰 社費僅需 500 元，讓您享受所有會員專屬福利！</p>
           <p>📢 建議加入我們的 Discord 群組，隨時掌握最新消息與活動資訊，與其他會員互動交流！</p>
           <p>快來加入我們的大家庭，一起創造美好的回憶！💖</p>
-          <p>有興趣的朋友請點擊下方 Discord 連結，或透過 Email 聯絡我們！</p>
-          <p>歡迎來社課或社辦繳費</p>
+          <p>有興趣的朋友請點擊下方按鈕！</p>
         </div>
       </div>
       <div class="join-button-container">
-        <a href="https://to.ntut.club/discord">
-          <button class="btn-discord">
-            <strong>加入 Discord</strong>
+        <NuxtLink to="/instructions">
+          <button>
+            查看說明
           </button>
-        </a>
-        <a href="mailto:contact@ntut.club">
-          <button>Email</button>
-        </a>
+        </NuxtLink>
       </div>
     </div>