diff --git a/package.json b/package.json
index 19b56dd..5915cdf 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "classnames": "^2.2.6",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-scripts": "3.1.1"
+    "react-scripts": "3.1.1",
+    "styled-components": "^4.3.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -27,5 +29,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "babel-plugin-macros": "^2.6.1"
   }
 }
diff --git a/public/images/placeholder.png b/public/images/placeholder.png
new file mode 100644
index 0000000..96e1121
Binary files /dev/null and b/public/images/placeholder.png differ
diff --git a/public/index.html b/public/index.html
index 80ffd85..40dc71d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,18 +9,12 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+    <!--  Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
diff --git a/public/logo192.png b/public/logo192.png
deleted file mode 100644
index fc44b0a..0000000
Binary files a/public/logo192.png and /dev/null differ
diff --git a/public/logo512.png b/public/logo512.png
deleted file mode 100644
index a4e47a6..0000000
Binary files a/public/logo512.png and /dev/null differ
diff --git a/public/manifest.json b/public/manifest.json
index e4c94e6..fa02500 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -6,17 +6,7 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }	    
+    } 
   ],
   "start_url": ".",
   "display": "standalone",
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 61e4b72..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,45 +0,0 @@
-/* color theme *
-*
- #96ffff
- #52eeff
- #17d8ff
- #5cbcff
- #a696ff
- #e064e6
- #ff009f
-*/
-
-
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.js b/src/App.js
index 31d8b33..f4fb7d4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,33 @@
 import React from 'react';
+import styled from 'styled-components/macro';
+import BlogPostContent from './BlogPostContent';
+import { Header, Footer } from './components';
+import Blog from './containers/Blog';
 
-import BlogPostContent from './BlogPostContent'
+const Grid = styled.div`
+  background: ivory;
+  font-size: 16px;
+  display: grid;
+  grid-template-columns: 140px 50px auto 50px 140px;
+  grid-template-areas:
+  "header header header header header"
+  ". main main main ."
+  "footer footer footer footer footer"
+`
 
-import { Header, Footer } from './components'
-import Blog from './containers/Blog'
+const Main = styled.div`
+  grid-area: main;
+`
 
 function App() {
   return (
-    <div className="App">
+    <Grid>
       <Header />
-      <div className="content">
+      <Main>
         <Blog content={BlogPostContent}/>
-      </div>
+      </Main>
       <Footer />
-    </div>
+    </Grid>
   );
 }
 
diff --git a/src/components/Atoms/Avatar/index.js b/src/components/Atoms/Avatar/index.js
index f133ce4..29247f5 100644
--- a/src/components/Atoms/Avatar/index.js
+++ b/src/components/Atoms/Avatar/index.js
@@ -1,12 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components/macro';
 
 const Avatar = (props) => {
   const { image, altText } = props;
-
+  const AvatarStyle = styled.img`
+    max-width: 250px;
+  `
 
   return (
-    <img src={image} className="avatar" alt={altText} />
+    <AvatarStyle src={image} alt={altText} />
   );
 };
 
diff --git a/src/components/Atoms/Button/index.js b/src/components/Atoms/Button/index.js
index dd5915a..32a01d4 100644
--- a/src/components/Atoms/Button/index.js
+++ b/src/components/Atoms/Button/index.js
@@ -1,23 +1,23 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import styled from 'styled-components/macro';
 
-const Button = (props) => {
-  const { children, ...other } = props;
+export const Button = styled.button`
+  background:  ${props => props.secondary ? "#fff" : "#5CBCFF"};
+  background-image:  ${props => props.secondary ? "none" : "linear-gradient(to bottom, #5CBCFF, #A696FF)"};
+  border-radius: 4px;
+  color: ${props => props.secondary ? "#a696ff" : "#fff"};
+  border: solid #A696FF 1px;
+  text-decoration: none;
+  display: inline-block;
+  cursor: pointer;
+  padding: 10px 15px;
+  &:hover {
+    background: #fff;
+    color: #A696FF;
+    text-decoration: none;
+    opacity: 0.5;
+  }`;
 
-
-  return (
-    <button className="button" {...other} >
-      {children}
-    </button>
-  );
-};
-
-Button.propTypes = {
-  children: PropTypes.node
-};
-
-Button.defaultProps = {
-  children: null
-};
-
-export default Button;
+export const SuperLike = styled(Button)`
+  font-size: 25px;
+  font-weight: bold;
+`
\ No newline at end of file
diff --git a/src/components/Atoms/Content/index.js b/src/components/Atoms/Content/index.js
index b3133bc..cd18414 100644
--- a/src/components/Atoms/Content/index.js
+++ b/src/components/Atoms/Content/index.js
@@ -6,7 +6,7 @@ const Content = (props) => {
 
 
   return (
-    <article className="content"  dangerouslySetInnerHTML={{ __html: blogText }} />
+    <article dangerouslySetInnerHTML={{ __html: blogText }} />
   );
 };
 
