remove icons, add Category container

@@ -4,12 +4,9 @@ import Header from "../../Components/Header";
 import Input from "../../Components/Input";
 import Button from "../../Components/Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faAddressBook,
-  faArrowDown,
-  faPlus,
-} from "@fortawesome/free-solid-svg-icons";
+import { faAddressBook } from "@fortawesome/free-solid-svg-icons";
 import { Link } from "react-router-dom";
+import Category from "../Category/CategoryContainer";
 
 const Wrapper = styled.div`
   display: grid;
@@ -72,34 +69,6 @@ const PeopleContainer = styled.div`
   border-top: 1px solid rgba(255, 255, 255, 0.5);
 `;
 
-const CategoryContainer = styled.div`
-  display: flex;
-  svg {
-    font-size: 20px;
-  }
-  span {
-    margin-left: 10px;
-    font-size: 20px;
-  }
-  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%;
@@ -188,17 +157,7 @@ export default ({ data, location, message, onSubmit }) => {
               <ItemText>People</ItemText>
             </StyledLink>
           </PeopleContainer>
-          <CategoryContainer>
-            <ItemListContainer>
-              <ItemList>
-                <FontAwesomeIcon icon={faArrowDown} /> Category
-                <FontAwesomeIcon icon={faPlus} />
-                <Item>
-                  <ItemText># Music</ItemText>
-                </Item>
-              </ItemList>
-            </ItemListContainer>
-          </CategoryContainer>
+          <Category />
         </ChatMenuContainer>
         <ChatScreenContainer>
           <ChatScreenHeader>