update ChatScreen style

 import React from "react";
 import React from "react";
-export default () => {
-  return <div>Chat screen</div>;
+import styled from "styled-components";
+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";
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`;
+
+const ChatWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+`;
+
+const ChatMenuContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Title = styled.span`
+  font-family: "Chelsea Market", cursive;
+`;
+
+const ItemText = styled.span`
+  font-family: "Ubuntu", sans-serif;
+`;
+
+const PeopleContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const CategoryContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ChatScreenContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export default ({ data }) => {
+  return (
+    <Wrapper>
+      <Header />
+      <ChatWrapper>
+        <ChatMenuContainer>
+          <TitleContainer>
+            <Title>{data}</Title>
+          </TitleContainer>
+          <PeopleContainer>
+            <FontAwesomeIcon icon={faAddressBook} />
+            <ItemText>People</ItemText>
+          </PeopleContainer>
+          <CategoryContainer>
+            <FontAwesomeIcon icon={faMusic} />
+            <ItemText>Music</ItemText>
+          </CategoryContainer>
+        </ChatMenuContainer>
+        <ChatScreenContainer>
+          <Input placeholder={"Enter any words"} />
+          <Button text={"Submit"} />
+        </ChatScreenContainer>
+      </ChatWrapper>
+    </Wrapper>
+  );
 };
 };