6 files changed, 55 insertions, 48 deletions
diff --git a/src/containers/Feed/Feed.tsx b/src/containers/Feed/Feed.tsx
index 10b1adc..337f4c1 100644
--- a/src/containers/Feed/Feed.tsx
+++ b/src/containers/Feed/Feed.tsx
@@ -3,18 +3,26 @@ import { Container } from '@material-ui/core/';
 
 import PollsList from '../../components/PollsList/PollsList';
 import Fab from '../../components/Fab/Fab';
+import Loading from '../../components/Loading/Loading';
+import EmptyState from '../../components/EmptyState/EmptyState';
 import { useAuth } from '../../hooks/useAuth';
 import { useFeed } from '../../hooks/APIClient';
 
 
 const Feed: React.FC = () => {
-  const { data: polls, mutate } = useFeed();
+  const { data: polls, isValidating, mutate } = useFeed();
   const { isAuthenticated } = useAuth();
 
   return (
     <Container maxWidth="sm" disableGutters>
       {isAuthenticated && <Fab hideOnScroll />}
-      <PollsList polls={polls} mutate={mutate} />
+      {
+        polls
+          ? polls.length
+            ? <PollsList polls={polls} mutate={mutate} />
+            : <EmptyState />
+          : isValidating && <Loading />
+      }
     </Container>
   );
 };
diff --git a/src/containers/Feed/types.ts b/src/containers/Feed/types.ts
deleted file mode 100644
index 24ace4e..0000000
--- a/src/containers/Feed/types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface ImageData {
-  url: string;
-}
-export interface Contents {
-  left: ImageData;
-  right: ImageData;
-}
diff --git a/src/containers/Home/Home.tsx b/src/containers/Home/Home.tsx
index 203b380..c0ca00e 100644
--- a/src/containers/Home/Home.tsx
+++ b/src/containers/Home/Home.tsx
@@ -48,10 +48,10 @@ const Home: React.FC = () => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
-  const rating = feedbacks.length && feedbacks.reduce(
+  const rating = feedbacks?.length ? feedbacks.reduce(
     (acc: number, feedback: Feedback) => acc + feedback.score,
     0
-  ) / feedbacks.length;
+  ) / feedbacks.length : 0;
 
   const handleLetsGo = () => {
     history.push('/feed');
@@ -70,36 +70,38 @@ const Home: React.FC = () => {
 
   const Reviews = (
     <div className={classes.reviews}>
-      {feedbacks.map((feedback: Feedback) => <ReviewCard feedback={feedback} />)}
+      {feedbacks?.map((feedback: Feedback) => <ReviewCard feedback={feedback} />)}
     </div>
   );
 
-  const FeedbackSection = feedbacks.findIndex((feedback: Feedback) => feedback.author._id === user?._id) >= 0 ? (
+  const FeedbackSection = feedbacks && feedbacks.findIndex(
+    (feedback: Feedback) => feedback.author._id === user?._id
+  ) >= 0 ? (
     <p>
       You have already left feedback for this version.
       If you have more to say, please open GitHub issue or contact us directly via email: {EmailLink}.
       Alternatively, you can just wait for another application patch to come out.
     </p>
-  ) : (
-    <>
-      <p>
-        Here you can share your thougts about Which with us!
-        Note that you can ony leave feedback once per application version (there will be plenty of them later).
-      </p>
-      {isAuthenticated ? <ReviewForm /> : (
-        <>
-          <p> You must be authorized to leave feedback.</p>
-          <Button
-            variant="outlined"
-            color="primary"
-            onClick={handleSignUp}
-          >
-            sign in
-          </Button>
-        </>
-      )}
-    </>
-  );
+    ) : (
+      <>
+        <p>
+          Here you can share your thougts about Which with us!
+          Note that you can ony leave feedback once per application version (there will be plenty of them later).
+        </p>
+        {isAuthenticated ? <ReviewForm /> : (
+          <>
+            <p> You must be authorized to leave feedback.</p>
+            <Button
+              variant="outlined"
+              color="primary"
+              onClick={handleSignUp}
+            >
+              sign in
+            </Button>
+          </>
+        )}
+      </>
+    );
 
   return (
     <div className={classes.root}>
diff --git a/src/containers/Notifications/Notifications.tsx b/src/containers/Notifications/Notifications.tsx
index 0648eb5..2a9ea13 100644
--- a/src/containers/Notifications/Notifications.tsx
+++ b/src/containers/Notifications/Notifications.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { Typography } from '@material-ui/core';
+import EmptyState from '../../components/EmptyState/EmptyState';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    marginTop: theme.spacing(25),
-    textAlign: 'center'
+    marginTop: theme.spacing(25)
   }
 }));
 
