diff --git a/package.json b/package.json
index 2ea65c5..b3514da 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@heroicons/vue": "^2.1.1",
+    "@tailwindcss/typography": "^0.5.10",
     "@types/react-katex": "^3.0.4",
     "autoprefixer": "^10.4.16",
     "date-fns": "^3.3.1",
@@ -23,6 +24,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-katex": "^3.0.1",
+    "react-markdown": "^9.0.1",
     "react-scroll-percentage": "^4.3.2",
     "recoil": "^0.7.7",
     "tailwindcss": "^3.4.1"
diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index 3598689..9f228d2 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -6,6 +6,7 @@ import { faPaperPlane } from '@fortawesome/free-solid-svg-icons'
 import { formatDistance } from 'date-fns'
 import { ja } from 'date-fns/locale/ja'
 import { InlineMath } from 'react-katex';
+import Markdown from 'react-markdown';
 
 export default function Chat() {
     const [page, _] = useRecoilState(currentPage);
@@ -88,26 +89,32 @@ export default function Chat() {
                     {alert}
                 </div>
             </div>
-            <div className="text-wrap">
+            <div className="text-wrap max-w-xl">
                 <div className="mb-5">
-                    <label className="block mb-2 text-sm font-medium text-white">名前</label>
-                    <input type="text" id="name" className="block p-4 border rounded-lg text-base bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500" value={name} onChange={updateName} />
+                    <label className="block mb-2 text-sm font-medium text-white">
+                        名前{" "}
+                        <span className="text-orange-400">*</span>
+                    </label>
+                    <input type="text" id="name" className="w-full block p-4 border rounded-lg text-base bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500" value={name} onChange={updateName} placeholder="Hatsune Mike" />
                 </div>
                 <div className="mb-5">
-                    <label className="block mb-2 text-sm font-medium text-white">本文</label>
-                    <input type="text" id="body" className="block p-4 border rounded-lg text-base bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500" value={body} onChange={updateBody} />
+                    <label className="block mb-2 text-sm font-medium text-white">
+                        本文{" "}
+                        <span className="text-orange-400">*</span>
+                    </label>
+                    <textarea id="body" rows={4} className="font-serif text-2xl w-full block p-2.5 rounded-lg border bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500" placeholder="言い残したいことは？" value={body} onChange={updateBody}></textarea>
                 </div>
                 <button
                     onClick={submit}
                     type="button"
-                    className={`text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-blue-600 hover:bg-blue-700 focus:ring-blue-800${ name === "" || body === "" ? " opacity-20" : ""}`}
+                    className={`w-full text-xl text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-blue-600 hover:bg-blue-700 focus:ring-blue-800${ name === "" || body === "" ? " opacity-20" : ""}`}
                     disabled={name === "" || body === ""}
                 >
                     <FontAwesomeIcon icon={faPaperPlane} />{" "}送信
                 </button>
             </div>
 
-            <div className="overflow-auto max-h-96 mt-5 rounded-lg max-w-2xl">
+            <div className="overflow-auto max-h-96 mt-5 rounded-lg max-w-xl">
             {
                 messages &&
                 messages.map((message, index) => {
@@ -120,9 +127,17 @@ export default function Chat() {
                                 }
                             </p>
                             <p className="font-serif text-2xl">
-                                {message.body.includes("$$") ? <InlineMath>
-                                    {message.body.replace(/\$\$/g, "")}
-                                </InlineMath> : <>{message.body}</>}
+                                {
+                                    message.body.includes("$$")
+                                    ?
+                                    <InlineMath>
+                                        {message.body.replace(/\$\$/g, "")}
+                                    </InlineMath>
+                                    :
+                                    <Markdown className="prose prose-xl prose-invert">
+                                        {message.body}
+                                    </Markdown>
+                                }
                             </p>
                         </div>
                     )
diff --git a/tailwind.config.js b/tailwind.config.js
index dca8ba0..e9baf90 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,5 +7,7 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
 }