diff --git a/web/sidebar/left-layout-aside.css b/web/sidebar/left-layout-aside.css
index 84b2749fe..fae168bc2 100644
--- a/web/sidebar/left-layout-aside.css
+++ b/web/sidebar/left-layout-aside.css
@@ -1,68 +1,68 @@
 .container {
   grid-area: sBar;
   background: var(--bg);
   color: var(--color);
   border-right: 1px solid var(--border-color);
   display: flex;
 }
 
 .navigationPanelContainer {
   width: 160px;
 }
 
 .container ul {
   list-style-type: none;
   padding-top: 24px;
   padding-left: 28px;
 }
 
 .container ul li {
   cursor: pointer;
   padding-bottom: 24px;
   line-height: 0;
 }
 
 .container p {
   display: flex;
   align-content: center;
 }
 
 .container ul a {
   color: var(--color-disabled);
 }
 
 .container svg {
   color: var(--color-disabled);
   padding-right: 12px;
 }
 
 .chatIconWrapper {
   position: relative;
 }
 
-div.chatBadge {
+span.chatBadge {
   position: absolute;
   top: -4px;
   left: 13px;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 16px;
   height: 16px;
   color: var(--fg);
   background: var(--unread-bg);
   border-radius: 13px;
   font-size: 8px;
   line-height: 1.25;
 }
 
 p.current-tab svg {
   color: var(--fg);
 }
 
 p.current-tab a,
 p.current-tab svg {
   fill: var(--fg);
   color: var(--fg);
 }
diff --git a/web/sidebar/navigation-panel.react.js b/web/sidebar/navigation-panel.react.js
index c464ebca7..ebcaca1cf 100644
--- a/web/sidebar/navigation-panel.react.js
+++ b/web/sidebar/navigation-panel.react.js
@@ -1,138 +1,138 @@
 // @flow
 
 import classNames from 'classnames';
 import invariant from 'invariant';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
 import {
   mostRecentReadThreadSelector,
   unreadCount,
 } from 'lib/selectors/thread-selectors';
 
 import { useSelector } from '../redux/redux-utils';
 import SWMansionIcon from '../SWMansionIcon.react';
 import { updateNavInfoActionType } from '../types/nav-types';
 import css from './left-layout-aside.css';
 
 function NavigationPanel(): React.Node {
   const activeChatThreadID = useSelector(
     state => state.navInfo.activeChatThreadID,
   );
   const navInfo = useSelector(state => state.navInfo);
   const mostRecentReadThread = useSelector(mostRecentReadThreadSelector);
   const activeThreadCurrentlyUnread = useSelector(
     state =>
       !activeChatThreadID ||
       !!state.threadStore.threadInfos[activeChatThreadID]?.currentUser.unread,
   );
   const viewerID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
 
   const isCalendarEnabled = useSelector(state => state.enabledApps.calendar);
 
   const dispatch = useDispatch();
 
   const onClickCalendar = React.useCallback(
     (event: SyntheticEvent<HTMLAnchorElement>) => {
       event.preventDefault();
       dispatch({
         type: updateNavInfoActionType,
         payload: { tab: 'calendar' },
       });
     },
     [dispatch],
   );
 
   const onClickChat = React.useCallback(
     (event: SyntheticEvent<HTMLAnchorElement>) => {
       event.preventDefault();
       dispatch({
         type: updateNavInfoActionType,
         payload: {
           tab: 'chat',
           activeChatThreadID: activeThreadCurrentlyUnread
             ? mostRecentReadThread
             : activeChatThreadID,
         },
       });
     },
     [
       dispatch,
       activeThreadCurrentlyUnread,
       mostRecentReadThread,
       activeChatThreadID,
     ],
   );
 
   const onClickApps = React.useCallback(
     (event: SyntheticEvent<HTMLAnchorElement>) => {
       event.preventDefault();
       dispatch({
         type: updateNavInfoActionType,
         payload: {
           tab: 'apps',
         },
       });
     },
     [dispatch],
   );
 
   const boundUnreadCount = useSelector(unreadCount);
 
   invariant(viewerID, 'should be set');
   let chatBadge = null;
   if (boundUnreadCount > 0) {
-    chatBadge = <div className={css.chatBadge}>{boundUnreadCount}</div>;
+    chatBadge = <span className={css.chatBadge}>{boundUnreadCount}</span>;
   }
 
   const chatNavClasses = classNames({
     [css['current-tab']]: navInfo.tab === 'chat',
   });
   const appsNavClasses = classNames({
     [css['current-tab']]: navInfo.tab === 'apps',
   });
 
   const calendarLink = React.useMemo(() => {
     if (!isCalendarEnabled) {
       return null;
     }
     const calendarNavClasses = classNames({
       [css['current-tab']]: navInfo.tab === 'calendar',
     });
     return (
       <li>
         <p className={calendarNavClasses}>
           <SWMansionIcon icon="calendar" size={24} />
           <a onClick={onClickCalendar}>Calendar</a>
         </p>
       </li>
     );
   }, [isCalendarEnabled, navInfo.tab, onClickCalendar]);
 
   return (
     <div className={css.navigationPanelContainer}>
       <ul>
         <li>
           <p className={chatNavClasses}>
             <span className={css.chatIconWrapper}>
               <SWMansionIcon icon="message-square" size={24} />
               {chatBadge}
             </span>
             <a onClick={onClickChat}>Chat</a>
           </p>
         </li>
         {calendarLink}
         <li>
           <p className={appsNavClasses}>
             <SWMansionIcon icon="wrench" size={24} />
             <a onClick={onClickApps}>Apps</a>
           </p>
         </li>
       </ul>
     </div>
   );
 }
 
 export default NavigationPanel;