diff --git a/src/components/ContentComponents/Navbar/Navbar.tsx b/src/components/ContentComponents/Navbar/Navbar.tsx
index b39110eb0058c4893d012df4b00c8a9c69ada456..d4fc5e1f71849db51a41528f28859624ba317868 100644
--- a/src/components/ContentComponents/Navbar/Navbar.tsx
+++ b/src/components/ContentComponents/Navbar/Navbar.tsx
@@ -40,14 +40,10 @@ export const Navbar = ({ t }: NavbarProps) => {
               className="c-nav-link"
               activeClassName="is-active"
             >
-              <Icon
-                className="c-nav-icon off"
-                icon={
-                  challengeNotification
-                    ? ChallengeIconOffNotif
-                    : ChallengeIconOff
-                }
-              />
+              {challengeNotification && (
+                <div className="nb-challenge-notif">1</div>
+              )}
+              <Icon className="c-nav-icon off" icon={ChallengeIconOff} />
               <Icon className="c-nav-icon on" icon={ChallengeIconOn} />
               {t('Nav.challenges')}
             </NavLink>
diff --git a/src/styles/components/_nav.scss b/src/styles/components/_nav.scss
index 04897ec9c046c220a3dac164df434f6d4a41e47e..d8e4e8189cba94b337741c0e5dc4fa6c28d7a617 100644
--- a/src/styles/components/_nav.scss
+++ b/src/styles/components/_nav.scss
@@ -84,3 +84,24 @@
     box-shadow: unset;
   }
 }
+
+.nb-challenge-notif {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 42px;
+  bottom: 22px;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: $dark-light;
+  border-radius: 50%;
+  border: 1px solid $dark-light;
+  z-index: 1;
+  background: $blue-radial-gradient;
+  font-size: 12px;
+  @media #{$tablet} {
+    left: 25px;
+    bottom: unset;
+  }
+}