diff --git a/plans/clickablebox3.md b/plans/clickablebox3.md
index 04ee699989ff..0fcef11e62f4 100644
--- a/plans/clickablebox3.md
+++ b/plans/clickablebox3.md
@@ -24,7 +24,7 @@
 ## ✅ Done: ClickableBox3 implemented and devices/ migrated
 
 Committed in `3ac6c14b82`. Key points for future reference:
-- `ClickableBox3Props = Box2Props & {onClick?, onLongPress?, hitSlop?}` — `direction` required
+- `ClickableBox3Props = Box2Props & {onClick?, onLongPress?, hitSlop?}` — `direction` required; desktop mouse events (`onMouseDown/Up/Leave/Move/Over/Enter`, `onContextMenu`) are in `Box2Props` and passed through to the `<div>`
 - `box2ClassNames()` extracted from Box2 and shared; `box2SharedProps` exported from `box.tsx`
 - `devices/` pilot complete: 3 CB2 usages → CB3, inner Box2 wrappers eliminated, `mobileAddHeader` style simplified
 
@@ -38,19 +38,19 @@ Use `migrate-clickable-box` skill for each chunk. Run `yarn lint && yarn tsc` an
 - [x] `shared/devices/` (6 total)
 
 ### Round 1 — small
-- [ ] `shared/git/` (3)
-- [ ] `shared/incoming-share/` (2)
-- [ ] `shared/signup/` (2)
-- [ ] `shared/provision/` (4)
-- [ ] `shared/people/` (2)
-- [ ] `shared/settings/` (4)
-- [ ] `shared/profile/` (10)
+- [x] `shared/git/` (3)
+- [x] `shared/incoming-share/` (2)
+- [x] `shared/signup/` (2)
+- [x] `shared/provision/` (4)
+- [x] `shared/people/` (2)
+- [x] `shared/settings/` (4)
+- [x] `shared/profile/` (10)
 
 ### Round 2 — medium
-- [ ] `shared/tracker/` (4)
-- [ ] `shared/menubar/` (3)
-- [ ] `shared/app/` (4)
-- [ ] `shared/router-v2/` (9)
+- [x] `shared/tracker/` (4)
+- [x] `shared/menubar/` (3)
+- [x] `shared/app/` (4)
+- [x] `shared/router-v2/` (9)
 - [ ] `shared/teams/` (25+)
 - [ ] `shared/team-building/` (9+)
 
diff --git a/shared/app/global-errors.tsx b/shared/app/global-errors.tsx
index d5cfc7e672ae..d1257d310d98 100644
--- a/shared/app/global-errors.tsx
+++ b/shared/app/global-errors.tsx
@@ -213,7 +213,7 @@ const GlobalError = () => {
   }
 
   return (
-    <Kb.ClickableBox style={stylesContainer} onClick={onExpandClick}>
+    <Kb.ClickableBox3 style={stylesContainer} onClick={onExpandClick} direction="vertical">
       <Kb.Box2 direction="horizontal" flex={1} style={styles.innerContainer}>
         <Kb.Text center={true} type="BodyBig" style={styles.summary}>
           {summary}
@@ -239,7 +239,7 @@ const GlobalError = () => {
           {details}
         </Kb.Text>
       </Kb.ScrollView>
-    </Kb.ClickableBox>
+    </Kb.ClickableBox3>
   )
 }
 
