diff --git a/frontend/lib/components/PageHeader/Notifications/Notification/Notification.module.scss b/frontend/lib/components/PageHeader/Notifications/Notification/Notification.module.scss
index 26a3282d7..60819d828 100644
--- a/frontend/lib/components/PageHeader/Notifications/Notification/Notification.module.scss
+++ b/frontend/lib/components/PageHeader/Notifications/Notification/Notification.module.scss
@@ -14,10 +14,6 @@
     border-bottom: none;
   }
 
-  &.read {
-    opacity: 0.4;
-  }
-
   .header {
     display: flex;
     justify-content: space-between;
@@ -76,4 +72,4 @@
     font-size: Typography.$tiny;
     color: var(--text-2);
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/lib/components/PageHeader/Notifications/Notifications.module.scss b/frontend/lib/components/PageHeader/Notifications/Notifications.module.scss
index 7b99c4f49..04a5821cb 100644
--- a/frontend/lib/components/PageHeader/Notifications/Notifications.module.scss
+++ b/frontend/lib/components/PageHeader/Notifications/Notifications.module.scss
@@ -11,16 +11,16 @@
   .badge {
     position: absolute;
     color: var(--white-0);
-    background-color: var(--accent);
-    border-radius: Radius.$circle;
-    width: 14px;
-    height: 14px;
+    background-color: var(--dangerous-dark);
+    border-radius: Radius.$normal;
+    width: 16px;
+    height: 16px;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: Typography.$very_tiny;
-    top: -(Spacings.$spacing02);
-    right: -(Spacings.$spacing01);
+    top: -(Spacings.$spacing03);
+    right: -(Spacings.$spacing02);
   }
 
   .notifications_panel {
@@ -59,4 +59,4 @@
       color: var(--text-2);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/lib/components/PageHeader/Notifications/Notifications.tsx b/frontend/lib/components/PageHeader/Notifications/Notifications.tsx
index 613b2fb38..e7ef74fc0 100644
--- a/frontend/lib/components/PageHeader/Notifications/Notifications.tsx
+++ b/frontend/lib/components/PageHeader/Notifications/Notifications.tsx
@@ -104,7 +104,11 @@ export const Notifications = (): JSX.Element => {
           color="black"
           handleHover={true}
         />
-        <span className={styles.badge}>{unreadNotifications}</span>
+        {!!unreadNotifications && (
+          <span className={styles.badge}>
+            {unreadNotifications > 9 ? "9+" : unreadNotifications}
+          </span>
+        )}
       </div>
       {panelOpened && (
         <div className={styles.notifications_panel}>
diff --git a/frontend/lib/components/PageHeader/PageHeader.module.scss b/frontend/lib/components/PageHeader/PageHeader.module.scss
index 1e49b5e57..6567204dc 100644
--- a/frontend/lib/components/PageHeader/PageHeader.module.scss
+++ b/frontend/lib/components/PageHeader/PageHeader.module.scss
@@ -10,6 +10,7 @@
   padding-left: Spacings.$spacing09;
   border-bottom: 1px solid var(--border-1);
   height: 3rem;
+  width: 100%;
 
   .left {
     @include Typography.H2;
@@ -22,15 +23,19 @@
       visibility: visible;
       padding-left: Spacings.$spacing07;
     }
-
-    @media (max-width: ScreenSizes.$small) {
-      display: none;
-    }
   }
 
   .buttons_wrapper {
     display: flex;
     gap: Spacings.$spacing04;
     align-items: center;
+    justify-content: flex-end;
   }
-}
\ No newline at end of file
+
+  @media (max-width: ScreenSizes.$small) {
+    justify-content: flex-end;
+    .left {
+      display: none;
+    }
+  }
+}