4 files changed, 53 insertions, 8 deletions
diff --git a/public/index.html b/public/index.html
index c3d52e2..001cbac 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link rel="icon" type="image/png" sizes="16x16" href="./which-logo-64.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Which</title>
   </head>
diff --git a/public/which-logo-512.png b/public/which-logo-512.png
new file mode 100644
index 0000000..ddcbd9f
--- /dev/null
+++ b/public/which-logo-512.png
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 339f322..294c250 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -69,7 +69,7 @@ const Header: React.FC = () => {
           </IconButton>
           <IconButton onClick={handleProfile}>
             {
-              user?.avatarUrl?.match(/\.(jpeg|jpg|gif|png)$/)
+              user?.avatarUrl
                 ? <Avatar className={classes.avatar} src={user?.avatarUrl} />
                 : <AccountCircle />
             }
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
index 6930cc8..d0e29f5 100644
--- a/src/pages/HomePage/HomePage.tsx
+++ b/src/pages/HomePage/HomePage.tsx
@@ -1,18 +1,62 @@
 import React, { useState } from 'react';
-import { Typography } from '@material-ui/core/';
+import { Typography, Divider, Grid, Button } from '@material-ui/core/';
 import { makeStyles } from '@material-ui/core/styles';
+import { useNavigate } from '../../hooks/useNavigate';
 
-const useStyles = makeStyles({
-});
+const useStyles = makeStyles(theme => ({
+  logo: {
+    width: theme.spacing(32),
+    height: theme.spacing(32)
+  },
+  leftColumn: {
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  title: {
+    fontWeight: 'bold'
+  }
+}));
 
 const HomePage: React.FC = () => {
   const classes = useStyles();
+  const { navigate } = useNavigate();
 
-  return (
-    <>
-  <Typography variant="h3"> Which one to choose? </Typography>
+  const handleLetsGo = () => {
+    navigate('feed');
+  };
 
-    </>
+  return (
+    <Grid container spacing={4}>
+      <Grid item xs={4} className={classes.leftColumn}>
+        <img src={process.env.PUBLIC_URL + '/which-logo-512.png'} alt="logo" className={classes.logo}/>
+      </Grid>
+      <Grid item xs={5}>
+        <Grid container direction="column" spacing={6}>
+          <Grid item>
+            <Typography variant="h4"> Which one to choose? </Typography>
+            <Divider />
+            <Typography>
+              <p>Have you ever found yourself stuck between two options, not being able to choose any? This is exactly the problem we are going to solve!</p>
+              <p>Share your minor everyday uncertainties with the whole world and see what others think!</p>
+              <Button variant="contained" color="primary" size="large" onClick={handleLetsGo}>
+                let's go! 
+              </Button>
+            </Typography>
+          </Grid>
+          <Grid item>
+            <Typography variant="h4"> About the project </Typography>
+            <Divider />
+            <p>
+              Visit our <a href="https://github.com/">GitHub</a>
+            </p>
+          </Grid>
+          <Grid item>
+            <Typography variant="h4"> Leave feedback </Typography>
+            <Divider />
+          </Grid>
+        </Grid>
+      </Grid>
+    </Grid>
   );
 };