diff --git a/package-lock.json b/package-lock.json
index 2469be6..9e159fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9461,9 +9461,9 @@
       "dev": true
     },
     "handlebars": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.4.0.tgz",
-      "integrity": "sha512-xkRtOt3/3DzTKMOt3xahj2M/EqNhY988T+imYSlMgs5fVhLN2fmKVVj0LtEGmb+3UUYV5Qmm1052Mm3dIQxOvw==",
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.3.tgz",
+      "integrity": "sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==",
       "dev": true,
       "requires": {
         "neo-async": "^2.6.0",
@@ -10448,9 +10448,9 @@
       }
     },
     "invert-kv": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
-      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
+      "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
       "dev": true
     },
     "ip": {
@@ -11848,12 +11848,12 @@
       "integrity": "sha512-u93kb2fPbIrfzBuLjZE+w+fJbUUMhNDXxNmMfaqNgpfQf1CO5ZSe2LfsnBqVAk7i/2NF48OSoRj+Xe2VT+lE8Q=="
     },
     "lcid": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
-      "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
+      "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
       "dev": true,
       "requires": {
-        "invert-kv": "^1.0.0"
+        "invert-kv": "^2.0.0"
       }
     },
     "left-pad": {
@@ -12275,12 +12275,22 @@
       }
     },
     "mem": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz",
-      "integrity": "sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
+      "integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==",
       "dev": true,
       "requires": {
-        "mimic-fn": "^1.0.0"
+        "map-age-cleaner": "^0.1.1",
+        "mimic-fn": "^2.0.0",
+        "p-is-promise": "^2.0.0"
+      },
+      "dependencies": {
+        "mimic-fn": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+          "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+          "dev": true
+        }
       }
     },
     "memory-fs": {
@@ -13246,14 +13256,40 @@
       "dev": true
     },
     "os-locale": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-2.1.0.tgz",
-      "integrity": "sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
+      "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
       "dev": true,
       "requires": {
-        "execa": "^0.7.0",
-        "lcid": "^1.0.0",
-        "mem": "^1.1.0"
+        "execa": "^1.0.0",
+        "lcid": "^2.0.0",
+        "mem": "^4.0.0"
+      },
+      "dependencies": {
+        "execa": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
+          "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^6.0.0",
+            "get-stream": "^4.0.0",
+            "is-stream": "^1.1.0",
+            "npm-run-path": "^2.0.0",
+            "p-finally": "^1.0.0",
+            "signal-exit": "^3.0.0",
+            "strip-eof": "^1.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+          "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+          "dev": true,
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        }
       }
     },
     "os-tmpdir": {
@@ -21435,16 +21471,16 @@
       "dev": true
     },
     "yargs": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz",
