diff --git a/src/containers/Header/NotificationsTray/EmptyView/index.jsx b/src/containers/Header/NotificationsTray/EmptyView/index.jsx
new file mode 100644
index 00000000..c7cb26c0
--- /dev/null
+++ b/src/containers/Header/NotificationsTray/EmptyView/index.jsx
@@ -0,0 +1,11 @@
+import styles from '../style.postcss';
+import React from 'react';
+
+const EmptyView = () => <div className={styles.NotificationsTray_popup_empty}>
+  <h1>Hello!</h1>
+  <p>You don't have any notifications yet.</p>
+  <aside>New notifications will appear here when <br />
+    teachers add internal notes for your students.</aside>
+</div>;
+
+export default EmptyView;
diff --git a/src/containers/Header/NotificationsTray/index.jsx b/src/containers/Header/NotificationsTray/index.jsx
index 86bde9b4..67546277 100644
--- a/src/containers/Header/NotificationsTray/index.jsx
+++ b/src/containers/Header/NotificationsTray/index.jsx
@@ -14,6 +14,7 @@ import Icon from 'components/Icon';
 import Callout from 'components/Callout';
 import Button from 'components/Button';
 import Checkbox from 'components/Checkbox';
+import EmptyView from './EmptyView';
 
 class NotificationsTray extends PureComponent {
   constructor() {
@@ -188,13 +189,7 @@ class NotificationsTray extends PureComponent {
               Mark as read
             </a> : null}
         </div>
-        {! notifications || ! notifications.size ?
-          <div className={styles.NotificationsTray_popup_empty}>
-            <h1>Hello!</h1>
-            <p>You don't have any notifications yet.</p>
-            <aside>New notifications will appear here when <br />
-              teachers add internal notes for your students.</aside>
-          </div> : null}
+        {! notifications || ! notifications.size ? <EmptyView /> : null}
         {this._renderNotifications(notifications)}
         {this._renderNotificationFooter(notifications)}
       </div>