diff --git a/package.json b/package.json
index fa08063..2293f88 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@heroicons/vue": "^2.1.1",
     "autoprefixer": "^10.4.16",
+    "date-fns": "^3.3.1",
     "postcss": "^8.4.33",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
new file mode 100644
index 0000000..53bf01e
--- /dev/null
+++ b/src/components/Chat.tsx
@@ -0,0 +1,122 @@
+import { useEffect, useState } from "react";
+import { currentPage, Pages } from "./VerticalMenu"
+import { RecoilRoot, useRecoilState } from 'recoil'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPaperPlane } from '@fortawesome/free-solid-svg-icons'
+import { formatDistance } from 'date-fns'
+import { ja } from 'date-fns/locale/ja'
+
+export default function Chat() {
+    const [page, _] = useRecoilState(currentPage);
+    const [name, setName] = useState("");
+    const [body, setBody] = useState("");
+    const [messages, setMessages] = useState<Message[]>();
+    const [alert, setAlert] = useState("");
+
+    interface Message {
+        name: string
+        body: string
+        createdAt: string
+    }
+
+    useEffect(() => {
+        if (page === Pages.Chat) {
+            updateChat();
+        }
+    }, [page]);
+
+    async function submit() {
+        await fetch(
+            "https://bbs.yude.workers.dev/api/message",
+            {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                mode: 'cors',
+                body: JSON.stringify({
+                    name: name,
+                    body: body,
+                })
+            }
+        )
+        .then(
+            (res) => res.text()
+        )
+        .then (
+            async (text) => {
+                if (text.includes("Success")) {
+                    await showAlert("送信しました。");
+                }
+            }
+        )
+        await new Promise(s => setTimeout(s, 800));
+        updateChat();
+    }
+
+    const updateChat = () => {
+        fetch(
+            "https://bbs.yude.workers.dev/api/messages",
+        )
+        .then((res) => res.json())
+        .then((data) => setMessages(data));
+    }
+    const updateName = (e: any) => {
+        setName(e.target.value);
+    }
+    const updateBody = (e: any) => {
+        setBody(e.target.value);
+    }
+
+    async function showAlert(alert: string) {
+        setAlert(alert);
+        await new Promise(s => setTimeout(s, 1500));
+        setAlert("");
+    }
+
+    return (
+        <RecoilRoot>
+            <div className={`w-1/2 absolute flex items-center p-4 text-sm text-gray-800 border border-gray-300 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600${alert === "" ? ` hidden` : ``}`} role="alert">
+                <svg className="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+                </svg>
+                <div>
+                    {alert}
+                </div>
+            </div>
+            <div>
+                <div className="mb-5">
+                    <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">名前</label>
+                    <input type="text" id="name" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value={name} onChange={updateName} />
+                </div>
+                <div className="mb-5">
+                    <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">本文</label>
+                    <input type="text" id="body" className="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-base focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-blue-500 dark:focus:border-blue-500" value={body} onChange={updateBody} />
+                </div>
+                <button onClick={submit} type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+                    <FontAwesomeIcon icon={faPaperPlane} />{" "}送信
+                </button>
+            </div>
+
+            <div className="overflow-auto max-h-96 mt-5 rounded-lg">
+            {
+                messages &&
+                messages.map((message, index) => {
+                    return (
+                        <div key={index} className="p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 mb-2">
+                            <p className="font-medium opacity-80">
+                                {message.name} さん,{" "}
+                                {
+                                    formatDistance(Date.parse(message.createdAt), new Date(), { addSuffix: true, locale: ja })
+                                }
+                            </p>
+                            <p className="font-serif text-2xl">{message.body}</p>
+                        </div>
+                    )
+                })
+            }
+            </div>
+        </RecoilRoot>
+    )
+}
+  
\ No newline at end of file
diff --git a/src/components/ContentRenderer.tsx b/src/components/ContentRenderer.tsx
index 3f56ac0..5d6b13b 100644
--- a/src/components/ContentRenderer.tsx
+++ b/src/components/ContentRenderer.tsx
@@ -5,11 +5,10 @@ import Links from "./Links"
 import Keys from "./Keys"
 import Spotify from "./Spotify"
 import Services from "./Services"
+import Chat from "./Chat"
 
 import { currentPage, Pages } from "./VerticalMenu"
 
-
-
 export default function ContentRenderer() {
     const [page, _] = useRecoilState(currentPage);
     return (
@@ -18,6 +17,7 @@ export default function ContentRenderer() {
             { page === Pages.Links && <Links /> }
             { page === Pages.Keys && <Keys /> }
             { page === Pages.Services && <Services /> }
+            { page === Pages.Chat && <Chat /> }
         </>
     )
 }
diff --git a/src/components/VerticalMenu.tsx b/src/components/VerticalMenu.tsx
index 912bc8b..09769e6 100644
--- a/src/components/VerticalMenu.tsx
+++ b/src/components/VerticalMenu.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faUser, faStar} from '@fortawesome/free-regular-svg-icons'
+import { faUser, faStar, faComments } from '@fortawesome/free-regular-svg-icons'
 import { faLink, faKey } from '@fortawesome/free-solid-svg-icons'
 
 import { RecoilRoot, atom, useRecoilState } from 'recoil'
@@ -11,6 +11,7 @@ export enum Pages {
     Activities = 3,
     Spotify = 4,
     Services = 5,
+    Chat = 6,
   }
 
 export const currentPage = atom({
@@ -52,6 +53,13 @@ export default function VerticalMenu() {
                 <FontAwesomeIcon icon={faStar} />{" "}
                 <p>サービス</p>
             </li>
+            <li
+                className={`w-full px-4 py-2 rounded-lg${page === Pages.Chat ? " bg-slate-700" : ""}`}
+                onClick={() => {setPage(Pages.Chat)}}
+            >
+                <FontAwesomeIcon icon={faComments} />{" "}
+                <p>チャット</p>
+            </li>
         </ul>
       </RecoilRoot>
     )