diff --git a/components/SponsorshipTable.vue b/components/SponsorshipTable.vue
new file mode 100644
index 0000000..78d4549
--- /dev/null
+++ b/components/SponsorshipTable.vue
@@ -0,0 +1,284 @@
+<script setup>
+import { ref } from 'vue'
+import { marked } from 'marked'
+
+const sponsors = ref([
+  {
+    level: '鈦金級',
+    price: {
+      main: 'NT$ 238,000',
+    },
+    benefits: {
+      '官網 及 OPass app：': [
+        '公司簡介',
+        '議程頁面廣告（按等級比重播出）',
+      ],
+      '活動現場：（與 COSCUP 聯名）': [
+        '會場迎賓牆曝光',
+        '徵才版面牆獨家曝光',
+        '演講廳垂吊布條曝光',
+        '會前派對贊助',
+        '會議桌前看板曝光',
+        '大會點心桌旗曝光',
+        '前夜派對飲料券 4 張',
+      ],
+      '社群網站：': [
+        '官方社群網站宣傳',
+        '官方 blog 文章 1 篇',
+      ],
+    },
+  },
+  {
+    level: '鑽石級',
+    price: {
+      main: 'NT$ 170,500',
+    },
+    benefits: {
+      '官網 及 OPass app：': [
+        '公司簡介',
+        '議程頁面廣告（按等級比重播出）',
+      ],
+      '活動現場：（與 COSCUP 聯名）': [
+        '會場迎賓牆曝光',
+        '大會點心桌旗曝光',
+        '前夜派對飲料券 2 張',
+      ],
+      '社群網站：': [
+        '官方社群網站宣傳',
+        '官方 blog 文章 1 篇',
+      ],
+    },
+  },
+  {
+    level: '黃金級',
+    price: {
+      main: 'NT$ 137,500',
+    },
+    benefits: {
+      '官網 及 OPass app：': [
+        '公司簡介',
+        '議程頁面廣告（按等級比重播出）',
+      ],
+      '活動現場：（與 COSCUP 聯名）': [
+        '會場迎賓牆曝光',
+        '前夜派對飲料券 1 張',
+      ],
+      '社群網站：': [
+        '官方社群網站宣傳',
+        '官方 blog 文章 1 篇',
+      ],
+    },
+  },
+  {
+    level: '白銀級',
+    price: {
+      main: 'NT$ 82,500',
+    },
+    benefits: {
+      '官網 及 OPass app：': [
+        '公司簡介',
+        '議程頁面廣告（按等級比重播出）',
+      ],
+      '活動現場：（與 COSCUP 聯名）': [
+        '會場迎賓牆曝光',
+      ],
+      '社群網站：': [
+        '官方社群網站宣傳',
+      ],
+    },
+  },
+  {
+    level: '青銅級',
+    price: {
+      main: 'NT$ 38,500',
+    },
+    benefits: {
+      '官網 及 OPass app：': [
+        '公司簡介',
+        '議程頁面廣告（按等級比重播出）',
+      ],
+      '活動現場：（與 COSCUP 聯名）': [
+        '會場迎賓牆曝光',
+      ],
+      '社群網站：': [
+        '官方社群網站宣傳',
+      ],
+    },
+  },
+  {
+    level: '好朋友級',
+    price: {
+      main: 'NT$ 22,000',
+    },
+    benefits: {
+      '官網 及 OPass app：': [
+        '公司簡介',
+      ],
+      '活動現場：（與 COSCUP 聯名）': [
+        '會場迎賓牆曝光',
+      ],
+      '社群網站：': [
+        '官方社群網站宣傳',
+      ],
+    },
+  },
+  {
+    level: '海外講者 旅費贊助',
+    price: {
+      main: 'NTD 6,000 ＋',
+      details: [
+        '港中澳：NTD 15,000/位',
+        '大洋洲、亞洲（除港中澳）：NTD 30,000/位',
+        '非洲：NTD 45,000/位',
+        '歐洲北美：NTD 60,000/位',
+        '中南美洲：NTD 82,500/位',
+      ],
+    },
+    benefits: {
+      '官網 及 OPass app：': [
+        '公司簡介',
+      ],
+      '活動現場：（與 COSCUP 聯名）': [
+        '會場迎賓牆曝光',
+        'Travel sponsor 胸針2枚 (Sponsor 1, Speaker 1)',
+      ],
+      '社群網站：': [
+        '官方社群網站宣傳',
+      ],
+      '截止收件日期：': [
+        '2024/6/14',
+      ],
+    },
+  },
+])
+
+function renderMarkdown(text) {
+  return marked(text)
+}
+
+function handlePrint() {
+  // Create a new window with just the table content
+  const printContent = document.getElementById('sponsorship-table').innerHTML
+  const printWindow = window.open('', '_blank')
+  printWindow.document.write(`
+    <html>
+      <head>
+        <title>COSCUP Sponsorship Levels</title>
+        <style>
+          table { 
+            width: 100%;
+            border-collapse: collapse;
+            margin: 20px 0;
+          }
+          th, td {
+            border: 1px solid #ddd;
+            padding: 12px;
+            text-align: left;
+          }
+          th {
+            background-color: #f5f5f5;
+          }
+          .benefit-category {
+            font-weight: bold;
+            color: #2c3e50;
+            margin-top: 10px;
+            margin-bottom: 5px;
+          }
+          .benefit-list {
+            margin: 0;
+            padding-left: 20px;
+          }
+          .benefit-item {
+            margin: 3px 0;
+          }
+          .benefit-item p {
+            margin: 0;
+          }
+          @media print {
+            .no-print {
+              display: none;
+            }
+          }
+        </style>
+      </head>
+      <body>
+        ${printContent}
+      </body>
+    </html>
+  `)
+  printWindow.document.close()
+  printWindow.print()
+}
+</script>
+
+<template>
+  <div class="sponsorship-container">
+    <button
+      class="print-button no-print"
+      style="margin-bottom: 20px; padding: 8px 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;"
+      @click="handlePrint"
+    >
+      Print Sponsorship Table
+    </button>
+
+    <div id="sponsorship-table">
+      <table style="width: 100%; border-collapse: collapse;">
+        <thead>
+          <tr>
+            <th style="border: 1px solid #ddd; padding: 12px; background-color: #f5f5f5;">
+              贊助等級
+            </th>
+            <th style="border: 1px solid #ddd; padding: 12px; background-color: #f5f5f5;">
+              贊助金額
+            </th>
+            <th style="border: 1px solid #ddd; padding: 12px; background-color: #f5f5f5;">
+              贊助福利
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="sponsor in sponsors"
+            :key="sponsor.level"
+          >
+            <td style="border: 1px solid #ddd; padding: 12px;">
+              {{ sponsor.level }}
+            </td>
+            <td style="border: 1px solid #ddd; padding: 12px;">
+              <div class="price-main">
+                {{ sponsor.price.main }}
+              </div>
+              <ul class="price-details">
+                <li
+                  v-for="detail in sponsor.price.details"
+                  :key="detail"
+                >
+                  {{ detail }}
+                </li>
+              </ul>
+            </td>
+            <td style="border: 1px solid #ddd; padding: 12px;">
+              <template
+                v-for="(benefits, category) in sponsor.benefits"
+                :key="category"
+              >
+                <div class="benefit-category">
+                  {{ category }}
+                </div>
+                <ul class="benefit-list">
+                  <li
+                    v-for="benefit in benefits"
+                    :key="benefit"
+                    class="benefit-item"
+                  >
+                    <span v-html="renderMarkdown(benefit)" />
+                  </li>
+                </ul>
+              </template>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
diff --git a/content/sponsorship.md b/content/sponsorship.md
new file mode 100644
index 0000000..9399157
--- /dev/null
+++ b/content/sponsorship.md
@@ -0,0 +1,18 @@
+# 贊助
+
+## 贊助方案
+
+<SponsorshipTable />
+
+## 贊助方案加價購
+
+## 常見問答
+
+## 成為我們的贊助夥伴
+
+感謝所有支持 COSCUP 的企業與夥伴，與我們攜手打造更美好的科技產業生態與開源社群交流環境。
+
+我們期待所有贊助單位在 COSCUP Taiwan 中，激發新想法與創意、促成合作計畫、招募優秀人才、擴展開放軟體未來的展望，並與專業人士深度交流。
+透過贊助，您的品牌將獲得廣泛曝光，並成為推動開源發展的重要力量。
+
+若您有興趣成為我們的贊助夥伴，歡迎了解詳細合作方案，或是利用 sponsorship@coscup.org 聯絡我們，我們將有專人與您商討更多的合作方式！
diff --git a/package.json b/package.json
index ac5f7a9..8673a09 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@vueuse/core": "^11.0.3",
     "calendar-link": "^2.7.0",
     "leaflet": "^1.9.4",
+    "marked": "^15.0.4",
     "osmtogeojson": "3.0.0-beta.5",
     "vue": "^3.4.37"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f9883d0..51c98d9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       leaflet:
         specifier: ^1.9.4
         version: 1.9.4
+      marked:
+        specifier: ^15.0.4
+        version: 15.0.4
       osmtogeojson:
         specifier: 3.0.0-beta.5
         version: 3.0.0-beta.5
@@ -1901,6 +1904,11 @@ packages:
   mark.js@8.11.1:
     resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
 
+  marked@15.0.4:
+    resolution: {integrity: sha512-TCHvDqmb3ZJ4PWG7VEGVgtefA5/euFmsIhxtD0XsBxI39gUSKL81mIRFdt0AiNQozUahd4ke98ZdirExd/vSEw==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   mdast-util-from-markdown@0.8.5:
     resolution: {integrity: sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==}
 
@@ -4557,6 +4565,8 @@ snapshots:
 
   mark.js@8.11.1: {}
 
+  marked@15.0.4: {}
+
   mdast-util-from-markdown@0.8.5:
     dependencies:
       '@types/mdast': 3.0.15
