diff --git a/frontend/src/components/welcome/welcome.js b/frontend/src/components/welcome/welcome.js
index 87eeb5ac1..45a67261f 100644
--- a/frontend/src/components/welcome/welcome.js
+++ b/frontend/src/components/welcome/welcome.js
@@ -1,285 +1,117 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import 'typeface-roboto'
-import {
-  withStyles,
-  Grid,
-  Typography,
-  List,
-  ListItem,
-  ListItemText,
-  ListItemIcon,
-  Avatar,
-  Container
-} from '@material-ui/core'
-
-import {
-  AccountBalanceWallet,
-  Work,
-  Apps,
-  Assignment,
-  GroupWork
-} from '@material-ui/icons'
-
-import './mailchimp.css'
-
-import { injectIntl, FormattedMessage } from 'react-intl'
-
-import TopBarContainer from '../../containers/topbar'
-import Bottom from '../../components/bottom/bottom'
-import messages from './messages'
-import mainStyles from '../styles/style'
-
-const freelancerImage = require('../../images/collections/collection-flat-community.svg')
-const companiesImage = require('../../images/collections/collection-flat-companies.svg')
-const teamImage = require('../../images/welcome-teamwork.png')
-
-import {
-  MainTitle,
-  MainList,
-  ResponsiveImage,
-  Section
-} from './components/CommonStyles'
-
-const styles = theme => mainStyles(theme)
-
-class Welcome extends Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      value: 0
-    }
-  }
-
-  componentDidMount () {
-
-  }
-
-  componentWillUnmount () {
-
-  }
-
-  render () {
-    const { classes } = this.props
-
-    return (
-      <div className={ classes.root }>
-        <TopBarContainer ref='intro' hide />
-        <Container>
-          <Section ref='contrib'>
-            <Grid container spacing={ 3 }>
-              <Grid item xs={ 12 } sm={ 6 }>
-                <MainTitle left>
-                  <Typography variant='h5' gutterBottom>
-                    <FormattedMessage
-                      id='welcome.headline.forfreelancers'
-                      defaultMessage='For contributors and freelancers'
+const Welcome = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={ classes.root }>
+      <TopBarContainer ref='intro' hide />
+      <Container>
+        <Section ref='contrib'>
+          <Grid container spacing={ 3 }>
+            <Grid item xs={ 12 } sm={ 6 }>
+              <MainTitle left>
+                <Typography variant='h5' gutterBottom>
+                  <FormattedMessage
+                    id='welcome.headline.forfreelancers'
+                    defaultMessage='For contributors and freelancers'
+                  />
+                </Typography>
+              </MainTitle>
+              <MainList>
+                <List>
+                  <ListItem className={ classes.listIconTop }>
+                    <ListItemIcon>
+                      <Avatar className={ classes.iconFill }>
+                        <Apps />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={ props.intl.formatMessage(
+                        messages.welcomeFreelancersItemOnePrimary
+                      ) }
+                      secondary={ props.intl.formatMessage(
+                        messages.welcomeFreelancersItemOneSecondary
+                      ) }
                     />
-                  </Typography>
-                </MainTitle>
-                <MainList>
-                  <List>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <Apps />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeFreelancersItemOnePrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeFreelancersItemOneSecondary
-                        ) }
-                      />
-                    </ListItem>
-
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <Work />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeFreelancersItemTwoPrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeFreelancersItemTwoSecondary
-                        ) }
-                      />
-                    </ListItem>
-
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <AccountBalanceWallet />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeFreelancersItemThreePrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeFreelancersItemThreeSecondary
-                        ) }
-                      />
-                    </ListItem>
-                  </List>
-                </MainList>
-              </Grid>
-              <Grid item xs={ 12 } sm={ 6 }>
-                <ResponsiveImage width='800' src={ freelancerImage } />
-              </Grid>
-            </Grid>
-          </Section>
-        </Container>
-        <Section ref='companies' alternative className={ classes.bgContrast }>
-          <Container>
-            <Grid container spacing={ 3 }>
-              <Grid item xs={ 12 } sm={ 6 }>
-                <MainTitle left>
-                  <Typography variant='h5' gutterBottom>
-                    <FormattedMessage
-                      id='welcome.tagline.companies.main.headline'
-                      defaultMessage='For maintainers and organizations'
+                  </ListItem>
+
+                  <ListItem className={ classes.listIconTop }>
+                    <ListItemIcon>
+                      <Avatar className={ classes.iconFill }>
+                        <Work />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={ props.intl.formatMessage(
+                        messages.welcomeFreelancersItemTwoPrimary
+                      ) }
+                      secondary={ props.intl.formatMessage(
+                        messages.welcomeFreelancersItemTwoSecondary
+                      ) }
+                    />
+                  </ListItem>
+
+                  <ListItem className={ classes.listIconTop }>
+                    <ListItemIcon>
+                      <Avatar className={ classes.iconFill }>
+                        <AccountBalanceWallet />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={ props.intl.formatMessage(
+                        messages.welcomeFreelancersItemThreePrimary
+                      ) }
+                      secondary={ props.intl.formatMessage(
+                        messages.welcomeFreelancersItemThreeSecondary
+                      ) }
                     />
