diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js b/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
index 93b56b8a2..2145b7d6e 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
@@ -46,6 +46,41 @@ describe('NotificationMenu.vue', () => {
       expect(wrapper.contains('.dropdown')).toBe(false)
     })
 
+    describe('given only unread notifications', () => {
+      beforeEach(() => {
+        data = () => {
+          return {
+            displayedNotifications: [
+              {
+                id: 'notification-41',
+                read: true,
+                post: {
+                  id: 'post-1',
+                  title: 'some post title',
+                  contentExcerpt: 'this is a post content',
+                  author: {
+                    id: 'john-1',
+                    slug: 'john-doe',
+                    name: 'John Doe',
+                  },
+                },
+              },
+            ],
+          }
+        }
+      })
+
+      it('counter displays 0', () => {
+        wrapper = Wrapper()
+        expect(wrapper.find('ds-button-stub').text()).toEqual('0')
+      })
+
+      it('button is not primary', () => {
+        wrapper = Wrapper()
+        expect(wrapper.find('ds-button-stub').props('primary')).toBe(false)
+      })
+    })
+
     describe('given some notifications', () => {
       beforeEach(() => {
         data = () => {
@@ -102,6 +137,11 @@ describe('NotificationMenu.vue', () => {
         wrapper = Wrapper()
         expect(wrapper.find('ds-button-stub').text()).toEqual('2')
       })
+
+      it('renders primary button', () => {
+        wrapper = Wrapper()
+        expect(wrapper.find('ds-button-stub').props('primary')).toBe(true)
+      })
     })
   })
 })
diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index d32eb6c33..9c3ed0bd7 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -1,10 +1,10 @@
 <template>
-  <ds-button v-if="totalNotificationsCount === 0" class="notifications-menu" disabled icon="bell">
+  <ds-button v-if="!notificationsCount" class="notifications-menu" disabled icon="bell">
     {{ unreadNotificationsCount }}
   </ds-button>
   <dropdown v-else class="notifications-menu" :placement="placement">
     <template slot="default" slot-scope="{ toggleMenu }">
-      <ds-button primary icon="bell" @click.prevent="toggleMenu">
+      <ds-button :primary="!!unreadNotificationsCount" icon="bell" @click.prevent="toggleMenu">
         {{ unreadNotificationsCount }}
       </ds-button>
     </template>
@@ -60,7 +60,7 @@ export default {
     },
   },
   computed: {
-    totalNotificationsCount() {
+    notificationsCount() {
       return (this.displayedNotifications || []).length
     },
     unreadNotificationsCount() {