add component update style

@@ -4,7 +4,11 @@ import Header from "./Header";
 import Input from "./Input";
 import Button from "./Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAddressBook, faMusic } from "@fortawesome/free-solid-svg-icons";
+import {
+  faAddressBook,
+  faArrowDown,
+  faPlus,
+} from "@fortawesome/free-solid-svg-icons";
 
 const Wrapper = styled.div`
   display: grid;
@@ -69,8 +73,6 @@ const PeopleContainer = styled.div`
 
 const CategoryContainer = styled.div`
   display: flex;
-  justify-content: center;
-  align-items: center;
   svg {
     font-size: 20px;
   }
@@ -81,6 +83,22 @@ const CategoryContainer = styled.div`
   border-top: 1px solid rgba(255, 255, 255, 0.5);
 `;
 
+const ItemListContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 15px;
+`;
+
+const ItemList = styled.ul`
+  align-items: center;
+  svg {
+    margin: 0px 10px;
+  }
+`;
+
+const Item = styled.li``;
+
 const ChatScreenContainer = styled.div`
   display: grid;
   width: 100%;
@@ -96,7 +114,40 @@ const ChatScreenHeader = styled.div`
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 `;
 
-const ChatScreenBox = styled.div``;
+const ChatScreenBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`;
+
+const InputWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  margin-bottom: 10px;
+  width: 100%;
+`;
+
+const InputContainer = styled.div`
+  position: fixed;
+  bottom: 0;
+  padding: 10px;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+  width: 70%;
+  button {
+    width: 10%;
+  }
+  input {
+    width: 70%;
+  }
+  border: 1px solid rgba(0, 0, 0, 0.7);
+  border-radius: 10px;
+`;
 
 export default ({ data }) => {
   return (
@@ -112,8 +163,21 @@ export default ({ data }) => {
             <ItemText>People</ItemText>
           </PeopleContainer>
           <CategoryContainer>
-            <FontAwesomeIcon icon={faMusic} />
-            <ItemText>Music</ItemText>
+            <ItemListContainer>
+              <ItemList>
+                <FontAwesomeIcon icon={faArrowDown} /> Category
+                <FontAwesomeIcon icon={faPlus} />
+                <Item>
+                  <ItemText># Music</ItemText>
+                </Item>
+                <Item>
+                  <ItemText># Music</ItemText>
+                </Item>
+                <Item>
+                  <ItemText># Music</ItemText>
+                </Item>
+              </ItemList>
+            </ItemListContainer>
           </CategoryContainer>
         </ChatMenuContainer>
         <ChatScreenContainer>
@@ -121,8 +185,12 @@ export default ({ data }) => {
             <Title>Selected Menu Title</Title>
           </ChatScreenHeader>
           <ChatScreenBox>
-            <Input placeholder={"Enter any words"} />
-            <Button text={"Submit"} />
+            <InputWrapper>
+              <InputContainer>
+                <Input placeholder={"Enter any words"} />
+                <Button text={"Submit"} />
+              </InputContainer>
+            </InputWrapper>
           </ChatScreenBox>
         </ChatScreenContainer>
       </ChatWrapper>