-                  </Typography>
-                </MainTitle>
-                <MainList>
-                  <List>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <Assignment />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeCompaniesItemOnePrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeCompaniesItemOneSecondary
-                        ) }
-                      />
-                    </ListItem>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <GroupWork />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeCompaniesItemTwoPrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeCompaniesItemTwoSecondary
-                        ) }
-                      />
-                    </ListItem>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <AccountBalanceWallet />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeCompaniesItemThreePrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeCompaniesItemThreeSecondary
-                        ) }
-                      />
-                    </ListItem>
-                  </List>
-                </MainList>
-              </Grid>
-              <Grid item xs={ 12 } sm={ 6 }>
-                <ResponsiveImage width='600' src={ companiesImage } />
-              </Grid>
+                  </ListItem>
+                </List>
+              </MainList>
+            </Grid>
+            <Grid item xs={ 12 } sm={ 6 }>
+              <ResponsiveImage width='800' src={ freelancerImage } />
             </Grid>
-          </Container>
+          </Grid>
         </Section>
+      </Container>
+      <Section ref='companies' alternative className={ classes.bgContrast }>
         <Container>
-          <Section ref='collab'>
-            <Grid container spacing={ 3 }>
-              <Grid item xs={ 12 } sm={ 6 }>
-                <MainTitle left>
-                  <Typography variant='h5' gutterBottom>
-                    <FormattedMessage
-                      id='welcome.headline.collab'
-                      defaultMessage='Working in development communities'
+          <Grid container spacing={ 3 }>
+            <Grid item xs={ 12 } sm={ 6 }>
+              <MainTitle left>
+                <Typography variant='h5' gutterBottom>
+                  <FormattedMessage
+                    id='welcome.tagline.companies.main.headline'
+                    defaultMessage='For maintainers and organizations'
+                  />
+                </Typography>
+              </MainTitle>
+              <MainList>
+                <List>
+                  <ListItem className={ classes.listIconTop }>
+                    <ListItemIcon>
+                      <Avatar className={ classes.iconFill }>
+                        <Assignment />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={ props.intl.formatMessage(
+                        messages.welcomeCompaniesItemOnePrimary
+                      ) }
+                      secondary={ props.intl.formatMessage(
+                        messages.welcomeCompaniesItemOneSecondary
+                      ) }
                     />
-                  </Typography>
-                </MainTitle>
-                <MainList>
-                  <List>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <Apps />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeCollabItemOnePrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeCollabItemOneSecondary
-                        ) }
-                      />
-                    </ListItem>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <Work />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeCollabItemTwoPrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeCollabItemTwoSecondary
-                        ) }
-                      />
-                    </ListItem>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <AccountBalanceWallet />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeCollabItemThreePrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeCollabItemThreeSecondary
-                        ) }
-                      />
-                    </ListItem>
-                  </List>
-                </MainList>
-              </Grid>
-              <Grid item xs={ 12 } sm={ 6 }>
-                <ResponsiveImage width='600' src={ teamImage } />
-              </Grid>
-            </Grid>
-          </Section>
-        </Container>
-        <Bottom />
-      </div>
-    )
-  }
-}
-
-Welcome.propTypes = {
-  classes: PropTypes.object.isRequired
-}
-
-export default injectIntl(withStyles(styles)(Welcome))
+                  </ListItem>
+                  <ListItem className={ classes.listIconTop }>
+                    <ListItemIcon>
+                      <Avatar className={ classes.iconFill }>
+                        <GroupWork />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={ props.intl.formatMessage(
+                        messages.welcomeCompaniesItemTwoPrimary
+                      ) }
+                      secondary={ props.int
+Comments