diff --git a/web/sidebar/app-switcher.react.js b/web/sidebar/app-switcher.react.js
--- a/web/sidebar/app-switcher.react.js
+++ b/web/sidebar/app-switcher.react.js
@@ -92,10 +92,12 @@
   }
 
   const chatNavClasses = classNames({
-    [css['current-tab']]: navInfo.tab === 'chat',
+    [css.appTab]: true,
+    [css.activeTab]: navInfo.tab === 'chat',
   });
   const appsNavClasses = classNames({
-    [css['current-tab']]: navInfo.tab === 'apps',
+    [css.appTab]: true,
+    [css.activeTab]: navInfo.tab === 'apps',
   });
 
   const calendarLink = React.useMemo(() => {
@@ -103,38 +105,31 @@
       return null;
     }
     const calendarNavClasses = classNames({
-      [css['current-tab']]: navInfo.tab === 'calendar',
+      [css.appTab]: true,
+      [css.activeTab]: navInfo.tab === 'calendar',
     });
     return (
-      <li>
-        <p className={calendarNavClasses}>
-          <SWMansionIcon icon="calendar" size={24} />
-          <a onClick={onClickCalendar}>Calendar</a>
-        </p>
-      </li>
+      <div onClick={onClickCalendar} className={calendarNavClasses}>
+        <SWMansionIcon icon="calendar" size={24} />
+        <p>Calendar</p>
+      </div>
     );
   }, [isCalendarEnabled, navInfo.tab, onClickCalendar]);
 
   return (
     <div className={css.appSwitcherContainer}>
-      <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 onClick={onClickChat} className={chatNavClasses}>
+        <span className={css.chatIconWrapper}>
+          <SWMansionIcon icon="message-square" size={24} />
+          {chatBadge}
+        </span>
+        <p>Chat</p>
+      </div>
+      {calendarLink}
+      <div onClick={onClickApps} className={appsNavClasses}>
+        <SWMansionIcon icon="wrench" size={24} />
+        <p>Apps</p>
+      </div>
     </div>
   );
 }
diff --git a/web/sidebar/left-layout-aside.css b/web/sidebar/left-layout-aside.css
--- a/web/sidebar/left-layout-aside.css
+++ b/web/sidebar/left-layout-aside.css
@@ -1,39 +1,39 @@
 .container {
   grid-area: sBar;
   background: var(--bg);
-  color: var(--color);
+  color: var(--fg);
   border-right: 1px solid var(--border-color);
   display: flex;
 }
 
 .appSwitcherContainer {
   width: 160px;
+  margin-top: 24px;
 }
 
-.container ul {
-  list-style-type: none;
-  padding-top: 24px;
-  padding-left: 28px;
-}
-
-.container ul li {
+div.appTab {
+  display: flex;
+  flex-direction: row;
+  padding: 12px 0 12px 28px;
   cursor: pointer;
-  padding-bottom: 24px;
-  line-height: 0;
 }
-
-.container p {
-  display: flex;
-  align-content: center;
+div.appTab svg {
+  padding-right: 12px;
+  color: var(--color-disabled);
+  stroke: var(--color-disabled);
+  fill: var(--color-disabled);
 }
-
-.container ul a {
+div.appTab p {
   color: var(--color-disabled);
 }
 
-.container svg {
-  color: var(--color-disabled);
-  padding-right: 12px;
+div.appTab:hover p,
+div.appTab:hover svg,
+div.activeTab p,
+div.activeTab svg {
+  color: var(--fg);
+  stroke: var(--fg);
+  fill: var(--fg);
 }
 
 .chatIconWrapper {
@@ -56,13 +56,3 @@
   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);
-}