diff --git a/backend/public/stylesheets/style.css b/backend/public/stylesheets/style.css
index 9453385..d20a135 100644
--- a/backend/public/stylesheets/style.css
+++ b/backend/public/stylesheets/style.css
@@ -1,8 +1,12 @@
 body {
   padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  font:
+    14px "Lucida Grande",
+    Helvetica,
+    Arial,
+    sans-serif;
 }
 
 a {
-  color: #00B7FF;
+  color: #00b7ff;
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b6cb5fc..00ff55e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,10 +10,12 @@
       "dependencies": {
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
+        "@mui/base": "^5.0.0-beta.60",
         "@mui/material": "^6.1.5",
         "next": "14.2.15",
         "react": "^18",
         "react-dom": "^18",
+        "react-icons": "^5.3.0",
         "sass": "^1.80.3",
         "socket.io-client": "^4.8.0"
       },
@@ -482,6 +484,44 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz",
+      "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
+      "license": "MIT"
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -615,6 +655,38 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.60",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.60.tgz",
+      "integrity": "sha512-w8twR3qCUI+uJHO5xDOuc1yB5l46KFbvNsTwIvEW9tQkKxVaiEFf2GAXHuvFJiHfZLqjzett6drZjghy8D1Z1A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "@floating-ui/react-dom": "^2.1.1",
+        "@mui/types": "^7.2.18",
+        "@mui/utils": "^6.1.5",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/core-downloads-tracker": {
       "version": "6.1.5",
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.5.tgz",
@@ -5594,6 +5666,15 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 53607a9..f965134 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,10 +11,12 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@mui/base": "^5.0.0-beta.60",
     "@mui/material": "^6.1.5",
     "next": "14.2.15",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^5.3.0",
     "sass": "^1.80.3",
     "socket.io-client": "^4.8.0"
   },
diff --git a/frontend/src/components/Header/Header.module.scss b/frontend/src/components/Header/Header.module.scss
index 14a8a1f..a4836eb 100644
--- a/frontend/src/components/Header/Header.module.scss
+++ b/frontend/src/components/Header/Header.module.scss
@@ -1,3 +1,8 @@
+@import url("https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Modak&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Michroma&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Holtwood+One+SC&display=swap");
+
 .header {
   z-index: 1000;
   transition: all 0.3s ease-out;
@@ -12,6 +17,11 @@
   box-sizing: border-box;
   height: var(--header-height);
   padding: 8px 0 6px 0;
+  background: linear-gradient(
+    180deg,
+    rgb(212 225 255) 1%,
+    rgba(187, 187, 187, 0) 70.9%
+  );
   background-color: #f8f8f8;
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
   opacity: 1;
@@ -20,12 +30,29 @@
 }
 
 .navigation {
+  box-sizing: border-box;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
   width: 100%;
-  padding: 0 !important;
+  padding: 0 30px !important;
+}
+
+.logo {
+  font-family: "Fontdiner Swanky", serif;
+  font-family: "Modak", system-ui;
+  font-family: "Michroma", sans-serif;
+  font-family: "Holtwood One SC", serif;
+  font-size: 30px;
+  font-style: normal;
+  font-weight: bold;
+  font-weight: 400;
+  color: #1d9bf8;
+  text-shadow:
+    2px 2px 1px #ffe6d4,
+    3px 3px 0px rgb(86 49 0 / 34%);
 }
 
 .logoutButton {
   padding: 8px 0 6px 0;
+  zoom: 1.2;
 }
diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
index a6d4900..e28e8ea 100644
--- a/frontend/src/components/Header/Header.tsx
+++ b/frontend/src/components/Header/Header.tsx
@@ -2,19 +2,21 @@
 
 import React from "react";
 import styles from "./Header.module.scss";
+import { ImExit } from "react-icons/im";
+
 export default function Header() {
   return (
     <header className={styles.header}>
       <div className={styles.navigationContainer}>
         <nav className={styles.navigation}>
-          <div className={styles.logo}>ls-chat</div>
-          <div className={styles.userNumber}>users</div>
-          <button
+          <span className={styles.logo}>What&apos;s up?</span>
+          <span className={styles.userNumber}>users</span>
+          <div
             className={styles.logoutButton}
             onClick={() => window.location.reload()}
           >
-            logout
-          </button>
+            <ImExit />
+          </div>
         </nav>
       </div>
     </header>
diff --git a/frontend/src/components/Modal/NestedModal.tsx b/frontend/src/components/Modal/NestedModal.tsx
index fa4deed..095120e 100644
--- a/frontend/src/components/Modal/NestedModal.tsx
+++ b/frontend/src/components/Modal/NestedModal.tsx
@@ -74,7 +74,7 @@ export default function NestedModal({
             onClick={handleClose}
             disabled={name === ""}
           >
-            送信
+            接続
           </Button>
         </Box>
       </Modal>
diff --git a/frontend/src/components/SendForm/SendForm.module.scss b/frontend/src/components/SendForm/SendForm.module.scss
index 7bb86d1..364417c 100644
--- a/frontend/src/components/SendForm/SendForm.module.scss
+++ b/frontend/src/components/SendForm/SendForm.module.scss
@@ -3,7 +3,8 @@
   min-height: 40px;
   margin: 3px auto 35px auto;
   input {
-    width: min(70vw, 400px);
-    margin-right: 5px;
+    width: min(80vw, 500px);
+    padding: 8px 8px 6px;
+    font-size: 18px;
   }
 }
diff --git a/frontend/src/components/SendForm/SendForm.tsx b/frontend/src/components/SendForm/SendForm.tsx
index 636952b..c2c7579 100644
--- a/frontend/src/components/SendForm/SendForm.tsx
+++ b/frontend/src/components/SendForm/SendForm.tsx
@@ -3,6 +3,8 @@
 import React, { useState } from "react";
 import { Socket } from "socket.io-client";
 import styles from "./SendForm.module.scss";
+import { IoIosSend } from "react-icons/io";
+import TextField from "@mui/material/TextField"; // TextFieldをインポート
 
 interface SendFormProps {
   socket: Socket;
@@ -21,18 +23,32 @@ export default function SendForm({ socket }: SendFormProps) {
 
   return (
     <div className={styles.sendForm}>
-      <input
-        type="text"
+      <TextField
         value={input}
         onChange={(e) => setInput(e.target.value)}
-        placeholder="Enter a message"
+        style={{ marginRight: "5px" }}
+        placeholder="メッセージを入力"
         onKeyPress={(e) => {
           if (e.key === "Enter") {
             sendMessage(); // Enterキーが押されたときにメッセージを送信
           }
         }}
+        fullWidth
+        variant="outlined"
+        margin="normal"
       />
-      <button onClick={sendMessage}>送信</button>
+      <div
+        onClick={sendMessage}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          zoom: 1.8,
+          marginTop: "5px",
+        }}
+      >
+        <IoIosSend />
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
index 4249b80..bfcfd5b 100644
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@@ -1,5 +1,5 @@
 :root {
-  --header-height: 6vh;
+  --header-height: 60px;
 }
 
 html {
@@ -13,7 +13,11 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol", "Noto Color Emoji";
-  background: white;
+  background: linear-gradient(
+    0deg,
+    rgb(181, 239, 249) 10.5%,
+    rgb(254, 254, 254) 86.8%
+  );
 }
 
 main {