diff --git a/ui/component/channelStakedIndicator/view.jsx b/ui/component/channelStakedIndicator/view.jsx
index fb6ba849f..2103938d9 100644
--- a/ui/component/channelStakedIndicator/view.jsx
+++ b/ui/component/channelStakedIndicator/view.jsx
@@ -1,5 +1,4 @@
 // @flow
-import { SIMPLE_SITE } from 'config';
 import * as ICONS from 'constants/icons';
 import React from 'react';
 import classnames from 'classnames';
@@ -39,33 +38,31 @@ function ChannelStakedIndicator(props: Props) {
   const icon = getChannelIcon(level);
 
   return (
-    SIMPLE_SITE && (
-      <Tooltip
-        label={
-          <div className="channel-staked__tooltip">
-            <div className="channel-staked__tooltip-icons">
-              <LevelIcon icon={icon} isControlling={isControlling} size={isControlling ? 14 : 10} />
-            </div>
+    <Tooltip
+      title={
+        <div className="channel-staked__tooltip">
+          <div className="channel-staked__tooltip-icons">
+            <LevelIcon icon={icon} isControlling={isControlling} size={isControlling ? 14 : 10} />
+          </div>
 
-            <div className="channel-staked__tooltip-text">
-              <span>{__('Level %current_level%', { current_level: level })}</span>
-              <div className="channel-staked__amount">
-                <LbcSymbol postfix={<CreditAmount amount={amount} showLBC={false} />} size={14} />
-              </div>
+          <div className="channel-staked__tooltip-text">
+            <span>{__('Level %current_level%', { current_level: level })}</span>
+            <div className="channel-staked__amount">
+              <LbcSymbol postfix={<CreditAmount amount={amount} showLBC={false} />} size={14} />
             </div>
           </div>
-        }
-      >
-        <div
-          className={classnames('channel-staked__wrapper', {
-            'channel-staked__wrapper--large': large,
-            'channel-staked__wrapper--inline': inline,
-          })}
-        >
-          <LevelIcon icon={icon} large={large} isControlling={isControlling} />
         </div>
-      </Tooltip>
-    )
+      }
+    >
+      <div
+        className={classnames('channel-staked__wrapper', {
+          'channel-staked__wrapper--large': large,
+          'channel-staked__wrapper--inline': inline,
+        })}
+      >
+        <LevelIcon icon={icon} large={large} isControlling={isControlling} />
+      </div>
+    </Tooltip>
   );
 }
 
diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx
index b33af33d8..772547fc5 100644
--- a/ui/component/comment/view.jsx
+++ b/ui/component/comment/view.jsx
@@ -241,7 +241,7 @@ function Comment(props: Props) {
           <div className="comment__meta">
             <div className="comment__meta-information">
               {isGlobalMod && (
-                <Tooltip label={__('Admin')}>
+                <Tooltip title={__('Admin')}>
                   <span className="comment__badge comment__badge--global-mod">
                     <Icon icon={ICONS.BADGE_MOD} size={20} />
                   </span>
@@ -249,7 +249,7 @@ function Comment(props: Props) {
               )}
 
               {isModerator && (
-                <Tooltip label={__('Moderator')}>
+                <Tooltip title={__('Moderator')}>
                   <span className="comment__badge comment__badge--mod">
                     <Icon icon={ICONS.BADGE_MOD} size={20} />
                   </span>
diff --git a/ui/component/common/tooltip.jsx b/ui/component/common/tooltip.jsx
index fd06493ab..11753e539 100644
--- a/ui/component/common/tooltip.jsx
+++ b/ui/component/common/tooltip.jsx
@@ -1,18 +1,30 @@
 // @flow
-import type { Node } from 'react';
 import React from 'react';
-import ReachTooltip from '@reach/tooltip';
-// import '@reach/tooltip/styles.css'; --> 'scss/third-party.scss'
+import MUITooltip from '@mui/material/Tooltip';
+import type { Node } from 'react';
 
 type Props = {
-  label: string | Node,
+  arrow?: boolean,
   children: Node,
+  disableInteractive?: boolean,
+  enterDelay?: number,
+  title?: string | Node,
 };
 
 function Tooltip(props: Props) {
-  const { children, label } = props;
+  const { arrow = true, children, disableInteractive = true, enterDelay = 300, title } = props;
 
-  return <ReachTooltip label={label}>{children}</ReachTooltip>;
+  return (
+    <MUITooltip
+      arrow={arrow}
+      disableInteractive={disableInteractive}
+      enterDelay={enterDelay}
+      enterNextDelay={enterDelay}
+      title={title}
+    >
+      {children}
+    </MUITooltip>
+  );
 }
 
 export default Tooltip;
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index fe919a4f6..b9dd30185 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -11,6 +11,7 @@ import Logo from 'component/logo';
 import NotificationBubble from 'component/notificationBubble';
 import React from 'react';
 import SkipNavigationButton from 'component/skipNavigationButton';
+import Tooltip from 'component/common/tooltip';
 import WunderBar from 'component/wunderbar';
 import * as remote from '@electron/remote';
 import { IS_MAC } from 'component/app/view';
@@ -121,22 +122,32 @@ const Header = (props: Props) => {
 
   const userButtons = (className: string) => (
     <div className={classnames('header__menu', { 'header__menu--with-balance': authenticated })}>
-      <Button
+      <Tooltip
         title={
           balance > 0
             ? __('Immediately spendable: %spendable_balance%', { spendable_balance: roundedSpendableBalance })
             : __('Your Wallet')
         }
-        navigate={`/$/${PAGES.WALLET}`}
-        className={classnames(className, 'header__navigation-item--balance')}
-        label={hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance}
-        icon={ICONS.LBC}
-        // @if TARGET='app'
-        onDoubleClick={(e) => {
-          e.stopPropagation();
-        }}
-        // @endif
-      />
+      >
+        <div>
+          <Button
+            // title={
+            //   balance > 0
+            //     ? __('Immediately spendable: %spendable_balance%', { spendable_balance: roundedSpendableBalance })
+            //     : __('Your Wallet')
+            // }
+            navigate={`/$/${PAGES.WALLET}`}
+            className={classnames(className, 'header__navigation-item--balance')}
+            label={hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance}
+            icon={ICONS.LBC}
+            // @if TARGET='app'
+            onDoubleClick={(e) => {
+              e.stopPropagation();
+            }}
+            // @endif
+          />
+        </div>
+      </Tooltip>
 
       <HeaderProfileMenuButton />
     </div>
diff --git a/ui/component/headerMenuButtons/view.jsx b/ui/component/headerMenuButtons/view.jsx
index adc5835a4..3000e9958 100644
--- a/ui/component/headerMenuButtons/view.jsx
+++ b/ui/component/headerMenuButtons/view.jsx
@@ -7,6 +7,7 @@ import HeaderMenuLink from 'component/common/header-menu-link';
 import Icon from 'component/common/icon';
 import NotificationHeaderButton from 'component/headerNotificationButton';
 import React from 'react';
+import Tooltip from 'component/common/tooltip';
 
 type HeaderMenuButtonProps = {
   authenticated: boolean,
@@ -24,13 +25,11 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
   return (
     <div className="header__buttons">
       <Menu>
-        <MenuButton
-          aria-label={__('Publish a file, or create a channel')}
-          title={__('Publish a file, or create a channel')}
-          className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden"
-        >
-          <Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
-        </MenuButton>
+        <Tooltip title={__('Publish a file, or create a channel')}>
+          <MenuButton className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden">
+            <Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
+          </MenuButton>
+        </Tooltip>
 
         <MenuList className="menu__list--header">
           <HeaderMenuLink page={PAGES.UPLOAD} icon={ICONS.PUBLISH} name={__('Upload')} />
@@ -41,13 +40,11 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
       {notificationsEnabled && <NotificationHeaderButton />}
 
       <Menu>
-        <MenuButton
-          aria-label={__('Settings')}
-          title={__('Settings')}
-          className="header__navigation-item menu__title header__navigation-item--icon  mobile-hidden"
-        >
-          <Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
-        </MenuButton>
+        <Tooltip title={__('Settings')}>
+          <MenuButton className="header__navigation-item menu__title header__navigation-item--icon  mobile-hidden">
+            <Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
+          </MenuButton>
+        </Tooltip>
 
         <MenuList className="menu__list--header">
           <HeaderMenuLink page={PAGES.SETTINGS} icon={ICONS.SETTINGS} name={__('Settings')} />
diff --git a/ui/component/headerNotificationButton/view.jsx b/ui/component/headerNotificationButton/view.jsx
index eb1f99e3c..06c0ce9f8 100644
--- a/ui/component/headerNotificationButton/view.jsx
+++ b/ui/component/headerNotificationButton/view.jsx
@@ -7,6 +7,7 @@ import Button from 'component/button';
 import Icon from 'component/common/icon';
 import NotificationBubble from 'component/notificationBubble';
 import React from 'react';
+import Tooltip from 'component/common/tooltip';
 
 type Props = {
   unseenCount: number,
@@ -28,14 +29,14 @@ export default function NotificationHeaderButton(props: Props) {
   if (!notificationsEnabled) return null;
 
   return (
-    <Button
-      onClick={handleMenuClick}
-      aria-label={__('Notifications')}
-      title={__('Notifications')}
-      className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden"
-    >
-      <Icon size={18} icon={ICONS.NOTIFICATION} aria-hidden />
-      <NotificationBubble />
-    </Button>
+    <Tooltip title={__('Notifications')}>
+      <Button
+        onClick={handleMenuClick}
+        className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden"
+      >
+        <Icon size={18} icon={ICONS.NOTIFICATION} aria-hidden />
+        <NotificationBubble />
+      </Button>
+    </Tooltip>
   );
 }
diff --git a/ui/scss/component/_channel.scss b/ui/scss/component/_channel.scss
index b83d89498..986b1c50b 100644
--- a/ui/scss/component/_channel.scss
+++ b/ui/scss/component/_channel.scss
@@ -363,17 +363,6 @@ $actions-z-index: 2;
   }
 }
 
-.channel-staked__tooltip {
-  display: flex;
-  align-items: center;
-  line-height: 1rem;
-}
-
-.channel-staked__tooltip-text {
-  margin-left: var(--spacing-xs);
-  font-size: var(--font-xsmall);
-}
-
 .channel-staked__wrapper {
   display: flex;
   position: absolute;
diff --git a/ui/scss/component/_tooltip.scss b/ui/scss/component/_tooltip.scss
index 2013b410a..896a040b3 100644
--- a/ui/scss/component/_tooltip.scss
+++ b/ui/scss/component/_tooltip.scss
@@ -1,8 +1,24 @@
-[data-reach-tooltip] {
-  border-radius: var(--border-radius);
-  background-color: var(--color-tooltip-bg);
-  color: var(--color-tooltip-text);
-  border: none;
-  padding: var(--spacing-s);
-  overflow: hidden;
+.MuiTooltip-tooltip {
+  border-radius: var(--border-radius) !important;
+  background-color: var(--color-tooltip-bg) !important;
+  color: var(--color-tooltip-text) !important;
+  font-size: var(--font-small) !important;
+}
+
+.MuiTooltip-arrow {
+  color: var(--color-tooltip-bg) !important;
+  font-size: var(--font-xxsmall) !important;
+}
+
+.channel-staked__tooltip {
+  display: flex;
+  align-items: center;
+  line-height: 1rem;
+  padding: var(--spacing-xs);
+
+  .channel-staked__tooltip-text {
+    margin-left: var(--spacing-xs);
+    font-size: var(--font-xsmall);
+    font-size: var(--font-small);
+  }
 }
diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss
index bebc2af07..eb39ad54a 100644
--- a/ui/scss/themes/dark.scss
+++ b/ui/scss/themes/dark.scss
@@ -123,6 +123,7 @@
   --color-purchased-text: var(--color-gray-5);
   --color-thumbnail-background: var(--color-gray-5);
   --color-tooltip-bg: #2f3337;
+  --color-tooltip-text: #fafafa;
   --color-help-warning-bg: #d97706;
   --color-help-warning-text: white;
   --color-blockquote: var(--color-gray-5);