diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index 934d3e58d..3e2fa54a5 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -10,11 +10,6 @@
     cursor: pointer;
   }
 
-  &.Status {
-    /* stylelint-disable-next-line declaration-no-important */
-    background-color: transparent !important;
-  }
-
   --emoji-size: 1em;
 
   &:hover {
diff --git a/src/components/notification/notification.style.js b/src/components/notification/notification.style.js
index 49e28cf2e..db5fc5b94 100644
--- a/src/components/notification/notification.style.js
+++ b/src/components/notification/notification.style.js
@@ -1,6 +1,6 @@
 export default {
   name: 'Notification',
-  selector: '.Notification',
+  selector: '.NotificationParent',
   validInnerComponents: [
     'Text',
     'Link',
@@ -9,5 +9,11 @@ export default {
     'Avatar',
     'PollGraph',
   ],
-  defaultRules: [],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+      },
+    },
+  ],
 }
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 387c3a847..66819317b 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -51,7 +51,6 @@
           <NotificationFilters class="rightside-button" />
         </div>
         <div
-          class="panel-body"
           role="feed"
         >
           <div