@@ -13,9 +12,9 @@ const Notifications: React.FC = () => {
   const classes = useStyles();
 
   return (
-    <Typography variant="h4" className={classes.root}>
-      Sorry, this page is being constructed yet.
-    </Typography>
+    <div className={classes.root}>
+      <EmptyState variant="construction" message="We are building this page. Stay tuned." />
+    </div>
   );
 };
 
diff --git a/src/containers/Profile/Profile.tsx b/src/containers/Profile/Profile.tsx
index 33abfc2..701aa06 100644
--- a/src/containers/Profile/Profile.tsx
+++ b/src/containers/Profile/Profile.tsx
@@ -7,6 +7,7 @@ import ProfileInfo from './ProfileInfo';
 import PollsList from '../../components/PollsList/PollsList';
 import Loading from '../../components/Loading/Loading';
 import Fab from '../../components/Fab/Fab';
+import EmptyState from '../../components/EmptyState/EmptyState';
 import { useAuth } from '../../hooks/useAuth';
 import { useUser, useProfile } from '../../hooks/APIClient';
 
@@ -26,28 +27,31 @@ const Profile: React.FC = () => {
     }
   }, [username, history, user]);
 
+  const isOwnProfile = useMemo(() => user?.username === username, [user, username]);
 
-  const totalVotes = useMemo(() => polls.reduce(
+  const totalVotes = useMemo(() => polls?.reduce(
     (total: number, current: Poll) => {
       const { left, right } = current.contents;
       return total + left.votes + right.votes;
     }, 0
-  ), [polls]);
+  ) || 0, [polls]);
 
   return (
     <Container maxWidth="sm" disableGutters>
       <ProfileInfo
         userInfo={userInfo}
         setUserInfo={setUserInfo}
-        savedPolls={polls.length}
+        savedPolls={polls?.length || 0}
         totalVotes={totalVotes}
       />
       {
-        isValidating && !polls
-          ? <Loading />
-          : <PollsList polls={polls} mutate={mutatePolls} />
+        polls
+          ? polls.length
+            ? <PollsList polls={polls} mutate={mutatePolls} />
+            : <EmptyState message={isOwnProfile ? 'Create a poll and it will show up here.' : ''} />
+          : isValidating && <Loading />
       }
-      {user?.username === username && <Fab />}
+      {isOwnProfile && <Fab />}
     </Container>
   );
 };
diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx
index 82f640d..c9831f3 100644
--- a/src/containers/Profile/ProfileInfo.tsx
+++ b/src/containers/Profile/ProfileInfo.tsx
@@ -21,7 +21,8 @@ interface PropTypes {
 
 const useStyles = makeStyles(theme => ({
   root: {
-    position: 'relative'
+    position: 'relative',
+    marginBottom: theme.spacing(4)
   },
   avatar: {
     width: 150,
@@ -43,7 +44,7 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     width: '100%',
     height: 50,
-    margin: '50px 0',
+    marginTop: theme.spacing(6),
     borderBottom: '1px solid lightgray'
   },
   menuButton: {