diff --git a/README.md b/README.md
index f33b7f1..b132d31 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,8 @@
 # chat-app
-RailsとVueで作成された簡素なチャットアプリ
+Rails、Action cable、Vueで構成された簡素なリアルタイムチャット。
 
-ぶえぶえ体操いくぶえよ～！ （∩ ๑•﹏•๑｀)ぶえ〜っwwwぶえぶえぶえええ〜っwww (∩ ๑•﹏•๑｀⊃)ぷぇっ～///ぷぇっ～/// (⊂ ๑•﹏•๑｀∩) ぶえええええーーーっ！！
-(∩ ๑•﹏•๑｀∩)ぶえぶえーっ！！
+# 文脈
+[Entering](https://riq0h.jp/2023/04/30/232125/)で主人公が作っていたチャットサービスをモダンな技術で再現した。
+
+# LICENSE
+MIT
diff --git a/frontend/src/components/ChatRoom.vue b/frontend/src/components/ChatRoom.vue
index 6b94f09..a92a33f 100644
--- a/frontend/src/components/ChatRoom.vue
+++ b/frontend/src/components/ChatRoom.vue
@@ -1,23 +1,50 @@
 <template>
-  <div>
-    <h1>チャットルーム {{ this.roomId }}</h1>
+  <div style="background-color: lightcyan; padding: 20px">
+    <h1 style="color: navy; font-family: Arial, sans-serif">チャットルーム {{ this.roomId }}</h1>
 
-    <ul>
-      <li v-for="message in messages" :key="message.id">
-        <strong>{{ message.sender_name }}:</strong> {{ message.content }}
+    <ul style="list-style-type: none; padding: 0">
+      <li
+        v-for="message in messages"
+        :key="message.id"
+        style="background-color: lightgray; padding: 10px; margin-bottom: 10px"
+      >
+        <strong style="color: navy">{{ message.sender_name }}:</strong> {{ message.content }}
       </li>
     </ul>
-    <form @submit.prevent="sendMessage">
+    <form @submit.prevent="sendMessage" style="background-color: lightgray; padding: 20px">
       <div>
-        <h3>名前</h3>
-        <input type="text" v-model="senderName" placeholder="名前を入力" required />
+        <h3 style="color: navy">名前</h3>
+        <input
+          type="text"
+          v-model="senderName"
+          placeholder="名前を入力"
+          required
+          style="width: 100%; padding: 5px; border: 1px solid gray"
+        />
       </div>
       <div>
-        <h3>メッセージ</h3>
-        <input type="text" v-model="newMessageContent" placeholder="メッセージを入力" required />
+        <h3 style="color: navy">メッセージ</h3>
+        <input
+          type="text"
+          v-model="newMessageContent"
+          placeholder="メッセージを入力"
+          required
+          style="width: 100%; padding: 5px; border: 1px solid gray"
+        />
       </div>
-      <div>
-        <button type="submit">送信</button>
+      <div style="text-align: center; margin-top: 10px">
+        <button
+          type="submit"
+          style="
+            background-color: lightgray;
+            color: navy;
+            padding: 5px 10px;
+            border: 1px solid navy;
+            font-family: 'Courier New', monospace;
+          "
+        >
+          送信
+        </button>
       </div>
     </form>
   </div>
diff --git a/frontend/src/components/ChatRooms.vue b/frontend/src/components/ChatRooms.vue
index 932ec58..e2cfacd 100644
--- a/frontend/src/components/ChatRooms.vue
+++ b/frontend/src/components/ChatRooms.vue
@@ -1,19 +1,43 @@
 <template>
-  <div>
-    <h1>VueChat - チャットルーム一覧</h1>
-    <ul>
-      <li v-for="room in chatRooms" :key="room.id">
-        <router-link :to="`/rooms/${room.id}`">{{ room.name }}</router-link>
+  <div style="background-color: lightcyan; padding: 20px">
+    <h1 style="color: navy; font-family: Arial, sans-serif">VueChat - チャットルーム一覧</h1>
+    <ul style="list-style-type: none; padding: 0">
+      <li v-for="room in chatRooms" :key="room.id" style="margin-bottom: 10px">
+        <router-link
+          :to="`/rooms/${room.id}`"
+          style="
+            text-decoration: none;
+            color: navy;
+            background-color: lightgray;
+            padding: 5px 10px;
+            font-family: 'Courier New', monospace;
+          "
+          >{{ room.name }}</router-link
+        >
       </li>
     </ul>
-    <h3>チャットルーム作成</h3>
-    <input type="text" v-model="newRoomName" />
-    <div>
-      <button @click="createRoom">作成</button>
+    <h3 style="color: navy; font-family: Arial, sans-serif">チャットルーム作成</h3>
+    <input
+      type="text"
+      v-model="newRoomName"
+      style="padding: 5px; font-family: 'Courier New', monospace"
+    />
+    <div style="margin-top: 10px">
+      <button
+        @click="createRoom"
+        style="
+          background-color: lightgray;
+          color: navy;
+          padding: 5px 10px;
+          border: 1px solid navy;
+          font-family: 'Courier New', monospace;
+        "
+      >
+        作成
+      </button>
     </div>
   </div>
 </template>
-
 <script>
 import axios from 'axios'