diff --git a/src/components/Atoms/ContentList/index.js b/src/components/Atoms/ContentList/index.js
index 4bb757e..962eba5 100644
--- a/src/components/Atoms/ContentList/index.js
+++ b/src/components/Atoms/ContentList/index.js
@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
 const ContentList = (props) => {
   const { listElements } = props;
   return (
-    <ul className="contentList">
+    <ul>
       {
         Object.keys(listElements).map((key, index) => {
           return (
-            <li className="contentList__element" key={`contentList__element-${index}`}>
+            <li key={`contentList__element-${index}`}>
             <b>{key}</b>: {listElements[key]}
             </li>
           )
diff --git a/src/components/Atoms/TextField/index.js b/src/components/Atoms/TextField/index.js
index 36cde7a..c0fd91c 100644
--- a/src/components/Atoms/TextField/index.js
+++ b/src/components/Atoms/TextField/index.js
@@ -1,11 +1,8 @@
-import React from 'react';
-
-const TextField = (props) => {
-  const { ...other } = props;
-
-  return (
-    <textarea className='textField' {...other} />
-  );
-};
+import styled from 'styled-components'
 
+const TextField = styled.textarea`
+  width: 800px;
+  height: 250px;
+  display: block;
+`
 export default TextField;
diff --git a/src/components/Molecules/Comments/index.js b/src/components/Molecules/Comments/index.js
index 665f46c..ccd4420 100644
--- a/src/components/Molecules/Comments/index.js
+++ b/src/components/Molecules/Comments/index.js
@@ -1,23 +1,47 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components/macro';
 import Avatar from './../../Atoms/Avatar';
 
 const Comments = (props) => {
   const { comments, ...other } = props;
 
+  const Comment = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+  `;
+
+  const CommentAvatar = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+    background-color: ivory;
+  `;
+
+  const CommentContent = styled.div`
+    background-color: white;
+    padding: 40px;
+    border-radius: 10%;
+  `;
+
   return (
-    <section className="comments" {...other}>
-      <div className="comment">
-        <div className="comment__avatar">
+    <section {...other}>
+      <Comment>
+        <CommentAvatar>
           <Avatar image={comments.avatar} altText={comments.avatarName} />
-          <span className="comment__avatarName">
+          <span>
             {comments.avatarName}
           </span>
-        </div>
-        <div className="comment__content">
+        </CommentAvatar>
+        <CommentContent>
           {comments.commentText}
-        </div>
-      </div>
+        </CommentContent>
+      </Comment>
     </section>
   );
 };
diff --git a/src/components/Molecules/Profile/index.js b/src/components/Molecules/Profile/index.js
new file mode 100644
index 0000000..8c82773
--- /dev/null
+++ b/src/components/Molecules/Profile/index.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import Button from '../../Atoms/Button';
+import './profile.css';
+
+const Profile = (props) => {
+  const { image, imageAlt } = props;
+
+  return (
+    <div className="profile">
+      <img className="profile__image" src={image} alt={imageAlt} />
+      <Button className="superlike profile__button">
+        <span aria-label="heart black" role="img">
+          🖤
+        </span>
+      </Button>
+    </div>
+  );
+};
+
+export default Profile;
diff --git a/src/components/Organisms/CommentArea/index.js b/src/components/Organisms/CommentArea/index.js
new file mode 100644
index 0000000..3a24052
--- /dev/null
+++ b/src/components/Organisms/CommentArea/index.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Comments from  '../../Molecules/Comments';
+import {Button} from '../../Atoms/Button';
+import styled from 'styled-components/macro';
+import TextField from '../../Atoms/TextField';
+
+const CommentArea = (props) => {
+  const {comments} = props;
+  const CommentForm = styled.form`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 20px;
+  `
+
+  const CommentFormActions = styled.div`
+    display: flex;
+    justify-content: center;
+    width: 800px;
+  `
+
+  const CommentFormActionsButton = styled(Button)`
+    margin: 20px 5px;
+  `
+
+  return (
+  <section className="commentArea">
+      <Comments comments={comments}/>
+      <CommentForm onSubmit={()=>(console.log('submitted'))}>
+        <TextField />
+        <CommentFormActions>
+          <CommentFormActionsButton>Submit</CommentFormActionsButton>
+          <CommentFormActionsButton secondary>Decline</CommentFormActionsButton>
+        </CommentFormActions>
+      </CommentForm>
+    </section>
+  );
+};
+
+CommentArea.propTypes = {
+  comments:
+    PropTypes.shape({
+      avatar: PropTypes.string,
+      avatarName: PropTypes.string,
+      commentText: PropTypes.string
+  }).isRequired
+};
+
+export default CommentArea;
diff --git a/src/components/Organisms/CommentForm/index.js b/src/components/Organisms/CommentForm/index.js
deleted file mode 100644
index 6e42aa3..0000000
--- a/src/components/Organisms/CommentForm/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Comments from  '../../Molecules/Comments';
-import Button from '../../Atoms/Button';
-import TextField from '../../Atoms/TextField';
-
-const CommentForm = (props) => {
-  const {comments} = props;
-
-  return (
-  <section className="commentForm">
-    <Comments comments={comments}/>
-    <hr className="divider"/>
-    <TextField />
-    <Button>Submit</Button>
-  </section>
-  );
-};
-
-CommentForm.propTypes = {
-  comments:
-    PropTypes.shape({
-      avatar: PropTypes.string,
-      avatarName: PropTypes.string,
-      commentText: PropTypes.string
-  }).isRequired
-};
-
-export default CommentForm;
diff --git a/src/components/Organisms/Footer/index.js b/src/components/Organisms/Footer/index.js
index 332ee00..836de18 100644
--- a/src/components/Organisms/Footer/index.js
+++ b/src/components/Organisms/Footer/index.js
@@ -1,9 +1,15 @@
 import React from 'react';
+import styled from 'styled-components/macro';
+
+const FooterStyle = styled.footer`
+ grid-area: footer;
+`
+
 const Footer = () => {
   return (
-  <footer>
+  <FooterStyle>
   made by <a href="https://github.com/Lelith/playground-styled" target="_blank" rel="noopener noreferrer" info="github repository"> Kathrin </a>
-  </footer>
+  </FooterStyle>
   );
 };
 
diff --git a/src/components/Organisms/Header/index.js b/src/components/Organisms/Header/index.js
index d6f24cf..63c967b 100644
--- a/src/components/Organisms/Header/index.js
+++ b/src/components/Organisms/Header/index.js
@@ -1,10 +1,16 @@
 import React from 'react';
-import Logo from './logo.png'
+import Logo from './logo.png';
+import styled from 'styled-components/macro';
+
+const HeaderStyle = styled.header`
+  grid-area: header;
+  background: rgba(224, 100, 230, 0.3);
+`;
 const Header = () => {
   return (
-  <header className="header">
+  <HeaderStyle>
     <img src={Logo} alt="Pawclub" className="header__logo"/>
-  </header>
+  </HeaderStyle>
   );
 };
 
diff --git a/src/components/Organisms/Profile/index.js b/src/components/Organisms/Profile/index.js
new file mode 100644
index 0000000..e97258f
--- /dev/null
+++ b/src/components/Organisms/Profile/index.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {SuperLike} from '../../Atoms/Button';
+import styled from 'styled-components/macro';
+
+const Profile = (props) => {
+  const {image, imageAlt} = props;
+
+  const ProfileWrapper = styled.div`
+    position: relative;
+  `;
+
+  const ProfileButton = styled(SuperLike)`
+    position: absolute;
+    left: 20px;
+    bottom: 20px;
+  `
+  const ProfileImage = styled.img`
+    max-width: 800px;
+    display: inline-block;
+    border: 3px solid silver;
+    border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
+    position: relative;
+    &:before {
+      content: '';
+      border: 2px solid #353535;
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
+      border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
+    }
+  `
+  return (
+    <ProfileWrapper>
+      <ProfileImage src={image} alt={imageAlt} />
+      <ProfileButton>
+        <span aria-label="heart black" role="img">
+          🖤
+        </span>
+      </ProfileButton>
+    </ProfileWrapper>
+  );
+};
+
+Profile.propTypes = {
+  image: PropTypes.string,
+  imageAlt: PropTypes.string
+};
+
+Profile.defaultProps = {
+  image: '/images/placeholder.png',
+  imageAlt: 'Pawclub Member'
+};
+
+export default Profile;
diff --git a/src/components/index.js b/src/components/index.js
index 6ac1229..6d0e4a2 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,21 +1,21 @@
 import Avatar from './Atoms/Avatar';
-import Button from './Atoms/Button';
 import ContentList from './Atoms/ContentList';
 import Content from './Atoms/Content';
 import TextField from './Atoms/TextField';
 import Comments from './Molecules/Comments';
-import CommentForm from './Organisms/CommentForm';
+import CommentArea from './Organisms/CommentArea';
 import Header from './Organisms/Header';
 import Footer from './Organisms/Footer';
+import Profile from './Organisms/Profile';
 
 export {
   Avatar,
-  Button,
   ContentList,
   Content,
   TextField,
   Comments,
-  CommentForm,
+  CommentArea,
+  Profile,
   Header,
   Footer
 };
\ No newline at end of file
diff --git a/src/containers/Blog/index.js b/src/containers/Blog/index.js
index c55f98c..dbb1f4c 100644
--- a/src/containers/Blog/index.js
+++ b/src/containers/Blog/index.js
@@ -1,15 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {ContentList, Content, CommentForm } from '../../components';
+import {ContentList, Content, CommentArea, Profile} from '../../components';
+import WrapperComponent from '../WrapperComponent';
+
+import styled from 'styled-components/macro';
+
+const BlogContainer = styled.section`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+`
+const Wrapper = styled(WrapperComponent)`
+  background-color: SkyBlue;
+  margin: 25px;
+`;
+
 const Blog = (props) => {
   const { content } = props;
   return (
-    <section className="blogContainer">
-      <img src={content.image} alt={content.imageAlt} />
+    <BlogContainer>
+      <Wrapper headline="hello">CSSConf Budapest!</Wrapper>
+      <Profile image = {content.image} imageAlt={content.imageAlt}/>
       <ContentList listElements={content.list} />
       <Content blogText={content.blogText} />
-      <CommentForm comments={content.comments}/>
-    </section>
+      <CommentArea comments={content.comments}/>
+    </BlogContainer>
   );
 };
 
diff --git a/src/containers/Wrapper.js b/src/containers/Wrapper.js
new file mode 100644
index 0000000..2b523e4
--- /dev/null
+++ b/src/containers/Wrapper.js
@@ -0,0 +1,6 @@
+import styled from 'styled-components/macro';
+
+const Wrapper = styled.div`
+  border: solid 1px purple;
+`
+export default Wrapper
\ No newline at end of file
diff --git a/src/containers/WrapperComponent.js b/src/containers/WrapperComponent.js
new file mode 100644
index 0000000..6c282a0
--- /dev/null
+++ b/src/containers/WrapperComponent.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Wrapper from './Wrapper';
+import styled from 'styled-components/macro';
+
+const WrapperComponent = ({headline, children, ...other}) => {
+
+const StyledWrapper = styled(Wrapper)`
+  display: flex;
+`
+const Headline = styled.h3`
+  color: Plum;
+`
+  return (
+      <StyledWrapper {...other}>
+        <Headline>{headline}</Headline>
+        {children}
+      </StyledWrapper>
+  );
+};
+export default WrapperComponent;
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 4a1df4d..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
diff --git a/src/index.js b/src/index.js
index 87d1be5..82c1a6b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
diff --git a/yarn.lock b/yarn.lock
index b9360c8..112b4ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -814,6 +814,23 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-9.0.1.tgz#c27b391d8457d1e893f1eddeaf5e5412d12ffbb5"
   integrity sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==
 
+"@emotion/is-prop-valid@^0.8.1":
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.2.tgz#b9692080da79041683021fcc32f96b40c54c59dc"
+  integrity sha512-ZQIMAA2kLUWiUeMZNJDTeCwYRx1l8SQL0kHktze4COT22occKpDML1GDUXP5/sxhOMrZO8vZw773ni4H5Snrsg==
+  dependencies:
+    "@emotion/memoize" "0.7.2"
+
+"@emotion/memoize@0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.2.tgz#7f4c71b7654068dfcccad29553520f984cc66b30"
+  integrity sha512-hnHhwQzvPCW1QjBWFyBtsETdllOM92BfrKWbUTmh9aeOlcVOiXvlPsK4104xH8NsaKfg86PTFsWkueQeUfMA/w==
+
+"@emotion/unitless@^0.7.0":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
+  integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==
+
 "@hapi/address@2.x.x":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.0.tgz#d86223d40c73942cc6151838d9f264997e6673f9"
@@ -1830,7 +1847,7 @@ babel-plugin-jest-hoist@^24.9.0:
   dependencies:
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-macros@2.6.1:
+babel-plugin-macros@2.6.1, babel-plugin-macros@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.6.1.tgz#41f7ead616fc36f6a93180e89697f69f51671181"
   integrity sha512-6W2nwiXme6j1n2erPOnmRiWfObUhWH7Qw1LMi9XZy8cj+KtESu3T6asZvtk5bMQQjX8te35o7CFueiSdL/2NmQ==
@@ -1844,6 +1861,21 @@ babel-plugin-named-asset-import@^0.3.3:
   resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.3.tgz#9ba2f3ac4dc78b042651654f07e847adfe50667c"
   integrity sha512-1XDRysF4894BUdMChT+2HHbtJYiO7zx5Be7U6bT8dISy7OdyETMGIAQBMPQCsY1YRf0xcubwnKKaDr5bk15JTA==
 
+"babel-plugin-styled-components@>= 1":
+  version "1.10.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz#f8782953751115faf09a9f92431436912c34006b"
+  integrity sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-module-imports" "^7.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
@@ -2245,6 +2277,11 @@ camelcase@^5.0.0, camelcase@^5.2.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -2356,6 +2393,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
 clean-css@4.2.x:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
@@ -2734,6 +2776,11 @@ css-blank-pseudo@^0.1.4:
   dependencies:
     postcss "^7.0.5"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+
 css-color-names@0.0.4, css-color-names@^0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -2804,6 +2851,15 @@ css-select@^2.0.0:
     domutils "^1.7.0"
     nth-check "^1.0.2"
 
+css-to-react-native@^2.2.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.2.tgz#e75e2f8f7aa385b4c3611c52b074b70a002f2e7d"
+  integrity sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^3.3.0"
+
 css-tree@1.0.0-alpha.29:
   version "1.0.0-alpha.29"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.29.tgz#3fa9d4ef3142cbd1c301e7664c1f352bd82f5a39"
@@ -5040,6 +5096,11 @@ is-typedarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
+is-what@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.3.1.tgz#79502181f40226e2d8c09226999db90ef7c1bcbe"
+  integrity sha512-seFn10yAXy+yJlTRO+8VfiafC+0QJanGLMPTBWLrJm/QPauuchy0UXh8B6H5o9VA8BAzk0iYievt6mNp6gfaqA==
+
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -5974,6 +6035,11 @@ mem@^4.0.0:
     mimic-fn "^2.0.0"
     p-is-promise "^2.0.0"
 
+memoize-one@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
+  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
+
 memory-fs@^0.4.0, memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -5982,6 +6048,13 @@ memory-fs@^0.4.0, memory-fs@^0.4.1:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
+merge-anything@^2.2.4:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.1.tgz#e9bccaec1e49ec6cb5f77ca78c5770d1a35315e6"
+  integrity sha512-dYOIAl9GFCJNctSIHWOj9OJtarCjsD16P8ObCl6oxrujAG+kOvlwJuOD9/O9iYZ9aTi1RGpGTG9q9etIvuUikQ==
+  dependencies:
+    is-what "^3.3.1"
+
 merge-deep@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2"
@@ -7709,7 +7782,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.3"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -7923,7 +7996,7 @@ react-error-overlay@^6.0.1:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.1.tgz#b8d3cf9bb991c02883225c48044cb3ee20413e0f"
   integrity sha512-V9yoTr6MeZXPPd4nV/05eCBvGH9cGzc52FN8fs0O0TVQ3HYYf1n7EgZVtHbldRq5xU9zEzoXIITjYNIfxDDdUw==
 
-react-is@^16.8.1, react-is@^16.8.4:
+react-is@^16.6.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.9.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
   integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
@@ -9026,6 +9099,25 @@ style-loader@1.0.0:
     loader-utils "^1.2.3"
     schema-utils "^2.0.1"
 
+styled-components@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.3.2.tgz#4ca81918c812d3006f60ac5fdec7d6b64a9509cc"
+  integrity sha512-NppHzIFavZ3TsIU3R1omtddJ0Bv1+j50AKh3ZWyXHuFvJq1I8qkQ5mZ7uQgD89Y8zJNx2qRo6RqAH1BmoVafHw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.0.0"
+    "@emotion/is-prop-valid" "^0.8.1"
+    "@emotion/unitless" "^0.7.0"
+    babel-plugin-styled-components ">= 1"
+    css-to-react-native "^2.2.2"
+    memoize-one "^5.0.0"
+    merge-anything "^2.2.4"
+    prop-types "^15.5.4"
+    react-is "^16.6.0"
+    stylis "^3.5.0"
+    stylis-rule-sheet "^0.0.10"
+    supports-color "^5.5.0"
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -9035,12 +9127,22 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylis-rule-sheet@^0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
+  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
+
+stylis@^3.5.0:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
+  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
   integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==