diff --git a/web/icons/selection.json b/web/icons/selection.json
--- a/web/icons/selection.json
+++ b/web/icons/selection.json
@@ -1031,7 +1031,6 @@
         "attrs": [
           {
             "fill": "none",
-            "stroke": "rgb(128, 128, 128)",
             "strokeLinejoin": "round",
             "strokeLinecap": "round",
             "strokeMiterlimit": "4",
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
@@ -58,13 +58,13 @@
   const chatNavigationItem = React.useMemo(
     () => (
       <NavigationPanel.Item tab="chat">
-        <p>
+        <div className={css.navigationPanelTab} onClick={onClickChat}>
           <span className={css.chatIconWrapper}>
             <SWMansionIcon icon="message-square" size={24} />
             {chatBadge}
           </span>
-          <a onClick={onClickChat}>Chat</a>
-        </p>
+          <p>Chat</p>
+        </div>
       </NavigationPanel.Item>
     ),
     [chatBadge, onClickChat],
@@ -88,10 +88,10 @@
     }
     return (
       <NavigationPanel.Item tab="calendar">
-        <p>
+        <div className={css.navigationPanelTab} onClick={onClickCalendar}>
           <SWMansionIcon icon="calendar" size={24} />
-          <a onClick={onClickCalendar}>Calendar</a>
-        </p>
+          <p>Calendar</p>
+        </div>
       </NavigationPanel.Item>
     );
   }, [isCalendarEnabled, onClickCalendar]);
@@ -112,10 +112,10 @@
   const appNavigationItem = React.useMemo(
     () => (
       <NavigationPanel.Item tab="apps">
-        <p>
+        <div className={css.navigationPanelTab} onClick={onClickApps}>
           <SWMansionIcon icon="wrench" size={24} />
-          <a onClick={onClickApps}>Apps</a>
-        </p>
+          <p>Apps</p>
+        </div>
       </NavigationPanel.Item>
     ),
     [onClickApps],
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,25 +1,41 @@
 .container {
   grid-area: sBar;
   background: var(--bg);
-  color: var(--color);
+  color: var(--fg);
   border-right: 1px solid var(--border-color);
   display: flex;
 }
 
 .navigationPanelContainer {
   width: 160px;
+  margin-top: 12px;
 }
 
-.container ul {
-  list-style-type: none;
-  padding-top: 24px;
-  padding-left: 28px;
+div.navigationPanelTab {
+  display: flex;
+  flex-direction: row;
+  padding: 12px 0 12px 28px;
+  cursor: pointer;
 }
 
-.container ul li {
-  cursor: pointer;
-  padding-bottom: 24px;
-  line-height: 0;
+div.navigationPanelTab svg {
+  padding-right: 12px;
+  color: var(--color-disabled);
+  stroke: var(--color-disabled);
+  fill: var(--color-disabled);
+}
+
+div.navigationPanelTab p {
+  color: var(--color-disabled);
+}
+
+div.navigationPanelTab:hover p,
+div.navigationPanelTab:hover svg,
+div.current_tab p,
+div.current_tab svg {
+  color: var(--fg);
+  stroke: var(--fg);
+  fill: var(--fg);
 }
 
 .container p {
@@ -27,10 +43,6 @@
   align-content: center;
 }
 
-.container ul a {
-  color: var(--color-disabled);
-}
-
 .container svg {
   color: var(--color-disabled);
   padding-right: 12px;
@@ -56,13 +68,3 @@
   font-size: 8px;
   line-height: 1.25;
 }
-
-li.current-tab svg {
-  color: var(--fg);
-}
-
-li.current-tab a,
-li.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
--- a/web/sidebar/navigation-panel.react.js
+++ b/web/sidebar/navigation-panel.react.js
@@ -34,24 +34,20 @@
           return null;
         }
         return (
-          <li
+          <div
             key={child.props.tab}
             className={classNames({
-              [css['current-tab']]: navInfo.tab === child.props.tab,
+              [css.current_tab]: navInfo.tab === child.props.tab,
             })}
           >
             {child}
-          </li>
+          </div>
         );
       }),
     [children, navInfo.tab],
   );
 
-  return (
-    <div className={css.navigationPanelContainer}>
-      <ul>{items}</ul>
-    </div>
-  );
+  return <div className={css.navigationPanelContainer}>{items}</div>;
 }
 
 const NavigationPanel = {
diff --git a/web/sidebar/settings-switcher.react.js b/web/sidebar/settings-switcher.react.js
--- a/web/sidebar/settings-switcher.react.js
+++ b/web/sidebar/settings-switcher.react.js
@@ -4,6 +4,7 @@
 import { useDispatch } from 'react-redux';
 
 import { updateNavInfoActionType } from '../types/nav-types';
+import css from './left-layout-aside.css';
 import NavigationPanel from './navigation-panel.react';
 
 function SettingsSwitcher(): React.Node {
@@ -21,9 +22,9 @@
 
   const accountSettingsNavigationItem = React.useMemo(
     () => (
-      <p>
-        <a onClick={onClickAccountSettings}>My Account</a>
-      </p>
+      <div className={css.navigationPanelTab} onClick={onClickAccountSettings}>
+        <p>My Account</p>
+      </div>
     ),
     [onClickAccountSettings],
   );