diff --git a/webapp/components/notifications/Notification/index.vue b/webapp/components/notifications/Notification/index.vue
index de873f078..cae34a2f1 100644
--- a/webapp/components/notifications/Notification/index.vue
+++ b/webapp/components/notifications/Notification/index.vue
@@ -1,6 +1,6 @@
 <template>
   <ds-space
-    :class='{"notification": true, "read": notification.read}'
+    :class="{'notification': true, 'read': notification.read}"
     margin-bottom="x-small"
   >
     <no-ssr>
@@ -62,3 +62,10 @@ export default {
   }
 }
 </script>
+
+<style>
+.notification.read {
+  opacity: 0.6; /* Real browsers */
+  filter: alpha(opacity = 60); /* MSIE */
+}
+</style>
diff --git a/webapp/components/notifications/Notification/spec.js b/webapp/components/notifications/Notification/spec.js
index c55ea7bdc..8c6c846a4 100644
--- a/webapp/components/notifications/Notification/spec.js
+++ b/webapp/components/notifications/Notification/spec.js
@@ -46,5 +46,19 @@ describe('Notification', () => {
     it('renders title', () => {
       expect(Wrapper().text()).toContain("It's a title")
     })
+
+    it('has no class "read"', () => {
+      expect(Wrapper().classes()).not.toContain('read')
+    })
+
+    describe('that is read', () => {
+      beforeEach(() => {
+        propsData.notification.read = true
+      })
+
+      it('has class "read"', () => {
+        expect(Wrapper().classes()).toContain('read')
+      })
+    })
   })
 })