5 files changed, 58 insertions, 5 deletions
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 72e40f8..339f322 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -22,7 +22,8 @@ const useStyles = makeStyles({
     margin: 'auto'
   },
   logo: {
-    fontWeight: 'bold'
+    fontWeight: 'bold',
+    cursor: 'pointer'
   },
   avatar: {
     width: 24,
@@ -36,6 +37,10 @@ const Header: React.FC = () => {
   const { navigate } = useNavigate();
 
   const handleHome = (): void => {
+    navigate('home');
+  };
+
+  const handleFeed = (): void => {
     navigate('feed');
   };
 
@@ -44,17 +49,19 @@ const Header: React.FC = () => {
     else navigate('auth');
   };
 
-  const handleNotifications = (): void => {};
+  const handleNotifications = (): void => {
+    navigate('notifications');
+  };
 
   return (
     <AppBar position="fixed">
       <Toolbar className={classes.root}>
-        <Typography variant="h5" className={classes.logo}>
+        <Typography variant="h5" className={classes.logo} onClick={handleHome}>
           Which
         </Typography>
         <SearchBar />
         <div>
-          <IconButton onClick={handleHome}>
+          <IconButton onClick={handleFeed}>
             <HomeIcon />
           </IconButton>
           <IconButton onClick={handleNotifications}>
diff --git a/src/hooks/useNavigate.tsx b/src/hooks/useNavigate.tsx
index 47de4df..d1a433d 100644
--- a/src/hooks/useNavigate.tsx
+++ b/src/hooks/useNavigate.tsx
@@ -11,7 +11,7 @@ interface ContextType {
   navigate: (prefix: string, id?: string) => void;
 }
 
-const landingPage = { prefix: 'feed' };
+const landingPage = { prefix: 'home' };
 
 const context = createContext<ContextType>({
   page: landingPage,
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
new file mode 100644
index 0000000..6930cc8
--- /dev/null
+++ b/src/pages/HomePage/HomePage.tsx
@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import { Typography } from '@material-ui/core/';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+});
+
+const HomePage: React.FC = () => {
+  const classes = useStyles();
+
+  return (
+    <>
+  <Typography variant="h3"> Which one to choose? </Typography>
+
+    </>
+  );
+};
+
+export default HomePage;
+
diff --git a/src/pages/NotificationsPage/NotificationsPage.tsx b/src/pages/NotificationsPage/NotificationsPage.tsx
new file mode 100644
index 0000000..56243f9
--- /dev/null
+++ b/src/pages/NotificationsPage/NotificationsPage.tsx
@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Typography } from '@material-ui/core';
+
+const useStyles = makeStyles({
+  root: {
+    textAlign: 'center'
+  }
+});
+
+const NotificationsPage: React.FC = () => {
+  const classes = useStyles();
+
+  return (
+    <Typography variant="h4" className={classes.root}>
+      Sorry, this page is being constructed yet.
+    </Typography>
+  );
+};
+
+export default NotificationsPage;
+
diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
index f6353b2..2a09228 100644
--- a/src/pages/Page.tsx
+++ b/src/pages/Page.tsx
@@ -4,6 +4,8 @@ import { SnackbarProvider } from 'notistack';
 import ProfilePage from './ProfilePage/ProfilePage';
 import FeedPage from './FeedPage/FeedPage';
 import AuthPage from './AuthPage/AuthPage';
+import HomePage from './HomePage/HomePage';
+import NotificationsPage from './NotificationsPage/NotificationsPage';
 import { useNavigate } from '../hooks/useNavigate';
 
 const useStyles = makeStyles(theme => ({
@@ -27,9 +29,11 @@ const Page: React.FC = () => {
       }}
     >
       <div className={classes.root}>
+        { page.prefix === 'home' && <HomePage />}
         { page.prefix === 'profile' && <ProfilePage />}
         { page.prefix === 'feed' && <FeedPage /> }
         { page.prefix === 'auth' && <AuthPage /> }
+        { page.prefix === 'notifications' && <NotificationsPage /> }
       </div>
     </SnackbarProvider>
   );