diff --git a/app/assets/stylesheets/notification_item.scss b/app/assets/stylesheets/notification_item.scss
index 5d182a7db..a6d2ee1e5 100644
--- a/app/assets/stylesheets/notification_item.scss
+++ b/app/assets/stylesheets/notification_item.scss
@@ -1,4 +1,5 @@
 .notifications {
+  $notification-icon-size: rem-calc(19);
   position: relative;
 
   &.unread-notifications {
@@ -12,16 +13,19 @@
     }
 
     &::after {
+      $menu-link-top-padding: rem-calc(11);
+      $circle-icon-size: rem-calc(10);
+
       color: #ecf00b;
-      font-size: rem-calc(10);
+      font-size: $circle-icon-size;
       margin-right: 0;
       position: absolute;
-      left: 12px;
-      top: 6px;
+      left: $notification-icon-size - rem-calc(5);
+      top: $menu-link-top-padding - $circle-icon-size / 2;
 
       @include breakpoint(medium) {
-        left: auto;
-        right: 8px;
+        $menu-link-left-padding: rem-calc(16);
+        left: $notification-icon-size + $menu-link-left-padding;
       }
     }
   }
@@ -31,7 +35,7 @@
   }
 
   &::before {
-    font-size: rem-calc(19);
+    font-size: $notification-icon-size;
   }
 
   &:hover {