diff --git a/frontend/src/app/page.module.scss b/frontend/src/app/page.module.scss
index fe3df8d..133e4bd 100644
--- a/frontend/src/app/page.module.scss
+++ b/frontend/src/app/page.module.scss
@@ -1,3 +1,4 @@
 .messageList {
+  margin-top: 10px;
   overflow: auto;
 }
diff --git a/frontend/src/components/Bubble/Bubble.module.scss b/frontend/src/components/Bubble/Bubble.module.scss
index 18e0a90..0ed2f5d 100644
--- a/frontend/src/components/Bubble/Bubble.module.scss
+++ b/frontend/src/components/Bubble/Bubble.module.scss
@@ -6,6 +6,65 @@
   color: #969696;
 }
 
+.bubble {
+  width: 100%;
+  margin: 8px 0;
+  overflow: hidden;
+}
+
+.bubble .chat {
+  width: 100%;
+  text-align: left;
+}
+
+.userData {
+  text-align: left;
+}
+
+.message,
+.myMessage {
+  position: relative;
+  display: inline-block;
+  max-width: 250px;
+  padding: 10px 12px;
+  border-radius: 25px;
+  P {
+    padding: 0;
+    margin: 0;
+    font-size: 18px;
+    overflow-wrap: break-word;
+  }
+}
+
 .message {
-  overflow-wrap: break-word;
+  margin: 0 0 0 10px;
+  background: var(--bubble-color);
+  &:after {
+    position: absolute;
+    top: 3px;
+    left: -19px;
+    display: inline-block;
+    content: "";
+    border: 8px solid transparent;
+    border-right: 18px solid var(--bubble-color);
+    -webkit-transform: rotate(35deg);
+    transform: rotate(35deg);
+  }
+}
+
+.myMessage {
+  float: right;
+  max-width: 250px;
+  margin: 0 10px 0 10px;
+  background: var(--my-bubble-color);
+  p:after {
+    position: absolute;
+    top: 3px;
+    right: -19px;
+    content: "";
+    border: 8px solid transparent;
+    border-left: 18px solid var(--my-bubble-color);
+    -webkit-transform: rotate(-35deg);
+    transform: rotate(-35deg);
+  }
 }
diff --git a/frontend/src/components/Bubble/Bubble.tsx b/frontend/src/components/Bubble/Bubble.tsx
index d012940..39e7f0b 100644
--- a/frontend/src/components/Bubble/Bubble.tsx
+++ b/frontend/src/components/Bubble/Bubble.tsx
@@ -8,11 +8,40 @@ export default function Bubble({
   bubble: messageDownEventInterface;
 }) {
   return (
-    <p>
-      <span className={styles.name}>{bubble.name}</span>
-      <span className={styles.hash}>
-        #{bubble.addressHash.slice(0, 4)}
-      </span>: <span className={styles.message}>{bubble.message}</span>
-    </p>
+    <div className={styles.bubbleContainer}>
+      {bubble.isSelfMessage ? (
+        <>
+          <div className={styles.userData} style={{ textAlign: "right" }}>
+            <span className={styles.name}>{bubble.name}</span>
+            <span className={styles.hash}>
+              #{bubble.addressHash.slice(0, 4)}
+            </span>
+          </div>
+          <div className={styles.bubble}>
+            <div className={styles.chat}>
+              <div className={styles.myMessage}>
+                <p>{bubble.message}</p>
+              </div>
+            </div>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className={styles.userData} style={{ textAlign: "left" }}>
+            <span className={styles.name}>{bubble.name}</span>
+            <span className={styles.hash}>
+              #{bubble.addressHash.slice(0, 4)}
+            </span>
+          </div>
+          <div className={styles.bubble}>
+            <div className={styles.chat}>
+              <div className={styles.message}>
+                <p>{bubble.message}</p>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
   );
 }
diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
index e28e8ea..0ca641a 100644
--- a/frontend/src/components/Header/Header.tsx
+++ b/frontend/src/components/Header/Header.tsx
@@ -9,7 +9,7 @@ export default function Header() {
     <header className={styles.header}>
       <div className={styles.navigationContainer}>
         <nav className={styles.navigation}>
-          <span className={styles.logo}>What&apos;s up?</span>
+          <span className={styles.logo}>What&apos;s up!</span>
           <span className={styles.userNumber}>users</span>
           <div
             className={styles.logoutButton}
diff --git a/frontend/src/components/SendForm/SendForm.module.scss b/frontend/src/components/SendForm/SendForm.module.scss
index 364417c..ce5e85c 100644
--- a/frontend/src/components/SendForm/SendForm.module.scss
+++ b/frontend/src/components/SendForm/SendForm.module.scss
@@ -3,8 +3,21 @@
   min-height: 40px;
   margin: 3px auto 35px auto;
   input {
-    width: min(80vw, 500px);
+    width: min(75vw, 500px);
     padding: 8px 8px 6px;
     font-size: 18px;
   }
 }
+
+.textField {
+  margin: 5px 0 0 0;
+  > div {
+    height: 45px;
+    background: white;
+    border-radius: 20px;
+    > input {
+      padding: 0;
+      margin: 8px 15px 6px;
+    }
+  }
+}
diff --git a/frontend/src/components/SendForm/SendForm.tsx b/frontend/src/components/SendForm/SendForm.tsx
index c2c7579..e48fc9b 100644
--- a/frontend/src/components/SendForm/SendForm.tsx
+++ b/frontend/src/components/SendForm/SendForm.tsx
@@ -25,8 +25,8 @@ export default function SendForm({ socket }: SendFormProps) {
     <div className={styles.sendForm}>
       <TextField
         value={input}
+        className={styles.textField}
         onChange={(e) => setInput(e.target.value)}
-        style={{ marginRight: "5px" }}
         placeholder="メッセージを入力"
         onKeyPress={(e) => {
           if (e.key === "Enter") {
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
index bfcfd5b..4727a2c 100644
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@@ -1,5 +1,7 @@
 :root {
   --header-height: 60px;
+  --bubble-color: #9edbff;
+  --my-bubble-color: #3af849;
 }
 
 html {
@@ -15,8 +17,8 @@ body {
     "Segoe UI Symbol", "Noto Color Emoji";
   background: linear-gradient(
     0deg,
-    rgb(181, 239, 249) 10.5%,
-    rgb(254, 254, 254) 86.8%
+    rgb(191 246 255) 10.5%,
+    rgb(230 255 247) 86.8%
   );
 }