diff --git a/components/website/SessionCard.tsx b/components/website/SessionCard.tsx
index dc6f5f2b..725d2574 100644
--- a/components/website/SessionCard.tsx
+++ b/components/website/SessionCard.tsx
@@ -312,7 +312,7 @@ export default function SessionCard({
             {targetAudience ? (
               <div>
                 <p className="font-bold">目標受眾：</p>
-                <Markdown className="leading-7 max-md:text-sm">
+                <Markdown className="prose leading-7 text-white max-md:text-sm">
                   {targetAudience}
                 </Markdown>
               </div>
@@ -320,13 +320,13 @@ export default function SessionCard({
             {priorKnowledge ? (
               <div>
                 <p className="font-bold">先備知識：</p>
-                <Markdown className="leading-7 max-md:text-sm">
+                <Markdown className="prose leading-7 text-white max-md:text-sm">
                   {priorKnowledge}
                 </Markdown>
               </div>
             ) : null}
             <p className="font-bold">議程介紹：</p>
-            <Markdown className="leading-7 max-md:text-sm">
+            <Markdown className="prose leading-7 text-white max-md:text-sm">
               {description}
             </Markdown>
           </div>
@@ -360,7 +360,7 @@ export default function SessionCard({
                 <p className="text-2xl font-bold">
                   {sessions.speakers.find((x) => x.id == speaker)?.zh.name}
                 </p>
-                <Markdown className="leading-7 max-md:text-sm">
+                <Markdown className="prose leading-7 text-white max-md:text-sm">
                   {sessions.speakers.find((x) => x.id == speaker)?.zh.bio}
                 </Markdown>
               </div>
diff --git a/package-lock.json b/package-lock.json
index 9a4cca61..5e48c269 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "vaul": "^0.8.0"
       },
       "devDependencies": {
+        "@tailwindcss/typography": "^0.5.10",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -838,6 +839,34 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
+      "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==",
+      "dev": true,
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -3549,6 +3578,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
diff --git a/package.json b/package.json
index 40327627..e29bcf5a 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "vaul": "^0.8.0"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.10",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6dbea4d3..e445732d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -51,8 +51,15 @@ const config: Config = {
           },
         },
       },
+      typography: {
+        DEFAULT: {
+          css: {
+            maxWidth: "100%",
+          },
+        },
+      },
     },
   },
-  plugins: [],
+  plugins: [require("@tailwindcss/typography")],
 };
 export default config;