update componets style

@@ -7,28 +7,42 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAddressBook, faMusic } from "@fortawesome/free-solid-svg-icons";
 
 const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  display: grid;
   width: 100%;
   height: 100%;
+  grid-template-rows: 80px auto min-content;
+  grid-template-areas:
+    "Header"
+    "Workspace";
+  .Header {
+    box-shadow: none;
+  }
 `;
 
 const ChatWrapper = styled.div`
   display: flex;
   flex-direction: row;
   width: 100%;
+  height: 100%;
+  grid-template-columns: 200px auto;
+  grid-area: "Workspace";
 `;
 
 const ChatMenuContainer = styled.div`
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  width: 200px;
   height: 100%;
+  background-color: #667aff;
+  color: white;
+  grid-template-rows: 80px 1fr 1fr;
 `;
 
 const TitleContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  font-size: 20px;
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
 `;
 
 const Title = styled.span`
@@ -43,27 +57,55 @@ const PeopleContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  svg {
+    font-size: 20px;
+  }
+  span {
+    margin-left: 10px;
+    font-size: 20px;
+  }
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
 `;
 
 const CategoryContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  svg {
+    font-size: 20px;
+  }
+  span {
+    margin-left: 10px;
+    font-size: 20px;
+  }
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
 `;
 
 const ChatScreenContainer = styled.div`
+  display: grid;
+  width: 100%;
+  height: 100%;
+  grid-template-rows: 70px 1fr;
+`;
+
+const ChatScreenHeader = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 `;
 
+const ChatScreenBox = styled.div``;
+
 export default ({ data }) => {
   return (
     <Wrapper>
-      <Header />
-      <ChatWrapper>
+      <Header text={"KhuChat"} />
+      <ChatWrapper className="ChatWrapper">
         <ChatMenuContainer>
           <TitleContainer>
-            <Title>{data}</Title>
+            <Title>First Room</Title>
           </TitleContainer>
           <PeopleContainer>
             <FontAwesomeIcon icon={faAddressBook} />
@@ -75,8 +117,13 @@ export default ({ data }) => {
           </CategoryContainer>
         </ChatMenuContainer>
         <ChatScreenContainer>
-          <Input placeholder={"Enter any words"} />
-          <Button text={"Submit"} />
+          <ChatScreenHeader>
+            <Title>Selected Menu Title</Title>
+          </ChatScreenHeader>
+          <ChatScreenBox>
+            <Input placeholder={"Enter any words"} />
+            <Button text={"Submit"} />
+          </ChatScreenBox>
         </ChatScreenContainer>
       </ChatWrapper>
     </Wrapper>