diff --git a/source/Popup/Header.module.scss b/source/Popup/Header.module.scss
index 86b26cd..8b58f24 100644
--- a/source/Popup/Header.module.scss
+++ b/source/Popup/Header.module.scss
@@ -29,6 +29,16 @@
   gap: 0.25rem;
 }
 
+.iconWrapper {
+  position: relative;
+  display: inline-flex;
+
+  &:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
 .styledIcon {
   background-color: transparent;
   box-shadow: none;
@@ -39,3 +49,34 @@
     color: $gray-600;
   }
 }
+
+.tooltip {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  top: calc(100% + 0.375rem);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.375rem 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: $medium;
+  white-space: nowrap;
+  color: $white;
+  background-color: $gray-800;
+  border-radius: $radius-sm;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  transition: opacity $transition-fast, visibility $transition-fast;
+  z-index: 100;
+  pointer-events: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0.25rem;
+    border-style: solid;
+    border-color: transparent transparent $gray-800 transparent;
+  }
+}
diff --git a/source/Popup/Header.tsx b/source/Popup/Header.tsx
index d315e43..bc3c824 100644
--- a/source/Popup/Header.tsx
+++ b/source/Popup/Header.tsx
@@ -84,26 +84,32 @@ function Header() {
       </a>
 
       <div className={styles.actions}>
-        <Icon
-          onClick={fetchUserDomains}
-          name={iconToShow}
-          title="Refresh"
-          className={clsx('icon', styles.styledIcon)}
-        />
-        {extensionSettingsState.history && (
+        <span className={styles.iconWrapper}>
           <Icon
-            onClick={openHistoryPage}
-            name="clock"
+            onClick={fetchUserDomains}
+            name={iconToShow}
             className={clsx('icon', styles.styledIcon)}
-            title="History"
           />
+          <span className={styles.tooltip}>Sync account</span>
+        </span>
+        {extensionSettingsState.history && (
+          <span className={styles.iconWrapper}>
+            <Icon
+              onClick={openHistoryPage}
+              name="clock"
+              className={clsx('icon', styles.styledIcon)}
+            />
+            <span className={styles.tooltip}>History</span>
+          </span>
         )}
-        <Icon
-          onClick={openExtOptionsPage}
-          name="settings"
-          className={clsx('icon', styles.styledIcon)}
-          title="Settings"
-        />
+        <span className={styles.iconWrapper}>
+          <Icon
+            onClick={openExtOptionsPage}
+            name="settings"
+            className={clsx('icon', styles.styledIcon)}
+          />
+          <span className={styles.tooltip}>Settings</span>
+        </span>
       </div>
     </header>
   );