diff --git a/components/site-nav/index.js b/components/site-nav/index.js
index 8a7beec44..bd9891c43 100644
--- a/components/site-nav/index.js
+++ b/components/site-nav/index.js
@@ -11,10 +11,13 @@ const SiteNav = () => (
       <div className='nav-links'>
         <a href='/roadmaps'>Roadmaps</a>
         <a href='/guides'>Guides</a>
-        <a href='/podcasts'>Podcasts</a>
+        <a href='/podcasts'>
+          Podcasts
+          <span className='new-item' />
+        </a>
       </div>
 
-      <div className='ml-3 align-items-center d-flex'>
+      <div className='ml-3 align-items-center d-none d-md-flex'>
         <iframe src="https://ghbtns.com/github-btn.html?user=kamranahmedse&repo=developer-roadmap&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="190px" height="30px"></iframe>
       </div>
     </div>
diff --git a/components/site-nav/style.js b/components/site-nav/style.js
index d837ee845..143f0771d 100644
--- a/components/site-nav/style.js
+++ b/components/site-nav/style.js
@@ -29,6 +29,7 @@ export const HeaderWrap = styled.div`
 
   .nav-links {
     a {
+      position: relative;
       padding: 0 10px;
       text-decoration: none;
       font-size: 16px;
@@ -46,5 +47,15 @@ export const HeaderWrap = styled.div`
         background: #2d2d2d;
       }
     }
+
+    .new-item {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: inline-block;
+      padding: 3px;
+      background: #e25712;
+      border-radius: 100%;
+    }
   }
 `;