           <ChangeListener target={@props.user}>{ =>
             if @state.notifications?.length > 0
               <div>
-                  <div className="centering">
-                    <div className="talk-module inline-block">
-                      {if @state.firstMeta.page > 1
-                        <Paginator
-                          className="newer inline-block"
-                          page={+@state.firstMeta.page}
-                          pageCount={@state.firstMeta.page_count}
-                          scrollOnChange={false}
-                          firstAndLast={false}
-                          pageSelector={false}
-                          previousLabel={<span>Load newer <i className="fa fa-long-arrow-up" /></span>}
-                          onClickPrev={@markAsRead 'first'} />}
+                  <p>
+                    You have{' '}
+                    {if @state.unreadCount is 0 then 'no' else @state.unreadCount}{' '}
+                    unread notifications
+                  </p>
+                  {if @state.firstMeta.page > 1 or @state.unreadCount > 0
+                    <div className="centering">
+                      <div className="talk-module inline-block">
+                        {if @state.firstMeta.page > 1
+                          <Paginator
+                            className="newer inline-block"
+                            page={+@state.firstMeta.page}
+                            pageCount={@state.firstMeta.page_count}
+                            scrollOnChange={false}
+                            firstAndLast={false}
+                            pageSelector={false}
+                            previousLabel={<span>Load newer <i className="fa fa-long-arrow-up" /></span>}
+                            onClickPrev={@markAsRead 'first'} />}
 
-                      <button onClick={@markAllAsRead}>
-                        Mark all as read
-                      </button>
-                    </div>
-                  </div>
+                        {if @state.unreadCount > 0
+                          <button onClick={@markAllAsRead}>
+                            Mark all as read
+                          </button>}
+                      </div>
+                    </div>}
 
                 <div className="list">
                   {for notification in @state.notifications


      @setState {notifications, notificationsMap, firstMeta, lastMeta}

  markAsRead: (meta) ->
    =>
      ids = @state["#{ meta }Meta"].notificationIds

    talkClient.put '/notifications/read'
    for notification in @state.notifications
      notification.update delivered: true
    @setState unreadCount: 0

  title: ->
    if @props.project
