diff --git a/src/app/page.module.scss b/src/app/page.module.scss
index 1c7448f..3754053 100644
--- a/src/app/page.module.scss
+++ b/src/app/page.module.scss
@@ -3,7 +3,7 @@
   gap: 1em;
   padding: 1em;
 
-  .text_area {
+  .text_content_area {
     flex: 1;
   }
   .post_button {
@@ -15,8 +15,42 @@
   max-width: 90%;
   margin: auto;
   
+  
   .content_list {
     display: inline-block;
     width: 25%;
   }
+
+  .content  {
+    border-bottom: 1px solid #ccc;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .post_form{
+    .text_content_area {
+      position: fixed;
+      bottom: 0;
+      left: 40%;
+      width: 40%;
+      padding: 15px;
+      background-color: #fff;
+    }
+    .text_name_area {
+      position: fixed;
+      bottom: 10px;
+      left: 0;
+      width: 40%;
+      padding: 15px;
+      background-color: #fff;
+    } 
+
+    .post_button {
+      position: fixed;
+      bottom: 25px;
+      right: 0;
+      width: 20%;
+      background-color: #fff;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 16d088c..0880332 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button, Textarea } from '@mantine/core';
+import { Button, TextInput, Textarea } from '@mantine/core';
 import React, { useState } from 'react';
 import styles from './page.module.scss';
 
@@ -29,38 +29,53 @@ export default function HomePage() {
     { id: 2, postedBy: '田中次郎', postedAt: '2024/01/01 16:00:01', content: '無事です' },
     { id: 3, postedBy: '田中三郎', postedAt: '2024/01/01 16:00:02', content: '無事です' },
   ]);
+  const [postName,setPostName] = useState<string>('');
+  
   const handlePostContentChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     setPostContent(event.target.value);
   };
+
+  const handlePostNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setPostName(event.target.value);
+  }
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setPosts([
       ...posts,
       {
         id: posts[posts.length - 1].id + 1,
-        postedBy: '田中四郎',
+        postedBy: postName,
         postedAt: getFormattedDate(new Date()),
         content: postContent,
       },
     ]);
+    setPostName('');
     setPostContent('');
   };
   return (
     <main>
       <form className={styles.post_form} onSubmit={handleSubmit}>
+        <TextInput
+          className={styles.text_name_area}
+          value={postName}
+          onChange={handlePostNameChange}
+          placeholder="名前を入力"
+        />
         <Textarea
-          className={styles.text_area}
+          className={styles.text_content_area}
           value={postContent}
           onChange={handlePostContentChange}
           placeholder="投稿内容を入力"
         />
+      
         <Button type="submit" className={styles.post_button} variant="outline" disabled={!postContent}>
           投稿
         </Button>
       </form>
       <div className={styles.content_list__wrapper}>
         {posts.map((post) => (
-          <div key={post.id}>
+          <div key={post.id} className={styles.content}>
             <span className={styles.content_list}>{post.id}</span>
             <span className={styles.content_list}>{post.postedBy}</span>
             <span className={styles.content_list}>{post.postedAt}</span>