-      "integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==",
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.1.tgz",
+      "integrity": "sha512-PRU7gJrJaXv3q3yQZ/+/X6KBswZiaQ+zOmdprZcouPYtQgvNU35i+68M4b1ZHLZtYFT5QObFLV+ZkmJYcwKdiw==",
       "dev": true,
       "requires": {
         "cliui": "^4.0.0",
         "decamelize": "^1.1.1",
         "find-up": "^2.1.0",
         "get-caller-file": "^1.0.1",
-        "os-locale": "^2.0.0",
+        "os-locale": "^3.1.0",
         "require-directory": "^2.1.1",
         "require-main-filename": "^1.0.1",
         "set-blocking": "^2.0.0",
diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx
index e5a1a91..a3f89d5 100644
--- a/src/components/AppLayout/AppLayout.tsx
+++ b/src/components/AppLayout/AppLayout.tsx
@@ -43,6 +43,7 @@ import CreateIcon from "@material-ui/icons/Create";
 import SupervisedUserCircleIcon from "@material-ui/icons/SupervisedUserCircle";
 import ExitToAppIcon from "@material-ui/icons/ExitToApp";
 import TrendingUpIcon from "@material-ui/icons/TrendingUp";
+import BuildIcon from "@material-ui/icons/Build";
 
 import { styles } from "./AppLayout.styles";
 import { MultiAccount, UAccount } from "../../types/Account";
@@ -295,7 +296,11 @@ export class AppLayout extends Component<any, IAppLayoutState> {
             return (
                 <div className={classes.titleBarRoot}>
                     <Typography className={classes.titleBarText}>
-                        🛠 Careful: you're running in developer mode.
+                        <BuildIcon
+                            color="inherit"
+                            style={{ fontSize: "1em", verticalAlign: "middle" }}
+                        />{" "}
+                        Careful: you're running in developer mode.
                     </Typography>
                 </div>
             );
diff --git a/src/pages/Activity.tsx b/src/pages/Activity.tsx
index 68d87c9..49fe4a0 100644
--- a/src/pages/Activity.tsx
+++ b/src/pages/Activity.tsx
@@ -131,7 +131,7 @@ class ActivityPage extends Component<any, IActivityPageState> {
                         textAlign: "center"
                     }}
                 >
-                    <FireplaceIcon style={{ fontSize: 64 }} />
+                    <FireplaceIcon style={{ fontSize: 64 }} color="action"/>
                     <Typography variant="h6">
                         Hey there,{" "}
                         {this.state.user
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index ca6325e..3d03a20 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -10,10 +10,12 @@ import {
     ListItemAvatar,
     Avatar,
     ListItemSecondaryAction,
-    Tooltip
+    Tooltip,
+    Typography
 } from "@material-ui/core";
 import PersonIcon from "@material-ui/icons/Person";
 import ForumIcon from "@material-ui/icons/Forum";
+import MailIcon from "@material-ui/icons/Mail";
 import { styles } from "./PageLayout.styles";
 import Mastodon from "megalodon";
 import { Status } from "../types/Status";
@@ -70,67 +72,82 @@ class MessagesPage extends Component<any, IMessagesState> {
         return innerContent;
     }
 
+    renderMessage(message: Status) {
+        return (
+            <ListItem>
+                <ListItemAvatar>
+                    <LinkableAvatar
+                        to={`/profile/${message.account.id}`}
+                        alt={message.account.username}
+                        src={message.account.avatar_static}
+                    >
+                        <PersonIcon />
+                    </LinkableAvatar>
+                </ListItemAvatar>
+                <ListItemText
+                    primary={
+                        message.account.display_name ||
+                        "@" + message.account.acct
+                    }
+                    secondary={this.removeHTMLContent(message.content)}
+                />
+                <ListItemSecondaryAction>
+                    <Tooltip title="View conversation">
+                        <LinkableIconButton to={`/conversation/${message.id}`}>
+                            <ForumIcon />
+                        </LinkableIconButton>
+                    </Tooltip>
+                </ListItemSecondaryAction>
+            </ListItem>
+        );
+    }
+
     render() {
         const { classes } = this.props;
         return (
             <div className={classes.pageLayoutConstraints}>
                 {this.state.viewDidLoad ? (
                     <div className={classes.pageListContsraints}>
-                        <ListSubheader>Recent messages</ListSubheader>
-                        <Paper className={classes.pageListConstraints}>
-                            <List>
-                                {this.state.posts
-                                    ? this.state.posts.map(
-                                          (message: Status) => {
-                                              return (
-                                                  <ListItem>
-                                                      <ListItemAvatar>
-                                                          <LinkableAvatar
-                                                              to={`/profile/${message.account.id}`}
-                                                              alt={
-                                                                  message
-                                                                      .account
-                                                                      .username
-                                                              }
-                                                              src={
-                                                                  message
-                                                                      .account
-                                                                      .avatar_static
-                                                              }
-                                                          >
-                                                              <PersonIcon />
-                                                          </LinkableAvatar>
-                                                      </ListItemAvatar>
-                                                      <ListItemText
-                                                          primary={
-                                                              message.account
-                                                                  .display_name ||
-                                                              "@" +
-                                                                  message
-                                                                      .account
-                                                                      .acct
-                                                          }
-                                                          secondary={this.removeHTMLContent(
-                                                              message.content
-                                                          )}
-                                                      />
-                                                      <ListItemSecondaryAction>
-                                                          <Tooltip title="View conversation">
-                                                              <LinkableIconButton
-                                                                  to={`/conversation/${message.id}`}
-                                                              >
-                                                                  <ForumIcon />
-                                                              </LinkableIconButton>
-                                                          </Tooltip>
-                                                      </ListItemSecondaryAction>
-                                                  </ListItem>
-                                              );
-                                          }
-                                      )
-                                    : null}
-                            </List>
-                        </Paper>
-                        <br />
+                        {this.state.posts && this.state.posts.length > 0 ? (
+                            <div>
+                                <ListSubheader>Recent messages</ListSubheader>
+                                <Paper className={classes.pageListConstraints}>
+                                    <List>
+                                        {this.state.posts
+                                            ? this.state.posts.map(
+                                                  (message: Status) =>
+                                                      this.renderMessage(
+                                                          message
+                                                      )
+                                              )
+                                            : null}
+                                    </List>
+                                </Paper>
+                                <br />
+                            </div>
+                        ) : (
+                            <div>
+                                <div
+                                    className={
+                                        classes.pageLayoutEmptyTextConstraints
+                                    }
+                                    style={{ textAlign: "center" }}
+                                >
+                                    <MailIcon
+                                        color="action"
+                                        style={{ fontSize: 48 }}
+                                    />
+                                    <Typography variant="h6">
+                                        You don't have any messages.
+                                    </Typography>
+                                    <Typography paragraph>
+                                        Why not interact with the fediverse a
+                                        bit by sending a message?
+                                    </Typography>
+                                    <br />
+                                </div>
+                            </div>
+                        )}
                     </div>
                 ) : null}
                 {this.state.viewIsLoading ? (
diff --git a/src/pages/Notifications.tsx b/src/pages/Notifications.tsx
index 85f5c8d..654027b 100644
--- a/src/pages/Notifications.tsx
+++ b/src/pages/Notifications.tsx
@@ -19,6 +19,7 @@ import {
     DialogActions,
     Tooltip
 } from "@material-ui/core";
+
 import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
 import PersonIcon from "@material-ui/icons/Person";
 import PersonAddIcon from "@material-ui/icons/PersonAdd";
@@ -27,6 +28,8 @@ import { styles } from "./PageLayout.styles";
 import { LinkableIconButton, LinkableAvatar } from "../interfaces/overrides";
 import ForumIcon from "@material-ui/icons/Forum";
 import ReplyIcon from "@material-ui/icons/Reply";
+import NotificationsIcon from "@material-ui/icons/Notifications";
+
 import Mastodon from "megalodon";
 import { Notification } from "../types/Notification";
 import { Account } from "../types/Account";
@@ -337,12 +340,20 @@ class NotificationsPage extends Component<any, INotificationsPageState> {
                             </Paper>
                         </div>
                     ) : (
-                        <div className={classes.pageLayoutEmptyTextConstraints}>
-                            <Typography variant="h4">All clear!</Typography>
+                        <div
+                            className={classes.pageLayoutEmptyTextConstraints}
+                            style={{ textAlign: "center" }}
+                        >
+                            <NotificationsIcon
+                                color="action"
+                                style={{ fontSize: 48 }}
+                            />
+                            <Typography variant="h6">All clear!</Typography>
                             <Typography paragraph>
                                 It looks like you have no notifications. Why not
                                 get the conversation going with a new post?
                             </Typography>
+                            <br />
                         </div>
                     )
                 ) : null}
diff --git a/src/pages/Recommendations.tsx b/src/pages/Recommendations.tsx
index a724db6..61f0073 100644
--- a/src/pages/Recommendations.tsx
+++ b/src/pages/Recommendations.tsx
@@ -21,6 +21,7 @@ import { LinkableIconButton, LinkableAvatar } from "../interfaces/overrides";
 import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
 import PersonAddIcon from "@material-ui/icons/PersonAdd";
 import { withSnackbar, withSnackbarProps } from "notistack";
+import GroupIcon from "@material-ui/icons/Group";
 
 interface IRecommendationsPageProps extends withSnackbarProps {
     classes: any;
@@ -179,14 +180,20 @@ class RecommendationsPage extends Component<
                                 className={
                                     classes.pageLayoutEmptyTextConstraints
                                 }
+                                style={{ textAlign: "center" }}
                             >
-                                <Typography variant="h5">
+                                <GroupIcon
+                                    color="action"
+                                    style={{ fontSize: 48 }}
+                                />
+                                <Typography variant="h6">
                                     We don't have any suggestions for you.
                                 </Typography>
                                 <Typography paragraph>
                                     Why not interact with the fediverse a bit by
                                     creating a new post?
                                 </Typography>
+                                <br />
                             </div>
                         )}
                         <br />