diff --git a/lang/default.json b/lang/default.json
index b540a94307..15fc89e383 100644
--- a/lang/default.json
+++ b/lang/default.json
@@ -586,6 +586,9 @@
     "defaultMessage": "Notifications",
     "description": "src/views/Me/Settings/Settings/SettingsTabs/index.tsx"
   },
+  "6gXdHy": {
+    "defaultMessage": "Share"
+  },
   "6kMb9Z": {
     "defaultMessage": "On-chain records"
   },
@@ -785,6 +788,10 @@
   "9WRlF4": {
     "defaultMessage": "Send"
   },
+  "9ZBatB": {
+    "defaultMessage": "Quote",
+    "description": "src/components/TextSelectionPopover/index.tsx"
+  },
   "9aorag": {
     "defaultMessage": "Unlike collection"
   },
@@ -862,6 +869,10 @@
   "AlHYvk": {
     "defaultMessage": "{type} edited"
   },
+  "Aq0aMp": {
+    "defaultMessage": "Only participants can join the discussion.",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "At8Qd2": {
     "defaultMessage": "Account",
     "description": "src/views/Me/Settings/Settings/SettingsTabs/index.tsx"
@@ -1605,6 +1616,10 @@
   "Mgl1bT": {
     "defaultMessage": "OAuth authorize"
   },
+  "Mh+PgK": {
+    "defaultMessage": "No discussion yet",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "Mn7GEf": {
     "defaultMessage": "Selected activities related to you in the past 24 hours",
     "description": "src/views/Me/Settings/Notifications/Email.tsx"
@@ -1863,6 +1878,108 @@
   "Qlzm0s": {
     "defaultMessage": "mentioned you in a moment at"
   },
+  "QuoteImage.download": {
+    "defaultMessage": "Download"
+  },
+  "QuoteImage.onWall": {
+    "defaultMessage": "On the wall ✓"
+  },
+  "QuoteImage.postToWall": {
+    "defaultMessage": "Post to wall"
+  },
+  "QuoteImage.postedToWall": {
+    "defaultMessage": "Posted to the quote wall"
+  },
+  "QuoteImage.size.portrait": {
+    "defaultMessage": "Portrait 4:5"
+  },
+  "QuoteImage.size.square": {
+    "defaultMessage": "Square 1:1"
+  },
+  "QuoteImage.size.story": {
+    "defaultMessage": "Story 9:16"
+  },
+  "QuoteImage.sizeLabel": {
+    "defaultMessage": "Size"
+  },
+  "QuoteImage.sizeNote.portrait": {
+    "defaultMessage": "IG post · most eye-catching"
+  },
+  "QuoteImage.sizeNote.square": {
+    "defaultMessage": "IG / FB post"
+  },
+  "QuoteImage.sizeNote.story": {
+    "defaultMessage": "IG / FB story · Threads"
+  },
+  "QuoteImage.style.coral": {
+    "defaultMessage": "Coral"
+  },
+  "QuoteImage.style.ink": {
+    "defaultMessage": "Ink"
+  },
+  "QuoteImage.style.mint": {
+    "defaultMessage": "Mint"
+  },
+  "QuoteImage.style.pine": {
+    "defaultMessage": "Pine"
+  },
+  "QuoteImage.style.sky": {
+    "defaultMessage": "Sky"
+  },
+  "QuoteImage.style.slate": {
+    "defaultMessage": "Slate"
+  },
+  "QuoteImage.style.violet": {
+    "defaultMessage": "Violet"
+  },
+  "QuoteImage.style.warm": {
+    "defaultMessage": "Cream"
+  },
+  "QuoteImage.styleLabel": {
+    "defaultMessage": "Style"
+  },
+  "QuoteImage.title": {
+    "defaultMessage": "Share Quote"
+  },
+  "QuoteImage.truncated": {
+    "defaultMessage": "You selected {original} characters; only the first {max} are shown. A concise quote works best."
+  },
+  "QuoteImage.wallFailed": {
+    "defaultMessage": "Failed to post to the wall"
+  },
+  "QuoteImage.wallQuota": {
+    "defaultMessage": "Wall quota reached for today — come back tomorrow!"
+  },
+  "QuoteWall.confirmRetract": {
+    "defaultMessage": "Confirm retract"
+  },
+  "QuoteWall.fullWall": {
+    "defaultMessage": "Full wall →"
+  },
+  "QuoteWall.museum": {
+    "defaultMessage": "Full wall / Museum →"
+  },
+  "QuoteWall.retract": {
+    "defaultMessage": "Retract"
+  },
+  "QuoteWall.retractFailed": {
+    "defaultMessage": "Failed to retract"
+  },
+  "QuoteWall.retracted": {
+    "defaultMessage": "Quote retracted from the wall"
+  },
+  "QuoteWall.shuffle": {
+    "defaultMessage": "🔀 Shuffle"
+  },
+  "QuoteWall.title": {
+    "defaultMessage": "Quote wall"
+  },
+  "QuoteWall.toArticle": {
+    "defaultMessage": "To article ↩"
+  },
+  "QuoteWall.viewAll": {
+    "defaultMessage": "View all {count} quotes"
+  },
   "QvPc1q": {
     "defaultMessage": "Upload Cover"
   },
@@ -2155,6 +2272,10 @@
     "defaultMessage": "Drafts",
     "description": "src/views/Me/Works/WorksTabs/index.tsx"
   },
+  "Vj0Hbd": {
+    "defaultMessage": "View all {count} comments",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "VmYzLr": {
     "defaultMessage": "{total} members"
   },
@@ -2427,6 +2548,10 @@
   "aKEiNd": {
     "defaultMessage": "You missed the registration period, you can still join as a latecomer. Apply earlier next time for the chance to get the badge."
   },
+  "aLkBs2": {
+    "defaultMessage": "Discussion",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "aOFCqL": {
     "defaultMessage": "Most comments",
     "description": "src/views/Me/Works/Published/SortTabs.tsx"
@@ -2486,6 +2611,10 @@
     "defaultMessage": "Your article {articleTitle} has been listed as a feature of event in 7 days. Come and view more wonderful articles!",
     "description": "src/components/Notice/CampaignArticleNotice/CampaignArticleFeaturedNotice.tsx"
   },
+  "b3aGfp": {
+    "defaultMessage": "Share your thoughts with other participants",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "b6x6lm": {
     "defaultMessage": "Enter a clear and concise title"
   },
@@ -2922,6 +3051,10 @@
   "iIitRg": {
     "defaultMessage": "Tag not bookmarked yet"
   },
+  "iJfVZG": {
+    "defaultMessage": "Quote card",
+    "description": "src/components/TextSelectionPopover/index.tsx"
+  },
   "iNZdM/": {
     "defaultMessage": "Switch to support creators with the Optimism network {br} Make support more convenient and affordable",
     "description": "src/components/Forms/PaymentForm/SwitchNetwork/index.tsx"
@@ -2929,6 +3062,9 @@
   "iSM+et": {
     "defaultMessage": "All rights reserved"
   },
+  "iSUeWj": {
+    "defaultMessage": "Comment sent"
+  },
   "iTcMqz": {
     "defaultMessage": "Under the moonlight, dreams are about to come true. The Moonlight Dream badge signifies your participation in the Nomad Matters.",
     "description": "src/views/User/UserProfile/BadgeNomadLabel/index.tsx"
diff --git a/lang/en.json b/lang/en.json
index 7b8296a987..13f7c3b43a 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -586,6 +586,9 @@
     "defaultMessage": "Notifications",
     "description": "src/views/Me/Settings/Settings/SettingsTabs/index.tsx"
   },
+  "6gXdHy": {
+    "defaultMessage": "Share"
+  },
   "6kMb9Z": {
     "defaultMessage": "On-chain records"
   },
@@ -785,6 +788,10 @@
   "9WRlF4": {
     "defaultMessage": "Send"
   },
+  "9ZBatB": {
+    "defaultMessage": "Quote",
+    "description": "src/components/TextSelectionPopover/index.tsx"
+  },
   "9aorag": {
     "defaultMessage": "Unlike collection"
   },
@@ -862,6 +869,10 @@
   "AlHYvk": {
     "defaultMessage": "{type} edited"
   },
+  "Aq0aMp": {
+    "defaultMessage": "Only participants can join the discussion.",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "At8Qd2": {
     "defaultMessage": "Account",
     "description": "src/views/Me/Settings/Settings/SettingsTabs/index.tsx"
@@ -1605,6 +1616,10 @@
   "Mgl1bT": {
     "defaultMessage": "OAuth authorize"
   },
+  "Mh+PgK": {
+    "defaultMessage": "No discussion yet",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "Mn7GEf": {
     "defaultMessage": "Selected activities related to you in the past 24 hours",
     "description": "src/views/Me/Settings/Notifications/Email.tsx"
@@ -1863,6 +1878,108 @@
   "Qlzm0s": {
     "defaultMessage": "mentioned you in a moment at"
   },
+  "QuoteImage.download": {
+    "defaultMessage": "Download"
+  },
+  "QuoteImage.onWall": {
+    "defaultMessage": "On the wall ✓"
+  },
+  "QuoteImage.postToWall": {
+    "defaultMessage": "Post to wall"
+  },
+  "QuoteImage.postedToWall": {
+    "defaultMessage": "Posted to the quote wall"
+  },
+  "QuoteImage.size.portrait": {
+    "defaultMessage": "Portrait 4:5"
+  },
+  "QuoteImage.size.square": {
+    "defaultMessage": "Square 1:1"
+  },
+  "QuoteImage.size.story": {
+    "defaultMessage": "Story 9:16"
+  },
+  "QuoteImage.sizeLabel": {
+    "defaultMessage": "Size"
+  },
+  "QuoteImage.sizeNote.portrait": {
+    "defaultMessage": "IG post · most eye-catching"
+  },
+  "QuoteImage.sizeNote.square": {
+    "defaultMessage": "IG / FB post"
+  },
+  "QuoteImage.sizeNote.story": {
+    "defaultMessage": "IG / FB story · Threads"
+  },
+  "QuoteImage.style.coral": {
+    "defaultMessage": "Coral"
+  },
+  "QuoteImage.style.ink": {
+    "defaultMessage": "Ink"
+  },
+  "QuoteImage.style.mint": {
+    "defaultMessage": "Mint"
+  },
+  "QuoteImage.style.pine": {
+    "defaultMessage": "Pine"
+  },
+  "QuoteImage.style.sky": {
+    "defaultMessage": "Sky"
+  },
+  "QuoteImage.style.slate": {
+    "defaultMessage": "Slate"
+  },
+  "QuoteImage.style.violet": {
+    "defaultMessage": "Violet"
+  },
+  "QuoteImage.style.warm": {
+    "defaultMessage": "Cream"
+  },
+  "QuoteImage.styleLabel": {
+    "defaultMessage": "Style"
+  },
+  "QuoteImage.title": {
+    "defaultMessage": "Share Quote"
+  },
+  "QuoteImage.truncated": {
+    "defaultMessage": "You selected {original} characters; only the first {max} are shown. A concise quote works best."
+  },
+  "QuoteImage.wallFailed": {
+    "defaultMessage": "Failed to post to the wall"
+  },
+  "QuoteImage.wallQuota": {
+    "defaultMessage": "Wall quota reached for today — come back tomorrow!"
+  },
+  "QuoteWall.confirmRetract": {
+    "defaultMessage": "Confirm retract"
+  },
+  "QuoteWall.fullWall": {
+    "defaultMessage": "Full wall →"
+  },
+  "QuoteWall.museum": {
+    "defaultMessage": "Full wall / Museum →"
+  },
+  "QuoteWall.retract": {
+    "defaultMessage": "Retract"
+  },
+  "QuoteWall.retractFailed": {
+    "defaultMessage": "Failed to retract"
+  },
+  "QuoteWall.retracted": {
+    "defaultMessage": "Quote retracted from the wall"
+  },
+  "QuoteWall.shuffle": {
+    "defaultMessage": "🔀 Shuffle"
+  },
+  "QuoteWall.title": {
+    "defaultMessage": "Quote wall"
+  },
+  "QuoteWall.toArticle": {
+    "defaultMessage": "To article ↩"
+  },
+  "QuoteWall.viewAll": {
+    "defaultMessage": "View all {count} quotes"
+  },
   "QvPc1q": {
     "defaultMessage": "Upload Cover"
   },
@@ -2155,6 +2272,10 @@
     "defaultMessage": "Drafts",
     "description": "src/views/Me/Works/WorksTabs/index.tsx"
   },
+  "Vj0Hbd": {
+    "defaultMessage": "View all {count} comments",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "VmYzLr": {
     "defaultMessage": "{total} members"
   },
@@ -2427,6 +2548,10 @@
   "aKEiNd": {
     "defaultMessage": "You missed the registration period, you can still join as a latecomer. Apply earlier next time for the chance to get the badge."
   },
+  "aLkBs2": {
+    "defaultMessage": "Discussion",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "aOFCqL": {
     "defaultMessage": "Most comments",
     "description": "src/views/Me/Works/Published/SortTabs.tsx"
@@ -2486,6 +2611,10 @@
     "defaultMessage": "Your article {articleTitle} has been listed as a feature of event in 7 days. Come and view more wonderful articles!",
     "description": "src/components/Notice/CampaignArticleNotice/CampaignArticleFeaturedNotice.tsx"
   },
+  "b3aGfp": {
+    "defaultMessage": "Share your thoughts with other participants",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "b6x6lm": {
     "defaultMessage": "Enter a clear and concise title"
   },
@@ -2922,6 +3051,10 @@
   "iIitRg": {
     "defaultMessage": "Tag not bookmarked yet"
   },
+  "iJfVZG": {
+    "defaultMessage": "Quote card",
+    "description": "src/components/TextSelectionPopover/index.tsx"
+  },
   "iNZdM/": {
     "defaultMessage": "Switch to support creators with the Optimism network {br} Make support more convenient and affordable",
     "description": "src/components/Forms/PaymentForm/SwitchNetwork/index.tsx"
@@ -2929,6 +3062,9 @@
   "iSM+et": {
     "defaultMessage": "All rights reserved"
   },
+  "iSUeWj": {
+    "defaultMessage": "Comment sent"
+  },
   "iTcMqz": {
     "defaultMessage": "Under the moonlight, dreams are about to come true. The Moonlight Dream badge signifies your participation in the Nomad Matters.",
     "description": "src/views/User/UserProfile/BadgeNomadLabel/index.tsx"
diff --git a/lang/zh-Hans.json b/lang/zh-Hans.json
index 842476d4c7..cf68cff145 100644
--- a/lang/zh-Hans.json
+++ b/lang/zh-Hans.json
@@ -586,6 +586,9 @@
     "defaultMessage": "通知",
     "description": "src/views/Me/Settings/Settings/SettingsTabs/index.tsx"
   },
+  "6gXdHy": {
+    "defaultMessage": "Share"
+  },
   "6kMb9Z": {
     "defaultMessage": "链上记录"
   },
@@ -785,6 +788,10 @@
   "9WRlF4": {
     "defaultMessage": "送出"
   },
+  "9ZBatB": {
+    "defaultMessage": "Quote",
+    "description": "src/components/TextSelectionPopover/index.tsx"
+  },
   "9aorag": {
     "defaultMessage": "取消喜欢选集"
   },
@@ -862,6 +869,10 @@
   "AlHYvk": {
     "defaultMessage": "{type}已编辑"
   },
+  "Aq0aMp": {
+    "defaultMessage": "Only participants can join the discussion.",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "At8Qd2": {
     "defaultMessage": "账号",
     "description": "src/views/Me/Settings/Settings/SettingsTabs/index.tsx"
@@ -1605,6 +1616,10 @@
   "Mgl1bT": {
     "defaultMessage": "应用授权"
   },
+  "Mh+PgK": {
+    "defaultMessage": "No discussion yet",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "Mn7GEf": {
     "defaultMessage": "精选过去 24 小时与你有关的消息",
     "description": "src/views/Me/Settings/Notifications/Email.tsx"
@@ -1863,6 +1878,108 @@
   "Qlzm0s": {
     "defaultMessage": "在动态中提及了你"
   },
+  "QuoteImage.download": {
+    "defaultMessage": "Download"
+  },
+  "QuoteImage.onWall": {
+    "defaultMessage": "On the wall ✓"
+  },
+  "QuoteImage.postToWall": {
+    "defaultMessage": "Post to wall"
+  },
+  "QuoteImage.postedToWall": {
+    "defaultMessage": "Posted to the quote wall"
+  },
+  "QuoteImage.size.portrait": {
+    "defaultMessage": "Portrait 4:5"
+  },
+  "QuoteImage.size.square": {
+    "defaultMessage": "Square 1:1"
+  },
+  "QuoteImage.size.story": {
+    "defaultMessage": "Story 9:16"
+  },
+  "QuoteImage.sizeLabel": {
+    "defaultMessage": "Size"
+  },
+  "QuoteImage.sizeNote.portrait": {
+    "defaultMessage": "IG post · most eye-catching"
+  },
+  "QuoteImage.sizeNote.square": {
+    "defaultMessage": "IG / FB post"
+  },
+  "QuoteImage.sizeNote.story": {
+    "defaultMessage": "IG / FB story · Threads"
+  },
+  "QuoteImage.style.coral": {
+    "defaultMessage": "Coral"
+  },
+  "QuoteImage.style.ink": {
+    "defaultMessage": "Ink"
+  },
+  "QuoteImage.style.mint": {
+    "defaultMessage": "Mint"
+  },
+  "QuoteImage.style.pine": {
+    "defaultMessage": "Pine"
+  },
+  "QuoteImage.style.sky": {
+    "defaultMessage": "Sky"
+  },
+  "QuoteImage.style.slate": {
+    "defaultMessage": "Slate"
+  },
+  "QuoteImage.style.violet": {
+    "defaultMessage": "Violet"
+  },
+  "QuoteImage.style.warm": {
+    "defaultMessage": "Cream"
+  },
+  "QuoteImage.styleLabel": {
+    "defaultMessage": "Style"
+  },
+  "QuoteImage.title": {
+    "defaultMessage": "Share Quote"
+  },
+  "QuoteImage.truncated": {
+    "defaultMessage": "You selected {original} characters; only the first {max} are shown. A concise quote works best."
+  },
+  "QuoteImage.wallFailed": {
+    "defaultMessage": "Failed to post to the wall"
+  },
+  "QuoteImage.wallQuota": {
+    "defaultMessage": "Wall quota reached for today — come back tomorrow!"
+  },
+  "QuoteWall.confirmRetract": {
+    "defaultMessage": "Confirm retract"
+  },
+  "QuoteWall.fullWall": {
+    "defaultMessage": "Full wall →"
+  },
+  "QuoteWall.museum": {
+    "defaultMessage": "Full wall / Museum →"
+  },
+  "QuoteWall.retract": {
+    "defaultMessage": "Retract"
+  },
+  "QuoteWall.retractFailed": {
+    "defaultMessage": "Failed to retract"
+  },
+  "QuoteWall.retracted": {
+    "defaultMessage": "Quote retracted from the wall"
+  },
+  "QuoteWall.shuffle": {
+    "defaultMessage": "🔀 Shuffle"
+  },
+  "QuoteWall.title": {
+    "defaultMessage": "Quote wall"
+  },
+  "QuoteWall.toArticle": {
+    "defaultMessage": "To article ↩"
+  },
+  "QuoteWall.viewAll": {
+    "defaultMessage": "View all {count} quotes"
+  },
   "QvPc1q": {
     "defaultMessage": "上传封面"
   },
@@ -2155,6 +2272,10 @@
     "defaultMessage": "草稿",
     "description": "src/views/Me/Works/WorksTabs/index.tsx"
   },
+  "Vj0Hbd": {
+    "defaultMessage": "View all {count} comments",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "VmYzLr": {
     "defaultMessage": "{total} 個成員"
   },
@@ -2427,6 +2548,10 @@
   "aKEiNd": {
     "defaultMessage": "错过报名期没关系，仍然可以用晚鸟身份参与，一起书写人生故事。下次早点报名，就有机会获得大满贯徽章！"
   },
+  "aLkBs2": {
+    "defaultMessage": "Discussion",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "aOFCqL": {
     "defaultMessage": "最多评论",
     "description": "src/views/Me/Works/Published/SortTabs.tsx"
@@ -2486,6 +2611,10 @@
     "defaultMessage": "你的作品 {articleTitle} 已被列为活动精选之作，快来看看更多精彩好文！",
     "description": "src/components/Notice/CampaignArticleNotice/CampaignArticleFeaturedNotice.tsx"
   },
+  "b3aGfp": {
+    "defaultMessage": "Share your thoughts with other participants",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "b6x6lm": {
     "defaultMessage": "输入简单明了的标题"
   },
@@ -2922,6 +3051,10 @@
   "iIitRg": {
     "defaultMessage": "尚未收藏标签"
   },
+  "iJfVZG": {
+    "defaultMessage": "Quote card",
+    "description": "src/components/TextSelectionPopover/index.tsx"
+  },
   "iNZdM/": {
     "defaultMessage": "切换后即可支持创作者，采用 Optimism 网络{br}让支持更方便且费用低廉",
     "description": "src/components/Forms/PaymentForm/SwitchNetwork/index.tsx"
@@ -2929,6 +3062,9 @@
   "iSM+et": {
     "defaultMessage": "作者保留所有权利"
   },
+  "iSUeWj": {
+    "defaultMessage": "Comment sent"
+  },
   "iTcMqz": {
     "defaultMessage": "月色之下，梦想即将实现。月之梦徽章纪念你曾参与「游牧者计划」。",
     "description": "src/views/User/UserProfile/BadgeNomadLabel/index.tsx"
diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json
index 91a22de82e..0f0042126b 100644
--- a/lang/zh-Hant.json
+++ b/lang/zh-Hant.json
@@ -586,6 +586,9 @@
     "defaultMessage": "通知",
     "description": "src/views/Me/Settings/Settings/SettingsTabs/index.tsx"
   },
+  "6gXdHy": {
+    "defaultMessage": "Share"
+  },
   "6kMb9Z": {
     "defaultMessage": "鏈上紀錄"
   },
@@ -785,6 +788,10 @@
   "9WRlF4": {
     "defaultMessage": "送出"
   },
+  "9ZBatB": {
+    "defaultMessage": "Quote",
+    "description": "src/components/TextSelectionPopover/index.tsx"
+  },
   "9aorag": {
     "defaultMessage": "取消喜歡選集"
   },
@@ -862,6 +869,10 @@
   "AlHYvk": {
     "defaultMessage": "{type}已編輯"
   },
+  "Aq0aMp": {
+    "defaultMessage": "Only participants can join the discussion.",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "At8Qd2": {
     "defaultMessage": "帳號",
     "description": "src/views/Me/Settings/Settings/SettingsTabs/index.tsx"
@@ -1605,6 +1616,10 @@
   "Mgl1bT": {
     "defaultMessage": "應用授權"
   },
+  "Mh+PgK": {
+    "defaultMessage": "No discussion yet",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "Mn7GEf": {
     "defaultMessage": "精選過去 24 小時與你有關的消息",
     "description": "src/views/Me/Settings/Notifications/Email.tsx"
@@ -1863,6 +1878,108 @@
   "Qlzm0s": {
     "defaultMessage": "在動態中提及了你"
   },
+  "QuoteImage.download": {
+    "defaultMessage": "Download"
+  },
+  "QuoteImage.onWall": {
+    "defaultMessage": "On the wall ✓"
+  },
+  "QuoteImage.postToWall": {
+    "defaultMessage": "Post to wall"
+  },
+  "QuoteImage.postedToWall": {
+    "defaultMessage": "Posted to the quote wall"
+  },
+  "QuoteImage.size.portrait": {
+    "defaultMessage": "Portrait 4:5"
+  },
+  "QuoteImage.size.square": {
+    "defaultMessage": "Square 1:1"
+  },
+  "QuoteImage.size.story": {
+    "defaultMessage": "Story 9:16"
+  },
+  "QuoteImage.sizeLabel": {
+    "defaultMessage": "Size"
+  },
+  "QuoteImage.sizeNote.portrait": {
+    "defaultMessage": "IG post · most eye-catching"
+  },
+  "QuoteImage.sizeNote.square": {
+    "defaultMessage": "IG / FB post"
+  },
+  "QuoteImage.sizeNote.story": {
+    "defaultMessage": "IG / FB story · Threads"
+  },
+  "QuoteImage.style.coral": {
+    "defaultMessage": "Coral"
+  },
+  "QuoteImage.style.ink": {
+    "defaultMessage": "Ink"
+  },
+  "QuoteImage.style.mint": {
+    "defaultMessage": "Mint"
+  },
+  "QuoteImage.style.pine": {
+    "defaultMessage": "Pine"
+  },
+  "QuoteImage.style.sky": {
+    "defaultMessage": "Sky"
+  },
+  "QuoteImage.style.slate": {
+    "defaultMessage": "Slate"
+  },
+  "QuoteImage.style.violet": {
+    "defaultMessage": "Violet"
+  },
+  "QuoteImage.style.warm": {
+    "defaultMessage": "Cream"
+  },
+  "QuoteImage.styleLabel": {
+    "defaultMessage": "Style"
+  },
+  "QuoteImage.title": {
+    "defaultMessage": "Share Quote"
+  },
+  "QuoteImage.truncated": {
+    "defaultMessage": "You selected {original} characters; only the first {max} are shown. A concise quote works best."
+  },
+  "QuoteImage.wallFailed": {
+    "defaultMessage": "Failed to post to the wall"
+  },
+  "QuoteImage.wallQuota": {
+    "defaultMessage": "Wall quota reached for today — come back tomorrow!"
+  },
+  "QuoteWall.confirmRetract": {
+    "defaultMessage": "Confirm retract"
+  },
+  "QuoteWall.fullWall": {
+    "defaultMessage": "Full wall →"
+  },
+  "QuoteWall.museum": {
+    "defaultMessage": "Full wall / Museum →"
+  },
+  "QuoteWall.retract": {
+    "defaultMessage": "Retract"
+  },
+  "QuoteWall.retractFailed": {
+    "defaultMessage": "Failed to retract"
+  },
+  "QuoteWall.retracted": {
+    "defaultMessage": "Quote retracted from the wall"
+  },
+  "QuoteWall.shuffle": {
+    "defaultMessage": "🔀 Shuffle"
+  },
+  "QuoteWall.title": {
+    "defaultMessage": "Quote wall"
+  },
+  "QuoteWall.toArticle": {
+    "defaultMessage": "To article ↩"
+  },
+  "QuoteWall.viewAll": {
+    "defaultMessage": "View all {count} quotes"
+  },
   "QvPc1q": {
     "defaultMessage": "上傳封面"
   },
@@ -2155,6 +2272,10 @@
     "defaultMessage": "草稿",
     "description": "src/views/Me/Works/WorksTabs/index.tsx"
   },
+  "Vj0Hbd": {
+    "defaultMessage": "View all {count} comments",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "VmYzLr": {
     "defaultMessage": "{total} 個成員"
   },
@@ -2427,6 +2548,10 @@
   "aKEiNd": {
     "defaultMessage": "錯過報名期沒關係，仍然可以用晚鳥身份參與，一起書寫人生故事。下次早點報名，就有機會獲得大滿貫徽章！"
   },
+  "aLkBs2": {
+    "defaultMessage": "Discussion",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "aOFCqL": {
     "defaultMessage": "最多評論",
     "description": "src/views/Me/Works/Published/SortTabs.tsx"
@@ -2486,6 +2611,10 @@
     "defaultMessage": "你的作品 {articleTitle} 已被列為活動精選，快來看看更多精彩好文！",
     "description": "src/components/Notice/CampaignArticleNotice/CampaignArticleFeaturedNotice.tsx"
   },
+  "b3aGfp": {
+    "defaultMessage": "Share your thoughts with other participants",
+    "description": "src/views/CampaignDetail/Discussion"
+  },
   "b6x6lm": {
     "defaultMessage": "輸入簡單明瞭的標題"
   },
@@ -2922,6 +3051,10 @@
   "iIitRg": {
     "defaultMessage": "尚未收藏標籤"
   },
+  "iJfVZG": {
+    "defaultMessage": "Quote card",
+    "description": "src/components/TextSelectionPopover/index.tsx"
+  },
   "iNZdM/": {
     "defaultMessage": "切換後即可支持創作者，採用 Optimism 網路{br}讓支持更方便且費用低廉",
     "description": "src/components/Forms/PaymentForm/SwitchNetwork/index.tsx"
@@ -2929,6 +3062,9 @@
   "iSM+et": {
     "defaultMessage": "作者保留所有權利"
   },
+  "iSUeWj": {
+    "defaultMessage": "Comment sent"
+  },
   "iTcMqz": {
     "defaultMessage": "月色之下，夢想即將實現。月之夢徽章紀念你曾參與「遊牧者計畫」。",
     "description": "src/views/User/UserProfile/BadgeNomadLabel/index.tsx"
diff --git a/package-lock.json b/package-lock.json
index 9310f52953..8569df9d60 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "matters-web",
-  "version": "6.7.0",
+  "version": "6.11.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "matters-web",
-      "version": "6.7.0",
+      "version": "6.11.1",
       "license": "Apache-2.0",
       "dependencies": {
         "@apollo/client": "^3.13.8",
@@ -47,6 +47,7 @@
         "formik": "^2.4.6",
         "graphql": "^16.11.0",
         "graphql-tag": "^2.12.6",
+        "html-to-image": "^1.11.13",
         "husky": "^9.1.7",
         "js-base64": "^3.7.7",
         "js-cookie": "^3.0.5",
@@ -61,6 +62,7 @@
         "number-precision": "^1.6.0",
         "path-to-regexp": "^8.2.0",
         "photoswipe": "^5.4.4",
+        "qrcode": "^1.5.4",
         "react": "^18.3.1",
         "react-aria-components": "^1.10.1",
         "react-beautiful-dnd": "^13.1.1",
@@ -109,6 +111,7 @@
         "@types/jump.js": "^1.0.6",
         "@types/lodash": "^4.17.17",
         "@types/nprogress": "0.2.3",
+        "@types/qrcode": "^1.5.5",
         "@types/react": "^18.3.22",
         "@types/react-beautiful-dnd": "^13.1.8",
         "@types/react-dom": "^18.3.7",
@@ -12200,6 +12203,149 @@
         "qrcode": "1.5.3"
       }
     },
+    "node_modules/@reown/appkit-ui/node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@reown/appkit-ui/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/@reown/appkit-ui/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@reown/appkit-ui/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@reown/appkit-ui/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@reown/appkit-ui/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@reown/appkit-ui/node_modules/qrcode": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.3.tgz",
+      "integrity": "sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "encode-utf8": "^1.0.3",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/@reown/appkit-ui/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@reown/appkit-ui/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/@reown/appkit-ui/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@reown/appkit-ui/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@reown/appkit-utils": {
       "version": "1.7.8",
       "resolved": "https://registry.npmjs.org/@reown/appkit-utils/-/appkit-utils-1.7.8.tgz",
@@ -16572,6 +16718,16 @@
       "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
       "license": "MIT"
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.6.tgz",
+      "integrity": "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/react": {
       "version": "18.3.23",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz",
@@ -27351,6 +27507,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/html-to-image": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.13.tgz",
+      "integrity": "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==",
+      "license": "MIT"
+    },
     "node_modules/html-url-attributes": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
@@ -35637,13 +35799,12 @@
       }
     },
     "node_modules/qrcode": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.3.tgz",
-      "integrity": "sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==",
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
       "license": "MIT",
       "dependencies": {
         "dijkstrajs": "^1.0.1",
-        "encode-utf8": "^1.0.3",
         "pngjs": "^5.0.0",
         "yargs": "^15.3.1"
       },
@@ -50934,6 +51095,107 @@
         "@reown/appkit-wallet": "1.7.8",
         "lit": "3.3.0",
         "qrcode": "1.5.3"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+        },
+        "cliui": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+          "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^6.2.0"
+          }
+        },
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        },
+        "qrcode": {
+          "version": "1.5.3",
+          "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.3.tgz",
+          "integrity": "sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==",
+          "requires": {
+            "dijkstrajs": "^1.0.1",
+            "encode-utf8": "^1.0.3",
+            "pngjs": "^5.0.0",
+            "yargs": "^15.3.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        },
+        "y18n": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+          "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+        },
+        "yargs": {
+          "version": "15.4.1",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+          "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+          "requires": {
+            "cliui": "^6.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^4.1.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^4.2.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^18.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "18.1.3",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
       }
     },
     "@reown/appkit-utils": {
@@ -53424,6 +53686,15 @@
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
       "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw=="
     },
+    "@types/qrcode": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.6.tgz",
+      "integrity": "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/react": {
       "version": "18.3.23",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz",
@@ -60545,6 +60816,11 @@
       "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
       "dev": true
     },
+    "html-to-image": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.13.tgz",
+      "integrity": "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg=="
+    },
     "html-url-attributes": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
@@ -65822,12 +66098,11 @@
       "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA=="
     },
     "qrcode": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.3.tgz",
-      "integrity": "sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==",
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
       "requires": {
         "dijkstrajs": "^1.0.1",
-        "encode-utf8": "^1.0.3",
         "pngjs": "^5.0.0",
         "yargs": "^15.3.1"
       },
diff --git a/package.json b/package.json
index d2c462d426..043f09a8a3 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,7 @@
     "formik": "^2.4.6",
     "graphql": "^16.11.0",
     "graphql-tag": "^2.12.6",
+    "html-to-image": "^1.11.13",
     "husky": "^9.1.7",
     "js-base64": "^3.7.7",
     "js-cookie": "^3.0.5",
@@ -95,6 +96,7 @@
     "number-precision": "^1.6.0",
     "path-to-regexp": "^8.2.0",
     "photoswipe": "^5.4.4",
+    "qrcode": "^1.5.4",
     "react": "^18.3.1",
     "react-aria-components": "^1.10.1",
     "react-beautiful-dnd": "^13.1.1",
@@ -143,6 +145,7 @@
     "@types/jump.js": "^1.0.6",
     "@types/lodash": "^4.17.17",
     "@types/nprogress": "0.2.3",
+    "@types/qrcode": "^1.5.5",
     "@types/react": "^18.3.22",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.3.7",
diff --git a/public/static/images/seven-day-book-logo-dark.svg b/public/static/images/seven-day-book-logo-dark.svg
new file mode 100644
index 0000000000..96e18fa5c5
--- /dev/null
+++ b/public/static/images/seven-day-book-logo-dark.svg
@@ -0,0 +1,12 @@
+<svg width="259" height="119" viewBox="0 0 259 119" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5646_973)">
+<path d="M69.9946 76.3492C68.183 76.5198 62.3208 74.7256 59.8469 74.2855C56.3274 73.5804 45.3937 74.6158 42.4517 71.6719C40.4715 70.2063 39.4832 68.2333 39.4832 65.7577C39.0779 59.4052 39.4012 56.3913 37.8273 56.1282C34.5036 56.4966 29.0841 58.2363 26.2295 59.9796C25.1265 60.8971 8.31235 66.5654 6.90146 66.3067C4.72819 66.2441 4.06418 66.8431 2.48387 67.1326C2.20788 67.1326 1.72423 66.7196 1.03381 65.8947C-0.513715 64.136 -0.371624 62.6649 1.79345 61.6304C3.25444 60.8218 8.97271 59.1747 11.4575 58.1909C13.3803 57.7217 15.1528 56.8061 17.2559 56.6781C18.5439 56.4957 19.5103 56.2207 20.1551 55.8532C20.0231 55.6463 37.0795 49.6722 36.8609 49.6631C37.6716 48.5523 32.5927 45.3851 32.7193 41.1353C32.7193 38.9346 33.2713 37.8338 34.3761 37.8338C35.7497 37.5071 39.1708 41.0055 41.9689 44.2998C43.6266 46.4097 44.6832 47.4633 45.145 47.4633C50.3632 45.7064 66.2902 40.7914 70.134 38.7976C71.053 37.8819 71.9047 37.2848 72.688 37.0089C73.4686 36.7339 74.8731 36.5061 76.8988 36.321C77.6348 36.2312 79.2907 36.046 81.8684 35.7711C83.2629 35.1385 86.3434 34.8563 87.6668 35.9771C88.9475 36.9436 88.8163 38.4763 88.0812 39.7604C87.5293 40.9538 85.5491 41.8713 82.1444 42.5111C74.6709 44.1074 53.1331 50.7494 47.2145 53.5155C46.1806 56.159 45.7143 63.6922 46.524 66.0327C47.0305 68.0319 54.5795 67.5228 57.5689 67.8214C66.3148 68.5501 74.2146 67.5191 74.6891 72.9106C74.742 75.6958 72.3118 76.2112 69.9946 76.3501V76.3492Z" fill="#333333"/>
+<path d="M187.347 85.5658C185.045 85.5658 183.388 85.2908 182.376 84.7408C179.709 82.7207 183.743 78.1977 186.38 78.8257C191.596 79.9038 205.402 74.0677 210.955 72.7745C214.078 71.8098 215.856 71.0003 212.888 69.748C211.231 69.1073 210.172 67.5945 209.712 65.2087C209.527 64.3837 209.344 63.9018 209.161 63.7648C208.975 63.6269 208.47 63.5579 207.642 63.5579C203.976 63.9599 191.202 68.247 190.799 64.7957C191.019 62.537 192.415 61.4525 195.01 60.1874C199.806 58.0947 200.85 59.4151 206.4 57.0239C212.42 54.7823 210.981 54.8277 212.198 50.3528C212.459 47.8545 214.062 44.9786 209.989 45.1265C206.345 45.3997 201.181 45.8779 197.564 46.3643C197.288 46.4569 196.55 46.5014 195.355 46.5014C194.893 46.5014 194.664 46.456 194.664 46.3643C197.78 44.8397 199.907 44.7971 207.642 42.9249C210.218 42.375 211.806 41.825 212.405 41.2742C214.07 39.5036 213.048 31.376 213.027 30.2698C212.934 29.9948 212.198 29.904 210.817 29.9948C210.035 29.8659 194.326 36.4617 184.585 40.1743C183.497 40.383 167.256 47.4987 173.817 47.4642C176.229 47.6439 184.587 45.4432 186.795 47.4642C184.347 51.2286 174.566 52.3412 169.675 53.3793C167.655 54.02 161.391 54.8332 158.976 53.5853C158.376 53.1724 158.078 52.3257 158.078 51.0407C158.083 44.6973 176.319 39.6597 181.548 36.4599C183.296 35.634 184.586 34.8091 185.414 33.9842C185.53 33.5749 193.091 31.0502 193.422 31.2335C194.065 31.2335 195.307 30.7762 197.149 29.8587C199.91 28.7579 202.348 27.8422 204.467 27.108C210.265 24.999 213.255 23.8065 213.441 23.5307C213.531 23.4408 213.578 22.8909 213.578 21.8799C213.557 20.4052 213.466 17.0048 212.888 15.9648C212.747 14.9656 201.791 19.8907 201.705 19.5413C200.592 19.7827 201.952 19.6239 199.825 20.3862C197.73 21.1376 197.684 20.7011 195.828 20.7011C195.367 20.7011 194.202 20.3671 193.559 20.3671C189.735 20.1593 189.472 15.7243 194.249 15.6907C195.906 15.5083 196.871 15.2778 197.148 15.0028C199.872 13.5445 208.15 11.1323 209.988 10.0506C214.056 8.53144 211.773 6.12837 213.716 3.99846C214.359 3.35776 214.683 2.89857 214.683 2.62359C214.626 1.97836 216.067 -0.126143 216.892 0.00998254C218.294 0.230506 218.677 1.87762 218.687 3.44851C218.687 4.45856 218.778 5.14645 218.963 5.51127C219.315 6.45053 221.385 5.8534 222.138 5.78624C228.324 3.77521 237.763 2.03008 240.362 8.67482C241.093 9.72299 240.757 15.1535 241.19 16.9286C241.678 18.5603 243.743 18.0384 246.437 18.4414C249.133 18.3679 253.362 19.7899 256.102 19.9542C257.594 19.868 259.005 21.3463 259.001 22.7048C258.445 26.6879 249.913 25.3202 245.885 25.5943C243.139 25.7976 239.599 25.185 237.878 27.0382C237.416 27.6362 236.911 28.7579 236.359 30.4086C234.333 36.0034 232.401 39.3493 230.561 40.4501C229.527 41.5754 222.771 42.6427 220.897 43.8887C220.069 44.4386 219.538 45.0122 219.309 45.6084C218.846 46.5849 218.335 50.0806 218.273 51.5916C218.325 53.991 219.668 53.02 221.586 52.3484C222.782 51.8457 223.657 51.3638 224.209 50.9046C225.436 49.6177 228.597 50.1568 228.351 52.1424C227.979 54.5655 226.657 56.0247 224.003 57.7136C221.839 59.044 220.068 59.7083 218.687 59.7083C216.859 59.7391 217.185 63.0697 217.307 64.3855C217.307 66.7714 217.076 68.3296 216.617 69.0628C216.341 69.4304 216.202 69.7979 216.202 70.1636C216.202 70.5293 216.568 70.7136 217.307 70.7136C223.922 69.4639 230.301 67.9856 237.464 68.1009C241.686 68.3087 242.44 67.737 244.437 69.9567C245.349 71.1882 245.495 72.6611 244.574 73.8771C243.439 76.0533 236.553 75.9526 234.979 76.4907V73.1901C220.215 74.7574 213.225 78.4001 196.46 83.3687C194.151 84.1809 190.415 85.6248 187.348 85.5694L187.347 85.5658ZM210.61 115.759C207.149 109.174 211.585 98.6456 219.101 97.258C220.147 97.0439 221.508 97.0774 222.276 97.8089C223.724 99.0495 223.163 100.827 221.585 101.935L218.825 104.412C217.811 105.237 217.075 105.695 216.616 105.787C215.533 106.232 214.939 107.74 214.959 108.95C214.959 110.142 215.235 110.967 215.787 111.427C216.874 112.497 221.26 112.099 222.207 111.77C224.527 110.54 224.825 108.711 227.246 104.411L231.664 96.4322C232.583 95.2416 233.045 94.2315 233.045 93.4057C232.517 91.166 230.839 91.0244 227.522 90.93C219.52 90.8275 208.49 97.2571 203.913 103.447C203.095 104.412 203.806 109.41 202.533 110.807C201.142 112.958 197.39 111.852 196.527 109.706C195.472 106.268 195.73 104.129 195.63 98.7708C195.877 94.1335 195.021 90.4763 197.7 90.3801C198.712 90.3801 199.448 90.7476 199.91 91.48C201.381 94.3241 202.395 95.7443 202.948 95.7443C203.224 95.7443 204.004 95.2869 205.295 94.3695C209.454 91.2694 211.358 89.5034 217.858 87.5605C225.968 84.8543 237.981 83.5457 239.81 92.8566C239.81 95.6999 237.968 100.33 234.288 106.751C232.932 109.158 230.459 114.468 228.765 115.966C225.326 119.045 221.161 118.712 216.202 118.993C213.767 119.114 211.786 117.96 210.611 115.76L210.61 115.759ZM226.693 37.4209C229.454 35.6812 230.962 28.7424 231.526 25.5916C231.722 24.8583 229.828 24.1196 229.593 24.7667C229.658 24.9046 220.02 27.1834 220.205 27.5173C220.112 27.6099 219.974 28.4348 219.791 29.993C219.797 37.6478 216.365 41.56 226.693 37.4209ZM229.455 19.9515C233.242 19.4278 232.973 19.7591 234.287 16.238C236.564 8.33995 232.718 8.33633 225.658 10.5289C218.943 12.9628 220.037 10.5352 219.79 18.4377C219.79 19.2636 219.88 20.0431 220.066 20.7764C220.138 21.5532 221.686 21.3354 221.998 21.1893C222.963 20.9896 228.361 20.1321 229.454 19.9515H229.455Z" fill="#333333"/>
+<path d="M136.264 75.4262C136.264 67.6326 136.739 68.7906 136.871 64.3529C136.725 60.015 137.293 53.3594 137.368 48.9761C137.309 43.4231 137.281 33.4497 136.125 29.3051C134.964 26.8022 134.234 28.3849 132.812 26.6924C132.443 26.1415 131.89 25.8666 131.155 25.8666C123.675 26.4873 116.255 31.0738 110.032 37.2848C108.127 38.7531 107.897 40.5463 107.547 43.8869C107.117 54.7615 107.21 61.1993 107.684 70.16C107.96 74.9289 108.42 77.773 109.065 78.6887C109.555 79.5953 110.811 79.8685 111.964 79.7895C114.054 79.5263 114.144 79.3929 115.278 77.4509C117.175 74.0731 121.827 72.2854 124.754 70.3569C128.429 71.9768 127.65 74.2192 128.587 77.195C129.212 78.8838 129.838 80.0627 130.465 80.7233C131.569 82.1263 134.689 81.8468 135.712 80.6544C136.53 80.0826 136.496 76.135 136.265 75.4271L136.264 75.4262ZM130.741 51.1768C130.698 53.9983 130.298 59.3779 130.225 61.9825C127.92 63.4172 117.543 67.2868 116.107 67.5455C115.369 67.2705 115.002 65.117 115.002 61.0804C115.002 59.9796 115.417 59.2473 116.245 58.8797C116.98 58.3298 117.808 57.5965 118.73 56.679C120.846 54.6635 122.503 53.3784 123.7 52.8276C125.264 52.0943 126.507 51.0389 127.428 49.6631C129.549 46.3988 130.803 46.6466 130.741 51.1759V51.1768ZM113.07 45.8126C112.425 45.3543 112.84 43.9794 114.313 41.6853C116.383 37.803 123.816 32.2227 128.119 31.7817C128.209 31.6909 128.485 31.8742 128.947 32.3316C129.66 32.5104 129.738 41.5201 128.809 41.8223C127.555 42.3886 121.563 47.0132 120.801 48.0124C120.484 48.8355 116.44 50.8438 114.865 51.3139C113.646 51.175 113.762 46.0022 113.069 45.8117L113.07 45.8126ZM126.741 69.8088C127.852 69.3097 128.93 68.8378 129.924 68.394C129.866 69.4431 129.801 70.336 129.73 71.0702C128.992 70.8343 128.022 70.4495 126.741 69.8088Z" fill="#333333"/>
+</g>
+<defs>
+<clipPath id="clip0_5646_973">
+<rect width="259" height="119" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/seven-day-book-logo-white.svg b/public/static/images/seven-day-book-logo-white.svg
new file mode 100644
index 0000000000..65f5a9c033
--- /dev/null
+++ b/public/static/images/seven-day-book-logo-white.svg
@@ -0,0 +1,12 @@
+<svg width="259" height="119" viewBox="0 0 259 119" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5646_978)">
+<path d="M69.9946 76.3492C68.183 76.5198 62.3208 74.7256 59.8469 74.2855C56.3274 73.5804 45.3937 74.6158 42.4517 71.6719C40.4715 70.2063 39.4832 68.2333 39.4832 65.7577C39.0779 59.4052 39.4012 56.3913 37.8273 56.1282C34.5036 56.4966 29.0841 58.2363 26.2295 59.9796C25.1265 60.8971 8.31235 66.5654 6.90145 66.3067C4.72818 66.2441 4.06418 66.8431 2.48387 67.1326C2.20788 67.1326 1.72422 66.7196 1.0338 65.8947C-0.513719 64.136 -0.371627 62.6649 1.79345 61.6304C3.25444 60.8218 8.97271 59.1747 11.4575 58.1909C13.3803 57.7217 15.1528 56.8061 17.2559 56.6781C18.5438 56.4957 19.5103 56.2207 20.1551 55.8532C20.0231 55.6463 37.0795 49.6722 36.8609 49.6631C37.6716 48.5523 32.5927 45.3851 32.7193 41.1353C32.7193 38.9346 33.2713 37.8338 34.3761 37.8338C35.7497 37.5071 39.1708 41.0055 41.9689 44.2998C43.6266 46.4097 44.6832 47.4633 45.145 47.4633C50.3632 45.7064 66.2902 40.7914 70.134 38.7976C71.053 37.8819 71.9047 37.2848 72.688 37.0089C73.4686 36.7339 74.8731 36.5061 76.8988 36.321C77.6348 36.2312 79.2907 36.046 81.8684 35.7711C83.2629 35.1385 86.3434 34.8563 87.6668 35.9771C88.9475 36.9436 88.8163 38.4763 88.0812 39.7604C87.5293 40.9538 85.5491 41.8713 82.1444 42.5111C74.6709 44.1074 53.1331 50.7494 47.2145 53.5155C46.1806 56.159 45.7143 63.6922 46.524 66.0327C47.0305 68.0319 54.5795 67.5228 57.5689 67.8214C66.3148 68.5501 74.2146 67.5191 74.6891 72.9106C74.742 75.6958 72.3118 76.2112 69.9946 76.3501V76.3492Z" fill="white"/>
+<path d="M187.347 85.5658C185.045 85.5658 183.388 85.2908 182.376 84.7408C179.709 82.7207 183.743 78.1977 186.38 78.8257C191.596 79.9038 205.402 74.0677 210.955 72.7745C214.078 71.8098 215.856 71.0003 212.888 69.748C211.231 69.1073 210.172 67.5945 209.712 65.2087C209.527 64.3837 209.344 63.9018 209.161 63.7648C208.975 63.6269 208.47 63.5579 207.642 63.5579C203.976 63.9599 191.202 68.247 190.799 64.7957C191.019 62.537 192.415 61.4525 195.01 60.1874C199.806 58.0947 200.85 59.4151 206.4 57.0239C212.42 54.7823 210.981 54.8277 212.198 50.3528C212.459 47.8545 214.062 44.9786 209.989 45.1265C206.345 45.3997 201.181 45.8779 197.564 46.3643C197.288 46.4569 196.55 46.5014 195.355 46.5014C194.893 46.5014 194.664 46.456 194.664 46.3643C197.78 44.8397 199.907 44.7971 207.642 42.9249C210.218 42.375 211.806 41.825 212.405 41.2742C214.07 39.5036 213.048 31.376 213.027 30.2698C212.934 29.9948 212.198 29.904 210.817 29.9948C210.035 29.8659 194.326 36.4617 184.585 40.1743C183.497 40.383 167.256 47.4987 173.817 47.4642C176.229 47.6439 184.587 45.4432 186.795 47.4642C184.347 51.2286 174.566 52.3412 169.675 53.3793C167.655 54.02 161.391 54.8332 158.976 53.5853C158.376 53.1724 158.078 52.3257 158.078 51.0407C158.083 44.6973 176.319 39.6597 181.548 36.4599C183.296 35.634 184.586 34.8091 185.414 33.9842C185.53 33.5749 193.091 31.0502 193.422 31.2335C194.065 31.2335 195.307 30.7762 197.149 29.8587C199.91 28.7579 202.348 27.8422 204.467 27.108C210.265 24.999 213.255 23.8065 213.441 23.5307C213.531 23.4408 213.578 22.8909 213.578 21.8799C213.557 20.4052 213.466 17.0048 212.888 15.9648C212.747 14.9656 201.791 19.8907 201.705 19.5413C200.592 19.7827 201.952 19.6239 199.825 20.3862C197.73 21.1376 197.684 20.7011 195.828 20.7011C195.367 20.7011 194.202 20.3671 193.559 20.3671C189.735 20.1593 189.472 15.7243 194.249 15.6907C195.906 15.5083 196.871 15.2778 197.148 15.0028C199.872 13.5445 208.15 11.1323 209.988 10.0506C214.056 8.53144 211.773 6.12837 213.716 3.99846C214.359 3.35776 214.683 2.89857 214.683 2.62359C214.626 1.97836 216.067 -0.126143 216.892 0.00998254C218.294 0.230506 218.677 1.87762 218.687 3.44851C218.687 4.45856 218.778 5.14645 218.963 5.51127C219.315 6.45053 221.385 5.8534 222.138 5.78624C228.324 3.77521 237.763 2.03008 240.362 8.67482C241.093 9.72299 240.757 15.1535 241.19 16.9286C241.678 18.5603 243.743 18.0384 246.437 18.4414C249.133 18.3679 253.362 19.7899 256.102 19.9542C257.594 19.868 259.005 21.3463 259.001 22.7048C258.445 26.6879 249.913 25.3202 245.885 25.5943C243.139 25.7976 239.599 25.185 237.878 27.0382C237.416 27.6362 236.911 28.7579 236.359 30.4086C234.333 36.0034 232.401 39.3493 230.561 40.4501C229.527 41.5754 222.771 42.6427 220.897 43.8887C220.069 44.4386 219.538 45.0122 219.309 45.6084C218.846 46.5849 218.335 50.0806 218.273 51.5916C218.325 53.991 219.668 53.02 221.586 52.3484C222.782 51.8457 223.657 51.3638 224.209 50.9046C225.436 49.6177 228.597 50.1568 228.351 52.1424C227.979 54.5655 226.657 56.0247 224.003 57.7136C221.839 59.044 220.068 59.7083 218.687 59.7083C216.859 59.7391 217.185 63.0697 217.307 64.3855C217.307 66.7714 217.076 68.3296 216.617 69.0628C216.341 69.4304 216.202 69.7979 216.202 70.1636C216.202 70.5293 216.568 70.7136 217.307 70.7136C223.922 69.4639 230.301 67.9856 237.464 68.1009C241.686 68.3087 242.44 67.737 244.437 69.9567C245.349 71.1882 245.495 72.6611 244.574 73.8771C243.439 76.0533 236.553 75.9526 234.979 76.4907V73.1901C220.215 74.7574 213.225 78.4001 196.46 83.3687C194.151 84.1809 190.415 85.6248 187.348 85.5694L187.347 85.5658ZM210.61 115.759C207.149 109.174 211.585 98.6456 219.101 97.258C220.147 97.0439 221.508 97.0774 222.276 97.8089C223.724 99.0495 223.163 100.827 221.585 101.935L218.825 104.412C217.811 105.237 217.075 105.695 216.616 105.787C215.533 106.232 214.939 107.74 214.959 108.95C214.959 110.142 215.235 110.967 215.787 111.427C216.874 112.497 221.26 112.099 222.207 111.77C224.527 110.54 224.825 108.711 227.246 104.411L231.664 96.4322C232.583 95.2416 233.045 94.2315 233.045 93.4057C232.517 91.166 230.839 91.0244 227.522 90.93C219.52 90.8275 208.49 97.2571 203.913 103.447C203.095 104.412 203.806 109.41 202.533 110.807C201.142 112.958 197.39 111.852 196.527 109.706C195.472 106.268 195.73 104.129 195.63 98.7708C195.877 94.1335 195.021 90.4763 197.7 90.3801C198.712 90.3801 199.448 90.7476 199.91 91.48C201.381 94.3241 202.395 95.7443 202.948 95.7443C203.224 95.7443 204.004 95.2869 205.295 94.3695C209.454 91.2694 211.358 89.5034 217.858 87.5605C225.968 84.8543 237.981 83.5457 239.81 92.8566C239.81 95.6999 237.968 100.33 234.288 106.751C232.932 109.158 230.459 114.468 228.765 115.966C225.326 119.045 221.161 118.712 216.202 118.993C213.767 119.114 211.786 117.96 210.611 115.76L210.61 115.759ZM226.693 37.4209C229.454 35.6812 230.962 28.7424 231.526 25.5916C231.722 24.8583 229.828 24.1196 229.593 24.7667C229.658 24.9046 220.02 27.1834 220.205 27.5173C220.112 27.6099 219.974 28.4348 219.791 29.993C219.797 37.6478 216.365 41.56 226.693 37.4209ZM229.455 19.9515C233.242 19.4278 232.973 19.7591 234.287 16.238C236.564 8.33995 232.718 8.33633 225.658 10.5289C218.943 12.9628 220.037 10.5352 219.79 18.4377C219.79 19.2636 219.88 20.0431 220.066 20.7764C220.138 21.5532 221.686 21.3354 221.998 21.1893C222.963 20.9896 228.361 20.1321 229.454 19.9515H229.455Z" fill="white"/>
+<path d="M136.264 75.4262C136.264 67.6326 136.739 68.7906 136.871 64.3529C136.725 60.015 137.293 53.3594 137.368 48.9761C137.309 43.4231 137.281 33.4497 136.125 29.3051C134.964 26.8022 134.234 28.3849 132.812 26.6924C132.443 26.1415 131.89 25.8666 131.155 25.8666C123.675 26.4873 116.255 31.0738 110.032 37.2848C108.127 38.7531 107.897 40.5463 107.547 43.8869C107.117 54.7615 107.21 61.1993 107.684 70.16C107.96 74.9289 108.42 77.773 109.065 78.6887C109.555 79.5953 110.811 79.8685 111.964 79.7895C114.054 79.5263 114.144 79.3929 115.278 77.4509C117.175 74.0731 121.827 72.2854 124.754 70.3569C128.429 71.9768 127.65 74.2192 128.587 77.195C129.212 78.8838 129.838 80.0627 130.465 80.7233C131.569 82.1263 134.689 81.8468 135.712 80.6544C136.53 80.0826 136.496 76.135 136.265 75.4271L136.264 75.4262ZM130.741 51.1768C130.698 53.9983 130.298 59.3779 130.225 61.9825C127.92 63.4172 117.543 67.2868 116.107 67.5455C115.369 67.2705 115.002 65.117 115.002 61.0804C115.002 59.9796 115.417 59.2473 116.245 58.8797C116.98 58.3298 117.808 57.5965 118.73 56.679C120.846 54.6635 122.503 53.3784 123.7 52.8276C125.264 52.0943 126.507 51.0389 127.428 49.6631C129.549 46.3988 130.803 46.6466 130.741 51.1759V51.1768ZM113.07 45.8126C112.425 45.3543 112.84 43.9794 114.313 41.6853C116.383 37.803 123.816 32.2227 128.119 31.7817C128.209 31.6909 128.485 31.8742 128.947 32.3316C129.66 32.5104 129.738 41.5201 128.809 41.8223C127.555 42.3886 121.563 47.0132 120.801 48.0124C120.484 48.8355 116.44 50.8438 114.865 51.3139C113.646 51.175 113.762 46.0022 113.069 45.8117L113.07 45.8126ZM126.741 69.8088C127.852 69.3097 128.93 68.8378 129.924 68.394C129.866 69.4431 129.801 70.336 129.73 71.0702C128.992 70.8343 128.022 70.4495 126.741 69.8088Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_5646_978">
+<rect width="259" height="119" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/common/enums/externalLinks.ts b/src/common/enums/externalLinks.ts
index e5ff12bc70..62112e7561 100644
--- a/src/common/enums/externalLinks.ts
+++ b/src/common/enums/externalLinks.ts
@@ -14,6 +14,7 @@ export const EXTERNAL_LINKS = {
     isProd
       ? `https://liker.land/${likerId}/civic?utm_source=Matters`
       : `https://rinkeby.liker.land/${likerId}/civic?utm_source=Matters`,
+  SEVEN_DAY_BOOK_QUOTE_WALL: 'https://freewriting.matters.town/memo-wall',
   PLANET: 'https://www.planetable.xyz/',
   ENS_DOCS: 'https://docs.ens.domains/',
   METAMASK: 'https://metamask.io/download/',
diff --git a/src/common/enums/index.ts b/src/common/enums/index.ts
index 9a7c853655..c249722555 100644
--- a/src/common/enums/index.ts
+++ b/src/common/enums/index.ts
@@ -67,6 +67,8 @@ export const MAX_ARTICLE_COLLECT_LENGTH = 3
 
 export const MAX_MOMENT_CONTENT_LENGTH = 240
 export const MAX_MOMENT_COMMENT_LENGTH = 240
+// campaign discussion comment length cap (matches 短動態 = 240)
+export const MAX_CAMPAIGN_COMMENT_LENGTH = 240
 export const MAX_FIGURE_CAPTION_LENGTH = 100
 
 export const MAX_TAG_CONTENT_LENGTH = 50
diff --git a/src/common/enums/text.ts b/src/common/enums/text.ts
index 963c3d2ef1..a9e5569b5c 100644
--- a/src/common/enums/text.ts
+++ b/src/common/enums/text.ts
@@ -3,16 +3,19 @@ export const COMMENT_TYPE_TEXT = {
     article: '評論',
     circleBroadcast: '廣播',
     circleDiscussion: '眾聊',
+    campaignDiscussion: '留言',
   },
   zh_hans: {
     article: '评论',
     circleBroadcast: '广播',
     circleDiscussion: '众聊',
+    campaignDiscussion: '留言',
   },
   en: {
     article: 'comment',
     circleBroadcast: 'broadcast',
     circleDiscussion: 'thread',
+    campaignDiscussion: 'comment',
   },
 }
 
diff --git a/src/common/utils/analytics.ts b/src/common/utils/analytics.ts
index a29187e50a..10a7e47565 100644
--- a/src/common/utils/analytics.ts
+++ b/src/common/utils/analytics.ts
@@ -90,6 +90,10 @@ export interface ClickButtonProp {
     | 'edited'
     | 'appreciate'
     | 'article_content_quote'
+    | 'article_content_quote_image'
+    | 'quote_image_download'
+    | 'quote_image_share'
+    | 'quote_post_to_wall'
     | 'comment_open'
     | 'comment_close'
     | 'comment_placeholder'
diff --git a/src/common/utils/route.ts b/src/common/utils/route.ts
index 299535876d..457fce7892 100644
--- a/src/common/utils/route.ts
+++ b/src/common/utils/route.ts
@@ -48,7 +48,12 @@ interface CampaignStageArgs {
 
 interface CommentArgs {
   id: string
-  type: 'article' | 'circleDiscussion' | 'circleBroadcast' | 'moment' // comment type: article/discussion/broadcast
+  type:
+    | 'article'
+    | 'circleDiscussion'
+    | 'circleBroadcast'
+    | 'moment'
+    | 'campaignDiscussion' // comment type: article/discussion/broadcast/campaign
   parentComment?: {
     id: string
   } | null
diff --git a/src/components/CircleComment/Content/index.tsx b/src/components/CircleComment/Content/index.tsx
index 07981b1db2..adcbbeada6 100644
--- a/src/components/CircleComment/Content/index.tsx
+++ b/src/components/CircleComment/Content/index.tsx
@@ -63,6 +63,10 @@ export const CircleCommentContent = ({
   const { content, state } = comment
   const isBlocked = comment.author?.isBlocked
 
+  // campaign discussion: collapse long comments after fewer lines (tunable),
+  // since they are capped at 240 chars and would never hit the default of 10
+  const expandLimit = type === 'campaignDiscussion' ? 4 : limit
+
   const contentClasses = classNames({
     [styles.content]: true,
     [size ? styles[`size${size}`] : '']: !!size,
@@ -96,7 +100,7 @@ export const CircleCommentContent = ({
       <>
         <Expandable
           content={content}
-          limit={limit}
+          limit={expandLimit}
           isRichShow={isRichShow}
           bgColor={bgColor}
           textIndent={textIndent}
diff --git a/src/components/CircleComment/DropdownActions/index.tsx b/src/components/CircleComment/DropdownActions/index.tsx
index 8976a7ccba..055bd15172 100644
--- a/src/components/CircleComment/DropdownActions/index.tsx
+++ b/src/components/CircleComment/DropdownActions/index.tsx
@@ -90,6 +90,9 @@ const fragments = {
               id
             }
           }
+          ... on WritingChallenge {
+            id
+          }
         }
         ...CircleCommentPinButtonComment
       }
@@ -111,6 +114,9 @@ const fragments = {
               isBlocking
             }
           }
+          ... on WritingChallenge {
+            id
+          }
         }
       }
       ${BlockUser.fragments.user.private}
@@ -185,6 +191,8 @@ const DropdownActions = (props: DropdownActionsProps) => {
   const { isArchived, isBanned, isFrozen } = viewer
 
   const circle = comment.node.__typename === 'Circle' ? comment.node : undefined
+  const campaign =
+    comment.node.__typename === 'WritingChallenge' ? comment.node : undefined
   const targetAuthor = circle?.owner
 
   const isTargetAuthor = viewer.id === targetAuthor?.id
@@ -222,7 +230,8 @@ const DropdownActions = (props: DropdownActionsProps) => {
     BaseDropdownActions as React.ComponentType<object>,
     CircleCommentFormDialog,
     {
-      circleId: circle?.id || '',
+      circleId: circle?.id,
+      campaignId: campaign?.id,
       type,
       commentId: comment.id,
       defaultContent: comment.content,
diff --git a/src/components/CircleComment/FooterActions/ReplyButton/index.tsx b/src/components/CircleComment/FooterActions/ReplyButton/index.tsx
index 178176b3d6..605c5f0ac9 100644
--- a/src/components/CircleComment/FooterActions/ReplyButton/index.tsx
+++ b/src/components/CircleComment/FooterActions/ReplyButton/index.tsx
@@ -44,6 +44,9 @@ const fragments = {
             id
           }
         }
+        ... on WritingChallenge {
+          id
+        }
       }
       parentComment {
         id
@@ -86,6 +89,7 @@ const ReplyButton = ({
 
   const { id, parentComment, author, node } = comment
   const circle = node.__typename === 'Circle' ? node : undefined
+  const campaign = node.__typename === 'WritingChallenge' ? node : undefined
 
   const submitCallback = () => {
     if (replySubmitCallback) {
@@ -126,7 +130,8 @@ const ReplyButton = ({
 
   return (
     <CircleCommentFormDialog
-      circleId={circle?.id || ''}
+      circleId={circle?.id}
+      campaignId={campaign?.id}
       type={type}
       replyToId={id}
       parentId={parentComment?.id || id}
diff --git a/src/components/Dialogs/CircleCommentFormDialog/CommentForm/index.tsx b/src/components/Dialogs/CircleCommentFormDialog/CommentForm/index.tsx
index 4150b0f892..01455d5b3c 100644
--- a/src/components/Dialogs/CircleCommentFormDialog/CommentForm/index.tsx
+++ b/src/components/Dialogs/CircleCommentFormDialog/CommentForm/index.tsx
@@ -2,7 +2,7 @@ import dynamic from 'next/dynamic'
 import { useContext, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 
-import { COMMENT_TYPE_TEXT } from '~/common/enums'
+import { COMMENT_TYPE_TEXT, MAX_CAMPAIGN_COMMENT_LENGTH } from '~/common/enums'
 import { dom, formStorage, stripHtml } from '~/common/utils'
 import {
   CircleCommentFormType,
@@ -28,7 +28,9 @@ export interface CircleCommentFormProps {
   commentId?: string
   replyToId?: string
   parentId?: string
-  circleId: string
+  // exactly one of circleId / campaignId is set, depending on `type`
+  circleId?: string
+  campaignId?: string
   type: CircleCommentFormType
 
   defaultContent?: string | null
@@ -43,6 +45,7 @@ const CommentForm: React.FC<CircleCommentFormProps> = ({
   replyToId,
   parentId,
   circleId,
+  campaignId,
   type,
 
   defaultContent,
@@ -65,7 +68,7 @@ const CommentForm: React.FC<CircleCommentFormProps> = ({
 
   const formStorageKey = formStorage.genCircleCommentKey({
     authorId: viewer.id,
-    circleId,
+    circleId: circleId ?? campaignId ?? '',
     type,
     commentId,
     parentId,
@@ -77,7 +80,12 @@ const CommentForm: React.FC<CircleCommentFormProps> = ({
       defaultContent ||
       ''
   )
-  const isValid = stripHtml(content).length > 0
+  // campaign discussion comments are capped at 240 chars (like 短動態)
+  const maxLength =
+    type === 'campaignDiscussion' ? MAX_CAMPAIGN_COMMENT_LENGTH : undefined
+  const contentLength = stripHtml(content).length
+  const isOverLength = maxLength !== undefined && contentLength > maxLength
+  const isValid = contentLength > 0 && !isOverLength
 
   const handleSubmit = async (event?: React.FormEvent<HTMLFormElement>) => {
     const mentions = dom.getAttributes('data-id', content)
@@ -88,6 +96,7 @@ const CommentForm: React.FC<CircleCommentFormProps> = ({
         content,
         replyTo: replyToId,
         circleId,
+        campaignId,
         parentId,
         type,
         mentions,
@@ -181,6 +190,14 @@ const CommentForm: React.FC<CircleCommentFormProps> = ({
               window.dispatchEvent(new CustomEvent(formStorageKey))
             }
           />
+          {maxLength !== undefined && (
+            <p
+              className={styles.counter}
+              data-over={isOverLength ? 'true' : undefined}
+            >
+              {contentLength} / {maxLength}
+            </p>
+          )}
         </form>
       </Dialog.Content>
 
diff --git a/src/components/Dialogs/CircleCommentFormDialog/CommentForm/styles.module.css b/src/components/Dialogs/CircleCommentFormDialog/CommentForm/styles.module.css
index 2e64c69459..a8a31b19bc 100644
--- a/src/components/Dialogs/CircleCommentFormDialog/CommentForm/styles.module.css
+++ b/src/components/Dialogs/CircleCommentFormDialog/CommentForm/styles.module.css
@@ -11,3 +11,14 @@
   flex-grow: 1;
   overflow-y: auto;
 }
+
+.counter {
+  margin-top: var(--sp8);
+  font-size: var(--text12);
+  color: var(--color-grey);
+  text-align: right;
+}
+
+.counter[data-over='true'] {
+  color: var(--color-red);
+}
diff --git a/src/components/Forms/CircleCommentForm/index.tsx b/src/components/Forms/CircleCommentForm/index.tsx
index 769b42eb03..b3b7b35781 100644
--- a/src/components/Forms/CircleCommentForm/index.tsx
+++ b/src/components/Forms/CircleCommentForm/index.tsx
@@ -3,6 +3,7 @@ import dynamic from 'next/dynamic'
 import { useContext, useState } from 'react'
 import { useIntl } from 'react-intl'
 
+import { MAX_CAMPAIGN_COMMENT_LENGTH } from '~/common/enums'
 import { dom, formStorage, stripHtml } from '~/common/utils'
 import {
   Button,
@@ -24,13 +25,18 @@ const CommentEditor = dynamic(() => import('~/components/Editor/Comment'), {
   loading: () => <SpinnerBlock />,
 })
 
-export type CircleCommentFormType = 'circleDiscussion' | 'circleBroadcast'
+export type CircleCommentFormType =
+  | 'circleDiscussion'
+  | 'circleBroadcast'
+  | 'campaignDiscussion'
 
 export interface CircleCommentFormProps {
   commentId?: string
   replyToId?: string
   parentId?: string
-  circleId: string
+  // exactly one of circleId / campaignId is set, depending on `type`
+  circleId?: string
+  campaignId?: string
   type: CircleCommentFormType
 
   defaultContent?: string | null
@@ -44,6 +50,7 @@ export const CircleCommentForm: React.FC<CircleCommentFormProps> = ({
   replyToId,
   parentId,
   circleId,
+  campaignId,
   type,
 
   defaultContent,
@@ -64,7 +71,7 @@ export const CircleCommentForm: React.FC<CircleCommentFormProps> = ({
 
   const formStorageKey = formStorage.genCircleCommentKey({
     authorId: viewer.id,
-    circleId,
+    circleId: circleId ?? campaignId ?? '',
     type,
     commentId,
     parentId,
@@ -77,7 +84,13 @@ export const CircleCommentForm: React.FC<CircleCommentFormProps> = ({
       defaultContent ||
       ''
   )
-  const isValid = stripHtml(content).length > 0
+  // campaign discussion comments are capped at 240 chars (like 短動態)
+  const maxLength =
+    type === 'campaignDiscussion' ? MAX_CAMPAIGN_COMMENT_LENGTH : undefined
+  const contentLength = stripHtml(content).length
+  const isOverLength =
+    maxLength !== undefined && contentLength > maxLength
+  const isValid = contentLength > 0 && !isOverLength
 
   const handleSubmit = async (event?: React.FormEvent<HTMLFormElement>) => {
     const mentions = dom.getAttributes('data-id', content)
@@ -87,6 +100,7 @@ export const CircleCommentForm: React.FC<CircleCommentFormProps> = ({
         content,
         replyTo: replyToId,
         circleId,
+        campaignId,
         parentId,
         type,
         mentions,
@@ -161,6 +175,14 @@ export const CircleCommentForm: React.FC<CircleCommentFormProps> = ({
       </section>
 
       <footer className={styles.footer}>
+        {maxLength !== undefined && (
+          <span
+            className={styles.counter}
+            data-over={isOverLength ? 'true' : undefined}
+          >
+            {contentLength} / {maxLength}
+          </span>
+        )}
         <Button
           type="submit"
           form={formStorageKey}
diff --git a/src/components/Forms/CircleCommentForm/styles.module.css b/src/components/Forms/CircleCommentForm/styles.module.css
index cf6ac8e2ad..afb52f5c81 100644
--- a/src/components/Forms/CircleCommentForm/styles.module.css
+++ b/src/components/Forms/CircleCommentForm/styles.module.css
@@ -10,5 +10,17 @@
 }
 
 .footer {
-  text-align: right;
+  display: flex;
+  gap: var(--sp8);
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.counter {
+  font-size: var(--text12);
+  color: var(--color-grey);
+}
+
+.counter[data-over='true'] {
+  color: var(--color-red);
 }
diff --git a/src/components/GQL/mutations/putQuote.ts b/src/components/GQL/mutations/putQuote.ts
new file mode 100644
index 0000000000..58beb9f64c
--- /dev/null
+++ b/src/components/GQL/mutations/putQuote.ts
@@ -0,0 +1,16 @@
+import gql from 'graphql-tag'
+
+export const PUT_QUOTE = gql`
+  mutation PutQuote($input: PutQuoteInput!) {
+    putQuote(input: $input) {
+      id
+      content
+    }
+  }
+`
+
+export const DELETE_QUOTE = gql`
+  mutation DeleteQuote($input: DeleteQuoteInput!) {
+    deleteQuote(input: $input)
+  }
+`
diff --git a/src/components/QuoteImageDialog/Card.tsx b/src/components/QuoteImageDialog/Card.tsx
new file mode 100644
index 0000000000..1a8a933e61
--- /dev/null
+++ b/src/components/QuoteImageDialog/Card.tsx
@@ -0,0 +1,100 @@
+import { forwardRef } from 'react'
+
+import SevenDayBookLogoDark from '@/public/static/images/seven-day-book-logo-dark.svg'
+import SevenDayBookLogoWhite from '@/public/static/images/seven-day-book-logo-white.svg'
+
+import {
+  clampQuote,
+  fitFontSize,
+  type QuoteSize,
+  type QuoteStyle,
+} from './presets'
+import styles from './styles.module.css'
+
+const FONT_SERIF = "'Noto Serif TC','Songti TC','Songti SC','NSimSun',serif"
+const FONT_SANS =
+  "'PingFang TC','PingFang SC','Microsoft JhengHei','Noto Sans TC',sans-serif"
+
+export type QuoteCardProps = {
+  quote: string
+  author: string
+  title: string
+  /** QR Code 的 data URL（由 Content 以 qrcode 產生） */
+  qrDataUrl: string
+  style: QuoteStyle
+  size: QuoteSize
+  isSevenDayBook: boolean
+}
+
+/**
+ * 金句卡片本體。固定以 1080px 寬度渲染（size.w/size.h），
+ * 由 Content 以 CSS transform 縮放預覽、以 html-to-image 原尺寸截圖。
+ */
+export const QuoteCard = forwardRef<HTMLDivElement, QuoteCardProps>(
+  ({ quote, author, title, qrDataUrl, style: s, size, isSevenDayBook }, ref) => {
+    const { text } = clampQuote(quote)
+    const fontFamily = s.font === 'serif' ? FONT_SERIF : FONT_SANS
+    const letterSpacing = s.wide ? '0.06em' : s.font === 'serif' ? '0.02em' : 'normal'
+    const lineHeight = s.airy ? 1.8 : 1.65
+    const fontSize = fitFontSize(text.length, s.airy)
+
+    const Logo = s.logo === 'white' ? SevenDayBookLogoWhite : SevenDayBookLogoDark
+
+    return (
+      <div
+        ref={ref}
+        className={styles.card}
+        style={{ width: size.w, height: size.h, background: s.bg, fontFamily }}
+      >
+        <div className={styles.inner}>
+          <div className={styles.mark} style={{ color: s.accent }}>
+            “
+          </div>
+          <div
+            className={styles.quote}
+            style={{
+              fontSize,
+              lineHeight,
+              color: s.quoteColor,
+              fontWeight: s.weight || 400,
+              letterSpacing,
+            }}
+          >
+            {text}
+          </div>
+          <div
+            className={styles.author}
+            style={{ color: s.accent }}
+          >
+            <span className={styles.dash}>—</span>
+            {author}
+          </div>
+        </div>
+
+        <div className={styles.foot}>
+          <div>
+            <div className={styles.title} style={{ color: s.sub }}>
+              <span className={styles.label}>原文</span>
+              {title}
+            </div>
+            {isSevenDayBook ? (
+              <div className={styles.brandLogo}>
+                <Logo />
+              </div>
+            ) : (
+              <div className={styles.brand} style={{ color: s.sub }}>
+                Matters · matters.town
+              </div>
+            )}
+          </div>
+          <div className={styles.qr} style={{ background: s.qrLight }}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={qrDataUrl} alt="QR code" />
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+
+QuoteCard.displayName = 'QuoteCard'
diff --git a/src/components/QuoteImageDialog/Content.tsx b/src/components/QuoteImageDialog/Content.tsx
new file mode 100644
index 0000000000..cc3047a533
--- /dev/null
+++ b/src/components/QuoteImageDialog/Content.tsx
@@ -0,0 +1,354 @@
+import { toJpeg } from 'html-to-image'
+import QRCode from 'qrcode'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl'
+
+import { ERROR_CODES } from '~/common/enums'
+import { analytics, isMobile } from '~/common/utils'
+import { Dialog, toast, useMutation } from '~/components'
+import { PUT_QUOTE } from '~/components/GQL/mutations/putQuote'
+import { PutQuoteMutation } from '~/gql/graphql'
+
+import { QuoteCard } from './Card'
+import { clampQuote, MAX_QUOTE_LEN, QUOTE_SIZES, QUOTE_STYLES } from './presets'
+import styles from './styles.module.css'
+
+const PREVIEW_WIDTH = 320 // 預覽寬度（卡片以此等比縮放顯示）
+
+const styleNames = defineMessages({
+  warm: { defaultMessage: 'Cream', id: 'lY48xg' },
+  sky: { defaultMessage: 'Sky', id: '/uJdnC' },
+  coral: { defaultMessage: 'Coral', id: 'bGxO22' },
+  ink: { defaultMessage: 'Ink', id: 'QWkEED' },
+  pine: { defaultMessage: 'Pine', id: 'K3+ihp' },
+  mint: { defaultMessage: 'Mint', id: 'OwO+Nr' },
+  violet: { defaultMessage: 'Violet', id: '3cxMQp' },
+  slate: { defaultMessage: 'Slate', id: 'iLKG5w' },
+})
+const sizeNames = defineMessages({
+  square: { defaultMessage: 'Square 1:1', id: 'iII6Ry' },
+  portrait: { defaultMessage: 'Portrait 4:5', id: 'em7860' },
+  story: { defaultMessage: 'Story 9:16', id: 'CZciVV' },
+})
+const sizeNotes = defineMessages({
+  square: { defaultMessage: 'IG / FB post', id: 'A6dqhl' },
+  portrait: { defaultMessage: 'IG post · most eye-catching', id: 'Oawtbo' },
+  story: { defaultMessage: 'IG / FB story · Threads', id: '6RAJ7U' },
+})
+
+export type QuoteImageDialogContentProps = {
+  quote: string
+  author: string
+  title: string
+  /** 文章連結，用於產生 QR Code */
+  shareLink: string
+  isSevenDayBook: boolean
+  /** 文章 id；與 canPostToWall 一起提供時顯示「上牆」按鈕 */
+  articleId?: string
+  /** 文章屬於活動（campaign）才可上牆；伺服器端會再驗證 */
+  canPostToWall?: boolean
+}
+
+const QuoteImageDialogContent: React.FC<QuoteImageDialogContentProps> = ({
+  quote,
+  author,
+  title,
+  shareLink,
+  isSevenDayBook,
+  articleId,
+  canPostToWall,
+}) => {
+  const intl = useIntl()
+  const cardRef = useRef<HTMLDivElement>(null)
+
+  const [styleId, setStyleId] = useState('pine')
+  const [sizeId, setSizeId] = useState('portrait')
+  const [qrDataUrl, setQrDataUrl] = useState('')
+  const [putQuote] = useMutation<PutQuoteMutation>(PUT_QUOTE)
+  const [isPosting, setPosting] = useState(false)
+  const [posted, setPosted] = useState(false)
+
+  const style = QUOTE_STYLES.find((s) => s.id === styleId) || QUOTE_STYLES[0]
+  const size = QUOTE_SIZES.find((s) => s.id === sizeId) || QUOTE_SIZES[1]
+  const { truncated, original } = useMemo(() => clampQuote(quote), [quote])
+
+  // 依風格 / 連結重新產生 QR Code（顏色跟著風格走）
+  useEffect(() => {
+    let active = true
+    QRCode.toDataURL(shareLink || ' ', {
+      margin: 0,
+      width: 300,
+      color: { dark: style.qrDark, light: style.qrLight },
+    })
+      .then((url) => active && setQrDataUrl(url))
+      .catch(() => active && setQrDataUrl(''))
+    return () => {
+      active = false
+    }
+  }, [shareLink, style.qrDark, style.qrLight])
+
+  const previewScale = PREVIEW_WIDTH / size.w
+
+  const generate = async () => {
+    if (!cardRef.current) return null
+    return toJpeg(cardRef.current, {
+      quality: 0.95,
+      pixelRatio: 2,
+      width: size.w,
+      height: size.h,
+      style: { transform: 'none' },
+    })
+  }
+
+  const onDownload = async () => {
+    const url = await generate()
+    if (!url) return
+    analytics.trackEvent('click_button', {
+      type: 'quote_image_download',
+      pageType: 'article_detail',
+    })
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `matters-quote-${style.id}-${size.id}.jpg`
+    a.click()
+  }
+
+  const onPostToWall = async () => {
+    if (!articleId || isPosting || posted) return
+    setPosting(true)
+    analytics.trackEvent('click_button', {
+      type: 'quote_post_to_wall',
+      pageType: 'article_detail',
+    })
+
+    // wall stores plain text (no trailing ellipsis — the server verifies the
+    // quote is an excerpt of the article)
+    const wallText = (quote || '')
+      .trim()
+      .replace(/\s+/g, ' ')
+      .slice(0, MAX_QUOTE_LEN)
+
+    try {
+      await putQuote({
+        variables: { input: { articleId, content: wallText } },
+      })
+      setPosted(true)
+      toast.info({
+        message: (
+          <FormattedMessage
+            defaultMessage="Posted to the quote wall"
+            id="IWLb33"
+          />
+        ),
+      })
+    } catch (error) {
+      const code = (
+        error as { graphQLErrors?: { extensions?: { code?: string } }[] }
+      )?.graphQLErrors?.[0]?.extensions?.code
+      toast.error({
+        message:
+          code === ERROR_CODES.ACTION_LIMIT_EXCEEDED ? (
+            <FormattedMessage
+              defaultMessage="Wall quota reached for today — come back tomorrow!"
+              id="D8FJf9"
+            />
+          ) : (
+            <FormattedMessage
+              defaultMessage="Failed to post to the wall"
+              id="5IlTNw"
+            />
+          ),
+      })
+    } finally {
+      setPosting(false)
+    }
+  }
+
+  const onShare = async () => {
+    const url = await generate()
+    if (!url) return
+    analytics.trackEvent('click_button', {
+      type: 'quote_image_share',
+      pageType: 'article_detail',
+    })
+    try {
+      const blob = await (await fetch(url)).blob()
+      const file = new File([blob], 'matters-quote.jpg', { type: 'image/jpeg' })
+      if (isMobile() && navigator.canShare?.({ files: [file] })) {
+        await navigator.share({ files: [file] })
+        return
+      }
+    } catch {
+      // fall through to download
+    }
+    await onDownload()
+  }
+
+  return (
+    <>
+      <Dialog.Header
+        title={<FormattedMessage defaultMessage="Share Quote" id="1DQn89" />}
+      />
+
+      <Dialog.Content>
+        <section className={styles.preview}>
+          <div
+            className={styles.stage}
+            style={{
+              width: size.w * previewScale,
+              height: size.h * previewScale,
+              transform: `scale(${previewScale})`,
+            }}
+          >
+            <QuoteCard
+              ref={cardRef}
+              quote={quote}
+              author={author}
+              title={title}
+              qrDataUrl={qrDataUrl}
+              style={style}
+              size={size}
+              isSevenDayBook={isSevenDayBook}
+            />
+          </div>
+        </section>
+
+        {truncated && (
+          <p className={styles.truncHint}>
+            <FormattedMessage
+              defaultMessage="You selected {original} characters; only the first {max} are shown. A concise quote works best."
+              id="e4AtHq"
+              values={{ original, max: MAX_QUOTE_LEN }}
+            />
+          </p>
+        )}
+
+        <section className={styles.group}>
+          <span className={styles.groupLabel}>
+            <FormattedMessage defaultMessage="Style" id="7mL9QE" />
+          </span>
+          <div className={styles.opts}>
+            {QUOTE_STYLES.map((s) => (
+              <button
+                key={s.id}
+                type="button"
+                className={`${styles.opt} ${s.id === styleId ? styles.active : ''}`}
+                onClick={() => setStyleId(s.id)}
+              >
+                <span
+                  className={styles.swatch}
+                  style={{ background: s.swatch }}
+                />
+                {intl.formatMessage(
+                  styleNames[s.id as keyof typeof styleNames]
+                )}
+              </button>
+            ))}
+          </div>
+        </section>
+
+        <section className={styles.group}>
+          <span className={styles.groupLabel}>
+            <FormattedMessage defaultMessage="Size" id="agOXPD" />
+          </span>
+          <div className={styles.opts}>
+            {QUOTE_SIZES.map((s) => (
+              <button
+                key={s.id}
+                type="button"
+                className={`${styles.opt} ${s.id === sizeId ? styles.active : ''}`}
+                onClick={() => setSizeId(s.id)}
+              >
+                <span className={styles.sizeName}>
+                  {intl.formatMessage(
+                    sizeNames[s.id as keyof typeof sizeNames]
+                  )}
+                  <span className={styles.sizeNote}>
+                    {intl.formatMessage(
+                      sizeNotes[s.id as keyof typeof sizeNotes]
+                    )}
+                  </span>
+                </span>
+              </button>
+            ))}
+          </div>
+        </section>
+      </Dialog.Content>
+
+      <Dialog.Footer
+        btns={
+          <>
+            {articleId && canPostToWall && (
+              <Dialog.RoundedButton
+                text={
+                  posted ? (
+                    <FormattedMessage
+                      defaultMessage="On the wall ✓"
+                      id="Cmc/He"
+                    />
+                  ) : (
+                    <FormattedMessage
+                      defaultMessage="Post to wall"
+                      id="oCQmLu"
+                    />
+                  )
+                }
+                color="green"
+                loading={isPosting}
+                disabled={isPosting || posted}
+                onClick={onPostToWall}
+              />
+            )}
+            <Dialog.RoundedButton
+              text={<FormattedMessage defaultMessage="Download" id="5q3qC0" />}
+              color="green"
+              onClick={onDownload}
+            />
+            <Dialog.RoundedButton
+              text={<FormattedMessage defaultMessage="Share" id="OKhRC6" />}
+              color="greyDarker"
+              onClick={onShare}
+            />
+          </>
+        }
+        smUpBtns={
+          <>
+            {articleId && canPostToWall && (
+              <Dialog.TextButton
+                text={
+                  posted ? (
+                    <FormattedMessage
+                      defaultMessage="On the wall ✓"
+                      id="Cmc/He"
+                    />
+                  ) : (
+                    <FormattedMessage
+                      defaultMessage="Post to wall"
+                      id="oCQmLu"
+                    />
+                  )
+                }
+                color="green"
+                loading={isPosting}
+                disabled={isPosting || posted}
+                onClick={onPostToWall}
+              />
+            )}
+            <Dialog.TextButton
+              text={<FormattedMessage defaultMessage="Download" id="5q3qC0" />}
+              color="green"
+              onClick={onDownload}
+            />
+            <Dialog.TextButton
+              text={<FormattedMessage defaultMessage="Share" id="OKhRC6" />}
+              color="greyDarker"
+              onClick={onShare}
+            />
+          </>
+        }
+      />
+    </>
+  )
+}
+
+export default QuoteImageDialogContent
diff --git a/src/components/QuoteImageDialog/gql.ts b/src/components/QuoteImageDialog/gql.ts
new file mode 100644
index 0000000000..b3d525cb31
--- /dev/null
+++ b/src/components/QuoteImageDialog/gql.ts
@@ -0,0 +1,54 @@
+import gql from 'graphql-tag'
+
+import { QuoteImageArticleFragment } from '~/gql/graphql'
+
+/**
+ * 金句卡片需要的文章欄位。
+ * campaigns 用來判斷文章是否屬於「七日書」活動（WritingChallenge）。
+ */
+export const fragments = {
+  article: gql`
+    fragment QuoteImageArticle on Article {
+      id
+      title
+      shortHash
+      # 版權 gate：「作者保留所有權利」(ARR) 時僅作者本人可生成金句卡片
+      license
+      author {
+        id
+        displayName
+        userName
+      }
+      campaigns {
+        campaign {
+          id
+          shortHash
+          ... on WritingChallenge {
+            id
+            nameZhHant: name(input: { language: zh_hant })
+            nameZhHans: name(input: { language: zh_hans })
+            nameEn: name(input: { language: en })
+          }
+        }
+      }
+    }
+  `,
+}
+
+/**
+ * 判斷文章是否屬於「七日書」活動。
+ *
+ * 目前以活動名稱包含「七日書」為準（涵蓋歷屆七日書）。
+ * TODO: 若需更精確，可改為比對一份設定好的七日書 campaign shortHash 清單
+ *       （例如放在 src/common/enums 或環境變數），避免名稱被更動時誤判。
+ */
+export const isSevenDayBookArticle = (
+  article?: QuoteImageArticleFragment | null
+): boolean => {
+  if (!article?.campaigns?.length) return false
+  return article.campaigns.some(({ campaign }) => {
+    if (campaign?.__typename !== 'WritingChallenge') return false
+    const names = [campaign.nameZhHant, campaign.nameZhHans]
+    return names.some((n) => !!n && n.includes('七日書'))
+  })
+}
diff --git a/src/components/QuoteImageDialog/index.tsx b/src/components/QuoteImageDialog/index.tsx
new file mode 100644
index 0000000000..b7e2c4971d
--- /dev/null
+++ b/src/components/QuoteImageDialog/index.tsx
@@ -0,0 +1,38 @@
+import dynamic from 'next/dynamic'
+
+import { Dialog, SpinnerBlock, useDialogSwitch } from '~/components'
+
+import { type QuoteImageDialogContentProps } from './Content'
+
+export type QuoteImageDialogProps = {
+  children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode
+} & QuoteImageDialogContentProps
+
+const DynamicContent = dynamic(() => import('./Content'), {
+  ssr: false,
+  loading: () => <SpinnerBlock />,
+})
+
+const BaseDialog = ({ children, ...props }: QuoteImageDialogProps) => {
+  const { show, openDialog, closeDialog } = useDialogSwitch(true)
+
+  return (
+    <>
+      {children({ openDialog })}
+
+      <Dialog isOpen={show} onDismiss={closeDialog}>
+        <DynamicContent {...props} />
+      </Dialog>
+    </>
+  )
+}
+
+export const QuoteImageDialog = (props: QuoteImageDialogProps) => {
+  return (
+    <Dialog.Lazy mounted={<BaseDialog {...props} />}>
+      {({ openDialog }) => <>{props.children({ openDialog })}</>}
+    </Dialog.Lazy>
+  )
+}
+
+export { fragments, isSevenDayBookArticle } from './gql'
diff --git a/src/components/QuoteImageDialog/presets.ts b/src/components/QuoteImageDialog/presets.ts
new file mode 100644
index 0000000000..d41334f4fd
--- /dev/null
+++ b/src/components/QuoteImageDialog/presets.ts
@@ -0,0 +1,66 @@
+/**
+ * 金句卡片的風格與尺寸設定。
+ * 顏色取自 thematters/design-system token；命名採中性色調。
+ */
+
+export type QuoteStyle = {
+  id: string
+  name: string // i18n key 後綴，對應 lang 檔的 styleXxx
+  swatch: string // 風格選擇器上的色塊
+  bg: string
+  quoteColor: string
+  accent: string
+  sub: string
+  font: 'serif' | 'sans'
+  weight?: number
+  airy?: boolean
+  wide?: boolean
+  /** 七日書 logo 版本：深底用 white，淺底用 dark */
+  logo?: 'dark' | 'white'
+  qrDark: string
+  qrLight: string
+}
+
+export type QuoteSize = {
+  id: string
+  name: string // i18n key 後綴
+  w: number
+  h: number
+}
+
+export const QUOTE_STYLES: QuoteStyle[] = [
+  { id: 'warm',    name: 'Cream',   swatch: '#c0a46b', bg: '#faf7f0', quoteColor: '#333333', accent: '#c0a46b', sub: '#c58463', font: 'serif', logo: 'dark',  qrDark: '#c0a46b', qrLight: '#faf7f0' },
+  { id: 'sky',     name: 'Sky',     swatch: '#85d8ff', bg: '#F0F9FE', quoteColor: '#045898', accent: '#1999D0', sub: '#1999D0', font: 'sans', weight: 300, airy: true, logo: 'dark', qrDark: '#1999D0', qrLight: '#F0F9FE' },
+  { id: 'coral',   name: 'Coral',   swatch: '#dc7871', bg: '#ffe8e8', quoteColor: '#333333', accent: '#dc7871', sub: '#d577aa', font: 'sans', weight: 600, logo: 'dark', qrDark: '#dc7871', qrLight: '#ffe8e8' },
+  { id: 'ink',     name: 'Ink',     swatch: '#000000', bg: '#000000', quoteColor: '#ffffff', accent: '#c0a46b', sub: '#c0a46b', font: 'serif', wide: true, logo: 'white', qrDark: '#c0a46b', qrLight: '#000000' },
+  { id: 'pine',    name: 'Pine',    swatch: '#0d6763', bg: '#0d6763', quoteColor: '#faf7f0', accent: '#40bfa5', sub: '#a9d9cf', font: 'serif', logo: 'white', qrDark: '#faf7f0', qrLight: '#0d6763' },
+  { id: 'mint',    name: 'Mint',    swatch: '#70b388', bg: 'linear-gradient(160deg,#f2faf7 0%,#f2fbd9 100%)', quoteColor: '#246802', accent: '#70b388', sub: '#70b388', font: 'serif', logo: 'dark', qrDark: '#246802', qrLight: '#f7fbef' },
+  { id: 'violet',  name: 'Violet',  swatch: '#5b5080', bg: '#514775', quoteColor: '#f4f1fb', accent: '#c3b6e8', sub: '#d6cdee', font: 'sans', weight: 500, logo: 'white', qrDark: '#f4f1fb', qrLight: '#514775' },
+  { id: 'slate',   name: 'Slate',   swatch: '#c9cace', bg: '#e7e8ec', quoteColor: '#2b2b2e', accent: '#7f7f88', sub: '#6f6f78', font: 'sans', weight: 400, logo: 'dark', qrDark: '#333333', qrLight: '#e7e8ec' },
+]
+
+export const QUOTE_SIZES: QuoteSize[] = [
+  { id: 'square',   name: 'Square',   w: 1080, h: 1080 },
+  { id: 'portrait', name: 'Portrait', w: 1080, h: 1350 },
+  { id: 'story',    name: 'Story',    w: 1080, h: 1920 },
+]
+
+/** 金句字數上限（超過自動截斷，金句以精煉為佳） */
+export const MAX_QUOTE_LEN = 80
+
+/** 依字數自動縮放字級，確保長句也塞得進安全區、不壓到頁尾 */
+export const fitFontSize = (len: number, airy?: boolean): number => {
+  if (len <= 16) return airy ? 72 : 78
+  if (len <= 30) return airy ? 60 : 66
+  if (len <= 48) return 56
+  if (len <= 64) return 48
+  return 42
+}
+
+export const clampQuote = (raw: string) => {
+  const text = (raw || '').trim().replace(/\s+/g, ' ')
+  if (text.length > MAX_QUOTE_LEN) {
+    return { text: text.slice(0, MAX_QUOTE_LEN) + '…', truncated: true, original: text.length }
+  }
+  return { text, truncated: false, original: text.length }
+}
diff --git a/src/components/QuoteImageDialog/styles.module.css b/src/components/QuoteImageDialog/styles.module.css
new file mode 100644
index 0000000000..57448d622f
--- /dev/null
+++ b/src/components/QuoteImageDialog/styles.module.css
@@ -0,0 +1,177 @@
+/* === 金句卡片本體（固定 1080px 設計尺寸） === */
+.card {
+  position: relative;
+  display: block;
+  overflow: hidden;
+}
+
+.inner {
+  position: absolute;
+  inset: 118px 110px 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.mark {
+  margin-bottom: 18px;
+  font-family: 'Noto Serif TC', 'Songti TC', serif;
+  font-size: 120px;
+  line-height: 0.6;
+  opacity: 0.9;
+}
+
+.quote {
+  /* font-size / color / line-height 由元件 inline 指定 */
+}
+
+.author {
+  margin-top: 44px;
+  font-size: 40px;
+  font-weight: 600;
+}
+
+.author .dash {
+  margin-right: 14px;
+  opacity: 0.7;
+}
+
+.foot {
+  position: absolute;
+  right: 110px;
+  bottom: 90px;
+  left: 110px;
+  display: flex;
+  gap: 32px;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.title {
+  display: -webkit-box;
+  max-width: 640px;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  font-family: 'PingFang TC', sans-serif;
+  font-size: 30px;
+  line-height: 1.5;
+  opacity: 0.95;
+  -webkit-box-orient: vertical;
+}
+
+.title .label {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 22px;
+  letter-spacing: 0.2em;
+  opacity: 0.6;
+}
+
+.brand {
+  margin-top: 14px;
+  font-family: 'PingFang TC', sans-serif;
+  font-size: 24px;
+  opacity: 0.7;
+}
+
+.brandLogo {
+  margin-top: 16px;
+}
+
+.brandLogo svg {
+  display: block;
+  width: auto;
+  height: 60px;
+}
+
+.qr {
+  flex: 0 0 auto;
+  width: 150px;
+  height: 150px;
+  padding: 12px;
+  border-radius: 14px;
+  box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
+}
+
+.qr img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* === 對話框內容 === */
+.preview {
+  display: flex;
+  justify-content: center;
+  padding: var(--sp24, 24px);
+  background: var(--color-grey-lighter);
+  border-radius: var(--sp12, 12px);
+}
+
+.stage {
+  transform-origin: top left;
+}
+
+.truncHint {
+  margin: var(--sp12, 12px) 0 0;
+  font-size: var(--text13, 13px);
+  color: var(--color-function-warn, #dba34f);
+}
+
+.group {
+  margin-top: var(--sp16, 16px);
+}
+
+.groupLabel {
+  display: block;
+  margin-bottom: var(--sp8, 8px);
+  font-size: var(--text13, 13px);
+  font-weight: var(--font-semibold, 600);
+  color: var(--color-grey-darker);
+}
+
+.opts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp8, 8px);
+}
+
+.opt {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding: 7px 12px;
+  font-size: var(--text14, 14px);
+  cursor: pointer;
+  background: var(--color-white);
+  border: 1.5px solid var(--color-grey-light);
+  border-radius: 9px;
+}
+
+.opt.active {
+  font-weight: var(--font-semibold, 600);
+  color: var(--color-brand-legacy-green, #0d6763);
+  background: var(--color-brand-legacy-green-lighter, #f2faf7);
+  border-color: var(--color-brand-legacy-green, #0d6763);
+}
+
+.swatch {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 1px solid rgb(0 0 0 / 10%);
+  border-radius: 4px;
+}
+
+.sizeName {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.sizeNote {
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--color-grey-dark);
+}
diff --git a/src/components/TextSelectionPopover/index.tsx b/src/components/TextSelectionPopover/index.tsx
index 6fa256a5c7..ee11071d13 100644
--- a/src/components/TextSelectionPopover/index.tsx
+++ b/src/components/TextSelectionPopover/index.tsx
@@ -1,16 +1,30 @@
 import classNames from 'classnames'
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
+import { FormattedMessage } from 'react-intl'
 
 import IconComment from '@/public/static/icons/24px/comment.svg'
+import IconImage from '@/public/static/icons/24px/image.svg'
 import { OPEN_COMMENT_LIST_DRAWER } from '~/common/enums'
 import { isElementInViewport } from '~/common/utils'
 import { analytics } from '~/common/utils'
-import { Icon, useCommentEditorContext } from '~/components'
+import {
+  Icon,
+  isSevenDayBookArticle,
+  QuoteImageDialog,
+  useCommentEditorContext,
+  ViewerContext,
+} from '~/components'
+import { ArticleLicenseType, QuoteImageArticleFragment } from '~/gql/graphql'
 
 import styles from './styles.module.css'
 
 interface TextSelectionPopoverProps {
   targetElement: HTMLElement
+  article?: QuoteImageArticleFragment | null
+  // 'popover': floating bubble above the selection (desktop).
+  // 'bottomBar': fixed action bar at the bottom of the screen (mobile) — a
+  // floating bubble would fight with the iOS/Android native selection menu.
+  variant?: 'popover' | 'bottomBar'
 }
 
 const isSelectionCrossingParagraphs = (selection: Selection): boolean => {
@@ -53,12 +67,22 @@ const isValidSelection = (
 
 export const TextSelectionPopover = ({
   targetElement,
+  article,
+  variant = 'popover',
 }: TextSelectionPopoverProps) => {
   const [selection, setSelection] = useState<string>()
+  const [selectionText, setSelectionText] = useState<string>('')
   const [position, setPosition] = useState<Record<string, number>>() // { x, y }
   const ref = useRef<HTMLDivElement>(null)
   const { fallbackEditor, getCurrentEditor } = useCommentEditorContext()
   const [quote, setQuote] = useState<string | null>(null)
+  const viewer = useContext(ViewerContext)
+  const isBottomBar = variant === 'bottomBar'
+
+  // 版權 gate：「作者保留所有權利」(ARR) 時僅作者本人可生成金句卡片；
+  // CC 系列授權允許（卡片本身已忠實引用＋標註作者＋帶原文連結）
+  const isAuthor = !!viewer.id && viewer.id === article?.author?.id
+  const canQuoteImage = isAuthor || article?.license !== ArticleLicenseType.Arr
 
   useEffect(() => {
     const editor = getCurrentEditor?.()
@@ -118,6 +142,14 @@ export const TextSelectionPopover = ({
       setSelection(activeSelection?.toString() || '')
     }
 
+    // 金句卡片用純文字
+    setSelectionText(activeSelection?.toString() || '')
+
+    // fixed bottom bar needs no positioning
+    if (isBottomBar) {
+      return
+    }
+
     const rect = (activeSelection as Selection)
       .getRangeAt(0)
       .getBoundingClientRect()
@@ -133,6 +165,26 @@ export const TextSelectionPopover = ({
   }
 
   useEffect(() => {
+    // mobile: selection is made by long-press and adjusted by dragging
+    // handles; there is no reliable "selection ended" event, so debounce
+    // selectionchange instead of listening to mouseup
+    if (isBottomBar) {
+      let timer: ReturnType<typeof setTimeout>
+      const onDebouncedSelectionChange = () => {
+        clearTimeout(timer)
+        timer = setTimeout(onSelectEnd, 350)
+      }
+
+      document.addEventListener('selectionchange', onDebouncedSelectionChange)
+      return () => {
+        clearTimeout(timer)
+        document.removeEventListener(
+          'selectionchange',
+          onDebouncedSelectionChange
+        )
+      }
+    }
+
     document.addEventListener('selectstart', onSelectStart)
     document.addEventListener('mouseup', onSelectEnd)
     document.addEventListener('selectionchange', onSelectChange)
@@ -174,6 +226,76 @@ export const TextSelectionPopover = ({
     [styles.triangle]: true,
   })
 
+  const quoteImageDialog = (children: React.ReactNode, className: string) => (
+    <QuoteImageDialog
+      quote={selectionText}
+      author={article?.author?.displayName || ''}
+      title={article?.title || ''}
+      shareLink={typeof window !== 'undefined' ? window.location.href : ''}
+      isSevenDayBook={isSevenDayBookArticle(article)}
+      articleId={article?.id}
+      // 只有活動文章可上牆（伺服器會再驗證）
+      canPostToWall={!!article?.campaigns?.length}
+    >
+      {({ openDialog }) => (
+        <button
+          onClick={() => {
+            analytics.trackEvent('click_button', {
+              type: 'article_content_quote_image',
+              pageType: 'article_detail',
+            })
+            openDialog()
+          }}
+          // keep the text selection when tapping the button
+          onMouseDown={(e) => e.preventDefault()}
+          className={className}
+        >
+          {children}
+        </button>
+      )}
+    </QuoteImageDialog>
+  )
+
+  if (isBottomBar) {
+    return (
+      <div aria-haspopup="dialog" ref={ref}>
+        {selection && (
+          <div className={styles.bottomBar}>
+            <button
+              onClick={onQuote}
+              onMouseDown={(e) => e.preventDefault()}
+              className={styles.barButton}
+            >
+              <Icon icon={IconComment} size={20} />
+              <FormattedMessage
+                defaultMessage="Quote"
+                id="uDdAD+"
+                description="src/components/TextSelectionPopover/index.tsx"
+              />
+            </button>
+
+            {canQuoteImage && (
+              <>
+                <span className={styles.divider} />
+                {quoteImageDialog(
+                  <>
+                    <Icon icon={IconImage} size={20} />
+                    <FormattedMessage
+                      defaultMessage="Quote card"
+                      id="/LjM9M"
+                      description="src/components/TextSelectionPopover/index.tsx"
+                    />
+                  </>,
+                  styles.barButton
+                )}
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    )
+  }
+
   return (
     <div aria-labelledby="share" aria-haspopup="dialog" ref={ref}>
       {selection && position && (
@@ -186,10 +308,16 @@ export const TextSelectionPopover = ({
           <button onClick={onQuote} className={styles.quoteButton}>
             <Icon icon={IconComment} size={20} />
           </button>
-          {/* <span className={styles.divider} />
-          <button onClick={onShare} className={styles.shareButton}>
-            <IconX20 size={20} />
-          </button> */}
+
+          {canQuoteImage && (
+            <>
+              <span className={styles.divider} />
+              {quoteImageDialog(
+                <Icon icon={IconImage} size={20} />,
+                styles.shareButton
+              )}
+            </>
+          )}
         </div>
       )}
     </div>
diff --git a/src/components/TextSelectionPopover/styles.module.css b/src/components/TextSelectionPopover/styles.module.css
index fe75f1fc50..f2484360d0 100644
--- a/src/components/TextSelectionPopover/styles.module.css
+++ b/src/components/TextSelectionPopover/styles.module.css
@@ -60,3 +60,42 @@
     }
   }
 }
+
+/* mobile: fixed action bar at the bottom of the screen, so it never fights
+   with the iOS/Android native selection menu near the selected text */
+.bottomBar {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  align-items: stretch;
+  justify-content: space-around;
+  padding-bottom: env(safe-area-inset-bottom);
+  background: var(--color-black);
+
+  & .divider {
+    width: 1px;
+    margin: var(--sp12) 0;
+    background-color: var(--color-grey-darker);
+  }
+
+  & .barButton {
+    @mixin transition;
+
+    display: flex;
+    flex: 1;
+    gap: var(--sp8);
+    align-items: center;
+    justify-content: center;
+    padding: var(--sp12) var(--sp16);
+    font-size: var(--text14);
+    color: var(--color-white);
+    transition-property: opacity;
+
+    &:active {
+      opacity: 0.6;
+    }
+  }
+}
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 4297e37892..063ca4de65 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -76,6 +76,7 @@ export * from './Interaction'
 export * from './Layout'
 export * from './Notice'
 export * from './Protected'
+export * from './QuoteImageDialog'
 export * from './ReCaptcha'
 export * from './Search'
 export * from './TagDigest'
diff --git a/src/views/ArticleDetail/Content/index.tsx b/src/views/ArticleDetail/Content/index.tsx
index c7ad6a1000..968b948fb5 100644
--- a/src/views/ArticleDetail/Content/index.tsx
+++ b/src/views/ArticleDetail/Content/index.tsx
@@ -13,7 +13,10 @@ import {
   ViewerContext,
 } from '~/components'
 import { useReadTimer } from '~/components/Hook'
-import { ReadArticleMutation } from '~/gql/graphql'
+import {
+  QuoteImageArticleFragment,
+  ReadArticleMutation,
+} from '~/gql/graphql'
 
 import styles from './styles.module.css'
 
@@ -27,10 +30,12 @@ const READ_ARTICLE = gql`
 
 const Content = ({
   articleId,
+  article,
   content,
   indentFirstLine,
 }: {
   articleId: string
+  article?: QuoteImageArticleFragment | null
   content: string
   indentFirstLine: boolean
 }) => {
@@ -140,6 +145,18 @@ const Content = ({
         {!isInArticleDetailHistory && contentContainer.current && (
           <TextSelectionPopover
             targetElement={contentContainer.current as HTMLElement}
+            article={article}
+          />
+        )}
+      </Media>
+      {/* mobile: a floating bubble would fight with the native selection
+          menu, so render a fixed bottom action bar instead */}
+      <Media lessThan="md">
+        {!isInArticleDetailHistory && contentContainer.current && (
+          <TextSelectionPopover
+            targetElement={contentContainer.current as HTMLElement}
+            article={article}
+            variant="bottomBar"
           />
         )}
       </Media>
diff --git a/src/views/ArticleDetail/gql.ts b/src/views/ArticleDetail/gql.ts
index 278cd5e3b9..782702569e 100644
--- a/src/views/ArticleDetail/gql.ts
+++ b/src/views/ArticleDetail/gql.ts
@@ -1,5 +1,6 @@
 import gql from 'graphql-tag'
 
+import { fragments as quoteImageFragments } from '~/components/QuoteImageDialog'
 import { UserDigest } from '~/components/UserDigest'
 
 import { AuthorSidebar } from './AuthorSidebar'
@@ -77,7 +78,9 @@ const articlePublicFragment = gql`
     ...SupportWidgetArticlePrivate
     ...ChannelArticlePublic
     ...ChannelArticlePrivate
+    ...QuoteImageArticle
   }
+  ${quoteImageFragments.article}
   ${Header.fragments.article}
   ${AuthorSidebar.fragments.article}
   ${MetaInfo.fragments.article}
diff --git a/src/views/ArticleDetail/index.tsx b/src/views/ArticleDetail/index.tsx
index 49af917aca..22c07e0349 100644
--- a/src/views/ArticleDetail/index.tsx
+++ b/src/views/ArticleDetail/index.tsx
@@ -355,6 +355,7 @@ const BaseArticleDetail = ({
           <>
             <Content
               articleId={article.id}
+              article={article}
               content={content}
               indentFirstLine={article.indentFirstLine}
             />
diff --git a/src/views/CampaignDetail/Discussion/Dialog.tsx b/src/views/CampaignDetail/Discussion/Dialog.tsx
new file mode 100644
index 0000000000..b6cb7456cf
--- /dev/null
+++ b/src/views/CampaignDetail/Discussion/Dialog.tsx
@@ -0,0 +1,174 @@
+import { useContext } from 'react'
+import { FormattedMessage, useIntl } from 'react-intl'
+
+import IconTimes from '@/public/static/icons/24px/times.svg'
+import { filterComments, mergeConnections } from '~/common/utils'
+import {
+  CircleCommentForm,
+  CircleThreadComment,
+  Dialog,
+  EmptyComment,
+  Icon,
+  InfiniteScroll,
+  List,
+  SpinnerBlock,
+  toast,
+  useDialogSwitch,
+  usePublicQuery,
+  ViewerContext,
+} from '~/components'
+import { CampaignDiscussionCommentsQuery } from '~/gql/graphql'
+
+import { CAMPAIGN_DISCUSSION_COMMENTS } from './gql'
+import styles from './styles.module.css'
+
+type DiscussionConnection = NonNullable<
+  NonNullable<CampaignDiscussionCommentsQuery['campaign']>['discussion']
+>
+type Comment = NonNullable<DiscussionConnection['edges']>[0]['node']
+
+const RESPONSES_COUNT = 15
+
+interface DiscussionDialogProps {
+  campaignId: string
+  shortHash: string
+  canComment: boolean
+  totalCount: number
+  afterSubmit?: () => void
+  children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode
+}
+
+const BaseDiscussionDialog = ({
+  campaignId,
+  shortHash,
+  canComment,
+  totalCount,
+  afterSubmit,
+  children,
+}: DiscussionDialogProps) => {
+  const viewer = useContext(ViewerContext)
+  const intl = useIntl()
+  const { show, openDialog, closeDialog } = useDialogSwitch(true)
+
+  const { data, loading, fetchMore, refetch } =
+    usePublicQuery<CampaignDiscussionCommentsQuery>(
+      CAMPAIGN_DISCUSSION_COMMENTS,
+      { variables: { shortHash } },
+      { publicQuery: !viewer.isAuthed }
+    )
+
+  const campaign =
+    data?.campaign?.__typename === 'WritingChallenge'
+      ? data.campaign
+      : undefined
+  const { edges, pageInfo } = campaign?.discussion || {}
+  const comments = filterComments<Comment>(
+    (edges || []).map(({ node }) => node)
+  )
+
+  const loadMore = async () =>
+    fetchMore({
+      variables: { after: pageInfo?.endCursor, first: RESPONSES_COUNT },
+      updateQuery: (previousResult, { fetchMoreResult }) =>
+        mergeConnections({
+          oldData: previousResult,
+          newData: fetchMoreResult,
+          path: 'campaign.discussion',
+        }),
+    })
+
+  const submitCallback = () => {
+    toast.info({
+      message: <FormattedMessage defaultMessage="Comment sent" id="fyKoL1" />,
+    })
+    refetch()
+    afterSubmit?.()
+  }
+
+  return (
+    <>
+      {children({ openDialog })}
+
+      <Dialog isOpen={show} onDismiss={closeDialog}>
+        <Dialog.Header
+          title={
+            <>
+              <FormattedMessage
+                defaultMessage="Discussion"
+                id="2/u1aP"
+                description="src/views/CampaignDetail/Discussion"
+              />{' '}
+              {totalCount > 0 && (
+                <span className={styles.count}>{totalCount}</span>
+              )}
+            </>
+          }
+          titleLeft
+          rightBtn={
+            <button onClick={closeDialog}>
+              <Icon icon={IconTimes} size={24} />
+            </button>
+          }
+        />
+
+        <Dialog.Content>
+          {canComment && (
+            <CircleCommentForm
+              campaignId={campaignId}
+              type="campaignDiscussion"
+              placeholder={intl.formatMessage({
+                defaultMessage: 'Share your thoughts with other participants',
+                id: 'dHVTYM',
+                description: 'src/views/CampaignDetail/Discussion',
+              })}
+              submitCallback={submitCallback}
+            />
+          )}
+
+          {loading && <SpinnerBlock />}
+
+          {!loading && comments.length <= 0 && (
+            <EmptyComment
+              description={intl.formatMessage({
+                defaultMessage: 'No discussion yet',
+                id: '/0OJlF',
+                description: 'src/views/CampaignDetail/Discussion',
+              })}
+            />
+          )}
+
+          {!loading && comments.length > 0 && (
+            <InfiniteScroll
+              hasNextPage={!!pageInfo?.hasNextPage}
+              loadMore={loadMore}
+              eof
+            >
+              <List spacing={['xloose', 0]}>
+                {comments.map((comment) => (
+                  <List.Item key={comment.id}>
+                    <CircleThreadComment
+                      comment={comment}
+                      type="campaignDiscussion"
+                      hasLink
+                      hasUpvote={false}
+                      hasDownvote={false}
+                      hasPin={false}
+                    />
+                  </List.Item>
+                ))}
+              </List>
+            </InfiniteScroll>
+          )}
+        </Dialog.Content>
+      </Dialog>
+    </>
+  )
+}
+
+const DiscussionDialog = (props: DiscussionDialogProps) => (
+  <Dialog.Lazy mounted={<BaseDiscussionDialog {...props} />}>
+    {({ openDialog }) => <>{props.children({ openDialog })}</>}
+  </Dialog.Lazy>
+)
+
+export default DiscussionDialog
diff --git a/src/views/CampaignDetail/Discussion/gql.ts b/src/views/CampaignDetail/Discussion/gql.ts
new file mode 100644
index 0000000000..710d30f280
--- /dev/null
+++ b/src/views/CampaignDetail/Discussion/gql.ts
@@ -0,0 +1,63 @@
+import gql from 'graphql-tag'
+
+import { CircleThreadComment } from '~/components'
+
+// public: anyone can read the campaign discussion
+export const CAMPAIGN_DISCUSSION_COMMENTS = gql`
+  query CampaignDiscussionComments(
+    $shortHash: String!
+    $before: String
+    $after: String
+    $first: first_Int_min_0 = 15
+    $includeAfter: Boolean
+    $includeBefore: Boolean
+  ) {
+    campaign(input: { shortHash: $shortHash }) {
+      id
+      ... on WritingChallenge {
+        id
+        discussionCount
+        discussion(
+          input: {
+            after: $after
+            before: $before
+            first: $first
+            includeAfter: $includeAfter
+            includeBefore: $includeBefore
+          }
+        ) {
+          totalCount
+          pageInfo {
+            startCursor
+            endCursor
+            hasNextPage
+          }
+          edges {
+            node {
+              ...CircleCommentThreadCommentCommentPublic
+              ...CircleCommentThreadCommentCommentPrivate
+            }
+          }
+        }
+      }
+    }
+  }
+  ${CircleThreadComment.fragments.comment.public}
+  ${CircleThreadComment.fragments.comment.private}
+`
+
+// private: whether the viewer (a logged-in user) is a succeeded participant,
+// which decides if they may post
+export const CAMPAIGN_DISCUSSION_VIEWER = gql`
+  query CampaignDiscussionViewer($shortHash: String!) {
+    campaign(input: { shortHash: $shortHash }) {
+      id
+      ... on WritingChallenge {
+        id
+        application {
+          state
+        }
+      }
+    }
+  }
+`
diff --git a/src/views/CampaignDetail/Discussion/index.tsx b/src/views/CampaignDetail/Discussion/index.tsx
new file mode 100644
index 0000000000..d6dbc22ee8
--- /dev/null
+++ b/src/views/CampaignDetail/Discussion/index.tsx
@@ -0,0 +1,215 @@
+import { useContext, useEffect, useState } from 'react'
+import { FormattedMessage, useIntl } from 'react-intl'
+
+import { filterComments } from '~/common/utils'
+import {
+  Button,
+  CircleCommentForm,
+  CircleThreadComment,
+  TextIcon,
+  toast,
+  usePublicQuery,
+  ViewerContext,
+} from '~/components'
+import {
+  CampaignDiscussionCommentsQuery,
+  CampaignDiscussionViewerQuery,
+} from '~/gql/graphql'
+
+import DiscussionDialog from './Dialog'
+import { CAMPAIGN_DISCUSSION_COMMENTS, CAMPAIGN_DISCUSSION_VIEWER } from './gql'
+import styles from './styles.module.css'
+
+type DiscussionConnection = NonNullable<
+  NonNullable<CampaignDiscussionCommentsQuery['campaign']>['discussion']
+>
+type Comment = NonNullable<DiscussionConnection['edges']>[0]['node']
+
+// how many latest comments to preview in the compact module
+const PREVIEW_COUNT = 3
+
+interface CampaignDiscussionProps {
+  campaignId: string
+  shortHash: string
+  // 'module': compact module (desktop right aside) — input box + latest few
+  // comments + "view all". 'chip': one-line entry button (mobile main column)
+  // that opens the full discussion dialog.
+  entry?: 'module' | 'chip'
+}
+
+const CampaignDiscussion = ({
+  campaignId,
+  shortHash,
+  entry = 'module',
+}: CampaignDiscussionProps) => {
+  const viewer = useContext(ViewerContext)
+  const intl = useIntl()
+
+  const { data, refetch, client } =
+    usePublicQuery<CampaignDiscussionCommentsQuery>(
+      CAMPAIGN_DISCUSSION_COMMENTS,
+      { variables: { shortHash, first: PREVIEW_COUNT } },
+      { publicQuery: !viewer.isAuthed }
+    )
+
+  const campaign =
+    data?.campaign?.__typename === 'WritingChallenge'
+      ? data.campaign
+      : undefined
+  const totalCount = campaign?.discussion?.totalCount ?? 0
+  const comments = filterComments<Comment>(
+    (campaign?.discussion?.edges || []).map(({ node }) => node)
+  ).slice(0, PREVIEW_COUNT)
+
+  // viewer's participation decides whether they may post
+  const [canComment, setCanComment] = useState(false)
+  useEffect(() => {
+    if (!viewer.isAuthed) {
+      setCanComment(false)
+      return
+    }
+    ;(async () => {
+      try {
+        const { data: viewerData } =
+          await client.query<CampaignDiscussionViewerQuery>({
+            query: CAMPAIGN_DISCUSSION_VIEWER,
+            fetchPolicy: 'network-only',
+            variables: { shortHash },
+          })
+        const c =
+          viewerData?.campaign?.__typename === 'WritingChallenge'
+            ? viewerData.campaign
+            : undefined
+        setCanComment(c?.application?.state === 'succeeded')
+      } catch {
+        setCanComment(false)
+      }
+    })()
+  }, [viewer.id])
+
+  const submitCallback = () => {
+    toast.info({
+      message: <FormattedMessage defaultMessage="Comment sent" id="fyKoL1" />,
+    })
+    refetch()
+  }
+
+  // mobile: one-line entry that opens the full discussion dialog
+  if (entry === 'chip') {
+    return (
+      <DiscussionDialog
+        campaignId={campaignId}
+        shortHash={shortHash}
+        canComment={canComment}
+        totalCount={totalCount}
+        afterSubmit={refetch}
+      >
+        {({ openDialog }) => (
+          <button
+            type="button"
+            className={styles.chip}
+            onClick={openDialog}
+            aria-haspopup="dialog"
+          >
+            <span>
+              💬{' '}
+              <FormattedMessage
+                defaultMessage="Discussion"
+                id="2/u1aP"
+                description="src/views/CampaignDetail/Discussion"
+              />
+              {totalCount > 0 && (
+                <span className={styles.count}>{totalCount}</span>
+              )}
+            </span>
+            <span className={styles.chevron}>›</span>
+          </button>
+        )}
+      </DiscussionDialog>
+    )
+  }
+
+  return (
+    <section className={styles.discussion}>
+      <header className={styles.header}>
+        <h2 className={styles.title}>
+          <FormattedMessage
+            defaultMessage="Discussion"
+            id="2/u1aP"
+            description="src/views/CampaignDetail/Discussion"
+          />
+          {totalCount > 0 && <span className={styles.count}>{totalCount}</span>}
+        </h2>
+      </header>
+
+      {canComment ? (
+        <CircleCommentForm
+          campaignId={campaignId}
+          type="campaignDiscussion"
+          placeholder={intl.formatMessage({
+            defaultMessage: 'Share your thoughts with other participants',
+            id: 'dHVTYM',
+            description: 'src/views/CampaignDetail/Discussion',
+          })}
+          submitCallback={submitCallback}
+        />
+      ) : (
+        <section className={styles.hint}>
+          <FormattedMessage
+            defaultMessage="Only participants can join the discussion."
+            id="VyV+WO"
+            description="src/views/CampaignDetail/Discussion"
+          />
+        </section>
+      )}
+
+      {comments.length > 0 && (
+        <ul className={styles.preview}>
+          {comments.map((comment) => (
+            <li key={comment.id}>
+              <CircleThreadComment
+                comment={comment}
+                type="campaignDiscussion"
+                hasLink
+                hasUpvote={false}
+                hasDownvote={false}
+                hasPin={false}
+              />
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {totalCount > comments.length && (
+        <DiscussionDialog
+          campaignId={campaignId}
+          shortHash={shortHash}
+          canComment={canComment}
+          totalCount={totalCount}
+          afterSubmit={refetch}
+        >
+          {({ openDialog }) => (
+            <Button
+              spacing={[8, 0]}
+              textColor="green"
+              textActiveColor="greenDark"
+              onClick={openDialog}
+              aria-haspopup="dialog"
+            >
+              <TextIcon size={14} weight="medium">
+                <FormattedMessage
+                  defaultMessage="View all {count} comments"
+                  id="b8LMpq"
+                  description="src/views/CampaignDetail/Discussion"
+                  values={{ count: totalCount }}
+                />
+              </TextIcon>
+            </Button>
+          )}
+        </DiscussionDialog>
+      )}
+    </section>
+  )
+}
+
+export default CampaignDiscussion
diff --git a/src/views/CampaignDetail/Discussion/styles.module.css b/src/views/CampaignDetail/Discussion/styles.module.css
new file mode 100644
index 0000000000..e61b813723
--- /dev/null
+++ b/src/views/CampaignDetail/Discussion/styles.module.css
@@ -0,0 +1,60 @@
+.discussion {
+  padding: var(--sp16) 0;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--sp12);
+}
+
+.title {
+  font-size: var(--text16);
+  font-weight: var(--font-medium);
+}
+
+.count {
+  margin-left: var(--sp4);
+  font-weight: var(--font-normal);
+  color: var(--color-grey);
+}
+
+.hint {
+  padding: var(--sp12);
+  margin-bottom: var(--sp12);
+  font-size: var(--text14);
+  color: var(--color-grey-dark);
+  text-align: center;
+  background: var(--color-grey-lighter);
+  border-radius: var(--sp8);
+}
+
+.preview {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp16);
+  padding: 0;
+  margin: var(--sp12) 0;
+  list-style: none;
+}
+
+/* mobile one-line entry */
+.chip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--sp12) var(--sp16);
+  font-size: var(--text14);
+  font-weight: var(--font-medium);
+  color: var(--color-matters-green);
+  cursor: pointer;
+  background: var(--color-green-lighter);
+  border: 1px solid var(--color-line-matters-green-light);
+  border-radius: var(--sp8);
+}
+
+.chevron {
+  color: var(--color-grey);
+}
diff --git a/src/views/CampaignDetail/InfoHeader/styles.module.css b/src/views/CampaignDetail/InfoHeader/styles.module.css
index 298d1d75ec..452d7fe277 100644
--- a/src/views/CampaignDetail/InfoHeader/styles.module.css
+++ b/src/views/CampaignDetail/InfoHeader/styles.module.css
@@ -23,11 +23,13 @@
 
   &::after {
     display: block;
-    padding-bottom: 21%;
+
+    /* cover height roughly halved, to lift the discussion area up the page */
+    padding-bottom: 11%;
     content: '';
 
     @media (--sm-up) {
-      padding-bottom: 23.26%;
+      padding-bottom: 12%;
     }
   }
 }
diff --git a/src/views/CampaignDetail/QuoteWall/Dialog.tsx b/src/views/CampaignDetail/QuoteWall/Dialog.tsx
new file mode 100644
index 0000000000..5413f46e8a
--- /dev/null
+++ b/src/views/CampaignDetail/QuoteWall/Dialog.tsx
@@ -0,0 +1,124 @@
+import { useContext } from 'react'
+import { FormattedMessage } from 'react-intl'
+
+import IconTimes from '@/public/static/icons/24px/times.svg'
+import { EXTERNAL_LINKS } from '~/common/enums'
+import {
+  Dialog,
+  Icon,
+  SpinnerBlock,
+  useDialogSwitch,
+  usePublicQuery,
+  ViewerContext,
+} from '~/components'
+import { CampaignQuotesQuery } from '~/gql/graphql'
+
+import { CAMPAIGN_QUOTES } from './gql'
+import QuoteCard from './QuoteCard'
+import styles from './styles.module.css'
+
+type QuotesConnection = NonNullable<
+  NonNullable<CampaignQuotesQuery['campaign']>['quotes']
+>
+type Quote = NonNullable<QuotesConnection['edges']>[0]['node']
+
+const WALL_TAKE = 30
+
+interface QuoteWallDialogProps {
+  shortHash: string
+  totalCount: number
+  children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode
+}
+
+const BaseQuoteWallDialog = ({
+  shortHash,
+  totalCount,
+  children,
+}: QuoteWallDialogProps) => {
+  const viewer = useContext(ViewerContext)
+  const { show, openDialog, closeDialog } = useDialogSwitch(true)
+
+  const { data, loading, refetch } = usePublicQuery<CampaignQuotesQuery>(
+    CAMPAIGN_QUOTES,
+    { variables: { shortHash, first: WALL_TAKE, random: true } },
+    { publicQuery: !viewer.isAuthed }
+  )
+
+  const campaign =
+    data?.campaign?.__typename === 'WritingChallenge'
+      ? data.campaign
+      : undefined
+  const quotes: Quote[] = (campaign?.quotes?.edges || []).map(
+    ({ node }) => node
+  )
+
+  // "shuffle" = refetch a fresh random sample
+  const shuffle = () => refetch({ shortHash, first: WALL_TAKE, random: true })
+
+  return (
+    <>
+      {children({ openDialog })}
+
+      <Dialog isOpen={show} onDismiss={closeDialog}>
+        <Dialog.Header
+          title={
+            <>
+              <FormattedMessage defaultMessage="Quote wall" id="1HLo+Y" />{' '}
+              {totalCount > 0 && (
+                <span className={styles.count}>{totalCount}</span>
+              )}
+            </>
+          }
+          titleLeft
+          rightBtn={
+            <button onClick={closeDialog}>
+              <Icon icon={IconTimes} size={24} />
+            </button>
+          }
+        />
+
+        <Dialog.Content>
+          <div className={styles.dialogTop}>
+            <button className={styles.shuffle} onClick={shuffle}>
+              <FormattedMessage defaultMessage="🔀 Shuffle" id="JBnAOd" />
+            </button>
+            <a
+              className={styles.museum}
+              href={EXTERNAL_LINKS.SEVEN_DAY_BOOK_QUOTE_WALL}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <FormattedMessage
+                defaultMessage="Full wall / Museum →"
+                id="Fx9x/w"
+              />
+            </a>
+          </div>
+
+          {loading && <SpinnerBlock />}
+
+          {!loading && quotes.length > 0 && (
+            <div className={styles.wall}>
+              {quotes.map((quote, i) => (
+                <QuoteCard
+                  key={quote.id}
+                  quote={quote}
+                  index={i}
+                  afterRetract={shuffle}
+                />
+              ))}
+            </div>
+          )}
+        </Dialog.Content>
+      </Dialog>
+    </>
+  )
+}
+
+const QuoteWallDialog = (props: QuoteWallDialogProps) => (
+  <Dialog.Lazy mounted={<BaseQuoteWallDialog {...props} />}>
+    {({ openDialog }) => <>{props.children({ openDialog })}</>}
+  </Dialog.Lazy>
+)
+
+export default QuoteWallDialog
diff --git a/src/views/CampaignDetail/QuoteWall/QuoteCard.tsx b/src/views/CampaignDetail/QuoteWall/QuoteCard.tsx
new file mode 100644
index 0000000000..d1d8bbe949
--- /dev/null
+++ b/src/views/CampaignDetail/QuoteWall/QuoteCard.tsx
@@ -0,0 +1,97 @@
+import Link from 'next/link'
+import { useContext, useState } from 'react'
+import { FormattedMessage } from 'react-intl'
+
+import { toPath } from '~/common/utils'
+import { Button, toast, useMutation, ViewerContext } from '~/components'
+import { DELETE_QUOTE } from '~/components/GQL/mutations/putQuote'
+import { DeleteQuoteMutation, QuoteWallQuoteFragment } from '~/gql/graphql'
+
+import styles from './styles.module.css'
+
+interface QuoteCardProps {
+  quote: QuoteWallQuoteFragment
+  // index drives the rotation / background variety on the wall
+  index?: number
+  afterRetract?: () => void
+}
+
+const QuoteCard = ({ quote, index = 0, afterRetract }: QuoteCardProps) => {
+  const viewer = useContext(ViewerContext)
+  const [deleteQuote] = useMutation<DeleteQuoteMutation>(DELETE_QUOTE)
+  const [confirming, setConfirming] = useState(false)
+  const [retracted, setRetracted] = useState(false)
+
+  // the poster, or the source article's author (the words are theirs), may retract
+  const canRetract =
+    !!viewer.id &&
+    (viewer.id === quote.poster.id || viewer.id === quote.article.author.id)
+
+  const path = toPath({ page: 'articleDetail', article: quote.article })
+
+  const onRetract = async () => {
+    try {
+      await deleteQuote({ variables: { input: { id: quote.id } } })
+      setRetracted(true)
+      toast.info({
+        message: (
+          <FormattedMessage
+            defaultMessage="Quote retracted from the wall"
+            id="TIWVxK"
+          />
+        ),
+      })
+      afterRetract?.()
+    } catch {
+      toast.error({
+        message: (
+          <FormattedMessage defaultMessage="Failed to retract" id="iSjuti" />
+        ),
+      })
+    }
+  }
+
+  if (retracted) {
+    return null
+  }
+
+  return (
+    <figure className={styles.card} data-variant={index % 4}>
+      <Link {...path} className={styles.quoteLink}>
+        <blockquote className={styles.quote}>{quote.content}</blockquote>
+      </Link>
+
+      <figcaption className={styles.meta}>
+        <span className={styles.author}>
+          — {quote.article.author.userName}
+          {quote.article.title ? `《${quote.article.title}》` : ''}
+        </span>
+        <Link {...path} className={styles.back}>
+          <FormattedMessage defaultMessage="To article ↩" id="Thr8QX" />
+        </Link>
+      </figcaption>
+
+      {canRetract &&
+        (confirming ? (
+          <span className={styles.retractRow}>
+            <Button textColor="grey" onClick={() => setConfirming(false)}>
+              <FormattedMessage defaultMessage="Cancel" id="47FYwb" />
+            </Button>
+            <Button textColor="red" onClick={onRetract}>
+              <FormattedMessage defaultMessage="Confirm retract" id="Z82+dw" />
+            </Button>
+          </span>
+        ) : (
+          <Button
+            textColor="grey"
+            spacing={[0, 0]}
+            onClick={() => setConfirming(true)}
+          >
+            <FormattedMessage defaultMessage="Retract" id="3jmniZ" />
+          </Button>
+        ))}
+    </figure>
+  )
+}
+
+export default QuoteCard
diff --git a/src/views/CampaignDetail/QuoteWall/gql.ts b/src/views/CampaignDetail/QuoteWall/gql.ts
new file mode 100644
index 0000000000..33bfc3ed9e
--- /dev/null
+++ b/src/views/CampaignDetail/QuoteWall/gql.ts
@@ -0,0 +1,47 @@
+import gql from 'graphql-tag'
+
+// public: anyone can read a campaign's quote wall.
+// `random: true` returns a random sample — the "shuffle" button refetches.
+export const CAMPAIGN_QUOTES = gql`
+  query CampaignQuotes(
+    $shortHash: String!
+    $first: first_Int_min_0_max_50 = 12
+    $random: Boolean
+  ) {
+    campaign(input: { shortHash: $shortHash }) {
+      id
+      ... on WritingChallenge {
+        id
+        quoteCount
+        quotes(input: { first: $first, random: $random }) {
+          totalCount
+          edges {
+            node {
+              ...QuoteWallQuote
+            }
+          }
+        }
+      }
+    }
+  }
+
+  fragment QuoteWallQuote on Quote {
+    id
+    content
+    createdAt
+    poster {
+      id
+      userName
+      displayName
+    }
+    article {
+      id
+      title
+      shortHash
+      author {
+        id
+        userName
+      }
+    }
+  }
+`
diff --git a/src/views/CampaignDetail/QuoteWall/index.tsx b/src/views/CampaignDetail/QuoteWall/index.tsx
new file mode 100644
index 0000000000..dd2e51bc47
--- /dev/null
+++ b/src/views/CampaignDetail/QuoteWall/index.tsx
@@ -0,0 +1,120 @@
+import { useContext } from 'react'
+import { FormattedMessage } from 'react-intl'
+
+import { EXTERNAL_LINKS } from '~/common/enums'
+import { Button, TextIcon, usePublicQuery, ViewerContext } from '~/components'
+import { CampaignQuotesQuery } from '~/gql/graphql'
+
+import QuoteWallDialog from './Dialog'
+import { CAMPAIGN_QUOTES } from './gql'
+import QuoteCard from './QuoteCard'
+import styles from './styles.module.css'
+
+type QuotesConnection = NonNullable<
+  NonNullable<CampaignQuotesQuery['campaign']>['quotes']
+>
+type Quote = NonNullable<QuotesConnection['edges']>[0]['node']
+
+// how many quotes to preview in the compact module
+const PREVIEW_COUNT = 3
+
+interface QuoteWallProps {
+  shortHash: string
+  // 'module': compact wall (desktop right aside). 'chip': one-line entry
+  // (mobile main column) that opens the full wall dialog.
+  entry?: 'module' | 'chip'
+}
+
+const QuoteWall = ({ shortHash, entry = 'module' }: QuoteWallProps) => {
+  const viewer = useContext(ViewerContext)
+
+  const { data } = usePublicQuery<CampaignQuotesQuery>(
+    CAMPAIGN_QUOTES,
+    { variables: { shortHash, first: PREVIEW_COUNT, random: true } },
+    { publicQuery: !viewer.isAuthed }
+  )
+
+  const campaign =
+    data?.campaign?.__typename === 'WritingChallenge'
+      ? data.campaign
+      : undefined
+  const totalCount = campaign?.quoteCount ?? 0
+  const quotes: Quote[] = (campaign?.quotes?.edges || [])
+    .map(({ node }) => node)
+    .slice(0, PREVIEW_COUNT)
+
+  // nothing on the wall yet → hide the module entirely
+  if (totalCount <= 0) {
+    return null
+  }
+
+  // mobile: one-line entry that opens the full wall dialog
+  if (entry === 'chip') {
+    return (
+      <QuoteWallDialog shortHash={shortHash} totalCount={totalCount}>
+        {({ openDialog }) => (
+          <button
+            type="button"
+            className={styles.chip}
+            onClick={openDialog}
+            aria-haspopup="dialog"
+          >
+            <span>
+              ✨ <FormattedMessage defaultMessage="Quote wall" id="1HLo+Y" />
+              <span className={styles.count}>{totalCount}</span>
+            </span>
+            <span className={styles.chevron}>›</span>
+          </button>
+        )}
+      </QuoteWallDialog>
+    )
+  }
+
+  return (
+    <section className={styles.quoteWall}>
+      <header className={styles.header}>
+        <h2 className={styles.title}>
+          ✨ <FormattedMessage defaultMessage="Quote wall" id="1HLo+Y" />
+        </h2>
+        <a
+          className={styles.museum}
+          href={EXTERNAL_LINKS.SEVEN_DAY_BOOK_QUOTE_WALL}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <FormattedMessage defaultMessage="Full wall →" id="Ds+7ro" />
+        </a>
+      </header>
+
+      <div className={styles.previewWall}>
+        {quotes.map((quote, i) => (
+          <QuoteCard key={quote.id} quote={quote} index={i} />
+        ))}
+      </div>
+
+      {totalCount > quotes.length && (
+        <QuoteWallDialog shortHash={shortHash} totalCount={totalCount}>
+          {({ openDialog }) => (
+            <Button
+              spacing={[8, 0]}
+              textColor="green"
+              textActiveColor="greenDark"
+              onClick={openDialog}
+              aria-haspopup="dialog"
+            >
+              <TextIcon size={14} weight="medium">
+                <FormattedMessage
+                  defaultMessage="View all {count} quotes"
+                  id="epZb9X"
+                  values={{ count: totalCount }}
+                />
+              </TextIcon>
+            </Button>
+          )}
+        </QuoteWallDialog>
+      )}
+    </section>
+  )
+}
+
+export default QuoteWall
diff --git a/src/views/CampaignDetail/QuoteWall/styles.module.css b/src/views/CampaignDetail/QuoteWall/styles.module.css
new file mode 100644
index 0000000000..bf5bda5682
--- /dev/null
+++ b/src/views/CampaignDetail/QuoteWall/styles.module.css
@@ -0,0 +1,136 @@
+.quoteWall {
+  padding: var(--sp16) 0;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--sp12);
+}
+
+.title {
+  font-size: var(--text16);
+  font-weight: var(--font-medium);
+}
+
+.count {
+  margin-left: var(--sp4);
+  font-weight: var(--font-normal);
+  color: var(--color-grey);
+}
+
+.museum {
+  font-size: var(--text12);
+  font-weight: var(--font-medium);
+  color: var(--color-matters-green);
+}
+
+/* compact preview: a vertical stack of memo cards */
+.previewWall {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp8);
+  margin-bottom: var(--sp8);
+}
+
+/* full wall (dialog): two-column masonry-ish grid */
+.wall {
+  column-count: 2;
+  column-gap: var(--sp12);
+}
+
+.dialogTop {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--sp16);
+}
+
+.shuffle {
+  font-size: var(--text14);
+  font-weight: var(--font-medium);
+  color: var(--color-matters-green);
+}
+
+/* sticky-note card */
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp4);
+  padding: var(--sp12);
+  margin: 0 0 var(--sp12);
+  background: var(--color-yellow-lighter);
+  border-radius: var(--sp8);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
+  break-inside: avoid;
+}
+
+.card[data-variant='1'] {
+  background: var(--color-green-lighter);
+}
+
+.card[data-variant='2'] {
+  background: var(--color-red-lighter);
+}
+
+.card[data-variant='3'] {
+  background: var(--color-grey-lighter);
+}
+
+.quoteLink {
+  color: inherit;
+}
+
+.quote {
+  /* safety net: cap display at 3 lines even within the 80-char limit */
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  -webkit-line-clamp: 3;
+  font-size: var(--text14);
+  line-height: 1.5;
+  color: var(--color-grey-darkest);
+  -webkit-box-orient: vertical;
+}
+
+.meta {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp4);
+}
+
+.author {
+  font-size: var(--text12);
+  color: var(--color-grey-dark);
+}
+
+.back {
+  font-size: var(--text12);
+  color: var(--color-matters-green);
+}
+
+.retractRow {
+  display: flex;
+  gap: var(--sp8);
+}
+
+/* mobile one-line entry */
+.chip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--sp12) var(--sp16);
+  font-size: var(--text14);
+  font-weight: var(--font-medium);
+  color: var(--color-warn-yellow);
+  cursor: pointer;
+  background: var(--color-top-up-yellow);
+  border: 1px solid var(--color-warn-yellow);
+  border-radius: var(--sp8);
+}
+
+.chevron {
+  color: var(--color-grey);
+}
diff --git a/src/views/CampaignDetail/SideParticipants/index.tsx b/src/views/CampaignDetail/SideParticipants/index.tsx
index d0b56f9e66..5afb9d3f5f 100644
--- a/src/views/CampaignDetail/SideParticipants/index.tsx
+++ b/src/views/CampaignDetail/SideParticipants/index.tsx
@@ -73,7 +73,8 @@ const SideParticipants = ({ campaign }: SideParticipantsProps) => {
   const edges = campaign.sideParticipants.edges
   const totalCount = campaign.sideParticipants.totalCount
   const isViewerApplySucceeded = campaign.application?.state === 'succeeded'
-  const maxAvatarCount = 60
+  // trimmed from 60 to make room for the discussion module below the avatars
+  const maxAvatarCount = 12
   const [openDrawer, setOpenDrawer] = useState(false)
   const toggleDrawer = () => {
     setOpenDrawer((prevState) => !prevState)
diff --git a/src/views/CampaignDetail/index.tsx b/src/views/CampaignDetail/index.tsx
index 2e5979dc43..938aa3a95e 100644
--- a/src/views/CampaignDetail/index.tsx
+++ b/src/views/CampaignDetail/index.tsx
@@ -1,6 +1,7 @@
 import dynamic from 'next/dynamic'
 import { useContext, useEffect } from 'react'
 
+import { BREAKPOINTS } from '~/common/enums'
 import { toPath } from '~/common/utils'
 import {
   EmptyLayout,
@@ -9,6 +10,7 @@ import {
   Layout,
   SpinnerBlock,
   Throw404,
+  useMediaQuery,
   usePublicQuery,
   useRoute,
   ViewerContext,
@@ -26,6 +28,16 @@ const DynamicOtherCampaigns = dynamic(() => import('./OtherCampaigns'), {
   ssr: false,
 })
 
+const DynamicDiscussion = dynamic(() => import('./Discussion'), {
+  loading: () => <SpinnerBlock />,
+  ssr: false,
+})
+
+const DynamicQuoteWall = dynamic(() => import('./QuoteWall'), {
+  loading: () => <SpinnerBlock />,
+  ssr: false,
+})
+
 const DynamicSideParticipants = dynamic(() => import('./SideParticipants'), {
   loading: () => <SpinnerBlock />,
   ssr: false,
@@ -36,6 +48,9 @@ const CampaignDetail = () => {
   const { lang } = useContext(LanguageContext)
   const { getQuery } = useRoute()
   const shortHash = getQuery('shortHash')
+  // desktop (md-up): discussion in the right aside; mobile: in the main column.
+  // rendered once (not double-mounted) to avoid duplicate comment-form ids.
+  const isMdUp = useMediaQuery(`(min-width: ${BREAKPOINTS.MD}px)`)
 
   const { data, loading, error, client } =
     usePublicQuery<CampaignDetailPublicQuery>(
@@ -94,6 +109,17 @@ const CampaignDetail = () => {
         <>
           {campaign.showOther && <DynamicOtherCampaigns id={campaign.id} />}
           <DynamicSideParticipants campaign={campaign} />
+          {/* desktop: quote wall + discussion sit in the right aside, below
+              the avatars (quote wall first — it's the lighter "trailer") */}
+          {isMdUp && (
+            <>
+              <DynamicQuoteWall shortHash={campaign.shortHash} />
+              <DynamicDiscussion
+                campaignId={campaign.id}
+                shortHash={campaign.shortHash}
+              />
+            </>
+          )}
           {campaign.showAd && <Billboard />}
         </>
       }
@@ -123,6 +149,20 @@ const CampaignDetail = () => {
 
       <InfoHeader campaign={campaign} />
 
+      {/* mobile: the aside is hidden, so the quote wall + discussion shrink to
+          one-line entries under the header (still on the first screen);
+          tapping either opens its full dialog */}
+      {!isMdUp && (
+        <>
+          <DynamicQuoteWall shortHash={campaign.shortHash} entry="chip" />
+          <DynamicDiscussion
+            campaignId={campaign.id}
+            shortHash={campaign.shortHash}
+            entry="chip"
+          />
+        </>
+      )}
+
       <ArticleFeeds campaign={campaign} />
     </Layout.Main>
   )