diff --git a/shared/app/runtime-stats.tsx b/shared/app/runtime-stats.tsx
index bad8651248a6..4214b75d8e5c 100644
--- a/shared/app/runtime-stats.tsx
+++ b/shared/app/runtime-stats.tsx
@@ -226,8 +226,7 @@ const RuntimeStatsDesktop = ({stats}: Props) => {
   return (
     <>
       <Kb.BoxGrow style={styles.boxGrow}>
-        <Kb.ClickableBox onClick={() => setMoreLogs(m => !m)}>
-          <Kb.Box2 direction="vertical" style={styles.container} gap="xxtiny" fullWidth={true}>
+        <Kb.ClickableBox3 onClick={() => setMoreLogs(m => !m)} direction="vertical" style={styles.container} gap="xxtiny" fullWidth={true}>
             {!moreLogs &&
               stats.processStats?.map((stat, i) => {
                 return (
@@ -303,8 +302,7 @@ const RuntimeStatsDesktop = ({stats}: Props) => {
               <Kb.Box style={styles.radarContainer} forwardedRef={refContainer} onClick={toggleRadar} />
             )*/}
             <LogStats num={moreLogs ? 25 : 5} />
-          </Kb.Box2>
-        </Kb.ClickableBox>
+        </Kb.ClickableBox3>
       </Kb.BoxGrow>
     </>
   )
@@ -333,9 +331,9 @@ const RuntimeStatsMobile = ({stats}: Props) => {
         style={showLogs ? styles.modalLogStats : styles.modalLogStatsHidden}
         gap="xtiny"
       >
-        <Kb.ClickableBox onClick={() => setShowLogs(s => !s)}>
+        <Kb.ClickableBox3 onClick={() => setShowLogs(s => !s)} direction="vertical">
           <LogStats />
-        </Kb.ClickableBox>
+        </Kb.ClickableBox3>
       </Kb.Box2>
       <Kb.Box2 direction="horizontal" style={styles.container} gap="xtiny" pointerEvents="none">
         {processStat && (
diff --git a/shared/common-adapters/box.tsx b/shared/common-adapters/box.tsx
index fc9171f51534..d377163dc69a 100644
--- a/shared/common-adapters/box.tsx
+++ b/shared/common-adapters/box.tsx
@@ -24,6 +24,7 @@ export type Box2Props = {
   onDrop?: (syntheticDragEvent: React.DragEvent) => void
   onLayout?: (evt: LayoutEvent) => void
   onMouseDown?: (syntheticEvent: React.MouseEvent) => void
+  onMouseEnter?: (syntheticEvent: React.MouseEvent) => void
   onMouseMove?: (syntheticEvent: React.MouseEvent) => void
   onMouseLeave?: (syntheticEvent: React.MouseEvent) => void
   onMouseUp?: (syntheticEvent: React.MouseEvent) => void
@@ -318,7 +319,7 @@ export const ClickableBox3 = (p: ClickableBox3Props & {ref?: React.Ref<MeasureRe
   const {onClick, onLongPress, hitSlop, ref, ...box2p} = p
 
   if (!isMobile) {
-    const {children, style: _style, onMouseOver, onMouseDown, onMouseLeave, onMouseMove, onMouseUp, onContextMenu, testID, flex, title, tooltip} = box2p
+    const {children, style: _style, onMouseOver, onMouseEnter, onMouseDown, onMouseLeave, onMouseMove, onMouseUp, onContextMenu, testID, flex, title, tooltip} = box2p
     const cn = box2ClassNames(box2p, 'clickable-box2')
     const s = Styles.collapseStyles([flex != null && flex !== 1 ? {flex} : undefined, _style]) as React.CSSProperties
     return (
@@ -330,6 +331,7 @@ export const ClickableBox3 = (p: ClickableBox3Props & {ref?: React.Ref<MeasureRe
         onClick={onClick}
         onContextMenu={onContextMenu}
         onMouseDown={onMouseDown}
+        onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         onMouseMove={onMouseMove}
         onMouseOver={onMouseOver}
diff --git a/shared/menubar/index.desktop.tsx b/shared/menubar/index.desktop.tsx
index 7c9640febddb..3d70402e3829 100644
--- a/shared/menubar/index.desktop.tsx
+++ b/shared/menubar/index.desktop.tsx
@@ -118,53 +118,55 @@ const ChatRow = (p: {conv: Conversation; httpSrvAddress: string; httpSrvToken: s
   const timestamp = conv.timestamp ? TimestampUtil.formatTimeForConversationList(conv.timestamp) : ''
 
   return (
-    <Kb.ClickableBox
+    <Kb.ClickableBox3
       onClick={() => R.remoteDispatch(RemoteGen.createOpenChatFromWidget({conversationIDKey: conv.conversationIDKey}))}
-      style={styles.chatRow}
+      direction="horizontal"
+      fullWidth={true}
+      alignItems="center"
+      gap="tiny"
+      style={styles.chatRowInner}
     >
-      <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" gap="tiny" style={styles.chatRowInner}>
-        <HttpAvatar
-          name={avatarName}
-          isTeam={isTeam}
-          size={48}
-          httpSrvAddress={httpSrvAddress}
-          httpSrvToken={httpSrvToken}
-        />
-        <Kb.Box2 direction="vertical" flex={1} overflow="hidden" style={styles.chatRowText}>
-          <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" justifyContent="space-between">
-            <Kb.Box2 direction="horizontal" alignItems="center" gap="xtiny" overflow="hidden" style={styles.chatRowNameLeft}>
-              <Kb.Text type={conv.hasUnread ? 'BodyBold' : 'BodySemibold'} lineClamp={1} style={styles.chatRowName}>
-                {isTeam && conv.channelname ? `${name}#${conv.channelname}` : name}
-              </Kb.Text>
-              {conv.hasBadge && <Kb.Box2 direction="vertical" style={styles.chatBadge} />}
-            </Kb.Box2>
-            {!!timestamp && (
-              <Kb.Text
-                type="BodyTiny"
-                style={Kb.Styles.collapseStyles([
-                  styles.chatTimestamp,
-                  conv.hasUnread && Kb.Styles.globalStyles.fontBold,
-                ])}
-              >
-                {timestamp}
-              </Kb.Text>
-            )}
+      <HttpAvatar
+        name={avatarName}
+        isTeam={isTeam}
+        size={48}
+        httpSrvAddress={httpSrvAddress}
+        httpSrvToken={httpSrvToken}
+      />
+      <Kb.Box2 direction="vertical" flex={1} overflow="hidden" style={styles.chatRowText}>
+        <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" justifyContent="space-between">
+          <Kb.Box2 direction="horizontal" alignItems="center" gap="xtiny" overflow="hidden" style={styles.chatRowNameLeft}>
+            <Kb.Text type={conv.hasUnread ? 'BodyBold' : 'BodySemibold'} lineClamp={1} style={styles.chatRowName}>
+              {isTeam && conv.channelname ? `${name}#${conv.channelname}` : name}
+            </Kb.Text>
+            {conv.hasBadge && <Kb.Box2 direction="vertical" style={styles.chatBadge} />}
           </Kb.Box2>
-          {!!conv.snippetDecorated && (
+          {!!timestamp && (
             <Kb.Text
-              type="BodySmall"
-              lineClamp={1}
+              type="BodyTiny"
               style={Kb.Styles.collapseStyles([
-                conv.hasUnread ? styles.chatSnippetUnread : styles.chatSnippet,
+                styles.chatTimestamp,
                 conv.hasUnread && Kb.Styles.globalStyles.fontBold,
               ])}
             >
-              {conv.snippetDecorated}
+              {timestamp}
             </Kb.Text>
           )}
         </Kb.Box2>
+        {!!conv.snippetDecorated && (
+          <Kb.Text
+            type="BodySmall"
+            lineClamp={1}
+            style={Kb.Styles.collapseStyles([
+              conv.hasUnread ? styles.chatSnippetUnread : styles.chatSnippet,
+              conv.hasUnread && Kb.Styles.globalStyles.fontBold,
+            ])}
+          >
+            {conv.snippetDecorated}
+          </Kb.Text>
+        )}
       </Kb.Box2>
-    </Kb.ClickableBox>
+    </Kb.ClickableBox3>
   )
 }
 
@@ -191,17 +193,22 @@ const ChatPreview = (p: {conversationsToSend: ReadonlyArray<Conversation>; convL
 
 // Inline file updates (replaces FilesContainer + files.desktop.tsx with store-connected components)
 const FileUpdate = (p: {path: T.FS.Path; uploading: boolean; onClick: () => void}) => (
-  <Kb.ClickableBox className="hover-underline-container" onClick={p.onClick} style={styles.fileFullWidth}>
-    <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.fileUpdateRow} alignItems="flex-start">
-      <Kb.ImageIcon type="icon-file-16" style={styles.fileIcon} />
-      {p.uploading && (
-        <Kb.Box2 direction="vertical" style={styles.fileIconBadgeBox}>
-          <Kb.ImageIcon type="icon-addon-file-uploading" style={styles.fileIconBadge} />
-        </Kb.Box2>
-      )}
-      <Filename type="Body" path={p.path} />
-    </Kb.Box2>
-  </Kb.ClickableBox>
+  <Kb.ClickableBox3
+    className="hover-underline-container"
+    onClick={p.onClick}
+    direction="horizontal"
+    fullWidth={true}
+    alignItems="flex-start"
+    style={styles.fileUpdateRow}
+  >
+    <Kb.ImageIcon type="icon-file-16" style={styles.fileIcon} />
+    {p.uploading && (
+      <Kb.Box2 direction="vertical" style={styles.fileIconBadgeBox}>
+        <Kb.ImageIcon type="icon-addon-file-uploading" style={styles.fileIconBadge} />
+      </Kb.Box2>
+    )}
+    <Filename type="Body" path={p.path} />
+  </Kb.ClickableBox3>
 )
 
 const defaultNumFileOptionsShown = 3
@@ -642,11 +649,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     backgroundColor: Kb.Styles.globalColors.white,
     color: Kb.Styles.globalColors.black,
   },
-  chatRow: Kb.Styles.platformStyles({
-    isElectron: {
-      ...Kb.Styles.desktopStyles.clickable,
-    },
-  }),
   chatRowInner: Kb.Styles.padding(Kb.Styles.globalMargins.xtiny, Kb.Styles.globalMargins.xsmall),
   chatRowName: {flexShrink: 1},
 
@@ -655,7 +657,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   chatSnippet: {color: Kb.Styles.globalColors.black_50},
   chatSnippetUnread: {color: Kb.Styles.globalColors.black},
   chatTimestamp: {color: Kb.Styles.globalColors.black_50, flexShrink: 0, marginLeft: Kb.Styles.globalMargins.tiny},
-  fileFullWidth: {width: '100%'},
   fileIcon: {
     flexShrink: 0,
     ...Kb.Styles.size(16),
diff --git a/shared/profile/add-to-team.tsx b/shared/profile/add-to-team.tsx
index 0448b9516d1c..207d5d2888a0 100644
--- a/shared/profile/add-to-team.tsx
+++ b/shared/profile/add-to-team.tsx
@@ -341,7 +341,7 @@ type RowProps = {
 
 const TeamRow = (props: RowProps) => {
   return (
-    <Kb.ClickableBox onClick={props.canAddThem ? () => props.onCheck(!props.checked) : undefined}>
+    <Kb.ClickableBox3 direction="vertical" fullWidth={true} onClick={props.canAddThem ? () => props.onCheck(!props.checked) : undefined}>
       <Kb.Box2 direction="horizontal" style={styles.teamRow}>
         <Kb.Checkbox disabled={!props.canAddThem} checked={props.checked} onCheck={props.onCheck} />
         <Kb.Box2 direction="vertical" relative={true} style={{display: 'flex'}}>
@@ -372,7 +372,7 @@ const TeamRow = (props: RowProps) => {
         </Kb.Box2>
       </Kb.Box2>
       {!isMobile && <Kb.Divider style={styles.divider} />}
-    </Kb.ClickableBox>
+    </Kb.ClickableBox3>
   )
 }
 
diff --git a/shared/profile/edit-avatar/index.tsx b/shared/profile/edit-avatar/index.tsx
index 71c6f733bb02..47e7f1b99850 100644
--- a/shared/profile/edit-avatar/index.tsx
+++ b/shared/profile/edit-avatar/index.tsx
@@ -159,7 +159,8 @@ const DesktopEditAvatar = (_p: Props) => {
           </Kb.Text>{' '}
           for one.
         </Kb.Text>
-        <Kb.ClickableBox
+        <Kb.ClickableBox3
+          direction="vertical"
           className={Kb.Styles.classNames('hoverbox', {filled: loading !== 'loaded'})}
           onClick={!loading ? filePickerOpen : undefined}
           style={{
@@ -191,7 +192,7 @@ const DesktopEditAvatar = (_p: Props) => {
               type="iconfont-camera"
             />
           )}
-        </Kb.ClickableBox>
+        </Kb.ClickableBox3>
         {loading === 'loaded' ? <Kb.Text type="Body">Click to select. Scroll to zoom.</Kb.Text> : null}
       </div>
       <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={styles.modalFooter}>
@@ -311,12 +312,14 @@ const NativeAvatarUploadWrapper = (p: Props) => {
   const renderImageZoomer = () => {
     if (type === 'team' && !selectedImage) {
       return (
-        <Kb.ClickableBox
+        <Kb.ClickableBox3
+          direction="vertical"
+          centerChildren={true}
           style={Kb.Styles.collapseStyles([styles.placeholder, getImageStyle()])}
           onClick={onChooseNewAvatar}
         >
           <Kb.Icon type="iconfont-camera" sizeType="Huge" color={Kb.Styles.globalColors.black_10} />
-        </Kb.ClickableBox>
+        </Kb.ClickableBox3>
       )
     }
     return selectedImage ? (
diff --git a/shared/profile/generic/proofs-list.tsx b/shared/profile/generic/proofs-list.tsx
index 3a4986f101a8..4ca32f5db9c5 100644
--- a/shared/profile/generic/proofs-list.tsx
+++ b/shared/profile/generic/proofs-list.tsx
@@ -620,7 +620,10 @@ const ProviderPicker = ({
               renderItem={(_: unknown, provider: Provider) => (
                 <React.Fragment key={provider.name}>
                   <Kb.Divider />
-                  <Kb.ClickableBox
+                  <Kb.ClickableBox3
+                    direction="horizontal"
+                    alignItems="center"
+                    justifyContent="flex-start"
                     className="hover_background_color_blueLighter2"
                     onClick={() => onSelect(provider.key)}
                     style={styles.containerBox}
@@ -647,7 +650,7 @@ const ProviderPicker = ({
                       style={styles.iconArrow}
                       type="iconfont-arrow-right"
                     />
-                  </Kb.ClickableBox>
+                  </Kb.ClickableBox3>
                 </React.Fragment>
               )}
             />
@@ -1314,11 +1317,7 @@ const styles = Kb.Styles.styleSheetCreate(
         },
       }),
       containerBox: {
-        alignItems: 'center',
-        display: 'flex',
-        flexDirection: 'row',
         height: isMobile ? 56 : 48,
-        justifyContent: 'flex-start',
       },
       description: {...rightColumnStyle},
       error: {
diff --git a/shared/profile/user/actions/index.tsx b/shared/profile/user/actions/index.tsx
index 22c7c9af3c6b..b7b37964f035 100644
--- a/shared/profile/user/actions/index.tsx
+++ b/shared/profile/user/actions/index.tsx
@@ -208,14 +208,12 @@ const DropdownButton = (p: DropdownProps) => {
   const {showPopup, popup, popupAnchor} = Kb.usePopup2(makePopup)
 
   return (
-    <Kb.ClickableBox onClick={showPopup} ref={popupAnchor}>
-      <Kb.Box2 direction="horizontal" fullWidth={true} gap="xsmall">
-        <Kb.Button onClick={undefined} mode="Secondary" style={styles.dropdownButton}>
-          <Kb.Icon color={Kb.Styles.globalColors.blue} type="iconfont-ellipsis" />
-        </Kb.Button>
-      </Kb.Box2>
+    <Kb.ClickableBox3 direction="horizontal" fullWidth={true} gap="xsmall" onClick={showPopup} ref={popupAnchor}>
+      <Kb.Button onClick={undefined} mode="Secondary" style={styles.dropdownButton}>
+        <Kb.Icon color={Kb.Styles.globalColors.blue} type="iconfont-ellipsis" />
+      </Kb.Button>
       {popup}
-    </Kb.ClickableBox>
+    </Kb.ClickableBox3>
   )
 }
 
diff --git a/shared/profile/user/friend.tsx b/shared/profile/user/friend.tsx
index d4366fc0cd78..72844c74b2cf 100644
--- a/shared/profile/user/friend.tsx
+++ b/shared/profile/user/friend.tsx
@@ -25,12 +25,12 @@ const Container = (ownProps: OwnProps) => {
     : followsYou ? ('icon-follow-me-21' as const) : ('icon-following-21' as const)
 
   return (
-    <Kb.ClickableBox onClick={onClick} style={{width: width}}>
-      <Kb.Box2
-        direction="vertical"
-        style={Kb.Styles.collapseStyles([styles.container, {width: width}])}
-        centerChildren={true}
-      >
+    <Kb.ClickableBox3
+      direction="vertical"
+      centerChildren={true}
+      style={Kb.Styles.collapseStyles([styles.container, {width: width}])}
+      onClick={onClick}
+    >
         <Kb.Avatar size={64} username={username} style={styles.avatar}>
           {!!followIconType && <Kb.ImageIcon type={followIconType} style={followSizeToStyle[64]} />}
         </Kb.Avatar>
@@ -45,8 +45,7 @@ const Container = (ownProps: OwnProps) => {
         <Kb.Text type="BodySmall" lineClamp={1} style={styles.fullname}>
           {fullname}
         </Kb.Text>
-      </Kb.Box2>
-    </Kb.ClickableBox>
+    </Kb.ClickableBox3>
   )
 }
 
diff --git a/shared/profile/user/index.tsx b/shared/profile/user/index.tsx
index d70bc05c2d7a..8c0914460892 100644
--- a/shared/profile/user/index.tsx
+++ b/shared/profile/user/index.tsx
@@ -227,24 +227,24 @@ const Tabs = (p: TabsProps) => {
   const onClickFollowing = () => p.onSelectTab('following')
   const onClickFollowers = () => p.onSelectTab('followers')
   const tab = (tab: Tab) => (
-    <Kb.ClickableBox
+    <Kb.ClickableBox3
+      direction="horizontal"
+      gap="xtiny"
       onClick={tab === 'following' ? onClickFollowing : onClickFollowers}
       style={Kb.Styles.collapseStyles([styles.followTab, tab === p.selectedTab && styles.followTabSelected])}
     >
-      <Kb.Box2 direction="horizontal" gap="xtiny">
-        <Kb.Text
-          type="BodySmallSemibold"
-          style={tab === p.selectedTab ? styles.followTabTextSelected : styles.followTabText}
-        >
-          {tab === 'following'
-            ? `Following${!p.loadingFollowing ? ` (${p.numFollowing || 0})` : ''}`
-            : `Followers${!p.loadingFollowers ? ` (${p.numFollowers || 0})` : ''}`}
-        </Kb.Text>
-        {((tab === 'following' && p.loadingFollowing) || p.loadingFollowers) && (
-          <Kb.ProgressIndicator style={styles.progress} />
-        )}
-      </Kb.Box2>
-    </Kb.ClickableBox>
+      <Kb.Text
+        type="BodySmallSemibold"
+        style={tab === p.selectedTab ? styles.followTabTextSelected : styles.followTabText}
+      >
+        {tab === 'following'
+          ? `Following${!p.loadingFollowing ? ` (${p.numFollowing || 0})` : ''}`
+          : `Followers${!p.loadingFollowers ? ` (${p.numFollowers || 0})` : ''}`}
+      </Kb.Text>
+      {((tab === 'following' && p.loadingFollowing) || p.loadingFollowers) && (
+        <Kb.ProgressIndicator style={styles.progress} />
+      )}
+    </Kb.ClickableBox3>
   )
 
   return (
diff --git a/shared/profile/user/teams/index.tsx b/shared/profile/user/teams/index.tsx
index bc5b8bdb9a05..46ad3d7ffc7d 100644
--- a/shared/profile/user/teams/index.tsx
+++ b/shared/profile/user/teams/index.tsx
@@ -73,14 +73,12 @@ const TeamShowcase = (props: TeamShowcaseProps) => {
 
 const ShowcaseTeamsOffer = (p: {onEdit: () => void}) => (
   <Kb.Box2 direction="horizontal" gap="tiny" fullWidth={true}>
-    <Kb.ClickableBox onClick={p.onEdit}>
-      <Kb.Box2 direction="horizontal" gap="tiny">
-        <Kb.ImageIcon type="icon-team-placeholder-avatar-32" style={styles.placeholderTeam} />
-        <Kb.Text style={styles.youFeatureTeam} type="BodyPrimaryLink">
-          {"Feature the teams you're in"}
-        </Kb.Text>
-      </Kb.Box2>
-    </Kb.ClickableBox>
+    <Kb.ClickableBox3 direction="horizontal" gap="tiny" onClick={p.onEdit}>
+      <Kb.ImageIcon type="icon-team-placeholder-avatar-32" style={styles.placeholderTeam} />
+      <Kb.Text style={styles.youFeatureTeam} type="BodyPrimaryLink">
+        {"Feature the teams you're in"}
+      </Kb.Text>
+    </Kb.ClickableBox3>
   </Kb.Box2>
 )
 
diff --git a/shared/profile/user/teams/team-row.tsx b/shared/profile/user/teams/team-row.tsx
index 4751ff7217a1..4f6a1152cdb6 100644
--- a/shared/profile/user/teams/team-row.tsx
+++ b/shared/profile/user/teams/team-row.tsx
@@ -12,19 +12,17 @@ type Props = {
 }
 
 const TeamRow = ({isOpen, loading = false, name, onClick, popup, popupAnchor}: Props) => (
-  <Kb.ClickableBox ref={popupAnchor} onClick={onClick}>
-    <Kb.Box2 direction="horizontal" fullWidth={true} gap="tiny" style={styles.row}>
-      <>
-        {popup}
-        <Kb.Avatar size={32} teamname={name} isTeam={true} />
-      </>
-      <Kb.Text type="BodySemiboldLink" lineClamp={1} style={styles.title}>
-        {name}
-      </Kb.Text>
-      {typeof isOpen === 'boolean' && <OpenMeta isOpen={isOpen} />}
-      {loading && <Kb.ProgressIndicator style={styles.loading} />}
-    </Kb.Box2>
-  </Kb.ClickableBox>
+  <Kb.ClickableBox3 direction="horizontal" fullWidth={true} gap="tiny" style={styles.row} ref={popupAnchor} onClick={onClick}>
+    <>
+      {popup}
+      <Kb.Avatar size={32} teamname={name} isTeam={true} />
+    </>
+    <Kb.Text type="BodySemiboldLink" lineClamp={1} style={styles.title}>
+      {name}
+    </Kb.Text>
+    {typeof isOpen === 'boolean' && <OpenMeta isOpen={isOpen} />}
+    {loading && <Kb.ProgressIndicator style={styles.loading} />}
+  </Kb.ClickableBox3>
 )
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
diff --git a/shared/provision/code-page/qr-scan/scanner.tsx b/shared/provision/code-page/qr-scan/scanner.tsx
index 55a2ad9d524a..8de1aee64108 100644
--- a/shared/provision/code-page/qr-scan/scanner.tsx
+++ b/shared/provision/code-page/qr-scan/scanner.tsx
@@ -9,6 +9,7 @@ type Props = {
 
 const QRScannerMobile = (p: Props): React.ReactElement | null => {
   // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
   const {CameraView, useCameraPermissions} = require('expo-camera') as typeof import('expo-camera')
   const [scanned, setScanned] = React.useState(false)
   const [permission, requestPermission] = useCameraPermissions()
diff --git a/shared/router-v2/header/index.desktop.tsx b/shared/router-v2/header/index.desktop.tsx
index 6275f6242fa6..8083ba381b8c 100644
--- a/shared/router-v2/header/index.desktop.tsx
+++ b/shared/router-v2/header/index.desktop.tsx
@@ -79,17 +79,19 @@ const SystemButtons = ({isMaximized}: {isMaximized: boolean}) => {
   }
   return (
     <Kb.Box2 direction="horizontal">
-      <Kb.ClickableBox
+      <Kb.ClickableBox3
         className="hover_background_color_black_05  color_black_50 hover_color_black"
         onClick={onMinimize}
         style={styles.appIconBox}
+        direction="vertical"
       >
         <Kb.Icon color="inherit" onClick={onMinimize} style={styles.appIcon} type="iconfont-app-minimize" />
-      </Kb.ClickableBox>
-      <Kb.ClickableBox
+      </Kb.ClickableBox3>
+      <Kb.ClickableBox3
         className="hover_background_color_black_05 color_black_50 hover_color_black"
         onClick={onToggleMaximizeWindow}
         style={styles.appIconBox}
+        direction="vertical"
       >
         <Kb.Icon
           color="inherit"
@@ -97,14 +99,15 @@ const SystemButtons = ({isMaximized}: {isMaximized: boolean}) => {
           style={styles.appIcon}
           type={isMaximized ? 'iconfont-app-un-maximize' : 'iconfont-app-maximize'}
         />
-      </Kb.ClickableBox>
-      <Kb.ClickableBox
+      </Kb.ClickableBox3>
+      <Kb.ClickableBox3
         className="hover_background_color_red hover_color_white color_black_50"
         onClick={onCloseWindow}
         style={styles.appIconBox}
+        direction="vertical"
       >
         <Kb.Icon color="inherit" onClick={onCloseWindow} style={styles.appIcon} type="iconfont-app-close" />
-      </Kb.ClickableBox>
+      </Kb.ClickableBox3>
     </Kb.Box2>
   )
 }
@@ -192,21 +195,20 @@ function DesktopHeader(p: Props) {
         >
           {/* TODO have headerLeft be the back button */}
           {headerLeft !== null && (
-            <Kb.ClickableBox
+            <Kb.ClickableBox3
               className={Kb.Styles.classNames('hover_container', {
                 hover_background_color_black_10: !!back,
               })}
               onClick={pop}
               style={iconContainerStyle}
+              direction="vertical"
             >
-              <Kb.Box2 direction="vertical" style={styles.icon}>
-                <Kb.Icon
-                  type="iconfont-arrow-left"
-                  color={iconColor}
-                  className={Kb.Styles.classNames({hover_contained_color_blackOrBlack: back})}
-                />
-              </Kb.Box2>
-            </Kb.ClickableBox>
+              <Kb.Icon
+                type="iconfont-arrow-left"
+                color={iconColor}
+                className={Kb.Styles.classNames({hover_contained_color_blackOrBlack: back})}
+              />
+            </Kb.ClickableBox3>
           )}
           <Kb.Box2 direction="horizontal" flex={1} justifyContent="flex-end">
             <SyncingFolders
@@ -278,23 +280,17 @@ const styles = Kb.Styles.styleSheetCreate(
           containment: 'layout',
         },
       }),
-      icon: Kb.Styles.platformStyles({
-        isElectron: {
-          display: 'inline-block',
-          ...Kb.Styles.size(14),
-        },
-      }),
       iconContainer: Kb.Styles.platformStyles({
         common: {
           // Needed to position blue badge
           position: 'relative',
         },
         isElectron: {
-          ...Kb.Styles.desktopStyles.clickable,
           ...Kb.Styles.desktopStyles.windowDraggingClickable,
-          ...Kb.Styles.globalStyles.flexBoxColumn,
           alignItems: 'center',
           borderRadius: Kb.Styles.borderRadius,
+          display: 'inline-block',
+          ...Kb.Styles.size(14),
           marginLeft: 4,
           marginRight: 6,
           padding: Kb.Styles.globalMargins.xtiny,
diff --git a/shared/router-v2/tab-bar.desktop.tsx b/shared/router-v2/tab-bar.desktop.tsx
index 4dcfde773991..4e07b1198577 100644
--- a/shared/router-v2/tab-bar.desktop.tsx
+++ b/shared/router-v2/tab-bar.desktop.tsx
@@ -85,7 +85,7 @@ const Header = () => {
 
     const menuHeader = (
       <Kb.Box2 direction="vertical" fullWidth={true}>
-        <Kb.ClickableBox onClick={onClickWrapper} style={styles.headerBox}>
+        <Kb.ClickableBox3 onClick={onClickWrapper} style={styles.headerBox} direction="vertical">
           <Kb.NameWithIcon
             username={username}
             onClick={onClickWrapper}
@@ -95,7 +95,7 @@ const Header = () => {
               </Kb.Text>
             }
           />
-        </Kb.ClickableBox>
+        </Kb.ClickableBox3>
         <Kb.Button
           label="View/Edit profile"
           mode="Secondary"
@@ -124,34 +124,33 @@ const Header = () => {
 
   return (
     <>
-      <Kb.ClickableBox onClick={togglePopup}>
-        <Kb.Box2
-          direction="horizontal"
-          gap="tiny"
-          centerChildren={true}
-          fullWidth={true}
-          style={styles.nameContainer}
-          alignItems="center"
-          ref={popupAnchor}
-        >
-          <Kb.Avatar
-            size={24}
-            username={username}
-            style={Kb.Styles.collapseStyles([styles.avatar, styles.avatarBorder])}
+      <Kb.ClickableBox3
+        onClick={togglePopup}
+        direction="horizontal"
+        gap="tiny"
+        centerChildren={true}
+        fullWidth={true}
+        style={styles.nameContainer}
+        alignItems="center"
+        ref={popupAnchor}
+      >
+        <Kb.Avatar
+          size={24}
+          username={username}
+          style={Kb.Styles.collapseStyles([styles.avatar, styles.avatarBorder])}
+        />
+        <>
+          <Kb.Text className="username" lineClamp={1} type="BodyTinySemibold" style={styles.username}>
+            Hi {username}!
+          </Kb.Text>
+          <Kb.Icon
+            type="iconfont-arrow-down"
+            color={Kb.Styles.globalColors.blueLighter}
+            fontSize={12}
+            style={styles.caret}
           />
-          <>
-            <Kb.Text className="username" lineClamp={1} type="BodyTinySemibold" style={styles.username}>
-              Hi {username}!
-            </Kb.Text>
-            <Kb.Icon
-              type="iconfont-arrow-down"
-              color={Kb.Styles.globalColors.blueLighter}
-              fontSize={12}
-              style={styles.caret}
-            />
-          </>
-        </Kb.Box2>
-      </Kb.ClickableBox>
+        </>
+      </Kb.ClickableBox3>
       {popup}
     </>
   )
@@ -267,37 +266,33 @@ function Tab(props: TabProps) {
   }
 
   return (
-    <Kb.ClickableBox
-      feedback={false}
+    <Kb.ClickableBox3
       key={tab}
       onClick={onClick}
       onMouseDown={onMouseDown}
       onMouseUp={onMouseUp}
       onMouseLeave={onMouseLeave}
+      direction="horizontal"
+      fullWidth={true}
+      className={Kb.Styles.classNames(
+        isSelected ? 'tab-selected' : 'tab',
+        'tab-tooltip',
+        'tooltip-top-right'
+      )}
+      relative={true}
+      style={styles.tab}
+      tooltip={`${label} (${Platforms.shortcutSymbol}${index + 1})`}
     >
-      <Kb.Box2
-        direction="horizontal"
-        fullWidth={true}
-        className={Kb.Styles.classNames(
-          isSelected ? 'tab-selected' : 'tab',
-          'tab-tooltip',
-          'tooltip-top-right'
-        )}
-        relative={true}
-        style={styles.tab}
-        tooltip={`${label} (${Platforms.shortcutSymbol}${index + 1})`}
-      >
-        <Kb.Box2 className="tab-highlight" direction="vertical" fullHeight={true} />
-        <Kb.Box2 direction="horizontal" justifyContent="flex-end" relative={true}>
-          <Kb.Icon className="tab-icon" type={Tabs.desktopTabMeta[tab].icon} sizeType="Big" />
-          {tab === Tabs.fsTab && <FilesTabBadge />}
-        </Kb.Box2>
-        <Kb.Text className="tab-label" type="BodySmallSemibold">
-          {label}
-        </Kb.Text>
-        <TabBadge name={tab} />
+      <Kb.Box2 className="tab-highlight" direction="vertical" fullHeight={true} />
+      <Kb.Box2 direction="horizontal" justifyContent="flex-end" relative={true}>
+        <Kb.Icon className="tab-icon" type={Tabs.desktopTabMeta[tab].icon} sizeType="Big" />
+        {tab === Tabs.fsTab && <FilesTabBadge />}
       </Kb.Box2>
-    </Kb.ClickableBox>
+      <Kb.Text className="tab-label" type="BodySmallSemibold">
+        {label}
+      </Kb.Text>
+      <TabBadge name={tab} />
+    </Kb.ClickableBox3>
   )
 }
 
diff --git a/shared/tracker/assertion.tsx b/shared/tracker/assertion.tsx
index af8ed8898903..dd09f151610e 100644
--- a/shared/tracker/assertion.tsx
+++ b/shared/tracker/assertion.tsx
@@ -222,24 +222,29 @@ const Container = (ownProps: OwnProps) => {
             </Kb.Text>
           )}
         </Kb.Text>
-        <Kb.ClickableBox onClick={items ? showPopup : onShowProof} style={styles.statusContainer}>
-          <Kb.Box2 direction="horizontal" alignItems="center" gap="tiny" tooltip={tooltip}>
-            <Kb.Icon
-              type={stateToIcon(state)}
-              fontSize={20}
-              hoverColor={assertionColorToColor(color)}
-              color={isSuggestion ? Kb.Styles.globalColors.black_20 : assertionColorToColor(color)}
-            />
-            {items ? (
-              <>
-                <Kb.Icon className="hover-visible" type="iconfont-caret-down" sizeType="Tiny" />
-                {popup}
-              </>
-            ) : (
-              <Kb.Box2 direction="vertical" />
-            )}
-          </Kb.Box2>
-        </Kb.ClickableBox>
+        <Kb.ClickableBox3
+          onClick={items ? showPopup : onShowProof}
+          style={styles.statusContainer}
+          direction="horizontal"
+          alignItems="center"
+          gap="tiny"
+          tooltip={tooltip}
+        >
+          <Kb.Icon
+            type={stateToIcon(state)}
+            fontSize={20}
+            hoverColor={assertionColorToColor(color)}
+            color={isSuggestion ? Kb.Styles.globalColors.black_20 : assertionColorToColor(color)}
+          />
+          {items ? (
+            <>
+              <Kb.Icon className="hover-visible" type="iconfont-caret-down" sizeType="Tiny" />
+              {popup}
+            </>
+          ) : (
+            <Kb.Box2 direction="vertical" />
+          )}
+        </Kb.ClickableBox3>
       </Kb.Box2>
       {!!metas.length && (
         <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.metaContainer}>
@@ -482,9 +487,9 @@ const AssertionSiteIcon = (p: SIProps) => {
     child = <HoverOpacity>{child}</HoverOpacity>
   }
   return (
-    <Kb.ClickableBox onClick={onCreateProof || onShowProof} style={isSuggestion ? styles.halfOpacity : null}>
+    <Kb.ClickableBox3 onClick={onCreateProof || onShowProof} style={isSuggestion ? styles.halfOpacity : null} direction="vertical">
       {child}
-    </Kb.ClickableBox>
+    </Kb.ClickableBox3>
   )
 }
 
diff --git a/skill/migrate-clickable-box/SKILL.md b/skill/migrate-clickable-box/SKILL.md
index f473702a08ce..3a340d9ad9e0 100644
--- a/skill/migrate-clickable-box/SKILL.md
+++ b/skill/migrate-clickable-box/SKILL.md
@@ -11,7 +11,9 @@ See `plans/clickablebox3.md` for the full migration plan, directory checklist, a
 
 `ClickableBox3` = `ClickableBox2` + all `Box2` layout props (direction optional). On desktop it renders a `<div>` with the Box2 CSS class system plus `clickable-box2` cursor. On mobile it uses `Pressable` + `box2SharedProps` for layout.
 
-Type: `Box2Props & {onClick?, onLongPress?, onMouseOver?, hitSlop?}` — **`direction` is required.**
+Type: `Box2Props & {onClick?, onLongPress?, hitSlop?}` — **`direction` is required.**
+
+`Box2Props` includes desktop mouse events: `onMouseDown`, `onMouseUp`, `onMouseLeave`, `onMouseMove`, `onMouseOver`, `onMouseEnter`, `onContextMenu`. CB3 passes all of these through to the desktop `<div>`. They are **not** forwarded on mobile (Pressable doesn't support them).
 
 `direction` is always required. For Pattern B swaps (plain clickable wrapper, no layout needed), pass the direction that matches how children are stacked — usually `"vertical"` for a single child or vertically-stacked children.
 
@@ -110,11 +112,12 @@ These CB1 props have no CB3 equivalent:
 - `hoverColor`, `underlayColor` → add `hover_background_color_*` CSS className to CB3 instead
 - `feedback={false}` → drop (Pressable doesn't have this)
 - `activeOpacity` → drop
-- `onMouseEnter` / `onMouseLeave` → rare; use a wrapper div if truly needed
 - `onPressIn` / `onPressOut` → not in CB3; leave as CB1 and note it
 - `tooltip` → wrap with `<Kb.WithTooltip>` outside CB3
 - `onLongPress={(e) => ...}` → remove the `e` param (CB3 signature is `() => void`)
 
+Note: `onMouseDown`, `onMouseUp`, `onMouseLeave`, `onMouseMove`, `onMouseOver`, `onMouseEnter` are **fully supported** in CB3 via `Box2Props` — these are NOT Pattern D cases.
+
 ## Step 3: Present Changes Before Touching Anything
 
 For each usage show: file, line, pattern (A/B/C/D), proposed change.
@@ -133,7 +136,7 @@ From `shared/`:
 ```
 yarn lint && yarn tsc
 ```
-Fix errors before reporting done.
+**Both must pass with zero errors before reporting done.** Fix any failures — including lint errors in files we touched or that were broken in a prior session. Do not skip lint or treat failures as pre-existing without verifying via `git stash`.
 
 ## Step 6: Update Checklist