diff --git a/src/components/ContentComponents/Navbar/Navbar.tsx b/src/components/ContentComponents/Navbar/Navbar.tsx
index 2fdc439c5138650e8fdd130e9a6d7b5610822753..15d2a8ce6c05f7d353744546dfe37efd45ce1215 100644
--- a/src/components/ContentComponents/Navbar/Navbar.tsx
+++ b/src/components/ContentComponents/Navbar/Navbar.tsx
@@ -40,7 +40,7 @@ export const Navbar = ({ t }: NavbarProps) => {
               activeClassName="is-active"
             >
               {challengeNotification && (
-                <div className="nb-challenge-notif text-16-bold">1</div>
+                <div className="nb-challenge-notif">1</div>
               )}
               <Icon className="c-nav-icon off" icon={ChallengeIconOff} />
               <Icon className="c-nav-icon on" icon={ChallengeIconOn} />
diff --git a/src/styles/components/_nav.scss b/src/styles/components/_nav.scss
index 20f3651b08171e5eb5adec485de4e08061362b65..424ac10de2d2f8b661752752f5f1bd28eff96843 100644
--- a/src/styles/components/_nav.scss
+++ b/src/styles/components/_nav.scss
@@ -78,20 +78,22 @@
 }
 
 .nb-challenge-notif {
-  @media #{$large-phone} {
-    left: 25px;
-    padding: 4px;
-    width: 0.75rem;
-    height: 0.75rem;
-    top: 0px;
-  }
   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;
-  height: 1.2rem;
-  width: 1.2rem;
   background: $blue-radial-gradient;
-  left: 40px;
-  top: 7px;
-  text-align: center;
+  font-size: 12px;
+  @media #{$tablet} {
+    left: 25px;
+    bottom: unset;
+  }
 }