diff --git a/web/chat/chat-thread-list-item.react.js b/web/chat/chat-thread-list-item.react.js
--- a/web/chat/chat-thread-list-item.react.js
+++ b/web/chat/chat-thread-list-item.react.js
@@ -144,10 +144,7 @@
 
   return (
     <>
-      <div
-        className={containerClassName}
-        onClick={selectItemIfNotActiveCreation}
-      >
+      <a className={containerClassName} onClick={selectItemIfNotActiveCreation}>
         <div className={css.colorContainer}>
           <div className={css.colorSplotchContainer}>
             <div className={css.dotContainer}>{unreadDot}</div>
@@ -173,7 +170,7 @@
           />
           <div className={lastActivityClassName}>{lastActivity}</div>
         </div>
-      </div>
+      </a>
       {sidebars}
     </>
   );
diff --git a/web/chat/chat-thread-list-see-more-sidebars.react.js b/web/chat/chat-thread-list-see-more-sidebars.react.js
--- a/web/chat/chat-thread-list-see-more-sidebars.react.js
+++ b/web/chat/chat-thread-list-see-more-sidebars.react.js
@@ -30,7 +30,7 @@
     [popModal, pushModal, threadInfo.id],
   );
   return (
-    <div className={classNames(css.thread, css.sidebar)} onClick={onClick}>
+    <a className={classNames(css.thread, css.sidebar)} onClick={onClick}>
       <a className={css.threadButton}>
         <div
           className={classNames({
@@ -43,7 +43,7 @@
           <div className={css.seeMoreText}>See more...</div>
         </div>
       </a>
-    </div>
+    </a>
   );
 }
 
diff --git a/web/chat/chat-thread-list-sidebar.react.js b/web/chat/chat-thread-list-sidebar.react.js
--- a/web/chat/chat-thread-list-sidebar.react.js
+++ b/web/chat/chat-thread-list-sidebar.react.js
@@ -33,7 +33,7 @@
   }
 
   return (
-    <div
+    <a
       className={classNames(css.threadListSidebar, css.sidebar, {
         [css.activeThread]: active,
       })}
@@ -46,7 +46,7 @@
         mostRecentNonLocalMessage={mostRecentNonLocalMessage}
         renderStyle="thread"
       />
-    </div>
+    </a>
   );
 }
 
diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -1,8 +1,8 @@
-div.thread {
+a.thread {
   display: flex;
   flex-direction: row;
 }
-div.threadListSidebar {
+a.threadListSidebar {
   display: flex;
   flex-direction: row;
   height: 32px;
@@ -10,33 +10,36 @@
   position: relative;
   cursor: pointer;
 }
-div.threadListSidebar > svg {
+a.threadListSidebar > svg {
   position: absolute;
   top: -7px;
   left: 30px;
 }
-div.thread:first-child {
+a.thread:first-child {
   padding-top: 6px;
 }
-div.activeThread,
-div.threadListSidebar:hover {
+
+a.activeThread,
+a.threadListSidebar:hover {
   background: var(--thread-active-bg);
 }
 
-div.activeThread :is(div.dark, .lastMessage span.read, .title) {
+a.activeThread :is(div.dark, .lastMessage span.read, .title) {
   color: var(--chat-thread-list-color-active);
 }
 
-div.activeThread .lastMessage.read {
+a.activeThread .lastMessage.read {
   color: var(--chat-thread-list-color-active);
 }
 
-div.activeThread.thread:hover {
+a.activeThread.thread:hover {
   background: var(--thread-active-bg);
 }
-div.thread:hover {
+
+a.thread:hover {
   background: var(--thread-hover-bg);
 }
+
 div.title {
   flex: 1;
   font-size: var(--m-font-16);
@@ -163,7 +166,7 @@
   color: var(--thread-color-read);
   align-self: flex-start;
 }
-div.threadListSidebar > div.dotContainer {
+a.threadListSidebar > div.dotContainer {
   width: 16px;
 }
 div.sidebarTitle.unread {
diff --git a/web/chat/inline-sidebar.css b/web/chat/inline-sidebar.css
--- a/web/chat/inline-sidebar.css
+++ b/web/chat/inline-sidebar.css
@@ -18,7 +18,7 @@
   right: 31px;
   margin-left: 31px;
 }
-div.inlineSidebarContent {
+a.inlineSidebarContent {
   background: var(--inline-sidebar-bg);
   color: var(--inline-sidebar-color);
   font-size: var(--s-font-14);
@@ -33,7 +33,7 @@
   transition: background 0.2s ease-in-out;
 }
 
-div.inlineSidebarContent:hover {
+a.inlineSidebarContent:hover {
   background: var(--inline-sidebar-bg-hover);
 }
 
diff --git a/web/chat/inline-sidebar.react.js b/web/chat/inline-sidebar.react.js
--- a/web/chat/inline-sidebar.react.js
+++ b/web/chat/inline-sidebar.react.js
@@ -61,13 +61,13 @@
 
   return (
     <div className={containerClasses}>
-      <div
+      <a
         className={css.inlineSidebarContent}
         onClick={threadInfoExists ? onClick : null}
       >
         {sidebarItem}
         {reactionsList}
-      </div>
+      </a>
     </div>
   );
 }
diff --git a/web/components/button.css b/web/components/button.css
--- a/web/components/button.css
+++ b/web/components/button.css
@@ -73,14 +73,6 @@
   background: var(--btn-bg-danger-disabled);
 }
 
-.round {
-  background: var(--settings-btn-bg);
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  padding: 0;
-}
-
 .text {
   background: transparent;
   white-space: nowrap;
diff --git a/web/components/button.react.js b/web/components/button.react.js
--- a/web/components/button.react.js
+++ b/web/components/button.react.js
@@ -5,7 +5,7 @@
 
 import css from './button.css';
 
-export type ButtonVariant = 'primary' | 'secondary' | 'round' | 'text';
+export type ButtonVariant = 'primary' | 'secondary' | 'text';
 export type ButtonColor =
   | 'success'
   | 'danger'
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
@@ -59,13 +59,13 @@
   const chatNavigationItem = React.useMemo(
     () => (
       <NavigationPanel.Item tab="chat">
-        <div className={css.navigationPanelTab} onClick={onClickChat}>
+        <a className={css.navigationPanelTab} onClick={onClickChat}>
           <span className={css.chatIconWrapper}>
             <SWMansionIcon icon="message-square" size={24} />
             {chatBadge}
           </span>
           <p>Chat</p>
-        </div>
+        </a>
       </NavigationPanel.Item>
     ),
     [chatBadge, onClickChat],
@@ -89,10 +89,10 @@
     }
     return (
       <NavigationPanel.Item tab="calendar">
-        <div className={css.navigationPanelTab} onClick={onClickCalendar}>
+        <a className={css.navigationPanelTab} onClick={onClickCalendar}>
           <SWMansionIcon icon="calendar" size={24} />
           <p>Calendar</p>
-        </div>
+        </a>
       </NavigationPanel.Item>
     );
   }, [isCalendarEnabled, onClickCalendar]);
@@ -113,10 +113,10 @@
   const appNavigationItem = React.useMemo(
     () => (
       <NavigationPanel.Item tab="apps">
-        <div className={css.navigationPanelTab} onClick={onClickApps}>
+        <a className={css.navigationPanelTab} onClick={onClickApps}>
           <SWMansionIcon icon="globe-1" size={24} />
           <p>Apps</p>
-        </div>
+        </a>
       </NavigationPanel.Item>
     ),
     [onClickApps],
diff --git a/web/sidebar/community-picker.css b/web/sidebar/community-picker.css
--- a/web/sidebar/community-picker.css
+++ b/web/sidebar/community-picker.css
@@ -30,3 +30,13 @@
   border-left: 8px solid var(--community-settings-selected);
   border-right: 8px solid transparent;
 }
+
+.settingsIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--settings-btn-bg);
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+}
diff --git a/web/sidebar/community-picker.react.js b/web/sidebar/community-picker.react.js
--- a/web/sidebar/community-picker.react.js
+++ b/web/sidebar/community-picker.react.js
@@ -4,7 +4,6 @@
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
-import Button from '../components/button.react';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 import SWMansionIcon from '../SWMansionIcon.react';
@@ -55,9 +54,9 @@
       </a>
       <div className={css.spacer} />
       <div className={settingsButtonContainerClass}>
-        <Button variant="round" onClick={openAccountSettings}>
+        <a className={css.settingsIcon} onClick={openAccountSettings}>
           <SWMansionIcon icon="settings" size={22} />
-        </Button>
+        </a>
       </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
@@ -11,26 +11,26 @@
   margin-top: 12px;
 }
 
-div.navigationPanelTab {
+a.navigationPanelTab {
   display: flex;
   flex-direction: row;
   padding: 12px 0 12px 28px;
   cursor: pointer;
 }
 
-div.navigationPanelTab svg {
+a.navigationPanelTab svg {
   padding-right: 12px;
   color: var(--color-disabled);
   stroke: var(--color-disabled);
   fill: var(--color-disabled);
 }
 
-div.navigationPanelTab p {
+a.navigationPanelTab p {
   color: var(--color-disabled);
 }
 
-div.navigationPanelTab:hover p,
-div.navigationPanelTab:hover svg,
+a.navigationPanelTab:hover p,
+a.navigationPanelTab:hover svg,
 div.current_tab p,
 div.current_tab svg {
   color: var(--fg);
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
@@ -23,9 +23,9 @@
   );
   const accountSettingsNavigationItem = React.useMemo(
     () => (
-      <div className={css.navigationPanelTab} onClick={onClickAccountSettings}>
+      <a className={css.navigationPanelTab} onClick={onClickAccountSettings}>
         <p>My Account</p>
-      </div>
+      </a>
     ),
     [onClickAccountSettings],
   );
@@ -42,9 +42,9 @@
   );
   const dangerZoneNavigationItem = React.useMemo(
     () => (
-      <div className={css.navigationPanelTab} onClick={onClickDangerZone}>
+      <a className={css.navigationPanelTab} onClick={onClickDangerZone}>
         <p>Danger Zone</p>
-      </div>
+      </a>
     ),
     [onClickDangerZone],
   );