diff --git a/themes/default/css/notifications.css b/themes/default/css/notifications.css
index fdfe04931..bb5a62951 100644
--- a/themes/default/css/notifications.css
+++ b/themes/default/css/notifications.css
@@ -5,6 +5,32 @@
 
 /* Web UI */
 
+#noti_Container {
+       position:relative;
+       width:16px;
+       height:16px;
+}
+.noti_bubble {
+       position:absolute;
+       top: -6px;
+       right:-9px;
+       padding:1px 2px 1px 2px;
+       background-color:red;
+       color:white;
+       font-weight:bold;
+       font-size:0.55em;
+       border-radius:30px;
+       box-shadow:1px 1px 1px gray;
+}
+
+@keyframes countanimation {
+       0%   {opacity: 0.5;}
+       25%  {opacity: 0;}
+       50%  {opacity: 0.5;}
+       75%  {opacity: 1;}
+       100% {opacity: 0.5;}
+}
+
 #web_notifications_button, #pts_button {
        color: {$GET,heading_text};
        display: inline-block;
@@ -17,6 +43,9 @@
        vertical-align: middle;
        background-repeat: no-repeat;
        outline: 0;
+       animation-name: countanimation;
+       animation-duration: 2s;
+       animation-iteration-count: infinite;
 }
 #web_notifications_button {
        background-image: url('{$IMG;,icons/24x24/tool_buttons/notifications}');
@@ -44,6 +73,7 @@
 
 .count_0 {
        {$BETA_CSS_PROPERTY,opacity: 0.5;}
+       {$BETA_CSS_PROPERTY,animation-iteration-count: 0; -webkit-animation-play-state: paused; animation-play-state: paused;}
 }
 
 .notification {
diff --git a/themes/default/javascript/notification_poller.js b/themes/default/javascript/notification_poller.js
index f2d4ad681..6b565b3d3 100644
--- a/themes/default/javascript/notification_poller.js
+++ b/themes/default/javascript/notification_poller.js
@@ -101,6 +101,7 @@ function _poll_for_notifications(raw_ajax_result)
                        unread=raw_ajax_result.getElementsByTagName('unread_web_notifications');
                        set_inner_html(spot,get_inner_html(display[0]));
                        set_inner_html(button.childNodes[0],get_inner_html(unread[0]));
+                       set_inner_html(document.getElementById('web_notifications_num'),get_inner_html(unread[0]));
                        button.className='count_'+get_inner_html(unread[0]);
                }
        }
@@ -115,6 +116,7 @@ function _poll_for_notifications(raw_ajax_result)
                        unread=raw_ajax_result.getElementsByTagName('unread_pts');
                        set_inner_html(spot,get_inner_html(display[0]));
                        set_inner_html(button.childNodes[0],get_inner_html(unread[0]));
+                       set_inner_html(document.getElementById('pts_num'),get_inner_html(unread[0]));
                        button.className='count_'+get_inner_html(unread[0]);
                }
        }
diff --git a/themes/default/templates/BLOCK_TOP_NOTIFICATIONS.tpl b/themes/default/templates/BLOCK_TOP_NOTIFICATIONS.tpl
index 7c9a79682..21814b421 100644
--- a/themes/default/templates/BLOCK_TOP_NOTIFICATIONS.tpl
+++ b/themes/default/templates/BLOCK_TOP_NOTIFICATIONS.tpl
@@ -21,7 +21,11 @@
                        </ul>
                </div></div>
        </div>
-       <a title="{!NOTIFICATIONS}" id="web_notifications_button" class="count_{NUM_UNREAD_WEB_NOTIFICATIONS%}" onclick="return toggle_web_notifications(event);" href="{$PAGE_LINK*,_SEARCH:notifications:browse}"><span aria-label="{!COUNT_TOTAL} {!NOTIFICATIONS}">{NUM_UNREAD_WEB_NOTIFICATIONS*}</span></a>
+       <a title="{!NOTIFICATIONS}" id="web_notifications_button" class="leave_native_tooltip count_{NUM_UNREAD_WEB_NOTIFICATIONS%}" onclick="return toggle_web_notifications(event);" href="{$PAGE_LINK*,_SEARCH:notifications:browse}"><span aria-label="{!COUNT_TOTAL} {!NOTIFICATIONS}">{NUM_UNREAD_WEB_NOTIFICATIONS*}</span>
+               <div id="noti_Container">
+                       <div class="noti_bubble" id="web_notifications_num">{NUM_UNREAD_WEB_NOTIFICATIONS*}</div>
+               </div>
+       </a>
 {+END}
 
 {+START,IF,{$NOT,{$CONFIG_OPTION,pt_notifications_as_web}}}{+START,IF,{$CNS}}
@@ -42,7 +46,11 @@
                        </ul>
                </div></div>
        </div>
-       <a title="{!cns:PRIVATE_TOPICS}" id="pts_button" class="count_{NUM_UNREAD_PTS%}" onclick="return toggle_pts(event);" href="{$PAGE_LINK*,_SEARCH:members:view#tab__pts}"><span aria-label="{!COUNT_TOTAL} {!cns:PRIVATE_TOPICS}">{NUM_UNREAD_PTS*}</span></a>
+       <a title="{!cns:PRIVATE_TOPICS}" id="pts_button" class="leave_native_tooltip count_{NUM_UNREAD_PTS%}" onclick="return toggle_pts(event);" href="{$PAGE_LINK*,_SEARCH:members:view#tab__pts}"><span aria-label="{!COUNT_TOTAL} {!cns:PRIVATE_TOPICS}">{NUM_UNREAD_PTS*}</span>
+               <div id="noti_Container">
+                       <div class="noti_bubble" id="pts_num">{NUM_UNREAD_PTS*}</div>
+               </div>
+       </a>
 {+END}{+END}
 
 <script>// <![CDATA[