diff --git a/web/navigation-panels/app-switcher.react.js b/web/navigation-panels/app-switcher.react.js
index 5172f5b2c..aab37d2f5 100644
--- a/web/navigation-panels/app-switcher.react.js
+++ b/web/navigation-panels/app-switcher.react.js
@@ -1,108 +1,108 @@
 // @flow
 
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import {
   mostRecentlyReadThreadSelector,
   unreadCount,
 } from 'lib/selectors/thread-selectors.js';
 
 import NavigationPanel from './navigation-panel.react.js';
 import css from './topbar.css';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { navTabSelector } from '../selectors/nav-selectors.js';
 
 function AppSwitcher(): React.Node {
   const activeChatThreadID = useSelector(
     state => state.navInfo.activeChatThreadID,
   );
   const mostRecentlyReadThread = useSelector(mostRecentlyReadThreadSelector);
   const isActiveThreadCurrentlyUnread = useSelector(
     state =>
       !activeChatThreadID ||
       !!state.threadStore.threadInfos[activeChatThreadID]?.currentUser.unread,
   );
 
   const dispatch = useDispatch();
 
   const onClickChat = React.useCallback(
     (event: SyntheticEvent<HTMLAnchorElement>) => {
       event.preventDefault();
       dispatch({
         type: updateNavInfoActionType,
         payload: {
           tab: 'chat',
           activeChatThreadID: isActiveThreadCurrentlyUnread
             ? mostRecentlyReadThread
             : activeChatThreadID,
         },
       });
     },
     [
       dispatch,
       isActiveThreadCurrentlyUnread,
       mostRecentlyReadThread,
       activeChatThreadID,
     ],
   );
 
   const boundUnreadCount = useSelector(unreadCount);
 
   let chatBadge = null;
   if (boundUnreadCount > 0) {
     chatBadge = <span className={css.chatBadge}>{boundUnreadCount}</span>;
   }
 
   const chatNavigationItem = React.useMemo(
     () => (
       <NavigationPanel.Item tab="chat">
         <a className={css.navigationPanelTab} onClick={onClickChat}>
           <span className={css.chatIconWrapper}>
-            <SWMansionIcon icon="message-square" size={24} />
+            <SWMansionIcon icon="message-square" size={20} />
             {chatBadge}
           </span>
           <p>Chat</p>
         </a>
       </NavigationPanel.Item>
     ),
     [chatBadge, onClickChat],
   );
 
   const onClickCalendar = React.useCallback(
     (event: SyntheticEvent<HTMLAnchorElement>) => {
       event.preventDefault();
       dispatch({
         type: updateNavInfoActionType,
         payload: { tab: 'calendar' },
       });
     },
     [dispatch],
   );
 
   const isCalendarEnabled = useSelector(state => state.enabledApps.calendar);
   const calendarNavigationItem = React.useMemo(() => {
     if (!isCalendarEnabled) {
       return null;
     }
     return (
       <NavigationPanel.Item tab="calendar">
         <a className={css.navigationPanelTab} onClick={onClickCalendar}>
-          <SWMansionIcon icon="calendar" size={24} />
+          <SWMansionIcon icon="calendar" size={20} />
           <p>Calendar</p>
         </a>
       </NavigationPanel.Item>
     );
   }, [isCalendarEnabled, onClickCalendar]);
 
   return (
     <NavigationPanel.Container tabSelector={navTabSelector} horizontal={true}>
       {chatNavigationItem}
       {calendarNavigationItem}
     </NavigationPanel.Container>
   );
 }
 
 export default AppSwitcher;
diff --git a/web/navigation-panels/topbar.css b/web/navigation-panels/topbar.css
index c7c7f1962..fa62a3060 100644
--- a/web/navigation-panels/topbar.css
+++ b/web/navigation-panels/topbar.css
@@ -1,90 +1,91 @@
 .container {
   border-bottom: 1px solid var(--border);
-  height: 60px;
   display: flex;
   flex-direction: row;
   align-items: center;
 }
 
 .navigationPanelContainer {
   flex-direction: row;
   display: flex;
-  height: 60px;
+  height: 56px;
 }
 
 .plusButton {
   margin: 12px;
   display: flex;
   cursor: pointer;
   color: var(--topbar-button-fg);
   align-items: center;
   justify-content: center;
   background-color: var(--topbar-button-bg);
   border-radius: 4px;
   width: 32px;
   height: 32px;
 }
 
 .plusButton:hover {
   background-color: var(--topbar-button-bg-hover);
 }
 
 .navigationPanelTab {
   display: flex;
   flex-direction: row;
   padding: 16px;
   cursor: pointer;
 }
 
 .navigationPanelTab svg {
   color: var(--color-disabled);
   stroke: var(--color-disabled);
   fill: var(--color-disabled);
 }
 
 .navigationPanelTab p {
   color: var(--color-disabled);
   margin-right: 8px;
   margin-left: 8px;
+  font-size: var(--s-font-14);
+  font-weight: var(--semi-bold);
 }
 
 .navigationPanelTab:hover p,
 .navigationPanelTab:hover svg,
 div.current_tab p,
 div.current_tab svg {
   color: var(--fg);
   stroke: var(--fg);
   fill: var(--fg);
 }
 
 div.current_tab {
   border-bottom: 2px solid var(--tabs-header-active-border);
-  height: 58px;
+  box-sizing: border-box;
 }
 
 .chatIconWrapper {
   position: relative;
 }
 
 span.chatBadge {
   position: absolute;
   top: -4px;
   left: 13px;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
   color: var(--fg);
   background: var(--unread-bg);
   border-radius: 13px;
   font-size: 8px;
   line-height: 1.25;
 }
 
 .tabs {
   display: flex;
   overflow: auto;
   max-width: calc(100% - 56px);
 }
diff --git a/web/sidebar/community-picker.css b/web/sidebar/community-picker.css
index ebd9a73b7..5ee2d2c9c 100644
--- a/web/sidebar/community-picker.css
+++ b/web/sidebar/community-picker.css
@@ -1,74 +1,74 @@
 .container {
   display: flex;
   flex-direction: column;
   background: var(--community-bg);
   border-right: 1px solid var(--border-color);
   flex-grow: 1;
   overflow: auto;
 }
 
 .spacer {
   flex-grow: 1;
 }
 
 .header {
   border-bottom: 1px solid var(--community-drawer-lines);
-  padding: 10px 0 10px 0;
+  padding: 8px 0 8px 0;
   align-items: center;
   display: flex;
   margin-right: 16px;
 }
 
 .footer {
   border-top: 1px solid var(--community-drawer-lines);
   padding: 12px 0 12px 0;
   align-items: center;
   display: flex;
   margin-right: 16px;
 }
 
 .sideLine {
   width: 3px;
   height: 24px;
   border-radius: 0 4px 4px 0;
   margin-right: 14px;
 }
 
 .sideLineActive {
   background-color: var(--community-settings-selected);
 }
 
 .itemContainer {
   display: flex;
   height: 40px;
   align-items: center;
   width: 100%;
 }
 
 .itemContainer svg {
   color: var(--fg);
   padding: 0;
 }
 
 .settingsIcon {
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--settings-btn-bg);
   width: 30px;
   height: 30px;
   border-radius: 50%;
 }
 
 .drawerWrapper {
   width: 100%;
   overflow: auto;
 }
 
 .buttonTitle {
   font-weight: 500;
   font-size: var(--s-font-14);
   line-height: 22px;
   padding-left: 12px;
   color: var(--fg);
 }