diff --git a/shared/chat/audio/audio-send.native.tsx b/shared/chat/audio/audio-send.native.tsx
index ba6ca44a70e1..24038957c46f 100644
--- a/shared/chat/audio/audio-send.native.tsx
+++ b/shared/chat/audio/audio-send.native.tsx
@@ -41,9 +41,9 @@ const AudioSend = (props: Props) => {
     <Portal hostName="audioSend" useFullScreenOverlay={false}>
       <Kb.Box2 direction="horizontal" style={styles.container} fullWidth={true}>
         <Kb.Box2 direction="horizontal" alignItems="center">
-          <Kb.Box style={styles.icon}>
+          <Kb.Box2 direction="vertical" centerChildren={true} style={styles.icon}>
             <Kb.Icon type="iconfont-remove" onClick={cancelRecording} />
-          </Kb.Box>
+          </Kb.Box2>
           {player}
         </Kb.Box2>
         <Kb.Button type="Default" small={true} style={styles.send} onClick={sendRecording} label="Send" />
@@ -63,9 +63,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     paddingRight: Kb.Styles.globalMargins.tiny,
   },
   icon: {
-    alignItems: 'center',
     height: 32,
-    justifyContent: 'center',
     marginRight: Kb.Styles.globalMargins.tiny,
     width: 32,
   },
diff --git a/shared/chat/avatars.tsx b/shared/chat/avatars.tsx
index 2a156da743bb..57b367599cbf 100644
--- a/shared/chat/avatars.tsx
+++ b/shared/chat/avatars.tsx
@@ -28,7 +28,7 @@ const OverlayIcon = React.memo(function OverlayIcon(p: {
   if (!type) return null
 
   return (
-    <Kb.Box style={styles.mutedIcon}>
+    <Kb.Box2 direction="vertical" style={styles.mutedIcon}>
       <Kb.Icon
         className={Kb.Styles.classNames('overlay-icon', 'stroked', {
           hovered: isHovered,
@@ -49,7 +49,7 @@ const OverlayIcon = React.memo(function OverlayIcon(p: {
         type={type}
         fontSize={16}
       />
-    </Kb.Box>
+    </Kb.Box2>
   )
 })
 
@@ -102,12 +102,12 @@ const Avatars = React.memo(function Avatars(p: Props) {
 
   if (!participantTwo) {
     return (
-      <Kb.Box style={containerStyle}>
-        <Kb.Box style={styles.outerBox}>
+      <Kb.Box2 direction="vertical" style={containerStyle}>
+        <Kb.Box2 direction="vertical" style={styles.outerBox}>
           <Kb.Avatar username={participantOne} size={singleSize} style={{opacity}} />
           <OverlayIcon isHovered={isHovered} isSelected={isSelected} isMuted={isMuted} isLocked={isLocked} />
-        </Kb.Box>
-      </Kb.Box>
+        </Kb.Box2>
+      </Kb.Box2>
     )
   }
 
@@ -144,10 +144,10 @@ const TeamAvatar = React.memo(function TeamAvatar(p: {
 }) {
   const {teamname, size, isSelected, isMuted, isHovered} = p
   return (
-    <Kb.Box style={styles.container}>
+    <Kb.Box2 direction="vertical" style={styles.container}>
       <Kb.Avatar teamname={teamname} size={size || 48} />
       <OverlayIcon isSelected={isSelected} isMuted={isMuted} isHovered={isHovered} isLocked={false} />
-    </Kb.Box>
+    </Kb.Box2>
   )
 })
 
diff --git a/shared/chat/blocking/block-modal.tsx b/shared/chat/blocking/block-modal.tsx
index c29fa87e9fa5..0bb637314769 100644
--- a/shared/chat/blocking/block-modal.tsx
+++ b/shared/chat/blocking/block-modal.tsx
@@ -52,7 +52,7 @@ const CheckboxRow = (props: CheckboxRowProps) => (
       onClick={() => props.onCheck(!props.checked)}
       style={styles.shrink}
     />
-    <Kb.Box style={styles.iconBox} />
+    <Kb.Box2 direction="vertical" style={styles.iconBox} />
     {props.info && (
       <Kb.WithTooltip
         tooltip={props.info}
@@ -94,7 +94,9 @@ const ReportOptions = (props: ReportOptionsProps) => {
           style={styles.radioButton}
         />
       ))}
-      <Kb.Box
+      <Kb.Box2
+        direction="vertical"
+        fullWidth={true}
         style={Kb.Styles.collapseStyles([
           styles.feedback,
           !showIncludeTranscript && styles.feedbackPaddingBottom,
@@ -109,7 +111,7 @@ const ReportOptions = (props: ReportOptionsProps) => {
           onChangeText={props.setExtraNotes}
           value={props.extraNotes}
         />
-      </Kb.Box>
+      </Kb.Box2>
       {showIncludeTranscript && (
         <CheckboxRow
           text="Include the transcript of this chat"
@@ -421,9 +423,9 @@ const Container = React.memo(function BlockModal(ownProps: OwnProps) {
   if (loadingWaiting) {
     return (
       <Kb.Modal mode="Default" header={header}>
-        <Kb.Box style={styles.loadingAnimationBox}>
+        <Kb.Box2 direction="vertical" style={styles.loadingAnimationBox}>
           <Kb.Animation animationType="spinner" style={styles.loadingAnimation} />
-        </Kb.Box>
+        </Kb.Box2>
       </Kb.Modal>
     )
   }
diff --git a/shared/chat/conversation/attachment-fullscreen/index.desktop.tsx b/shared/chat/conversation/attachment-fullscreen/index.desktop.tsx
index 6f80c5700830..7ee2b45988c0 100644
--- a/shared/chat/conversation/attachment-fullscreen/index.desktop.tsx
+++ b/shared/chat/conversation/attachment-fullscreen/index.desktop.tsx
@@ -13,7 +13,7 @@ type ArrowProps = {
 const Arrow = (props: ArrowProps) => {
   const {left, onClick} = props
   return (
-    <Kb.Box
+    <Kb.ClickableBox
       className="hover_background_color_black background_color_black_50 fade-background-color"
       onClick={e => {
         e.stopPropagation()
@@ -26,7 +26,7 @@ const Arrow = (props: ArrowProps) => {
         color={Kb.Styles.globalColors.white}
         style={Kb.Styles.collapseStyles([styles.arrow, left && styles.arrowLeft, !left && styles.arrowRight])}
       />
-    </Kb.Box>
+    </Kb.ClickableBox>
   )
 }
 
@@ -80,8 +80,8 @@ const Fullscreen = React.memo(function Fullscreen(p: Props) {
 
   return (
     <Kb.PopupDialog onClose={onClose} fill={true}>
-      <Kb.Box style={styles.container}>
-        <Kb.Box style={styles.headerFooter}>
+      <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true}>
+        <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.headerFooter}>
           <Kb.Markdown lineClamp={2} style={Kb.Styles.globalStyles.flexOne} styleOverride={titleOverride}>
             {title}
           </Kb.Markdown>
@@ -96,7 +96,7 @@ const Fullscreen = React.memo(function Fullscreen(p: Props) {
             onClick={showPopup}
           />
           {popup}
-        </Kb.Box>
+        </Kb.Box2>
         {path && (
           <Kb.BoxGrow>
             <Kb.ClickableBox style={styles.contentsFit} key={path}>
@@ -126,7 +126,7 @@ const Fullscreen = React.memo(function Fullscreen(p: Props) {
             </Kb.ClickableBox>
           </Kb.BoxGrow>
         )}
-        <Kb.Box style={styles.headerFooter}>
+        <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.headerFooter}>
           {!!progressLabel && (
             <Kb.Text
               type="BodySmall"
@@ -154,8 +154,8 @@ const Fullscreen = React.memo(function Fullscreen(p: Props) {
               Show in {Kb.Styles.fileUIName}
             </Kb.Text>
           )}
-        </Kb.Box>
-      </Kb.Box>
+        </Kb.Box2>
+      </Kb.Box2>
     </Kb.PopupDialog>
   )
 })
@@ -183,7 +183,6 @@ const styles = Kb.Styles.styleSheetCreate(
           width: 36,
         },
       }),
-      container: {...Kb.Styles.globalStyles.flexBoxColumn, height: '100%', width: '100%'},
       contentsFit: {
         ...Kb.Styles.globalStyles.flexBoxRow,
         flex: 1,
@@ -192,12 +191,9 @@ const styles = Kb.Styles.styleSheetCreate(
       },
       error: {color: Kb.Styles.globalColors.redDark},
       headerFooter: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
-        alignItems: 'center',
         height: 32,
         paddingLeft: Kb.Styles.globalMargins.tiny,
         paddingRight: Kb.Styles.globalMargins.tiny,
-        width: '100%',
       },
       link: Kb.Styles.platformStyles({
         isElectron: {color: Kb.Styles.globalColors.black_50, cursor: 'pointer'},
diff --git a/shared/chat/conversation/command-markdown.tsx b/shared/chat/conversation/command-markdown.tsx
index 10c20f1c5509..f40010babebf 100644
--- a/shared/chat/conversation/command-markdown.tsx
+++ b/shared/chat/conversation/command-markdown.tsx
@@ -6,7 +6,7 @@ const CommandMarkdown = () => {
   const body = md?.body ?? ''
   const title = md?.title ?? undefined
   return (
-    <Kb.Box style={styles.container}>
+    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
       {!!title && (
         <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.title}>
           <Kb.Markdown>{title}</Kb.Markdown>
@@ -17,7 +17,7 @@ const CommandMarkdown = () => {
           <Kb.Markdown selectable={true}>{body}</Kb.Markdown>
         </Kb.Box2>
       </Kb.ScrollView>
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
diff --git a/shared/chat/conversation/command-status.tsx b/shared/chat/conversation/command-status.tsx
index dc67888d461c..4181640af8b6 100644
--- a/shared/chat/conversation/command-status.tsx
+++ b/shared/chat/conversation/command-status.tsx
@@ -39,7 +39,7 @@ const Container = () => {
   }
 
   return (
-    <Kb.Box style={styles.outerContainer}>
+    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.outerContainer}>
       <Kb.Box2
         direction="horizontal"
         fullWidth={true}
@@ -73,7 +73,7 @@ const Container = () => {
           })}
         </Kb.Box2>
       </Kb.Box2>
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
diff --git a/shared/chat/conversation/error.tsx b/shared/chat/conversation/error.tsx
index 0c9266bb235c..e098c723b111 100644
--- a/shared/chat/conversation/error.tsx
+++ b/shared/chat/conversation/error.tsx
@@ -4,15 +4,15 @@ import * as Kb from '@/common-adapters'
 const ConversationError = () => {
   const text = Chat.useChatContext(s => s.meta.snippet ?? '')
   return (
-    <Kb.Box style={styles.container}>
+    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
       <Kb.Text type="Header">There was an error loading this conversation.</Kb.Text>
       <Kb.Text style={styles.body} type="Body">
         The error is:
       </Kb.Text>
-      <Kb.Box style={styles.errorBox}>
+      <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.errorBox}>
         <Kb.CopyableText style={styles.errorText} value={text} />
-      </Kb.Box>
-    </Kb.Box>
+      </Kb.Box2>
+    </Kb.Box2>
   )
 }
 
@@ -21,12 +21,9 @@ const styles = Kb.Styles.styleSheetCreate(
     ({
       body: {marginTop: Kb.Styles.globalMargins.small},
       container: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
         padding: Kb.Styles.globalMargins.medium,
-        width: '100%',
       },
       errorBox: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
         marginTop: Kb.Styles.globalMargins.small,
       },
       errorText: {flexGrow: 1},
diff --git a/shared/chat/conversation/giphy/index.desktop.tsx b/shared/chat/conversation/giphy/index.desktop.tsx
index 4581d7dcb51b..6e235c6b048a 100644
--- a/shared/chat/conversation/giphy/index.desktop.tsx
+++ b/shared/chat/conversation/giphy/index.desktop.tsx
@@ -28,7 +28,7 @@ const GiphySearch = () => {
     )
   }
   return (
-    <Kb.Box style={styles.outerContainer}>
+    <Kb.Box2 direction="vertical" style={styles.outerContainer}>
       <Kb.Box2Div
         direction="vertical"
         ref={divRef}
@@ -56,7 +56,7 @@ const GiphySearch = () => {
                 const margin = -margins[index]! / 2 - 1
                 return p.targetUrl ? (
                   <Kb.Box2 key={String(index)} direction="horizontal" style={styles.imageContainer}>
-                    <Kb.Box style={Kb.Styles.collapseStyles([{marginLeft: margin, marginRight: margin}])}>
+                    <Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([{marginLeft: margin, marginRight: margin}])}>
                       <UnfurlImage
                         autoplayVideo={true}
                         height={gridHeight}
@@ -66,7 +66,7 @@ const GiphySearch = () => {
                         url={p.previewUrl}
                         width={scaledWidth(p.previewWidth)}
                       />
-                    </Kb.Box>
+                    </Kb.Box2>
                   </Kb.Box2>
                 ) : null
               })}
@@ -84,7 +84,7 @@ const GiphySearch = () => {
           ))}
       </Kb.Box2Div>
       <Kb.Icon type="icon-powered-by-giphy-120-26" style={styles.poweredBy} />
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
diff --git a/shared/chat/conversation/input-area/normal2/platform-input.desktop.tsx b/shared/chat/conversation/input-area/normal2/platform-input.desktop.tsx
index 88026a913e7e..ae52c4c6f365 100644
--- a/shared/chat/conversation/input-area/normal2/platform-input.desktop.tsx
+++ b/shared/chat/conversation/input-area/normal2/platform-input.desktop.tsx
@@ -137,9 +137,9 @@ const GiphyButton = React.memo(function GiphyButton() {
   const onGiphyToggle = toggleGiphyPrefill
 
   return (
-    <Kb.Box style={styles.icon} tooltip="GIF" className="tooltip-top-left">
+    <Kb.Box2 direction="vertical" style={styles.icon} tooltip="GIF" className="tooltip-top-left">
       <Kb.Icon onClick={onGiphyToggle} type="iconfont-gif" />
-    </Kb.Box>
+    </Kb.Box2>
   )
 })
 
@@ -184,21 +184,21 @@ const FileButton = React.memo(function FileButton(p: {
   )
 
   return (
-    <Kb.Box style={styles.icon} tooltip="Attachment" className="tooltip-top-left">
+    <Kb.Box2 direction="vertical" style={styles.icon} tooltip="Attachment" className="tooltip-top-left">
       <Kb.Icon onClick={filePickerOpen} type="iconfont-attachment" />
       <input type="file" style={styles.hidden} ref={setRef} onChange={pickFile} multiple={true} />
-    </Kb.Box>
+    </Kb.Box2>
   )
 })
 
 const Footer = () => {
   return (
-    <Kb.Box style={styles.footerContainer}>
+    <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="flex-start" style={styles.footerContainer}>
       <Typing />
       <Kb.Text lineClamp={1} type="BodyTiny" style={styles.footer} selectable={true}>
         {`*bold*, _italics_, \`code\`, >quote, !>spoiler<!, @user, @team, #channel`}
       </Kb.Text>
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -418,8 +418,10 @@ const PlatformInput = React.memo(function PlatformInput(p: Props) {
     <>
       {popup}
       <KeyEventHandler onKeyDown={globalKeyDownPressHandler} onKeyPress={globalKeyDownPressHandler}>
-        <Kb.Box style={styles.container}>
-          <Kb.Box
+        <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
+          <Kb.Box2
+            direction="horizontal"
+            alignItems="flex-end"
             style={Kb.Styles.collapseStyles([
               styles.inputWrapper,
               isEditing && styles.inputWrapperEditing,
@@ -458,9 +460,9 @@ const PlatformInput = React.memo(function PlatformInput(p: Props) {
               />
             </Kb.Box2>
             <SideButtons cannotWrite={cannotWrite} setHtmlInputRef={setHtmlInputRef} inputRef={inputRef} />
-          </Kb.Box>
+          </Kb.Box2>
           <Footer />
-        </Kb.Box>
+        </Kb.Box2>
       </KeyEventHandler>
     </>
   )
@@ -471,9 +473,7 @@ const styles = Kb.Styles.styleSheetCreate(
     ({
       cancelEditingBtn: {margin: Kb.Styles.globalMargins.xtiny},
       container: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
         backgroundColor: Kb.Styles.globalColors.white,
-        width: '100%',
       },
       explodingIconContainer: Kb.Styles.platformStyles({
         common: {
@@ -501,8 +501,6 @@ const styles = Kb.Styles.styleSheetCreate(
         textAlign: 'right',
       },
       footerContainer: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
-        alignItems: 'flex-start',
         justifyContent: 'space-between',
       },
       hidden: {display: 'none'},
@@ -533,8 +531,7 @@ const styles = Kb.Styles.styleSheetCreate(
       },
       inputEditing: {color: Kb.Styles.globalColors.blackOrBlack},
       inputWrapper: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
-        alignItems: 'flex-end',
+        alignSelf: 'stretch',
         backgroundColor: Kb.Styles.globalColors.white,
         borderColor: Kb.Styles.globalColors.black_20,
         borderRadius: 4,
diff --git a/shared/chat/conversation/input-area/normal2/typing.tsx b/shared/chat/conversation/input-area/normal2/typing.tsx
index adfc08867ee1..9b80f6647870 100644
--- a/shared/chat/conversation/input-area/normal2/typing.tsx
+++ b/shared/chat/conversation/input-area/normal2/typing.tsx
@@ -56,18 +56,18 @@ const Typing = React.memo(function Typing() {
     })
   )
   return (
-    <Kb.Box style={styles.isTypingContainer}>
+    <Kb.Box2 direction="horizontal" style={styles.isTypingContainer}>
       {names.size > 0 && (
-        <Kb.Box style={styles.typingIconContainer}>
+        <Kb.Box2 direction="vertical" style={styles.typingIconContainer}>
           <Kb.Animation animationType="typing" containerStyle={styles.isTypingAnimation} />
-        </Kb.Box>
+        </Kb.Box2>
       )}
       {names.size > 0 && (
         <Kb.Text lineClamp={1} type="BodyTiny" style={styles.isTypingText}>
           <Names names={names} />
         </Kb.Text>
       )}
-    </Kb.Box>
+    </Kb.Box2>
   )
 })
 
@@ -91,7 +91,6 @@ const styles = Kb.Styles.styleSheetCreate(
           opacity: 1,
         },
         isMobile: {
-          ...Kb.Styles.globalStyles.flexBoxRow,
           alignItems: 'flex-end',
           backgroundColor: Kb.Styles.globalColors.white,
           height: mobileTypingContainerHeight,
diff --git a/shared/chat/conversation/input-area/preview.tsx b/shared/chat/conversation/input-area/preview.tsx
index 64e25419c5f8..41f2eef83300 100644
--- a/shared/chat/conversation/input-area/preview.tsx
+++ b/shared/chat/conversation/input-area/preview.tsx
@@ -19,7 +19,7 @@ const Preview = () => {
   }
 
   return (
-    <Kb.Box style={styles.container}>
+    <Kb.Box2 direction="vertical" fullWidth={true} alignItems="center" style={styles.container}>
       <Kb.Text type="BodySemibold" negative={true}>
         Would you like to join #{channelname}?
       </Kb.Text>
@@ -38,7 +38,7 @@ const Preview = () => {
           {clicked === 'join' ? 'Joining...' : 'Leaving...'}
         </Kb.Text>
       )}
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -46,8 +46,6 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       container: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'center',
         backgroundColor: Kb.Styles.globalColors.blue,
         paddingBottom: Kb.Styles.globalMargins.tiny,
         paddingTop: Kb.Styles.globalMargins.tiny,
diff --git a/shared/chat/conversation/list-area/index.native.tsx b/shared/chat/conversation/list-area/index.native.tsx
index 4a4ea8308087..b932d1950dfe 100644
--- a/shared/chat/conversation/list-area/index.native.tsx
+++ b/shared/chat/conversation/list-area/index.native.tsx
@@ -272,7 +272,7 @@ const ConversationList = React.memo(function ConversationList() {
     <Kb.ErrorBoundary>
       <SetRecycleTypeContext.Provider value={setRecycleType}>
         <ForceListRedrawContext.Provider value={forceListRedraw}>
-          <Kb.Box style={styles.container}>
+          <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
             <List
               onScrollToIndexFailed={noop}
               extraData={extraData}
@@ -302,7 +302,7 @@ const ConversationList = React.memo(function ConversationList() {
             />
             {jumpToRecent}
             {debugWhichList}
-          </Kb.Box>
+          </Kb.Box2>
         </ForceListRedrawContext.Provider>
       </SetRecycleTypeContext.Provider>
     </Kb.ErrorBoundary>
diff --git a/shared/chat/conversation/messages/attachment/file.tsx b/shared/chat/conversation/messages/attachment/file.tsx
index bfcbe3bbc11f..70b30f78aeb1 100644
--- a/shared/chat/conversation/messages/attachment/file.tsx
+++ b/shared/chat/conversation/messages/attachment/file.tsx
@@ -127,7 +127,9 @@ const FileContainer = React.memo(function FileContainer(p: OwnProps) {
   return (
     <Kb.ClickableBox2 onLongPress={showMessageMenu} onClick={onDownload}>
       <ShowToastAfterSaving transferState={transferState} />
-      <Kb.Box
+      <Kb.Box2
+        direction="vertical"
+        fullWidth={true}
         style={Kb.Styles.collapseStyles([styles.containerStyle, getEditStyle(isEditing), styles.filename])}
       >
         <Kb.Box2 direction="horizontal" fullWidth={true} gap="tiny" centerChildren={true}>
@@ -171,7 +173,7 @@ const FileContainer = React.memo(function FileContainer(p: OwnProps) {
           </Kb.Box2>
         </Kb.Box2>
         {!Kb.Styles.isMobile && isSaltpackFile && operation && (
-          <Kb.Box style={styles.saltpackOperationContainer}>
+          <Kb.Box2 direction="vertical" fullWidth={true} style={styles.saltpackOperationContainer}>
             <Kb.Button
               mode="Secondary"
               small={true}
@@ -179,37 +181,37 @@ const FileContainer = React.memo(function FileContainer(p: OwnProps) {
               style={styles.saltpackOperation}
               onClick={() => onSaltpackFileOpen(fileName, operation)}
             />
-          </Kb.Box>
+          </Kb.Box2>
         )}
         {!!arrowColor && (
-          <Kb.Box style={styles.downloadedIconWrapperStyle}>
+          <Kb.Box2 direction="horizontal" centerChildren={true} style={styles.downloadedIconWrapperStyle}>
             <Kb.Icon type="iconfont-download" style={styles.downloadedIcon} color={arrowColor} />
-          </Kb.Box>
+          </Kb.Box2>
         )}
         {!!progressLabel && (
-          <Kb.Box style={styles.progressContainerStyle}>
+          <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center">
             <Kb.Text type="BodySmall" style={styles.progressLabelStyle}>
               {progressLabel}
             </Kb.Text>
             {hasProgress && <Kb.ProgressBar ratio={progress} />}
-          </Kb.Box>
+          </Kb.Box2>
         )}
         {!!errorMsg && (
-          <Kb.Box style={styles.progressContainerStyle}>
+          <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center">
             <Kb.Text type="BodySmall" style={styles.error}>
               Failed to download.{' '}
               <Kb.Text type="BodySmall" style={styles.retry} onClick={onDownload}>
                 Retry
               </Kb.Text>
             </Kb.Text>
-          </Kb.Box>
+          </Kb.Box2>
         )}
         {onShowInFinder && (
           <Kb.Text type="BodySmallPrimaryLink" onClick={onShowInFinder} style={styles.linkStyle}>
             Show in {Kb.Styles.fileUIName}
           </Kb.Text>
         )}
-      </Kb.Box>
+      </Kb.Box2>
     </Kb.ClickableBox2>
   )
 })
@@ -218,10 +220,6 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       containerStyle: Kb.Styles.platformStyles({
-        common: {
-          ...Kb.Styles.globalStyles.flexBoxColumn,
-          width: '100%',
-        },
         isElectron: {...Kb.Styles.desktopStyles.clickable},
       }),
       downloadedIcon: {
@@ -230,7 +228,6 @@ const styles = Kb.Styles.styleSheetCreate(
         top: 1,
       },
       downloadedIconWrapperStyle: {
-        ...Kb.Styles.globalStyles.flexBoxCenter,
         ...Kb.Styles.padding(3, 0, 3, 3),
         borderRadius: 20,
         bottom: 0,
@@ -251,10 +248,6 @@ const styles = Kb.Styles.styleSheetCreate(
         },
       }),
       linkStyle: {color: Kb.Styles.globalColors.black_50},
-      progressContainerStyle: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
-        alignItems: 'center',
-      },
       progressLabelStyle: {
         color: Kb.Styles.globalColors.black_50,
         marginRight: Kb.Styles.globalMargins.tiny,
diff --git a/shared/chat/conversation/messages/emoji-row.tsx b/shared/chat/conversation/messages/emoji-row.tsx
index ffbb461d8082..813264d650fd 100644
--- a/shared/chat/conversation/messages/emoji-row.tsx
+++ b/shared/chat/conversation/messages/emoji-row.tsx
@@ -69,28 +69,28 @@ const EmojiRowContainer = React.memo(function EmojiRowContainer(p: OwnProps) {
       </Kb.Box2>
       <Kb.Box2 direction="horizontal">
         <Kb.Divider style={styles.divider} vertical={true} />
-        <Kb.Box
+        <Kb.ClickableBox
           className="hover_container"
           onClick={_showPicker}
           style={styles.iconContainer}
           tooltip="React"
         >
           <Kb.Icon className="hover_contained_color_blue" style={styles.icon} type="iconfont-reacji" />
-        </Kb.Box>
+        </Kb.ClickableBox>
         {!!onReply && (
-          <Kb.Box className="hover_container" onClick={onReply} style={styles.iconContainer} tooltip="Reply">
+          <Kb.ClickableBox className="hover_container" onClick={onReply} style={styles.iconContainer} tooltip="Reply">
             <Kb.Icon className="hover_contained_color_blue" style={styles.icon} type="iconfont-reply" />
-          </Kb.Box>
+          </Kb.ClickableBox>
         )}
         {!!onForward && (
-          <Kb.Box
+          <Kb.ClickableBox
             className="hover_container"
             onClick={onForward}
             style={styles.iconContainer}
             tooltip="Forward"
           >
             <Kb.Icon className="hover_contained_color_blue" style={styles.icon} type="iconfont-forward" />
-          </Kb.Box>
+          </Kb.ClickableBox>
         )}
       </Kb.Box2>
       {showingPicker && (
diff --git a/shared/chat/conversation/messages/message-popup/header.tsx b/shared/chat/conversation/messages/message-popup/header.tsx
index 7c0c2d864558..49d1c9e4cba2 100644
--- a/shared/chat/conversation/messages/message-popup/header.tsx
+++ b/shared/chat/conversation/messages/message-popup/header.tsx
@@ -64,10 +64,10 @@ const MessagePopupHeader = (props: Props) => {
   )
 
   return (
-    <Kb.Box style={styles.headerContainer}>
+    <Kb.Box2 direction="vertical" alignItems="center" style={styles.headerContainer}>
       {Kb.Styles.isMobile ? null : <Kb.Icon type={iconName} style={styles.headerIcon} />}
       {Kb.Styles.isMobile ? null : (
-        <Kb.Box style={Kb.Styles.globalStyles.flexBoxRow}>
+        <Kb.Box2 direction="horizontal">
           <Kb.Text
             type="BodySmall"
             style={{
@@ -76,7 +76,7 @@ const MessagePopupHeader = (props: Props) => {
           >
             ENCRYPTED & SIGNED
           </Kb.Text>
-        </Kb.Box>
+        </Kb.Box2>
       )}
       <Kb.Box2 direction="horizontal">
         <Kb.Box2 direction="horizontal" gap="xtiny" gapStart={true} style={styles.alignItemsCenter}>
@@ -134,7 +134,7 @@ const MessagePopupHeader = (props: Props) => {
           width: '100%',
         }}
       />
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -144,8 +144,6 @@ const styles = Kb.Styles.styleSheetCreate(
       alignItemsCenter: {alignItems: 'center'},
       headerContainer: Kb.Styles.platformStyles({
         common: {
-          ...Kb.Styles.globalStyles.flexBoxColumn,
-          alignItems: 'center',
           paddingTop: Kb.Styles.globalMargins.tiny,
           width: '100%',
         },
diff --git a/shared/chat/conversation/messages/reset-user.tsx b/shared/chat/conversation/messages/reset-user.tsx
index 5ef6bde4ba85..23e0f1923e9c 100644
--- a/shared/chat/conversation/messages/reset-user.tsx
+++ b/shared/chat/conversation/messages/reset-user.tsx
@@ -33,14 +33,14 @@ const ResetUser = () => {
             }
           </Kb.Text>
         </Kb.Text>
-        <Kb.Box style={styles.bullet}>
+        <Kb.Box2 direction="vertical" style={styles.bullet}>
           <Kb.Text type="BodySemibold" negative={true} style={{marginTop: Kb.Styles.globalMargins.tiny}}>
             1. Be satisfied with their new proofs, or
           </Kb.Text>
           <Kb.Text type="BodySemibold" negative={true} style={{marginTop: Kb.Styles.globalMargins.tiny}}>
             2. Know them outside Keybase and have gotten a thumbs up from them.
           </Kb.Text>
-        </Kb.Box>
+        </Kb.Box2>
         <Kb.Text type="BodySemibold" negative={true} style={styles.lastSentence}>
           Don&apos;t let them in until one of the above is&nbsp;true.
         </Kb.Text>
@@ -78,7 +78,6 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       bullet: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
         maxWidth: 320,
       },
       buttonContainer: {
diff --git a/shared/chat/conversation/messages/retention-notice.tsx b/shared/chat/conversation/messages/retention-notice.tsx
index 77327c4f58ed..2ec9b07ecdca 100644
--- a/shared/chat/conversation/messages/retention-notice.tsx
+++ b/shared/chat/conversation/messages/retention-notice.tsx
@@ -56,10 +56,10 @@ const RetentionNoticeContainer = React.memo(function RetentionNoticeContainer()
       : 'iconfont-timer-solid'
 
   return (
-    <Kb.Box style={styles.container}>
-      <Kb.Box style={styles.iconBox}>
+    <Kb.Box2 direction="vertical" alignItems="center" fullWidth={true} style={styles.container}>
+      <Kb.Box2 direction="vertical" style={styles.iconBox}>
         <Kb.Icon color={Kb.Styles.globalColors.black_20} fontSize={20} type={iconType} />
-      </Kb.Box>
+      </Kb.Box2>
       {!!explanation && (
         <Kb.Text center={true} type="BodySmallSemibold">
           {explanation}
@@ -74,7 +74,7 @@ const RetentionNoticeContainer = React.memo(function RetentionNoticeContainer()
           Change this
         </Kb.Text>
       )}
-    </Kb.Box>
+    </Kb.Box2>
   )
 })
 
@@ -82,14 +82,11 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       container: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'center',
         backgroundColor: Kb.Styles.globalColors.blueLighter3,
         paddingBottom: Kb.Styles.globalMargins.small,
         paddingLeft: Kb.Styles.globalMargins.medium,
         paddingRight: Kb.Styles.globalMargins.medium,
         paddingTop: Kb.Styles.globalMargins.small,
-        width: '100%',
       },
       iconBox: {marginBottom: Kb.Styles.globalMargins.xtiny},
     }) as const
diff --git a/shared/chat/conversation/messages/special-top-message.tsx b/shared/chat/conversation/messages/special-top-message.tsx
index e726d608a19c..beb4eeb662b5 100644
--- a/shared/chat/conversation/messages/special-top-message.tsx
+++ b/shared/chat/conversation/messages/special-top-message.tsx
@@ -182,43 +182,43 @@ const SpecialTopMessage = React.memo(function SpecialTopMessage() {
   }, [username])
 
   return (
-    <Kb.Box>
+    <Kb.Box2 direction="vertical" fullWidth={true}>
       {loadMoreType === 'noMoreToLoad' && showRetentionNotice && <RetentionNotice />}
-      <Kb.Box style={styles.spacer} />
+      <Kb.Box2 direction="vertical" style={styles.spacer} />
       {hasOlderResetConversation && <ProfileResetNotice />}
       {pendingState === 'waiting' && (
-        <Kb.Box style={styles.more}>
+        <Kb.Box2 direction="vertical" fullWidth={true} alignItems="center" style={styles.more}>
           <Kb.Text type="BodySmall">Loading...</Kb.Text>
-        </Kb.Box>
+        </Kb.Box2>
       )}
       {pendingState === 'error' && <ErrorMessage />}
       {loadMoreType === 'noMoreToLoad' && !showRetentionNotice && pendingState === 'done' && (
-        <Kb.Box style={styles.more}>
+        <Kb.Box2 direction="vertical" fullWidth={true} alignItems="center" style={styles.more}>
           {isHelloBotConversation ? (
             <HelloBotCard />
           ) : (
             <NewChatCard self={isSelfConversation} openPrivateFolder={openPrivateFolder} />
           )}
-        </Kb.Box>
+        </Kb.Box2>
       )}
       {showTeamOffer && (
-        <Kb.Box style={styles.more}>
+        <Kb.Box2 direction="vertical" fullWidth={true} alignItems="center" style={styles.more}>
           <MakeTeamCard />
-        </Kb.Box>
+        </Kb.Box2>
       )}
       {allowDigging && loadMoreType === 'moreToLoad' && pendingState === 'done' && (
-        <Kb.Box style={styles.more}>
+        <Kb.Box2 direction="vertical" fullWidth={true} alignItems="center" style={styles.more}>
           <Kb.Text type="BodyBig">
             <Kb.NativeEmoji size={16} emojiName=":moyai:" />
           </Kb.Text>
           <Kb.Text type="BodySmallSemibold">Digging ancient messages...</Kb.Text>
-        </Kb.Box>
+        </Kb.Box2>
       )}
       {!Kb.Styles.isMobile || usingFlashList ? null : (
         // special case here with the sep. The flatlist and flashlist invert the leading-trailing, see useStateFast
         <Separator trailingItem={T.Chat.numberToOrdinal(0)} leadingItem={ordinal} />
       )}
-    </Kb.Box>
+    </Kb.Box2>
   )
 })
 
@@ -228,10 +228,7 @@ const styles = Kb.Styles.styleSheetCreate(
       buttonBar: {padding: Kb.Styles.globalMargins.small},
       errorText: {padding: Kb.Styles.globalMargins.small},
       more: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'center',
         paddingBottom: Kb.Styles.globalMargins.medium,
-        width: '100%',
       },
       spacer: {height: Kb.Styles.globalMargins.small},
     }) as const
diff --git a/shared/chat/conversation/messages/system-added-to-team/container.tsx b/shared/chat/conversation/messages/system-added-to-team/container.tsx
index 10999c12dc9f..4c684a85fd06 100644
--- a/shared/chat/conversation/messages/system-added-to-team/container.tsx
+++ b/shared/chat/conversation/messages/system-added-to-team/container.tsx
@@ -120,11 +120,11 @@ const ManageComponent = (props: Props) => {
   }
   if (addee === you) {
     return (
-      <Kb.Box style={{...Kb.Styles.globalStyles.flexBoxColumn}}>
+      <Kb.Box2 direction="vertical">
         <Kb.Text onClick={onManageNotifications} type={textType}>
           Manage phone and computer notifications
         </Kb.Text>
-      </Kb.Box>
+      </Kb.Box2>
     )
   } else if (bot) {
     return (
diff --git a/shared/chat/conversation/messages/text/reply.tsx b/shared/chat/conversation/messages/text/reply.tsx
index 652f53798e58..0a3d40cfd5be 100644
--- a/shared/chat/conversation/messages/text/reply.tsx
+++ b/shared/chat/conversation/messages/text/reply.tsx
@@ -48,9 +48,9 @@ const ReplyImage = () => {
   const sizing = imageWidth && imageHeight ? Chat.zoomImage(imageWidth, imageHeight, 80) : undefined
   return (
     <Kb.Box2 direction="vertical" style={styles.replyImageContainer}>
-      <Kb.Box style={sizing?.margins}>
+      <Kb.Box2 direction="vertical" style={sizing?.margins}>
         <Kb.Image2 src={imageURL} style={sizing?.dims} />
-      </Kb.Box>
+      </Kb.Box2>
     </Kb.Box2>
   )
 }
diff --git a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.desktop.tsx b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.desktop.tsx
index d17dc1106a61..4a2b76e79989 100644
--- a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.desktop.tsx
+++ b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.desktop.tsx
@@ -36,9 +36,9 @@ export const Video = (p: Props) => {
 
   return (
     <Kb.Box2 direction="horizontal" style={styles.container}>
-      <Kb.Box style={Kb.Styles.collapseStyles([styles.absoluteContainer, {height, width}])}>
+      <Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([styles.absoluteContainer, {height, width}])}>
         {!playing && <Kb.Icon type="icon-play-64" style={styles.playButton} />}
-      </Kb.Box>
+      </Kb.Box2>
       <video
         ref={videoRef}
         onClick={_onClick}
diff --git a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.native.tsx b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.native.tsx
index b3a330b258dc..a4aaab4c3049 100644
--- a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.native.tsx
+++ b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.native.tsx
@@ -50,9 +50,9 @@ export const Video = (props: Props) => {
         isMuted={true}
         shouldPlay={playing}
       />
-      <Kb.Box style={Kb.Styles.collapseStyles([styles.absoluteContainer, {height, width}])}>
+      <Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([styles.absoluteContainer, {height, width}])}>
         {!playing && <Kb.Icon type="icon-play-64" style={styles.playButton} />}
-      </Kb.Box>
+      </Kb.Box2>
     </Kb.ClickableBox>
   )
 }
diff --git a/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.desktop.tsx b/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.desktop.tsx
index 6cfcf84d3f74..e4e26c2e3523 100644
--- a/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.desktop.tsx
+++ b/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.desktop.tsx
@@ -102,15 +102,15 @@ const FlameFront = React.memo(function FlameFront(props: {height: number; stop:
   const children: Array<React.ReactNode> = []
   for (let i = 0; i < numBoxes; i++) {
     children.push(
-      <Kb.Box key={String(i)} style={styles.flame}>
+      <Kb.Box2 direction="vertical" key={String(i)} style={styles.flame}>
         <Kb.Animation animationType={isDarkMode ? 'darkExploding' : 'exploding'} width={64} height={64} />
-      </Kb.Box>
+      </Kb.Box2>
     )
   }
   return (
-    <Kb.Box className="flame-container" style={styles.flameContainer}>
+    <Kb.Box2 direction="vertical" className="flame-container" style={styles.flameContainer}>
       {children}
-    </Kb.Box>
+    </Kb.Box2>
   )
 })
 
@@ -128,7 +128,7 @@ const styles = Kb.Styles.styleSheetCreate(
           top: 0,
         },
       }),
-      container: {...Kb.Styles.globalStyles.flexBoxColumn, flex: 1},
+      container: {flex: 1},
       exploded: Kb.Styles.platformStyles({
         isElectron: {
           backgroundColor: Kb.Styles.globalColors.white,
diff --git a/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.native.tsx b/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.native.tsx
index 6e61f9206f6a..125feab14cb8 100644
--- a/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.native.tsx
+++ b/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.native.tsx
@@ -25,7 +25,9 @@ const ExplodingHeightRetainer = (p: Props) => {
   const numImages = Math.ceil(height / 80)
 
   return (
-    <Kb.Box
+    <Kb.Box2
+      direction="vertical"
+      fullWidth={true}
       onLayout={onLayout}
       style={Kb.Styles.collapseStyles([
         styles.container,
@@ -41,7 +43,7 @@ const ExplodingHeightRetainer = (p: Props) => {
         messageKey={messageKey}
         numImages={numImages}
       />
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -157,7 +159,7 @@ const EmojiTower = (p: {numImages: number; animatedValue: NativeAnimated.Value})
     setChildren(children)
   }, [running, numImages])
 
-  return <Kb.Box style={styles.emojiTower}>{children}</Kb.Box>
+  return <Kb.Box2 direction="vertical" style={styles.emojiTower}>{children}</Kb.Box2>
 }
 
 const AshTower = (p: {explodedBy?: string; numImages: number; showExploded: boolean}) => {
@@ -199,7 +201,7 @@ const AshTower = (p: {explodedBy?: string; numImages: number; showExploded: bool
   return (
     <>
       {children}
-      <Kb.Box style={styles.tagBox}>{exploded}</Kb.Box>
+      <Kb.Box2 direction="vertical" alignItems="flex-end" style={styles.tagBox}>{exploded}</Kb.Box2>
     </>
   )
 }
@@ -211,9 +213,8 @@ const styles = Kb.Styles.styleSheetCreate(
         height: 80,
         width: 400,
       },
-      container: {...Kb.Styles.globalStyles.flexBoxColumn, flex: 1},
+      container: {flex: 1},
       emojiTower: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
         bottom: 0,
         overflow: 'hidden',
         position: 'absolute',
@@ -238,8 +239,6 @@ const styles = Kb.Styles.styleSheetCreate(
         top: 0,
       },
       tagBox: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'flex-end',
         backgroundColor: Kb.Styles.globalColors.fastBlank,
         bottom: 2,
         minWidth: 80,
diff --git a/shared/chat/conversation/messages/wrapper/wrapper.tsx b/shared/chat/conversation/messages/wrapper/wrapper.tsx
index 5dd333456f15..bac490f7c9e0 100644
--- a/shared/chat/conversation/messages/wrapper/wrapper.tsx
+++ b/shared/chat/conversation/messages/wrapper/wrapper.tsx
@@ -481,9 +481,9 @@ const RightSide = React.memo(function RightSide(p: RProps) {
           'tooltip-left'
         )}
       >
-        <Kb.Box style={styles.ellipsis}>
+        <Kb.Box2 direction="vertical" style={styles.ellipsis}>
           <Kb.Icon type="iconfont-ellipsis" onClick={showPopup} />
-        </Kb.Box>
+        </Kb.Box2>
       </Kb.Box2>
     )
 
diff --git a/shared/chat/conversation/pinned-message.tsx b/shared/chat/conversation/pinned-message.tsx
index f1be26373338..27e6b8ee29bf 100644
--- a/shared/chat/conversation/pinned-message.tsx
+++ b/shared/chat/conversation/pinned-message.tsx
@@ -66,9 +66,9 @@ const PinnedMessage = React.memo(function PinnedMessage() {
         <Kb.Box2 direction="horizontal" style={styles.blueBar} />
         {!!imageURL && (
           <Kb.Box2 direction="vertical" style={styles.imageContainer}>
-            <Kb.Box style={{...(sizing ? sizing.margins : {})}}>
+            <Kb.Box2 direction="vertical" style={{...(sizing ? sizing.margins : {})}}>
               <Kb.Image2 src={imageURL} style={{...(sizing ? sizing.dims : {})}} />
-            </Kb.Box>
+            </Kb.Box2>
           </Kb.Box2>
         )}
         <Kb.Box2 direction="vertical" fullWidth={true} style={{flex: 1}}>
diff --git a/shared/chat/conversation/rekey/participant-rekey.desktop.tsx b/shared/chat/conversation/rekey/participant-rekey.desktop.tsx
index 3cf0791e1fcb..9ef08e9e0d1a 100644
--- a/shared/chat/conversation/rekey/participant-rekey.desktop.tsx
+++ b/shared/chat/conversation/rekey/participant-rekey.desktop.tsx
@@ -2,27 +2,30 @@ import * as Kb from '@/common-adapters'
 import type {Props} from './participant-rekey.types'
 
 const Row = (props: {username: string; onUsernameClicked: (s: string) => void}) => (
-  <Kb.Box style={styles.row} onClick={() => props.onUsernameClicked(props.username)}>
-    <Kb.Avatar
-      username={props.username}
-      size={48}
-      style={{marginRight: Kb.Styles.globalMargins.small, padding: 4}}
-    />
-    <Kb.Box style={styles.innerRow}>
-      <Kb.ConnectedUsernames inline={true} type="BodyBold" usernames={props.username} />
-      <Kb.Text type="BodySmall" style={Kb.Styles.platformStyles({isElectron: {lineHeight: '17px'}})}>
-        Can rekey this chat by opening the Keybase app.
-      </Kb.Text>
-    </Kb.Box>
-  </Kb.Box>
+  <Kb.ClickableBox onClick={() => props.onUsernameClicked(props.username)}>
+    <Kb.Box2 direction="horizontal" style={styles.row}>
+      <Kb.Avatar
+        username={props.username}
+        size={48}
+        style={{marginRight: Kb.Styles.globalMargins.small, padding: 4}}
+      />
+      <Kb.Box2 direction="vertical" style={styles.innerRow}>
+        <Kb.ConnectedUsernames inline={true} type="BodyBold" usernames={props.username} />
+        <Kb.Text type="BodySmall" style={Kb.Styles.platformStyles({isElectron: {lineHeight: '17px'}})}>
+          Can rekey this chat by opening the Keybase app.
+        </Kb.Text>
+      </Kb.Box2>
+    </Kb.Box2>
+  </Kb.ClickableBox>
 )
 
 const ParticipantRekey = ({rekeyers, onShowProfile: onUsernameClicked}: Props) => {
   return (
-    <Kb.Box style={styles.container}>
-      <Kb.Box
+    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
+      <Kb.Box2
+        direction="horizontal"
+        fullWidth={true}
         style={{
-          ...Kb.Styles.globalStyles.flexBoxRow,
           backgroundColor: Kb.Styles.globalColors.red,
           justifyContent: 'center',
         }}
@@ -34,11 +37,12 @@ const ParticipantRekey = ({rekeyers, onShowProfile: onUsernameClicked}: Props) =
         >
           This conversation is waiting for a participant to open their Keybase app.
         </Kb.Text>
-      </Kb.Box>
-      <Kb.Box
+      </Kb.Box2>
+      <Kb.Box2
+        direction="vertical"
+        fullWidth={true}
         style={Kb.Styles.platformStyles({
           isElectron: {
-            ...Kb.Styles.globalStyles.flexBoxColumn,
             flex: 1,
             justifyContent: 'center',
             marginLeft: 8,
@@ -46,13 +50,13 @@ const ParticipantRekey = ({rekeyers, onShowProfile: onUsernameClicked}: Props) =
           },
         })}
       >
-        <Kb.Box>
+        <Kb.Box2 direction="vertical" fullWidth={true}>
           {rekeyers.map(username => (
             <Row key={username} username={username} onUsernameClicked={onUsernameClicked} />
           ))}
-        </Kb.Box>
-      </Kb.Box>
-    </Kb.Box>
+        </Kb.Box2>
+      </Kb.Box2>
+    </Kb.Box2>
   )
 }
 
@@ -61,8 +65,6 @@ const styles = Kb.Styles.styleSheetCreate(
     ({
       container: Kb.Styles.platformStyles({
         isElectron: {
-          ...Kb.Styles.globalStyles.flexBoxColumn,
-          alignItems: 'stretch',
           backgroundColor: Kb.Styles.globalColors.white,
           borderLeft: `1px solid ${Kb.Styles.globalColors.black_20}`,
           flex: 1,
@@ -71,7 +73,6 @@ const styles = Kb.Styles.styleSheetCreate(
       }),
       innerRow: Kb.Styles.platformStyles({
         isElectron: {
-          ...Kb.Styles.globalStyles.flexBoxColumn,
           borderBottom: `1px solid ${Kb.Styles.globalColors.black_10}`,
           flex: 1,
           justifyContent: 'center',
@@ -79,8 +80,6 @@ const styles = Kb.Styles.styleSheetCreate(
       }),
       row: Kb.Styles.platformStyles({
         isElectron: {
-          ...Kb.Styles.globalStyles.flexBoxRow,
-          ...Kb.Styles.desktopStyles.clickable,
           minHeight: 48,
         },
       }),
diff --git a/shared/chat/conversation/rekey/participant-rekey.native.tsx b/shared/chat/conversation/rekey/participant-rekey.native.tsx
index 93b354294595..4809d13219a7 100644
--- a/shared/chat/conversation/rekey/participant-rekey.native.tsx
+++ b/shared/chat/conversation/rekey/participant-rekey.native.tsx
@@ -4,13 +4,13 @@ import type {Props} from './participant-rekey.types'
 
 const Row = ({username, onUsernameClicked}: {username: string; onUsernameClicked: (s: string) => void}) => (
   <Kb.ClickableBox onClick={() => onUsernameClicked(username)}>
-    <Kb.Box style={styles.row}>
+    <Kb.Box2 direction="horizontal" alignItems="center" style={styles.row}>
       <Kb.Avatar
         username={username}
         size={48}
         style={{marginRight: Kb.Styles.globalMargins.small, padding: 4}}
       />
-      <Kb.Box style={styles.innerRow}>
+      <Kb.Box2 direction="vertical" style={styles.innerRow}>
         <Kb.ConnectedUsernames inline={true} backgroundMode="Terminal" type="BodyBold" usernames={username} />
         <Kb.Text
           type="BodySmall"
@@ -19,16 +19,17 @@ const Row = ({username, onUsernameClicked}: {username: string; onUsernameClicked
         >
           Can rekey this chat by opening the Keybase app.
         </Kb.Text>
-      </Kb.Box>
-    </Kb.Box>
+      </Kb.Box2>
+    </Kb.Box2>
   </Kb.ClickableBox>
 )
 
 const ParticipantRekey = ({rekeyers, onShowProfile: onUsernameClicked}: Props) => (
-  <Kb.Box style={styles.container}>
-    <Kb.Box
+  <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
+    <Kb.Box2
+      direction="horizontal"
+      fullWidth={true}
       style={{
-        ...Kb.Styles.globalStyles.flexBoxRow,
         backgroundColor: Kb.Styles.globalColors.red,
         justifyContent: 'center',
       }}
@@ -41,31 +42,28 @@ const ParticipantRekey = ({rekeyers, onShowProfile: onUsernameClicked}: Props) =
       >
         This conversation is waiting for a participant to open their Keybase app.
       </Kb.Text>
-    </Kb.Box>
+    </Kb.Box2>
     <NativeScrollView style={{flex: 1, paddingTop: 8}}>
-      <Kb.Box style={{...Kb.Styles.globalStyles.flexBoxColumn, justifyContent: 'center', marginLeft: 8}}>
-        <Kb.Box>
+      <Kb.Box2 direction="vertical" fullWidth={true} style={{justifyContent: 'center', marginLeft: 8}}>
+        <Kb.Box2 direction="vertical" fullWidth={true}>
           {rekeyers.map(username => (
             <Row key={username} username={username} onUsernameClicked={onUsernameClicked} />
           ))}
-        </Kb.Box>
-      </Kb.Box>
+        </Kb.Box2>
+      </Kb.Box2>
     </NativeScrollView>
-  </Kb.Box>
+  </Kb.Box2>
 )
 
 const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       container: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'stretch',
         backgroundColor: Kb.Styles.globalColors.blueDarker2,
         flex: 1,
         justifyContent: 'flex-start',
       },
       innerRow: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
         borderBottomColor: Kb.Styles.globalColors.black_10,
         borderBottomWidth: 1,
         flex: 1,
@@ -74,8 +72,6 @@ const styles = Kb.Styles.styleSheetCreate(
       },
       row: Kb.Styles.platformStyles({
         common: {
-          ...Kb.Styles.globalStyles.flexBoxRow,
-          alignItems: 'center',
           minHeight: 56,
         },
         isElectron: {
diff --git a/shared/chat/conversation/rekey/you-rekey.desktop.tsx b/shared/chat/conversation/rekey/you-rekey.desktop.tsx
index 7c6bfaa726c2..264fb0a36c0d 100644
--- a/shared/chat/conversation/rekey/you-rekey.desktop.tsx
+++ b/shared/chat/conversation/rekey/you-rekey.desktop.tsx
@@ -3,10 +3,11 @@ import type {Props} from './you-rekey'
 
 const YouRekey = ({onRekey}: Props) => {
   return (
-    <Kb.Box style={styles.container}>
-      <Kb.Box
+    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
+      <Kb.Box2
+        direction="horizontal"
+        fullWidth={true}
         style={{
-          ...Kb.Styles.globalStyles.flexBoxRow,
           backgroundColor: Kb.Styles.globalColors.red,
           justifyContent: 'center',
         }}
@@ -18,11 +19,11 @@ const YouRekey = ({onRekey}: Props) => {
         >
           This conversation needs to be rekeyed.
         </Kb.Text>
-      </Kb.Box>
+      </Kb.Box2>
       <Kb.ButtonBar>
         <Kb.Button backgroundColor="blue" onClick={onRekey} label="Rekey" />
       </Kb.ButtonBar>
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -30,8 +31,6 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       container: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'stretch',
         backgroundColor: Kb.Styles.globalColors.blueDarker2,
         flex: 1,
         justifyContent: 'flex-start',
diff --git a/shared/chat/conversation/rekey/you-rekey.native.tsx b/shared/chat/conversation/rekey/you-rekey.native.tsx
index 2110f6c77f4f..ad1cfe31783c 100644
--- a/shared/chat/conversation/rekey/you-rekey.native.tsx
+++ b/shared/chat/conversation/rekey/you-rekey.native.tsx
@@ -6,11 +6,11 @@ const YouRekey = ({onEnterPaperkey}: Props) => (
     <Kb.Banner color="red">
       <Kb.BannerParagraph bannerColor="red" content="This conversation needs to be rekeyed." />
     </Kb.Banner>
-    <Kb.Box style={styles.container}>
-      <Kb.Box
+    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
+      <Kb.Box2
+        direction="vertical"
+        fullWidth={true}
         style={{
-          ...Kb.Styles.globalStyles.flexBoxColumn,
-          alignItems: 'stretch',
           flex: 1,
           justifyContent: 'center',
         }}
@@ -19,8 +19,8 @@ const YouRekey = ({onEnterPaperkey}: Props) => (
           To unlock this conversation, open one of your other devices or enter a paperkey.
         </Kb.Text>
         <Kb.Button onClick={onEnterPaperkey} label="Enter a paper key" />
-      </Kb.Box>
-    </Kb.Box>
+      </Kb.Box2>
+    </Kb.Box2>
   </Kb.Box2>
 )
 
@@ -28,8 +28,6 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       container: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'stretch',
         flex: 1,
         justifyContent: 'flex-start',
         padding: Kb.Styles.globalMargins.small,
diff --git a/shared/chat/conversation/reply-preview.tsx b/shared/chat/conversation/reply-preview.tsx
index b194fb2091cb..eda03825e77d 100644
--- a/shared/chat/conversation/reply-preview.tsx
+++ b/shared/chat/conversation/reply-preview.tsx
@@ -37,7 +37,7 @@ const ReplyPreview = () => {
   }, [setReplyTo])
 
   return (
-    <Kb.Box style={styles.outerContainer}>
+    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.outerContainer}>
       <Kb.Box2 direction="vertical" style={styles.container} gap="xtiny" fullWidth={true}>
         <Kb.Box2 direction="vertical" style={styles.title} fullWidth={true}>
           <Kb.Text type="BodySmallSemibold">Replying to:</Kb.Text>
@@ -53,9 +53,9 @@ const ReplyPreview = () => {
             <Kb.Box2 direction="horizontal" fullWidth={true} gap="tiny">
               {!!imageURL && (
                 <Kb.Box2 direction="vertical" style={styles.replyImageContainer}>
-                  <Kb.Box style={{...(sizing ? sizing.margins : {})}}>
+                  <Kb.Box2 direction="vertical" style={{...(sizing ? sizing.margins : {})}}>
                     <Kb.Image2 src={imageURL} style={{...(sizing ? sizing.dims : {})}} />
-                  </Kb.Box>
+                  </Kb.Box2>
                 </Kb.Box2>
               )}
               <Kb.Text type="BodySmall" style={styles.text} lineClamp={1}>
@@ -66,7 +66,7 @@ const ReplyPreview = () => {
           <Kb.Icon onClick={onCancel} type="iconfont-remove" style={styles.close} boxStyle={styles.close} />
         </Kb.Box2>
       </Kb.Box2>
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
diff --git a/shared/chat/conversation/you-are-reset.tsx b/shared/chat/conversation/you-are-reset.tsx
index 92143cfe21d4..61fe260710d0 100644
--- a/shared/chat/conversation/you-are-reset.tsx
+++ b/shared/chat/conversation/you-are-reset.tsx
@@ -1,31 +1,27 @@
 import * as Kb from '@/common-adapters'
 
 const YouAreReset = () => (
-  <Kb.Box style={{...Kb.Styles.globalStyles.flexBoxColumn, flex: 1}}>
-    <Kb.Box
-      style={{
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'center',
-        flex: 1,
-        justifyContent: 'center',
-      }}
+  <Kb.Box2 direction="vertical" fullWidth={true} style={{flex: 1}}>
+    <Kb.Box2
+      direction="vertical"
+      centerChildren={true}
+      fullWidth={true}
+      style={{flex: 1}}
     >
       <Kb.Icon type={Kb.Styles.isMobile ? 'icon-skull-64' : 'icon-skull-48'} />
-    </Kb.Box>
-    <Kb.Box style={styles.box}>
+    </Kb.Box2>
+    <Kb.Box2 direction="vertical" alignItems="center" fullWidth={true} style={styles.box}>
       <Kb.Text type="BodySemibold" negative={true} style={{textAlign: 'center' as const}}>
         Since you reset your account, participants have to accept to let you back in.
       </Kb.Text>
-    </Kb.Box>
-  </Kb.Box>
+    </Kb.Box2>
+  </Kb.Box2>
 )
 
 const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       box: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'center',
         backgroundColor: Kb.Styles.globalColors.red,
         padding: Kb.Styles.globalMargins.small,
       },
diff --git a/shared/chat/create-channel/index.desktop.tsx b/shared/chat/create-channel/index.desktop.tsx
index 1f77f1ad36a7..a4b34a52a6ec 100644
--- a/shared/chat/create-channel/index.desktop.tsx
+++ b/shared/chat/create-channel/index.desktop.tsx
@@ -7,7 +7,7 @@ const CreateChannel = (p: Props) => {
   const props = useHook(p)
   return (
     <Kb.PopupDialog onClose={props.onBack} styleCover={styles.cover} styleContainer={styles.container}>
-      <Kb.Box style={{...styles.box, paddingTop: Kb.Styles.globalMargins.medium}}>
+      <Kb.Box2 direction="vertical" alignItems="center" fullWidth={true} style={styles.boxTop}>
         <Kb.Avatar isTeam={true} teamname={props.teamname} size={32} />
         <Kb.Text type="BodySmallSemibold" style={{marginTop: Kb.Styles.globalMargins.xtiny}}>
           {props.teamname}
@@ -18,17 +18,17 @@ const CreateChannel = (p: Props) => {
         >
           New chat channel
         </Kb.Text>
-      </Kb.Box>
+      </Kb.Box2>
       {!!props.errorText && (
         <Kb.Banner color="red">
           <Kb.BannerParagraph bannerColor="red" content={props.errorText} />
         </Kb.Banner>
       )}
-      <Kb.Box style={styles.box}>
-        <Kb.Box style={styles.back} onClick={props.onBack}>
+      <Kb.Box2 direction="vertical" alignItems="center" fullWidth={true} style={styles.box}>
+        <Kb.ClickableBox style={styles.back} onClick={props.onBack}>
           <Kb.Icon style={styles.backIcon} type="iconfont-arrow-left" />
           <Kb.Text type="BodyPrimaryLink">Back</Kb.Text>
-        </Kb.Box>
+        </Kb.ClickableBox>
         <Kb.Box2 direction="vertical" fullWidth={true} gap="tiny" gapEnd={true} gapStart={true}>
           <Kb.LabeledInput
             autoFocus={true}
@@ -62,7 +62,7 @@ const CreateChannel = (p: Props) => {
             label="Save"
           />
         </Kb.ButtonBar>
-      </Kb.Box>
+      </Kb.Box2>
     </Kb.PopupDialog>
   )
 }
@@ -81,11 +81,14 @@ const styles = Kb.Styles.styleSheetCreate(
         marginRight: Kb.Styles.globalMargins.xtiny,
       },
       box: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'center',
         paddingLeft: Kb.Styles.globalMargins.large,
         paddingRight: Kb.Styles.globalMargins.large,
       },
+      boxTop: {
+        paddingLeft: Kb.Styles.globalMargins.large,
+        paddingRight: Kb.Styles.globalMargins.large,
+        paddingTop: Kb.Styles.globalMargins.medium,
+      },
       buttonBar: {alignItems: 'center'},
       container: {
         maxHeight: 520,
diff --git a/shared/chat/create-channel/index.native.tsx b/shared/chat/create-channel/index.native.tsx
index aa32ddf6a99a..aff3e1e03c7a 100644
--- a/shared/chat/create-channel/index.native.tsx
+++ b/shared/chat/create-channel/index.native.tsx
@@ -7,13 +7,13 @@ const CreateChannel = (p: Props) => {
   const props = useHook(p)
   return (
     <Kb.HeaderHocWrapper onBack={props.onBack}>
-      <Kb.Box>
+      <Kb.Box2 direction="vertical" fullWidth={true}>
         {!!props.errorText && (
           <Kb.Banner color="red">
             <Kb.BannerParagraph bannerColor="red" content={props.errorText} />
           </Kb.Banner>
         )}
-        <Kb.Box style={styles.box}>
+        <Kb.Box2 direction="vertical" fullWidth={true} style={styles.box}>
           <Kb.Box2 direction="vertical" fullWidth={true} gap="small">
             <Kb.LabeledInput
               autoFocus={true}
@@ -42,8 +42,8 @@ const CreateChannel = (p: Props) => {
               label="Save"
             />
           </Kb.ButtonBar>
-        </Kb.Box>
-      </Kb.Box>
+        </Kb.Box2>
+      </Kb.Box2>
     </Kb.HeaderHocWrapper>
   )
 }
diff --git a/shared/chat/delete-history-warning.tsx b/shared/chat/delete-history-warning.tsx
index 47ffafd71431..7c50ecf17a99 100644
--- a/shared/chat/delete-history-warning.tsx
+++ b/shared/chat/delete-history-warning.tsx
@@ -18,12 +18,12 @@ const DeleteHistoryWarning = () => {
   return (
     <MaybePopup onClose={onCancel}>
       {Kb.Styles.isMobile && <Kb.HeaderHocHeader onCancel={onCancel} />}
-      <Kb.Box
+      <Kb.Box2
+        direction="vertical"
         style={Kb.Styles.collapseStyles([
-          Kb.Styles.globalStyles.flexBoxColumn,
           styles.padding,
           styles.box,
-        ] as const)}
+        ])}
       >
         <Kb.Icon type={Kb.Styles.isMobile ? 'icon-message-deletion-64' : 'icon-message-deletion-48'} />
         <Kb.Text style={{padding: Kb.Styles.globalMargins.small}} type="Header">
@@ -32,7 +32,7 @@ const DeleteHistoryWarning = () => {
         <Kb.Text center={Kb.Styles.isMobile} style={styles.text} type="Body">
           You are about to delete all the messages in this conversation. For everyone.
         </Kb.Text>
-        <Kb.Box style={styles.buttonBox}>
+        <Kb.Box2 direction={Kb.Styles.isMobile ? 'verticalReverse' : 'horizontal'} style={styles.buttonBox}>
           <Kb.Button
             type="Dim"
             style={styles.button}
@@ -47,8 +47,8 @@ const DeleteHistoryWarning = () => {
             label="Yes, clear for everyone"
             fullWidth={Kb.Styles.isMobile}
           />
-        </Kb.Box>
-      </Kb.Box>
+        </Kb.Box2>
+      </Kb.Box2>
     </MaybePopup>
   )
 }
@@ -73,12 +73,8 @@ const styles = Kb.Styles.styleSheetCreate(
       }),
       buttonBox: Kb.Styles.platformStyles({
         common: {marginTop: Kb.Styles.globalMargins.xlarge},
-        isElectron: {...Kb.Styles.globalStyles.flexBoxRow},
         isMobile: {
-          ...Kb.Styles.globalStyles.flexBoxColumn,
-          alignItems: 'stretch',
           flex: 1,
-          flexDirection: 'column-reverse',
           paddingTop: Kb.Styles.globalMargins.xlarge,
           width: '100%',
         },
diff --git a/shared/chat/emoji-picker/container.tsx b/shared/chat/emoji-picker/container.tsx
index 7dfa47c45929..34bf8218c18d 100644
--- a/shared/chat/emoji-picker/container.tsx
+++ b/shared/chat/emoji-picker/container.tsx
@@ -162,7 +162,7 @@ const WrapperMobile = (props: Props) => {
           onExpandChange={setSkinTonePickerExpanded}
           setSkinTone={setSkinTone}
         />
-        <Kb.Box style={Kb.Styles.globalStyles.flexOne} />
+        <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.flexOne} />
         {!props.small && !skinTonePickerExpanded && canManageEmoji && (
           <Kb.Button
             mode="Secondary"
@@ -295,7 +295,6 @@ const styles = Kb.Styles.styleSheetCreate(
         },
       }),
       containerDesktop: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
         backgroundColor: Kb.Styles.globalColors.white,
         height: 561,
         maxWidth: 336,
diff --git a/shared/chat/emoji-picker/index.tsx b/shared/chat/emoji-picker/index.tsx
index bbaf4d4e6636..bc4b62d930d3 100644
--- a/shared/chat/emoji-picker/index.tsx
+++ b/shared/chat/emoji-picker/index.tsx
@@ -264,7 +264,8 @@ const EmojiPicker = React.memo(function EmojiPicker(props: Props) {
             : bookmarkIndex === 0
           const secKey = bookmark.coveredSectionKeys.values().next().value ?? ''
           return (
-            <Kb.Box
+            <Kb.Box2
+              direction="vertical"
               key={bookmark.sectionIndex}
               className="emoji-picker-emoji-box"
               style={isActive ? styles.activeBookmark : undefined}
@@ -282,7 +283,7 @@ const EmojiPicker = React.memo(function EmojiPicker(props: Props) {
                   })
                 }}
               />
-            </Kb.Box>
+            </Kb.Box2>
           )
         })}
       </Kb.Box2>
@@ -413,7 +414,7 @@ export const getSkinToneModifierStrIfAvailable = (emoji: EmojiData, skinTone?: T
 }
 
 const makeEmojiPlaceholder = (index: number) => (
-  <Kb.Box key={`ph-${index.toString()}`} style={styles.emojiPlaceholder} />
+  <Kb.Box2 direction="vertical" key={`ph-${index.toString()}`} style={styles.emojiPlaceholder} />
 )
 
 const styles = Kb.Styles.styleSheetCreate(
diff --git a/shared/chat/emoji-picker/skin-tone-picker.tsx b/shared/chat/emoji-picker/skin-tone-picker.tsx
index 3af6378b7299..078562ce2e9e 100644
--- a/shared/chat/emoji-picker/skin-tone-picker.tsx
+++ b/shared/chat/emoji-picker/skin-tone-picker.tsx
@@ -5,16 +5,17 @@ import {emojiData} from '@/common-adapters/emoji'
 
 const circle = (skinTone: undefined | T.Chat.EmojiSkinTone, isExpanded: boolean, outerCircle: boolean) => {
   return (
-    <Kb.Box style={{position: 'relative'}}>
-      {outerCircle && <Kb.Box style={styles.circleOuter} />}
-      <Kb.Box
+    <Kb.Box2 direction="vertical" style={{position: 'relative'}}>
+      {outerCircle && <Kb.Box2 direction="vertical" style={styles.circleOuter} />}
+      <Kb.Box2
+        direction="vertical"
         style={Kb.Styles.collapseStyles([
           !isExpanded && styles.circleCollapsed,
           isExpanded && styles.circleExpanded,
           {backgroundColor: T.Chat.SkinToneToDotColor(skinTone)},
         ])}
-      ></Kb.Box>
-    </Kb.Box>
+      />
+    </Kb.Box2>
   )
 }
 
@@ -71,7 +72,7 @@ const SkinTonePicker = React.memo(function SkinTonePicker(props: Props) {
       </Kb.ClickableBox>
     )
   ) : (
-    <Kb.Box style={styles.relative}>
+    <Kb.Box2 direction="vertical" style={styles.relative}>
       {expanded ? (
         <Kb.Box2 direction="vertical" style={styles.popupContainer}>
           {optionSkinTones}
@@ -83,8 +84,8 @@ const SkinTonePicker = React.memo(function SkinTonePicker(props: Props) {
           </Kb.ClickableBox>
         </Kb.WithTooltip>
       )}
-      <Kb.Box style={styles.dotPlaceholder} />
-    </Kb.Box>
+      <Kb.Box2 direction="vertical" style={styles.dotPlaceholder} />
+    </Kb.Box2>
   )
 })
 
diff --git a/shared/chat/inbox/index.desktop.tsx b/shared/chat/inbox/index.desktop.tsx
index ac2d433ec883..c7d0629792af 100644
--- a/shared/chat/inbox/index.desktop.tsx
+++ b/shared/chat/inbox/index.desktop.tsx
@@ -143,7 +143,7 @@ const DragLine = (p: {
               <Kb.Box2 direction="horizontal" style={styles.grabberLine} />
             </Kb.Box2>
           </div>
-          <Kb.Box style={styles.spacer} />
+          <Kb.Box2 direction="vertical" style={styles.spacer} />
         </>
       )}
       {dragY !== -1 && (
@@ -374,7 +374,7 @@ function Inbox(props: TInbox.Props) {
 
   return (
     <Kb.ErrorBoundary>
-      <Kb.Box className="inbox-hover-container" style={styles.container}>
+      <Kb.Box2 direction="vertical" className="inbox-hover-container" style={styles.container}>
         <div style={styles.list} ref={scrollDiv}>
           {rows.length ? (
             <List
@@ -389,7 +389,7 @@ function Inbox(props: TInbox.Props) {
         </div>
         {floatingDivider || (rows.length === 0 && <BuildTeam />)}
         {showUnread && !showFloating && <UnreadShortcut onClick={scrollToUnread} unreadCount={unreadCount} />}
-      </Kb.Box>
+      </Kb.Box2>
     </Kb.ErrorBoundary>
   )
 }
@@ -399,7 +399,6 @@ const styles = Kb.Styles.styleSheetCreate(
     ({
       container: Kb.Styles.platformStyles({
         isElectron: {
-          ...Kb.Styles.globalStyles.flexBoxColumn,
           backgroundColor: Kb.Styles.globalColors.blueGrey,
           contain: 'strict',
           height: '100%',
diff --git a/shared/chat/inbox/index.native.tsx b/shared/chat/inbox/index.native.tsx
index 42bf1c36d096..c5843f51b039 100644
--- a/shared/chat/inbox/index.native.tsx
+++ b/shared/chat/inbox/index.native.tsx
@@ -341,7 +341,7 @@ const Inbox = React.memo(function Inbox(p: TInbox.Props) {
 
   return (
     <Kb.ErrorBoundary>
-      <Kb.Box style={styles.container}>
+      <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
         <LoadingLine />
         {isSearching ? (
           <Kb.Box2 direction="vertical" fullWidth={true}>
@@ -374,7 +374,7 @@ const Inbox = React.memo(function Inbox(p: TInbox.Props) {
           <UnreadShortcut onClick={scrollToUnread} unreadCount={unreadCount} />
         )}
         {debugWhichList}
-      </Kb.Box>
+      </Kb.Box2>
     </Kb.ErrorBoundary>
   )
 })
@@ -390,9 +390,9 @@ const LoadingLine = () => {
     C.waitingKeyChatInboxSyncStarted,
   ])
   return isLoading ? (
-    <Kb.Box style={styles.loadingContainer}>
+    <Kb.Box2 direction="vertical" style={styles.loadingContainer}>
       <Kb.LoadingLine />
-    </Kb.Box>
+    </Kb.Box2>
   ) : null
 }
 
@@ -402,7 +402,6 @@ const styles = Kb.Styles.styleSheetCreate(
       button: {width: '100%'},
       container: Kb.Styles.platformStyles({
         common: {
-          ...Kb.Styles.globalStyles.flexBoxColumn,
           backgroundColor: Kb.Styles.globalColors.fastBlank,
           flexGrow: 1,
           position: 'relative',
diff --git a/shared/chat/inbox/new-chat-button.tsx b/shared/chat/inbox/new-chat-button.tsx
index 62445e915d25..dc17141c8e42 100644
--- a/shared/chat/inbox/new-chat-button.tsx
+++ b/shared/chat/inbox/new-chat-button.tsx
@@ -23,10 +23,10 @@ const HeaderNewChatButton = () => {
       className="tooltip-right"
     >
       <Kb.Box2 direction="vertical" style={styles.gradientContainer} pointerEvents="none">
-        <Kb.Box style={styles.gradientRed} />
-        <Kb.Box style={styles.gradientOrange} />
-        <Kb.Box style={styles.gradientYellow} />
-        <Kb.Box style={styles.gradientGreen} />
+        <Kb.Box2 direction="vertical" style={styles.gradientRed} />
+        <Kb.Box2 direction="vertical" style={styles.gradientOrange} />
+        <Kb.Box2 direction="vertical" style={styles.gradientYellow} />
+        <Kb.Box2 direction="vertical" style={styles.gradientGreen} />
       </Kb.Box2>
       <Kb.Button
         label="New chat"
diff --git a/shared/chat/inbox/row/big-team-channel.tsx b/shared/chat/inbox/row/big-team-channel.tsx
index f80b156a94fa..1215b4c05bea 100644
--- a/shared/chat/inbox/row/big-team-channel.tsx
+++ b/shared/chat/inbox/row/big-team-channel.tsx
@@ -149,7 +149,7 @@ const BigTeamChannelInner = (props: Props) => {
             >
               {draftIcon}
               {outboxIcon}
-              {hasBadge && <Kb.Box style={styles.unread} />}
+              {hasBadge && <Kb.Box2 direction="vertical" style={styles.unread} />}
             </Kb.Box2>
           </Kb.Box2>
         </Kb.Box2>
diff --git a/shared/chat/inbox/row/big-team-header.tsx b/shared/chat/inbox/row/big-team-header.tsx
index d5359603db77..8c70593b401c 100644
--- a/shared/chat/inbox/row/big-team-header.tsx
+++ b/shared/chat/inbox/row/big-team-header.tsx
@@ -69,7 +69,7 @@ const BigTeamHeaderInner = (props: Props) => {
           color={Kb.Styles.globalColors.black_35}
           type="iconfont-gear"
         />
-        <Kb.Box style={Kb.Styles.collapseStyles([styles.badge, badgeSubscribe && styles.badgeVisible])} />
+        <Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([styles.badge, badgeSubscribe && styles.badgeVisible])} />
       </Kb.ClickableBox>
     </Kb.Box2>
   )
diff --git a/shared/chat/inbox/row/start-new-chat.tsx b/shared/chat/inbox/row/start-new-chat.tsx
index e6d5784c51aa..f2f540fc2805 100644
--- a/shared/chat/inbox/row/start-new-chat.tsx
+++ b/shared/chat/inbox/row/start-new-chat.tsx
@@ -8,14 +8,14 @@ type Props = {
 const StartNewChat = (props: Props) => {
   if (Kb.Styles.isMobile) {
     return (
-      <Kb.Box style={styles.container}>
+      <Kb.Box2 direction="horizontal" alignItems="center" fullWidth={true} style={styles.container}>
         <Kb.ClickableBox style={styles.clickableBox} onClick={props.onNewChat}>
           <Kb.Icon type="iconfont-compose" style={styles.iconCompose} hoverColor="inital" />
           <Kb.Text type="BodyBigLink" style={{margin: Kb.Styles.globalMargins.tiny}}>
             Start a new chat
           </Kb.Text>
         </Kb.ClickableBox>
-      </Kb.Box>
+      </Kb.Box2>
     )
   }
   return (
@@ -41,8 +41,6 @@ const styles = Kb.Styles.styleSheetCreate(
         flexDirection: 'row',
       },
       container: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
-        alignItems: 'center',
         backgroundColor: Kb.Styles.isMobile
           ? Kb.Styles.globalColors.fastBlank
           : Kb.Styles.globalColors.blueGrey,
diff --git a/shared/chat/maybe-popup.tsx b/shared/chat/maybe-popup.tsx
index 9ba965103fd8..8e938e30d65b 100644
--- a/shared/chat/maybe-popup.tsx
+++ b/shared/chat/maybe-popup.tsx
@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import Box from '../common-adapters/box'
+import {Box2} from '../common-adapters/box'
 import PopupDialog from '../common-adapters/popup-dialog'
 import * as Styles from '@/styles'
 
@@ -16,7 +16,11 @@ type Props = {
 }
 
 const MaybePopup = Styles.isMobile
-  ? (props: Props) => <Box style={{height: '100%', width: '100%'}} children={props.children} />
+  ? (props: Props) => (
+      <Box2 direction="vertical" style={styles.mobileContainer}>
+        {props.children}
+      </Box2>
+    )
   : (props: Props) => (
       <PopupDialog
         onClose={props.onClose}
@@ -30,6 +34,16 @@ const MaybePopup = Styles.isMobile
       />
     )
 
+const styles = Styles.styleSheetCreate(
+  () =>
+    ({
+      mobileContainer: {
+        height: '100%',
+        width: '100%',
+      },
+    }) as const
+)
+
 const _styleCover = {
   alignItems: 'stretch',
   backgroundColor: Styles.globalColors.black,
diff --git a/shared/common-adapters/animation.desktop.tsx b/shared/common-adapters/animation.desktop.tsx
index ab8780e953b7..27160db1067a 100644
--- a/shared/common-adapters/animation.desktop.tsx
+++ b/shared/common-adapters/animation.desktop.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import Box from './box'
+import {Box2} from './box'
 import lottie from 'lottie-web'
 import type {Props, AnimationType} from './animation'
 
@@ -26,7 +26,7 @@ const Animation = React.memo(function Animation(props: Props) {
     }
   }, [animationType])
   return (
-    <Box className={props.className} style={props.containerStyle}>
+    <Box2 direction="vertical" className={props.className} style={props.containerStyle}>
       <div
         style={
           {
@@ -37,7 +37,7 @@ const Animation = React.memo(function Animation(props: Props) {
         }
         ref={elementRef}
       />
-    </Box>
+    </Box2>
   )
 })
 
diff --git a/shared/common-adapters/animation.native.tsx b/shared/common-adapters/animation.native.tsx
index 72c3f0f80e92..c9e8cf31acc6 100644
--- a/shared/common-adapters/animation.native.tsx
+++ b/shared/common-adapters/animation.native.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import Box from './box'
+import {Box2} from './box'
 import LottieView from 'lottie-react-native'
 import type {Props, AnimationType} from './animation'
 // prettier-ignore
@@ -16,9 +16,9 @@ const Animation = React.memo(function Animation(props: Props) {
   const source = data[animationType]
 
   return (
-    <Box style={props.containerStyle}>
+    <Box2 direction="vertical" style={props.containerStyle}>
       <LottieView autoPlay={true} loop={true} source={source} style={props.style ?? noStyle} />
-    </Box>
+    </Box2>
   )
 })
 
diff --git a/shared/common-adapters/avatar/index.native.tsx b/shared/common-adapters/avatar/index.native.tsx
index d3e183163e8f..db137e0f0788 100644
--- a/shared/common-adapters/avatar/index.native.tsx
+++ b/shared/common-adapters/avatar/index.native.tsx
@@ -3,12 +3,12 @@ import * as React from 'react'
 import * as Styles from '@/styles'
 import ClickableBox from '../clickable-box'
 import Image2 from '../image2'
-import Box from '../box'
+import {Box2} from '../box'
 import type {Props, AvatarSize} from '.'
 import useHook from './hooks'
 
 const Kb = {
-  Box,
+  Box2,
   ClickableBox,
   Icon,
   Image2,
@@ -34,14 +34,17 @@ const Avatar = React.memo(function Avatar(p: Props) {
 
   return (
     <Kb.ClickableBox onClick={props.onClick} feedback={false} style={containerStyle}>
-      <Kb.Box style={containerStyle}>
+      <Kb.Box2 direction="vertical" style={containerStyle}>
         {!props.skipBackground && (
-          <Kb.Box style={[styles.background, {backgroundColor: Styles.globalColors.white, borderRadius}]} />
+          <Kb.Box2
+            direction="vertical"
+            style={Styles.collapseStyles([styles.background, {backgroundColor: Styles.globalColors.white, borderRadius}])}
+          />
         )}
         {!!props.blocked && (
-          <Kb.Box style={[imageStyles[props.size], {borderRadius}]}>
+          <Kb.Box2 direction="vertical" style={Styles.collapseStyles([imageStyles[props.size], {borderRadius}])}>
             <Icon type="icon-poop-96" style={iconStyles[props.size]} />
-          </Kb.Box>
+          </Kb.Box2>
         )}
         {!!props.url && (
           <Kb.Image2
@@ -67,7 +70,7 @@ const Avatar = React.memo(function Avatar(p: Props) {
           />
         )}
         {props.children}
-      </Kb.Box>
+      </Kb.Box2>
     </Kb.ClickableBox>
   )
 })
diff --git a/shared/common-adapters/back-button.native.tsx b/shared/common-adapters/back-button.native.tsx
index e9bedbaf2daf..13218fb405c4 100644
--- a/shared/common-adapters/back-button.native.tsx
+++ b/shared/common-adapters/back-button.native.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as C from '@/constants'
 import {Pressable, Keyboard} from 'react-native'
 import Badge from './badge'
-import Box from './box'
+import {Box2} from './box'
 import Icon from './icon'
 import * as Styles from '@/styles'
 import type {Props} from './back-button'
@@ -10,7 +10,7 @@ import noop from 'lodash/noop'
 
 const Kb = {
   Badge,
-  Box,
+  Box2,
   Icon,
 }
 
@@ -25,7 +25,7 @@ const BackButton = React.memo(function BackButton(props: Props) {
   const onBack = props.disabled ? noop : (props.onClick ?? onNavUp)
   return (
     <Pressable onPress={onBack}>
-      <Kb.Box style={Styles.collapseStyles([styles.container, props.style])}>
+      <Kb.Box2 direction="horizontal" alignItems="center" style={Styles.collapseStyles([styles.container, props.style])}>
         <Kb.Icon
           fixOverdraw={canFixOverdraw}
           type="iconfont-arrow-left"
@@ -33,7 +33,7 @@ const BackButton = React.memo(function BackButton(props: Props) {
           style={styles.arrow}
         />
         {!!props.badgeNumber && <Kb.Badge badgeNumber={props.badgeNumber} />}
-      </Kb.Box>
+      </Kb.Box2>
     </Pressable>
   )
 })
@@ -44,8 +44,6 @@ const styles = Styles.styleSheetCreate(() => ({
     marginTop: 2,
   },
   container: {
-    ...Styles.globalStyles.flexBoxRow,
-    alignItems: 'center',
     marginRight: 8,
     minWidth: 32,
     padding: Styles.globalMargins.tiny,
diff --git a/shared/common-adapters/badge.tsx b/shared/common-adapters/badge.tsx
index de33010fdd47..8a1d41fff7ca 100644
--- a/shared/common-adapters/badge.tsx
+++ b/shared/common-adapters/badge.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react'
-import {Box, Box2} from './box'
+import {Box2} from './box'
 import Text from './text'
 import * as Styles from '@/styles'
 
 const Kb = {
-  Box,
   Box2,
   Text,
 }
diff --git a/shared/common-adapters/banner.tsx b/shared/common-adapters/banner.tsx
index 316dfa4288da..1ff3acfd132e 100644
--- a/shared/common-adapters/banner.tsx
+++ b/shared/common-adapters/banner.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import Box, {Box2} from './box'
+import {Box2} from './box'
 import Icon from './icon'
 import Text from './text'
 import * as Styles from '@/styles'
@@ -111,7 +111,7 @@ export const Banner = (props: BannerProps) => (
       )}
     </Box2>
     {!!props.onClose && (
-      <Box key="iconBox" style={styles.iconContainer}>
+      <Box2 direction="vertical" key="iconBox" style={styles.iconContainer}>
         <Icon
           padding="xtiny"
           sizeType="Small"
@@ -120,7 +120,7 @@ export const Banner = (props: BannerProps) => (
           hoverColor={colorToIconHoverColor()[props.color]}
           onClick={props.onClose}
         />
-      </Box>
+      </Box2>
     )}
   </Box2>
 )
diff --git a/shared/common-adapters/box-grow.tsx b/shared/common-adapters/box-grow.tsx
index c04b12fe8f93..409d21a02aae 100644
--- a/shared/common-adapters/box-grow.tsx
+++ b/shared/common-adapters/box-grow.tsx
@@ -1,6 +1,6 @@
 // A box that flex grows but constrains children
 import * as Styles from '@/styles'
-import Box, {Box2, type LayoutEvent} from './box'
+import {Box2, type LayoutEvent} from './box'
 
 type Props = {
   children?: React.ReactNode
@@ -10,9 +10,11 @@ type Props = {
 
 const BoxGrow = (p: Props) => {
   return (
-    <Box style={Styles.collapseStyles([styles.outer, p.style])} onLayout={p.onLayout}>
-      <Box style={styles.inner}>{p.children}</Box>
-    </Box>
+    <Box2 direction="vertical" fullWidth={true} style={Styles.collapseStyles([styles.outer, p.style])} onLayout={p.onLayout}>
+      <Box2 direction="vertical" style={styles.inner}>
+        {p.children}
+      </Box2>
+    </Box2>
   )
 }
 
diff --git a/shared/common-adapters/box.d.ts b/shared/common-adapters/box.d.ts
index 767e2ff655ee..1f2b70290b4f 100644
--- a/shared/common-adapters/box.d.ts
+++ b/shared/common-adapters/box.d.ts
@@ -3,24 +3,6 @@ import type {StylesCrossPlatform, globalMargins} from '@/styles'
 import type {MeasureRef} from './measure-ref'
 import type {View, NativeSyntheticEvent} from 'react-native'
 
-export type Props = {
-  onMoveShouldSetResponder?: () => boolean
-  onMouseDown?: (syntheticEvent: React.MouseEvent) => void // desktop only
-  onMouseLeave?: (syntheticEvent: React.MouseEvent) => void // desktop only
-  onMouseUp?: (syntheticEvent: React.MouseEvent) => void // desktop only
-  onMouseOver?: (syntheticEvent: React.MouseEvent) => void // desktop only
-  onStartShouldSetResponder?: () => boolean
-  pointerEvents?: 'none' | 'box-none'
-  onLayout?: (evt: LayoutEvent) => void // mobile only
-  onClick?: (event: React.BaseSyntheticEvent) => void
-  children?: React.ReactNode
-  collapsable?: boolean
-  className?: string
-  style?: StylesCrossPlatform
-  ref?: never
-  tooltip?: string
-}
-
 export type LayoutEvent = NativeSyntheticEvent<{
   layout: {
     x: number
@@ -62,17 +44,12 @@ export type Box2Props = {
   tooltip?: string
 }
 
-/**
- * Box is deprecated, use Box2 instead
- **/
-export declare const Box: (p: Props) => React.ReactNode
 export declare const Box2: (p: Box2Props) => React.ReactNode
 // wrapped by reanimated
-export declare const Box2Animated: ReturnType<typeof React.forwardRef<React.RefObject<typeof Box>, Box2Props>>
+export declare const Box2Animated: ReturnType<typeof React.forwardRef<React.RefObject<typeof Box2>, Box2Props>>
 // Box2 but with a special ref for targetting popups, split in case there's overhead we barely need
 export declare const Box2Measure: ReturnType<typeof React.forwardRef<MeasureRef, Box2Props>>
 // desktop only
 export declare const Box2Div: ReturnType<typeof React.forwardRef<HTMLDivElement, Box2Props>>
 // mobile only
 export declare const Box2View: ReturnType<typeof React.forwardRef<View, Box2Props>>
-export default Box
diff --git a/shared/common-adapters/box.desktop.tsx b/shared/common-adapters/box.desktop.tsx
index d430de59684f..1158b71472ab 100644
--- a/shared/common-adapters/box.desktop.tsx
+++ b/shared/common-adapters/box.desktop.tsx
@@ -1,21 +1,9 @@
 import * as React from 'react'
 import * as Styles from '@/styles'
-import type {Box2Props, Props} from './box'
+import type {Box2Props} from './box'
 import type {MeasureRef} from './measure-ref'
 import './box.css'
 
-export const Box = (p: Props) => {
-  const {style, onLayout, tooltip, className, ...rest} = p
-  return (
-    <div
-      {...rest}
-      style={Styles.castStyleDesktop(style)}
-      className={Styles.classNames(className, {tooltip})}
-      data-tooltip={tooltip}
-    />
-  )
-}
-
 const getProps = (p: Box2Props) => {
   const {direction, fullHeight, fullWidth, centerChildren, alignSelf, alignItems, noShrink} = p
   const {onMouseMove, onMouseDown, onMouseLeave, onMouseUp, onMouseOver, onCopyCapture, children} = p
@@ -102,4 +90,3 @@ export const Box2Measure = React.forwardRef<MeasureRef, Box2Props>(function Box2
   return <div ref={divRef} {...props} />
 })
 
-export default Box
diff --git a/shared/common-adapters/box.native.tsx b/shared/common-adapters/box.native.tsx
index d7b7886bd33a..0a7a1ac974d2 100644
--- a/shared/common-adapters/box.native.tsx
+++ b/shared/common-adapters/box.native.tsx
@@ -5,8 +5,6 @@ import type {Box2Props} from './box'
 import type {MeasureRef} from './measure-ref'
 import Reanimated from 'react-native-reanimated'
 
-export const Box = View
-
 type Margins = keyof typeof Styles.globalMargins
 const marginKeys = Object.keys(Styles.globalMargins) as Array<Margins>
 
@@ -173,4 +171,3 @@ const styles = {
   },
 } as const
 
-export default Box
diff --git a/shared/common-adapters/button-bar.tsx b/shared/common-adapters/button-bar.tsx
index 63c816d3e8b6..dd8d8946dbb5 100644
--- a/shared/common-adapters/button-bar.tsx
+++ b/shared/common-adapters/button-bar.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
 import * as Styles from '@/styles'
-import Box from './box'
+import {Box2} from './box'
 
-const Kb = {Box}
+const Kb = {Box2}
 
 type Props = {
   direction?: 'row' | 'column'
@@ -43,33 +43,40 @@ const ButtonBar = (props: Props) => {
     minHeight: Styles.isMobile ? (props.small ? 64 : 72) : props.small ? 44 : 64,
   }
 
+  const isColumn = (props.direction ?? 'row') === 'column'
   const style = Styles.collapseStyles([
     {
-      alignItems: (props.fullWidth ?? false) ? 'stretch' : 'center',
-      width: '100%',
       ...(Styles.isTablet ? {maxWidth: 460} : {}),
-      ...((props.direction ?? 'row') === 'column'
-        ? {...Styles.globalStyles.flexBoxColumn}
-        : {
-            ...Styles.globalStyles.flexBoxRow,
+      ...(!isColumn
+        ? {
             justifyContent: props.align ?? 'center',
             ...minHeight,
-          }),
+          }
+        : undefined),
     },
     props.style,
   ])
 
-  return <Kb.Box style={style}>{childrenWithSpacing}</Kb.Box>
+  return (
+    <Kb.Box2
+      direction={isColumn ? 'vertical' : 'horizontal'}
+      fullWidth={true}
+      alignItems={(props.fullWidth ?? false) ? 'stretch' : 'center'}
+      style={style}
+    >
+      {childrenWithSpacing}
+    </Kb.Box2>
+  )
 }
 
 // Note explicitly not using globalMargins here. We don't necessarily want this spacing to change ever
-const BigSpacer = () => <Kb.Box style={bigSpacerStyle} />
+const BigSpacer = () => <Kb.Box2 direction="vertical" style={bigSpacerStyle} />
 const bigSpacerStyle = {
   flexShrink: 0,
   height: 8,
   width: 8,
 }
-const SmallSpacer = () => <Kb.Box style={smallSpacerStyle} />
+const SmallSpacer = () => <Kb.Box2 direction="vertical" style={smallSpacerStyle} />
 const smallSpacerStyle = {
   flexShrink: 0,
   height: Styles.isMobile ? 8 : 4,
diff --git a/shared/common-adapters/button.tsx b/shared/common-adapters/button.tsx
index 8350b5028f42..924019528045 100644
--- a/shared/common-adapters/button.tsx
+++ b/shared/common-adapters/button.tsx
@@ -7,13 +7,12 @@ import Icon, {type SizeType} from './icon'
 import Text, {type StylesTextCrossPlatform} from './text'
 import WithTooltip from './with-tooltip'
 import type {IconType} from './icon.constants-gen'
-import {Box, Box2} from './box'
+import {Box2} from './box'
 import type {MeasureRef} from './measure-ref'
 import type AnimationType from './animation'
 
 const Kb = {
   Badge,
-  Box,
   Box2,
   ClickableBox,
   Icon,
@@ -76,12 +75,12 @@ export type Props = DefaultProps & WithIconProps
 const Progress = ({small, white}: {small?: boolean; white: boolean}) => {
   const {default: Animation} = require('./animation') as {default: typeof AnimationType}
   return (
-    <Kb.Box style={styles.progressContainer}>
+    <Kb.Box2 direction="vertical" centerChildren={true} style={styles.progressContainer}>
       <Animation
         animationType={white ? 'spinnerWhite' : 'spinner'}
         style={small ? styles.progressSmall : styles.progressNormal}
       />
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -190,7 +189,7 @@ const Button = React.forwardRef<MeasureRef, Props>(function ButtonInner(
   }
   const underlay =
     !Styles.isMobile && underlayClassNames.length ? (
-      <Kb.Box className={Styles.classNames(underlayClassNames)} />
+      <Kb.Box2 direction="vertical" className={Styles.classNames(underlayClassNames)} />
     ) : null
 
   if (props.className) classNames.push(props.className)
@@ -208,10 +207,10 @@ const Button = React.forwardRef<MeasureRef, Props>(function ButtonInner(
       tooltip={props.tooltip}
     >
       {underlay}
-      <Kb.Box
+      <Kb.Box2
+        direction="horizontal"
+        centerChildren={true}
         style={Styles.collapseStyles([
-          Styles.globalStyles.flexBoxRow,
-          Styles.globalStyles.flexBoxCenter,
           styles.labelContainer,
           props.labelContainerStyle,
         ])}
@@ -246,7 +245,7 @@ const Button = React.forwardRef<MeasureRef, Props>(function ButtonInner(
         </Kb.Box2>
         {!!props.badgeNumber && <Kb.Badge badgeNumber={props.badgeNumber} badgeStyle={styles.badge} />}
         {!!props.waiting && <Progress small={props.small} white={whiteSpinner} />}
-      </Kb.Box>
+      </Kb.Box2>
     </Kb.ClickableBox>
   )
   if (props.disabled && props.tooltip && Styles.isMobile) {
@@ -335,7 +334,7 @@ const styles = Styles.styleSheetCreate(() => ({
   }),
   opacity0: {opacity: 0},
   opacity30: {opacity: 0.3},
-  progressContainer: {...Styles.globalStyles.fillAbsolute, ...Styles.globalStyles.flexBoxCenter},
+  progressContainer: {...Styles.globalStyles.fillAbsolute},
   progressNormal: {height: Styles.isMobile ? 32 : 24, width: Styles.isMobile ? 32 : 24},
   progressSmall: {height: Styles.isMobile ? 28 : 20, width: Styles.isMobile ? 28 : 20},
   small: {
diff --git a/shared/common-adapters/checkbox.desktop.tsx b/shared/common-adapters/checkbox.desktop.tsx
index a04afc136e7a..63eaa4fe90d2 100644
--- a/shared/common-adapters/checkbox.desktop.tsx
+++ b/shared/common-adapters/checkbox.desktop.tsx
@@ -1,12 +1,13 @@
-import Box, {Box2} from './box'
+import {Box2} from './box'
+import ClickableBox from './clickable-box'
 import Icon from './icon'
 import Text from './text'
 import type {Props} from './checkbox'
 import * as Styles from '@/styles'
 
 const Kb = {
-  Box,
   Box2,
+  ClickableBox,
   Icon,
   Styles,
   Text,
@@ -17,7 +18,7 @@ const CHECKBOX_MARGIN = 8
 
 const Checkbox = (props: Props) => {
   return (
-    <Kb.Box
+    <Kb.ClickableBox
       style={Kb.Styles.collapseStyles([styles.container, !props.disabled && styles.clickable, props.style])}
       onClick={e =>
         // If something in labelComponent needs to catch a click without calling this, use
@@ -47,7 +48,7 @@ const Checkbox = (props: Props) => {
         ))}
         {!!props.labelSubtitle && <Kb.Text type="BodySmall">{props.labelSubtitle}</Kb.Text>}
       </Kb.Box2>
-    </Kb.Box>
+    </Kb.ClickableBox>
   )
 }
 
diff --git a/shared/common-adapters/choice-list.desktop.tsx b/shared/common-adapters/choice-list.desktop.tsx
index e08386265466..7dd5ba5c4593 100644
--- a/shared/common-adapters/choice-list.desktop.tsx
+++ b/shared/common-adapters/choice-list.desktop.tsx
@@ -1,4 +1,5 @@
-import {Box} from './box'
+import {Box2} from './box'
+import ClickableBox from './clickable-box'
 import Text from './text'
 import Icon from './icon'
 import * as Styles from '@/styles'
@@ -6,48 +7,51 @@ import type {Props} from './choice-list'
 import './choice-list.css'
 
 const Kb = {
-  Box,
+  Box2,
+  ClickableBox,
   Icon,
   Text,
 }
 
 const ChoiceList = ({options}: Props) => {
   return (
-    <Kb.Box>
+    <Kb.Box2 direction="vertical" fullWidth={true}>
       {options.map((op, idx) => {
         const iconType = op.icon
         return (
-          <Kb.Box style={styles.entry} key={idx} className="cl-entry" onClick={() => op.onClick()}>
-            <Kb.Box
-              style={Styles.collapseStyles([Styles.globalStyles.flexBoxColumn, styles.iconContainer])}
-              className="cl-icon-container"
-            >
-              {typeof op.icon === 'string' ? (
-                <Kb.Icon style={styles.icon} type={iconType} className="cl-icon" />
-              ) : (
-                <Kb.Box style={styles.icon} className="cl-icon">
-                  {op.icon}
-                </Kb.Box>
-              )}
-            </Kb.Box>
-            <Kb.Box style={Styles.collapseStyles([Styles.globalStyles.flexBoxColumn, styles.infoContainer])}>
-              <Text type="BodyBigLink">{op.title}</Text>
-              <Text type="Body">{op.description}</Text>
-            </Kb.Box>
-          </Kb.Box>
+          <Kb.ClickableBox key={idx} onClick={() => op.onClick()}>
+            <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.entry} className="cl-entry">
+              <Kb.Box2
+                direction="vertical"
+                centerChildren={true}
+                style={styles.iconContainer}
+                className="cl-icon-container"
+              >
+                {typeof op.icon === 'string' ? (
+                  <Kb.Icon style={styles.icon} type={iconType} className="cl-icon" />
+                ) : (
+                  <Kb.Box2 direction="vertical" style={styles.icon} className="cl-icon">
+                    {op.icon}
+                  </Kb.Box2>
+                )}
+              </Kb.Box2>
+              <Kb.Box2 direction="vertical" alignItems="flex-start" style={styles.infoContainer}>
+                <Text type="BodyBigLink">{op.title}</Text>
+                <Text type="Body">{op.description}</Text>
+              </Kb.Box2>
+            </Kb.Box2>
+          </Kb.ClickableBox>
         )
       })}
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
 const styles = Styles.styleSheetCreate(() => ({
   entry: Styles.platformStyles({
     isElectron: {
-      ...Styles.globalStyles.flexBoxRow,
       ...Styles.desktopStyles.clickable,
       ...Styles.padding(Styles.globalMargins.tiny, Styles.globalMargins.small),
-      width: '100%',
     },
   }),
   icon: {
@@ -55,14 +59,11 @@ const styles = Styles.styleSheetCreate(() => ({
     width: 48,
   },
   iconContainer: {
-    alignItems: 'center',
     background: Styles.globalColors.greyLight,
     height: 80,
-    justifyContent: 'center',
     width: 80,
   },
   infoContainer: {
-    alignItems: 'flex-start',
     flex: 1,
     justifyContent: 'center',
     marginLeft: Styles.globalMargins.small,
diff --git a/shared/common-adapters/choice-list.native.tsx b/shared/common-adapters/choice-list.native.tsx
index 03e8a86ce3b0..1b68a058fee9 100644
--- a/shared/common-adapters/choice-list.native.tsx
+++ b/shared/common-adapters/choice-list.native.tsx
@@ -1,4 +1,4 @@
-import Box from './box'
+import {Box2} from './box'
 import ClickableBox from './clickable-box'
 import Icon from './icon'
 import Text from './text'
@@ -6,7 +6,7 @@ import * as React from 'react'
 import * as Styles from '@/styles'
 import type {Props} from './choice-list'
 
-const Kb = {Box, ClickableBox, Icon, Text}
+const Kb = {Box2, ClickableBox, Icon, Text}
 
 const ChoiceList = (props: Props) => {
   const [activeIndex, setActiveIndex] = React.useState<number | undefined>(undefined)
@@ -17,7 +17,7 @@ const ChoiceList = (props: Props) => {
   }, [options])
 
   return (
-    <Kb.Box>
+    <Kb.Box2 direction="vertical" fullWidth={true}>
       {options.map((op, idx) => {
         const iconType = op.icon
         return (
@@ -28,30 +28,29 @@ const ChoiceList = (props: Props) => {
             onPressIn={() => setActiveIndex(idx)}
             onPressOut={() => setActiveIndex(undefined)}
           >
-            <Kb.Box style={styleEntry}>
-              <Kb.Box style={styleIconContainer(activeIndex === idx)}>
+            <Kb.Box2 direction="horizontal" fullWidth={true} style={styleEntry}>
+              <Kb.Box2 direction="vertical" centerChildren={true} style={styleIconContainer(activeIndex === idx)}>
                 {typeof op.icon === 'string' ? (
                   <Icon style={styleIcon} type={iconType} />
                 ) : (
-                  <Kb.Box style={styleIcon}>{op.icon}</Kb.Box>
+                  <Kb.Box2 direction="vertical" style={styleIcon}>{op.icon}</Kb.Box2>
                 )}
-              </Kb.Box>
-              <Kb.Box style={styleInfoContainer}>
+              </Kb.Box2>
+              <Kb.Box2 direction="vertical" style={styleInfoContainer}>
                 <Kb.Text style={styleInfoTitle} type="Header">
                   {op.title}
                 </Kb.Text>
                 <Kb.Text type="Body">{op.description}</Kb.Text>
-              </Kb.Box>
-            </Kb.Box>
+              </Kb.Box2>
+            </Kb.Box2>
           </Kb.ClickableBox>
         )
       })}
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
 const styleEntry = {
-  ...Styles.globalStyles.flexBoxRow,
   paddingBottom: Styles.globalMargins.tiny,
   paddingLeft: Styles.globalMargins.small,
   paddingRight: Styles.globalMargins.small,
@@ -60,12 +59,9 @@ const styleEntry = {
 
 const styleIconContainer = (active: boolean) =>
   ({
-    ...Styles.globalStyles.flexBoxColumn,
-    alignItems: 'center',
     alignSelf: 'center',
     borderRadius: (Styles.globalMargins.large + Styles.globalMargins.medium) / 2,
     height: Styles.globalMargins.large + Styles.globalMargins.medium,
-    justifyContent: 'center',
     ...(active ? {} : {backgroundColor: Styles.globalColors.greyLight}),
     width: Styles.globalMargins.large + Styles.globalMargins.medium,
   }) as const
@@ -76,7 +72,6 @@ const styleIcon = {
 }
 
 const styleInfoContainer = {
-  ...Styles.globalStyles.flexBoxColumn,
   flex: 1,
   justifyContent: 'center',
   marginLeft: Styles.globalMargins.small,
diff --git a/shared/common-adapters/clickable-box.native.tsx b/shared/common-adapters/clickable-box.native.tsx
index bf0a632c4a90..828fa28bed5b 100644
--- a/shared/common-adapters/clickable-box.native.tsx
+++ b/shared/common-adapters/clickable-box.native.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react'
 import * as Styles from '@/styles'
-import Box from './box'
 import {Pressable, View, TouchableOpacity, TouchableWithoutFeedback} from 'react-native'
 import type {Props, Props2} from './clickable-box'
 import type {MeasureRef} from './measure-ref'
 
 const Kb = {
-  Box,
   Styles,
 }
 
@@ -42,11 +40,10 @@ const ClickableBox = React.forwardRef<MeasureRef, Props>(function ClickableBoxIn
         <TouchableWithoutFeedback
           onPressIn={onPressIn}
           onPressOut={onPressOut}
-          style={clickStyle}
           onPress={onClick}
           onLongPress={onLongPress}
         >
-          {children}
+          <View style={clickStyle}>{children}</View>
         </TouchableWithoutFeedback>
       )
     }
diff --git a/shared/common-adapters/copyable-text.native.tsx b/shared/common-adapters/copyable-text.native.tsx
index 2f4874b29b5f..f16ea2a92d7d 100644
--- a/shared/common-adapters/copyable-text.native.tsx
+++ b/shared/common-adapters/copyable-text.native.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import type {Props as PropsCommon} from './copyable-text'
 import {useTimeout} from './use-timers'
 import Text from './text'
-import Box from './box'
+import {Box2} from './box'
 import {TouchableHighlight} from 'react-native'
 import * as Styles from '@/styles'
 import * as Clipboard from 'expo-clipboard'
@@ -28,59 +28,57 @@ const CopyableText = (props: Props) => {
       onPress={() => handleCopy()}
       style={props.style}
     >
-      <Box style={styleBase}>
+      <Box2 direction="vertical" fullWidth={true} alignItems="flex-start" style={styles.base}>
         <Text style={{...styleText, ...props.textStyle}} type="BodySmall">
           {props.value}
         </Text>
-        <Box style={styleCopyToastContainer}>
-          <Box style={styleCopyToast}>
+        <Box2 direction="vertical" alignItems="center" style={styles.copyToastContainer}>
+          <Box2 direction="horizontal" alignItems="center" style={styles.copyToast}>
             <Text style={styleCopyToastText} type="Body">
               {hasCopied ? 'Copied!' : 'Tap to copy'}
             </Text>
-          </Box>
-        </Box>
-      </Box>
+          </Box2>
+        </Box2>
+      </Box2>
     </TouchableHighlight>
   )
 }
 
-const styleBase = {
-  ...Styles.globalStyles.flexBoxColumn,
-  alignItems: 'flex-start',
-  backgroundColor: Styles.globalColors.greyLight,
-  borderColor: Styles.globalColors.black_10,
-  borderRadius: 3,
-  borderWidth: 1,
-  // Guarantee that the first line of text is shown above the 'Tap to Copy' toast
-  minHeight: Styles.globalMargins.medium + Styles.globalMargins.tiny + 2 * Styles.globalMargins.small + 24,
-  padding: 10,
-  position: 'relative',
-} as const
+const styles = Styles.styleSheetCreate(
+  () =>
+    ({
+      base: {
+        backgroundColor: Styles.globalColors.greyLight,
+        borderColor: Styles.globalColors.black_10,
+        borderRadius: 3,
+        borderWidth: 1,
+        // Guarantee that the first line of text is shown above the 'Tap to Copy' toast
+        minHeight:
+          Styles.globalMargins.medium + Styles.globalMargins.tiny + 2 * Styles.globalMargins.small + 24,
+        padding: 10,
+        position: 'relative',
+      },
+      copyToast: {
+        backgroundColor: Styles.globalColors.black_50,
+        borderRadius: Styles.globalMargins.large,
+        height: Styles.globalMargins.medium + Styles.globalMargins.tiny,
+        paddingLeft: Styles.globalMargins.medium,
+        paddingRight: Styles.globalMargins.medium,
+      },
+      copyToastContainer: {
+        bottom: Styles.globalMargins.small,
+        left: 0,
+        position: 'absolute',
+        right: 0,
+      },
+    }) as const
+)
 
 const styleText = {
   ...Styles.globalStyles.fontTerminal,
   color: Styles.globalColors.black,
 }
 
-const styleCopyToastContainer = {
-  ...Styles.globalStyles.flexBoxColumn,
-  alignItems: 'center',
-  bottom: Styles.globalMargins.small,
-  left: 0,
-  position: 'absolute',
-  right: 0,
-} as const
-
-const styleCopyToast = {
-  ...Styles.globalStyles.flexBoxRow,
-  alignItems: 'center',
-  backgroundColor: Styles.globalColors.black_50,
-  borderRadius: Styles.globalMargins.large,
-  height: Styles.globalMargins.medium + Styles.globalMargins.tiny,
-  paddingLeft: Styles.globalMargins.medium,
-  paddingRight: Styles.globalMargins.medium,
-} as const
-
 const styleCopyToastText = {
   color: Styles.globalColors.white,
 }
diff --git a/shared/common-adapters/divider.tsx b/shared/common-adapters/divider.tsx
index 917d9768b966..b8af2e5ec1ee 100644
--- a/shared/common-adapters/divider.tsx
+++ b/shared/common-adapters/divider.tsx
@@ -1,10 +1,11 @@
-import Box from './box'
+import {Box2} from './box'
 import * as Styles from '@/styles'
 
 import type {Props} from './divider.d'
 
 const Divider = (props: Props) => (
-  <Box
+  <Box2
+    direction="vertical"
     style={Styles.collapseStyles([
       styles.divider,
       props.vertical ? styles.vertical : styles.horizontal,
diff --git a/shared/common-adapters/dropdown.tsx b/shared/common-adapters/dropdown.tsx
index cafdb68aafa8..70e6ad739b9e 100644
--- a/shared/common-adapters/dropdown.tsx
+++ b/shared/common-adapters/dropdown.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import Box, {Box2, Box2Measure} from './box'
+import {Box2, Box2Measure} from './box'
 import ProgressIndicator from './progress-indicator'
 import ClickableBox from './clickable-box'
 import Text from './text'
@@ -14,7 +14,6 @@ import type {MeasureRef} from './measure-ref'
 import {useSafeAreaInsets} from './safe-area-view'
 
 const Kb = {
-  Box,
   Box2,
   Box2Measure,
   ClickableBox,
@@ -64,9 +63,9 @@ export const DropdownButton = (props: DropdownButtonProps) => {
           {width: inline ? undefined : '100%'},
         ])}
       >
-        <Kb.Box style={Styles.collapseStyles([styles.selectedBox, selectedBoxStyle])}>
+        <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={Styles.collapseStyles([styles.selectedBox, selectedBoxStyle])}>
           {loading ? <Kb.ProgressIndicator type="Small" /> : selected}
-        </Kb.Box>
+        </Kb.Box2>
         <Kb.Icon
           type="iconfont-caret-down"
           inheritColor={true}
@@ -148,7 +147,7 @@ function Dropdown<N extends React.ReactNode>(p: Props<N>) {
   )
 
   return (
-    <Kb.Box style={Styles.collapseStyles([styles.overlayContainer, style])}>
+    <Kb.Box2 direction="vertical" style={Styles.collapseStyles([styles.overlayContainer, style])}>
       <DropdownButton
         disabled={disabled}
         selected={selected}
@@ -157,7 +156,7 @@ function Dropdown<N extends React.ReactNode>(p: Props<N>) {
         toggleOpen={toggleOpen}
       />
       {popup}
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -288,9 +287,7 @@ const styles = Styles.styleSheetCreate(
         },
       }),
       selectedBox: {
-        ...Styles.globalStyles.flexBoxCenter,
         minHeight: regularHeight,
-        width: '100%',
       },
     }) as const
 )
diff --git a/shared/common-adapters/floating-box/index.native.tsx b/shared/common-adapters/floating-box/index.native.tsx
index 05a830764347..295a97f8e24b 100644
--- a/shared/common-adapters/floating-box/index.native.tsx
+++ b/shared/common-adapters/floating-box/index.native.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
-import Box from '@/common-adapters/box'
+import {Box2} from '@/common-adapters/box'
 import * as Styles from '@/styles'
 import {Keyboard} from 'react-native'
 import {Portal} from '../portal.native'
 import type {Props} from '.'
 
 const Kb = {
-  Box,
+  Box2,
   Portal,
 }
 
@@ -22,12 +22,13 @@ const FloatingBox = (p: Props) => {
 
   return (
     <Kb.Portal hostName="popup-root">
-      <Kb.Box
+      <Kb.Box2
+        direction="vertical"
         pointerEvents="box-none"
         style={Styles.collapseStyles([Styles.globalStyles.fillAbsolute, containerStyle])}
       >
         {children}
-      </Kb.Box>
+      </Kb.Box2>
     </Kb.Portal>
   )
 }
diff --git a/shared/common-adapters/floating-box/relative-floating-box.desktop.tsx b/shared/common-adapters/floating-box/relative-floating-box.desktop.tsx
index f6c327f5d8cf..386431a878c5 100644
--- a/shared/common-adapters/floating-box/relative-floating-box.desktop.tsx
+++ b/shared/common-adapters/floating-box/relative-floating-box.desktop.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
 import * as Styles from '@/styles'
 import includes from 'lodash/includes'
-import Box from '@/common-adapters/box'
+import {Box2} from '@/common-adapters/box'
 import ReactDOM from 'react-dom'
 import {EscapeHandler} from '../key-event-handler.desktop'
 import type {MeasureDesktop} from '@/common-adapters/measure-ref'
 
-const Kb = {Box}
+const Kb = {Box2}
 
 type ComputedStyle = {
   position: Styles._StylesCrossPlatform['position']
@@ -301,10 +301,10 @@ export const RelativeFloatingBox = (props: ModalPositionRelativeProps) => {
     ? ReactDOM.createPortal(
         <div style={Styles.castStyleDesktop(style)} ref={setPopupNode}>
           {disableEscapeKey ? (
-            <Kb.Box className="fade-in-generic">{children}</Kb.Box>
+            <Kb.Box2 direction="vertical" className="fade-in-generic">{children}</Kb.Box2>
           ) : (
             <EscapeHandler onESC={onClosePopup}>
-              <Kb.Box className="fade-in-generic">{children}</Kb.Box>
+              <Kb.Box2 direction="vertical" className="fade-in-generic">{children}</Kb.Box2>
             </EscapeHandler>
           )}
         </div>,
diff --git a/shared/common-adapters/floating-menu/menu-layout/index.desktop.tsx b/shared/common-adapters/floating-menu/menu-layout/index.desktop.tsx
index bb51ccbac531..f0bf8a7d1814 100644
--- a/shared/common-adapters/floating-menu/menu-layout/index.desktop.tsx
+++ b/shared/common-adapters/floating-menu/menu-layout/index.desktop.tsx
@@ -1,6 +1,7 @@
 import type * as React from 'react'
 import type {MenuLayoutProps, MenuItem} from '.'
-import Box from '@/common-adapters/box'
+import {Box2} from '@/common-adapters/box'
+import ClickableBox from '@/common-adapters/clickable-box'
 import Divider from '@/common-adapters/divider'
 import Icon from '@/common-adapters/icon'
 import Text from '@/common-adapters/text'
@@ -29,7 +30,7 @@ const MenuLayout = (props: MenuLayoutProps) => {
     return item.unWrapped ? (
       item.view
     ) : (
-      <Box
+      <ClickableBox
         key={index}
         className={hoverClassName}
         style={Styles.collapseStyles([styles.itemContainer, styleClickable])}
@@ -42,7 +43,7 @@ const MenuLayout = (props: MenuLayoutProps) => {
       >
         {item.view}
         {!item.view && (
-          <Box style={styles.horizBox}>
+          <Box2 direction="horizontal" fullWidth={true}>
             <Text
               className="title"
               type="Body"
@@ -70,7 +71,7 @@ const MenuLayout = (props: MenuLayoutProps) => {
                 style={{paddingLeft: Styles.globalMargins.tiny}}
               />
             )}
-          </Box>
+          </Box2>
         )}
         {!item.view && item.subTitle && (
           <Text
@@ -83,7 +84,7 @@ const MenuLayout = (props: MenuLayoutProps) => {
           </Text>
         )}
         {!!item.progressIndicator && <ProgressIndicator type="Large" style={styles.progressIndicator} />}
-      </Box>
+      </ClickableBox>
     )
   }
 
@@ -96,26 +97,35 @@ const MenuLayout = (props: MenuLayoutProps) => {
   }, [])
 
   return (
-    <Box
+    <ClickableBox
       onClick={event => {
         // never allow a click to go through
         event.stopPropagation()
       }}
     >
-      <Box style={Styles.collapseStyles([styles.menuContainer, props.style])}>
+      <Box2
+        direction="vertical"
+        alignItems="stretch"
+        fullWidth={true}
+        style={Styles.collapseStyles([styles.menuContainer, props.style])}
+      >
         {/* Display header if there is one */}
         {props.header}
         {/* Display menu items */}
         {items.some(item => item !== 'Divider') && (
-          <Box style={Styles.collapseStyles([styles.menuItemList, props.listStyle])}>
+          <Box2
+            direction="vertical"
+            fullWidth={true}
+            style={Styles.collapseStyles([styles.menuItemList, props.listStyle])}
+          >
             {items.map(
               (item, index): React.ReactNode =>
                 item === 'Divider' ? renderDivider(index) : renderMenuItem(item, index)
             )}
-          </Box>
+          </Box2>
         )}
-      </Box>
-    </Box>
+      </Box2>
+    </ClickableBox>
   )
 }
 
@@ -133,7 +143,6 @@ const styles = Styles.styleSheetCreate(
       dividerFirst: {
         marginBottom: 8,
       },
-      horizBox: {...Styles.globalStyles.flexBoxRow},
       icon: {marginLeft: Styles.globalMargins.xtiny},
       iconBadge: {
         backgroundColor: Styles.globalColors.blue,
@@ -154,8 +163,6 @@ const styles = Styles.styleSheetCreate(
       menuContainer: Styles.platformStyles({
         isElectron: {
           ...Styles.desktopStyles.boxShadow,
-          ...Styles.globalStyles.flexBoxColumn,
-          alignItems: 'stretch',
           backgroundColor: Styles.globalColors.white,
           borderRadius: Styles.borderRadius,
           justifyContent: 'flex-start',
@@ -165,7 +172,6 @@ const styles = Styles.styleSheetCreate(
         },
       }),
       menuItemList: {
-        ...Styles.globalStyles.flexBoxColumn,
         flexShrink: 0,
         paddingBottom: Styles.globalMargins.tiny,
         paddingTop: Styles.globalMargins.tiny,
diff --git a/shared/common-adapters/floating-menu/menu-layout/index.native.tsx b/shared/common-adapters/floating-menu/menu-layout/index.native.tsx
index 43e8783fe4ea..1737e6365189 100644
--- a/shared/common-adapters/floating-menu/menu-layout/index.native.tsx
+++ b/shared/common-adapters/floating-menu/menu-layout/index.native.tsx
@@ -1,7 +1,7 @@
 import * as Styles from '@/styles'
 import {TouchableOpacity, Keyboard} from 'react-native'
 import Badge from '@/common-adapters/badge'
-import Box, {Box2} from '@/common-adapters/box'
+import {Box2} from '@/common-adapters/box'
 import Icon from '@/common-adapters/icon'
 import Text from '@/common-adapters/text'
 import Meta from '@/common-adapters/meta'
@@ -17,7 +17,6 @@ import noop from 'lodash/noop'
 
 const Kb = {
   Badge,
-  Box,
   Box2,
   Divider,
   Icon,
@@ -158,7 +157,7 @@ const MenuLayout = (props: MenuLayoutProps) => {
   const close = (
     <>
       <Kb.Divider style={styles.divider} />
-      <Kb.Box style={Styles.collapseStyles([styles.menuGroup, props.listStyle])}>
+      <Kb.Box2 direction="vertical" fullWidth={true} style={Styles.collapseStyles([styles.menuGroup, props.listStyle])}>
         <MenuRow
           title={props.closeText || 'Close'}
           index={0}
@@ -168,7 +167,7 @@ const MenuLayout = (props: MenuLayoutProps) => {
           textColor={props.textColor}
           backgroundColor={props.backgroundColor}
         />
-      </Kb.Box>
+      </Kb.Box2>
     </>
   )
 
@@ -207,7 +206,9 @@ const MenuLayout = (props: MenuLayoutProps) => {
           props.backgroundColor && {backgroundColor: props.backgroundColor},
         ])}
       >
-        <Kb.Box
+        <Kb.Box2
+          direction="vertical"
+          fullWidth={true}
           style={Styles.collapseStyles([
             styles.menuBox,
             firstIsUnWrapped && styles.firstIsUnWrapped,
@@ -224,7 +225,7 @@ const MenuLayout = (props: MenuLayoutProps) => {
             {items}
           </ScrollView>
           {close}
-        </Kb.Box>
+        </Kb.Box2>
       </Kb.SafeAreaView>
     </SafeAreaProvider>
   )
@@ -289,16 +290,12 @@ const styles = Styles.styleSheetCreate(
         paddingRight: Styles.globalMargins.small,
       },
       menuBox: {
-        ...Styles.globalStyles.flexBoxColumn,
-        alignItems: 'stretch',
         backgroundColor: Styles.globalColors.white,
         justifyContent: 'flex-end',
         paddingBottom: Styles.globalMargins.tiny,
         paddingTop: Styles.globalMargins.xsmall,
       },
       menuGroup: {
-        ...Styles.globalStyles.flexBoxColumn,
-        alignItems: 'stretch',
         justifyContent: 'flex-end',
       },
       progressIndicator: {
diff --git a/shared/common-adapters/header-hoc/index.desktop.tsx b/shared/common-adapters/header-hoc/index.desktop.tsx
index ebb3f15bc325..8d658ca8394e 100644
--- a/shared/common-adapters/header-hoc/index.desktop.tsx
+++ b/shared/common-adapters/header-hoc/index.desktop.tsx
@@ -2,13 +2,13 @@ import * as C from '@/constants'
 import type * as React from 'react'
 import * as Styles from '@/styles'
 import BackButton from '../back-button'
-import Box from '@/common-adapters/box'
+import {Box2} from '@/common-adapters/box'
 import Icon from '@/common-adapters/icon'
 import Text from '@/common-adapters/text'
 import {useNavigation} from '@react-navigation/native'
 import type {Props, LeftActionProps} from '.'
 
-const Kb = {BackButton, Box, Icon, Text}
+const Kb = {BackButton, Box2, Icon, Text}
 
 export const HeaderHocHeader = ({
   headerStyle,
@@ -18,7 +18,7 @@ export const HeaderHocHeader = ({
   onCancel,
   theme = 'light',
 }: Props) => (
-  <Kb.Box style={Styles.collapseStyles([_headerStyle, _headerStyleThemed[theme], headerStyle])}>
+  <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={Styles.collapseStyles([_headerStyle, _headerStyleThemed[theme], headerStyle])}>
     {customComponent}
     {onCancel && (
       <Kb.Icon
@@ -28,12 +28,12 @@ export const HeaderHocHeader = ({
       />
     )}
     {title && (
-      <Kb.Box style={_titleStyle}>
+      <Kb.Box2 direction="horizontal" centerChildren={true} style={_titleStyle}>
         <Kb.Text type="Header">{title}</Kb.Text>
-      </Kb.Box>
+      </Kb.Box2>
     )}
     {titleComponent}
-  </Kb.Box>
+  </Kb.Box2>
 )
 
 // TODO use LeftAction above
@@ -48,7 +48,7 @@ const LeftAction = ({
   onLeftAction,
   theme,
 }: LeftActionProps) => (
-  <Kb.Box style={Styles.collapseStyles([styles.leftAction, hasTextTitle && styles.grow])}>
+  <Kb.Box2 direction="vertical" alignItems="flex-start" style={Styles.collapseStyles([styles.leftAction, hasTextTitle && styles.grow])}>
     {onLeftAction && leftAction === 'cancel' ? (
       <Kb.Text type="BodyBigLink" style={styles.action} onClick={onLeftAction}>
         {leftActionText || customCancelText || 'Cancel'}
@@ -69,7 +69,7 @@ const LeftAction = ({
         onClick={disabled ? undefined : onLeftAction}
       />
     ) : null}
-  </Kb.Box>
+  </Kb.Box2>
 )
 
 export const HeaderHocWrapper = (props: Props & {children: React.ReactNode}): React.ReactNode => {
@@ -77,8 +77,6 @@ export const HeaderHocWrapper = (props: Props & {children: React.ReactNode}): Re
 }
 
 const _headerStyle = {
-  ...Styles.globalStyles.flexBoxRow,
-  alignItems: 'center',
   flexShrink: 0,
   justifyContent: 'flex-start',
   minHeight: undefined,
@@ -111,11 +109,8 @@ const _styleCloseThemed = {
 }
 
 const _titleStyle = {
-  ...Styles.globalStyles.flexBoxRow,
-  alignItems: 'center',
   bottom: 0,
   flex: 1,
-  justifyContent: 'center',
   left: 0,
   position: 'absolute', // This is always centered so we never worry about items to the left/right. If you have overlap or other issues you likely have to fix the content
   right: 0,
@@ -142,8 +137,6 @@ const styles = Styles.styleSheetCreate(() => ({
   },
   leftAction: Styles.platformStyles({
     common: {
-      ...Styles.globalStyles.flexBoxColumn,
-      alignItems: 'flex-start',
       flexShrink: 1,
       justifyContent: 'flex-start',
     },
diff --git a/shared/common-adapters/header-hoc/index.native.tsx b/shared/common-adapters/header-hoc/index.native.tsx
index 37a56f896a82..9ef6113c858c 100644
--- a/shared/common-adapters/header-hoc/index.native.tsx
+++ b/shared/common-adapters/header-hoc/index.native.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as Styles from '@/styles'
 import BackButton from '../back-button'
-import Box from '@/common-adapters/box'
+import {Box2} from '@/common-adapters/box'
 import BoxGrow from '@/common-adapters/box-grow'
 import FloatingMenu from '@/common-adapters/floating-menu'
 import Icon, {type IconType} from '@/common-adapters/icon'
@@ -10,7 +10,7 @@ import Text from '@/common-adapters/text'
 import {useNavigation} from '@react-navigation/native'
 import type {Props, LeftActionProps} from '.'
 
-const Kb = {BackButton, Box, BoxGrow, FloatingMenu, Icon, Text}
+const Kb = {BackButton, Box2, BoxGrow, FloatingMenu, Icon, Text}
 
 type RightAction = {
   label?: string
@@ -38,12 +38,17 @@ export const HeaderHocHeader = (props: Props) => {
   const hasTextTitle = !!props.title && !props.titleComponent
 
   const header = (
-    <Kb.Box
+    <Kb.Box2
+      direction="horizontal"
+      alignItems="center"
+      fullWidth={true}
       style={Styles.collapseStyles([styles.header, props.borderless && styles.borderless, props.headerStyle])}
     >
       {props.customComponent}
       {hasTextTitle && (
-        <Kb.Box
+        <Kb.Box2
+          direction="vertical"
+          alignItems="center"
           style={Styles.collapseStyles([
             styles.titleContainer,
             styles.titleTextContainer,
@@ -60,7 +65,7 @@ export const HeaderHocHeader = (props: Props) => {
           <Text type="BodyBig" style={styles.title} lineClamp={1}>
             {props.title}
           </Text>
-        </Kb.Box>
+        </Kb.Box2>
       )}
       <LeftAction
         badgeNumber={props.badgeNumber}
@@ -74,7 +79,9 @@ export const HeaderHocHeader = (props: Props) => {
         theme={props.theme}
       />
       {props.titleComponent && (
-        <Kb.Box
+        <Kb.Box2
+          direction="vertical"
+          alignItems="center"
           style={Styles.collapseStyles([
             styles.titleContainer,
             onLeftAction && styles.titleContainerRightPadding,
@@ -82,10 +89,10 @@ export const HeaderHocHeader = (props: Props) => {
           ] as const)}
         >
           {props.titleComponent}
-        </Kb.Box>
+        </Kb.Box2>
       )}
       {rightAction && <RightActions hasTextTitle={hasTextTitle} rightAction={rightAction} />}
-    </Kb.Box>
+    </Kb.Box2>
   )
 
   return header
@@ -95,7 +102,7 @@ export const LeftAction = (p: LeftActionProps): React.ReactElement => {
   const {badgeNumber, disabled, customCancelText, hasTextTitle, hideBackLabel, leftAction} = p
   const {leftActionText, onLeftAction, theme, customIconColor, style} = p
   return (
-    <Kb.Box style={Styles.collapseStyles([styles.leftAction, hasTextTitle && styles.grow, style])}>
+    <Kb.Box2 direction="vertical" alignItems="flex-start" style={Styles.collapseStyles([styles.leftAction, hasTextTitle && styles.grow, style])}>
       {onLeftAction && leftAction === 'cancel' ? (
         <Text type="BodyBigLink" style={styles.action} onClick={onLeftAction}>
           {leftActionText || customCancelText || 'Cancel'}
@@ -118,16 +125,16 @@ export const LeftAction = (p: LeftActionProps): React.ReactElement => {
           />
         )
       )}
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
 const RightActions = (p: {hasTextTitle: boolean; rightAction: RightAction}) => {
   const {hasTextTitle, rightAction} = p
   return (
-    <Kb.Box style={Styles.collapseStyles([styles.rightActions, hasTextTitle && styles.grow])}>
-      <Kb.Box style={styles.rightActionsWrapper}>{renderAction(rightAction, 0)}</Kb.Box>
-    </Kb.Box>
+    <Kb.Box2 direction="vertical" alignItems="flex-end" style={Styles.collapseStyles([styles.rightActions, hasTextTitle && styles.grow])}>
+      <Kb.Box2 direction="horizontal" alignSelf="flex-end">{renderAction(rightAction, 0)}</Kb.Box2>
+    </Kb.Box2>
   )
 }
 
@@ -149,12 +156,12 @@ const renderAction = (action: RightAction, index: number): React.ReactNode =>
 export const HeaderHocWrapper = (props: Props & {children: React.ReactNode; skipHeader?: boolean}) => {
   const {customSafeAreaTopStyle, children, customSafeAreaBottomStyle, skipHeader} = props
   return (
-    <Kb.Box style={styles.container}>
+    <Kb.Box2 direction="vertical" fullHeight={true} style={styles.container}>
       {!!customSafeAreaTopStyle && <SafeAreaViewTop style={customSafeAreaTopStyle} />}
       {!skipHeader && <HeaderHocHeader {...props} />}
       <Kb.BoxGrow>{children}</Kb.BoxGrow>
       {!!customSafeAreaBottomStyle && <SafeAreaView style={customSafeAreaBottomStyle} />}
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -182,15 +189,11 @@ const styles = Styles.styleSheetCreate(
       }),
       borderless: {borderBottomWidth: 0},
       container: {
-        ...Styles.globalStyles.flexBoxColumn,
-        height: '100%',
         position: 'relative',
       },
       grow: {flexGrow: 1},
       header: Styles.platformStyles({
         common: {
-          ...Styles.globalStyles.flexBoxRow,
-          alignItems: 'center',
           borderBottomColor: Styles.globalColors.black_10,
           borderBottomWidth: 1,
           borderStyle: 'solid',
@@ -207,27 +210,20 @@ const styles = Styles.styleSheetCreate(
       }),
       leftAction: Styles.platformStyles({
         common: {
-          ...Styles.globalStyles.flexBoxColumn,
-          alignItems: 'flex-start',
           flexShrink: 1,
           justifyContent: 'flex-start',
         },
       }),
       rightActions: Styles.platformStyles({
         common: {
-          ...Styles.globalStyles.flexBoxColumn,
-          alignItems: 'flex-end',
           flexShrink: 1,
           justifyContent: 'flex-end',
         },
         isIOS: {paddingRight: Styles.globalMargins.tiny},
       }),
-      rightActionsWrapper: {...Styles.globalStyles.flexBoxRow},
       title: {color: Styles.globalColors.black},
       titleContainer: Styles.platformStyles({
         common: {
-          ...Styles.globalStyles.flexBoxColumn,
-          alignItems: 'center',
           flexGrow: 1,
           flexShrink: 2,
           justifyContent: 'center',
@@ -243,7 +239,7 @@ const styles = Styles.styleSheetCreate(
       titleContainerRightPadding: Styles.platformStyles({
         isAndroid: {paddingRight: Styles.globalMargins.small},
       }),
-      titleTextContainer: {...Styles.globalStyles.fillAbsolute},
+      titleTextContainer: Styles.globalStyles.fillAbsolute,
     }) as const
 )
 
diff --git a/shared/common-adapters/index.d.ts b/shared/common-adapters/index.d.ts
index ce7742902487..500578a72a99 100644
--- a/shared/common-adapters/index.d.ts
+++ b/shared/common-adapters/index.d.ts
@@ -18,7 +18,7 @@ export {default as AvatarLine} from './avatar/avatar-line'
 export {default as BackButton} from './back-button'
 export {default as Badge} from './badge'
 export {Banner, BannerParagraph} from './banner'
-export {default as Box, Box2, Box2Measure, Box2Animated, Box2Div, Box2View, type LayoutEvent} from './box'
+export {Box2, Box2Measure, Box2Animated, Box2Div, Box2View, type LayoutEvent} from './box'
 export type {MeasureDesktop, MeasureNative, MeasureRef} from './measure-ref'
 export {default as ButtonBar} from './button-bar'
 export {default as Button} from './button'
diff --git a/shared/common-adapters/info-note.tsx b/shared/common-adapters/info-note.tsx
index 5937df28d2b4..89d70583c397 100644
--- a/shared/common-adapters/info-note.tsx
+++ b/shared/common-adapters/info-note.tsx
@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import Box, {Box2} from './box'
+import {Box2} from './box'
 import Icon from './icon'
 import * as Styles from '@/styles'
 
@@ -16,13 +16,13 @@ const InfoNote = (props: Props) => (
     style={Styles.collapseStyles([styles.alignCenter, props.containerStyle])}
   >
     <Box2 direction="horizontal" gap="tiny" style={styles.alignCenter}>
-      <Box style={{backgroundColor: props.color || Styles.globalColors.black_10, height: 1, width: 24}} />
+      <Box2 direction="vertical" style={{backgroundColor: props.color || Styles.globalColors.black_10, height: 1, width: 24}} />
       <Icon
         color={props.color || Styles.globalColors.black_10}
         type="iconfont-info"
         fontSize={Styles.isMobile ? 22 : 16}
       />
-      <Box style={{backgroundColor: props.color || Styles.globalColors.black_10, height: 1, width: 24}} />
+      <Box2 direction="vertical" style={{backgroundColor: props.color || Styles.globalColors.black_10, height: 1, width: 24}} />
     </Box2>
     {props.children}
   </Box2>
diff --git a/shared/common-adapters/list-item.desktop.tsx b/shared/common-adapters/list-item.desktop.tsx
index 3024f83df36a..2d900d222598 100644
--- a/shared/common-adapters/list-item.desktop.tsx
+++ b/shared/common-adapters/list-item.desktop.tsx
@@ -1,43 +1,45 @@
-import Box from './box'
-import {globalStyles, desktopStyles} from '@/styles'
+import {Box2} from './box'
+import {desktopStyles} from '@/styles'
 import type {Props} from './list-item'
 
 const ListItem = (p: Props) => {
   const clickable = !!p.onClick
   const minHeight = {Large: 56, Small: 40}[p.type]
   return (
-    <Box
+    <Box2
+      direction="horizontal"
+      fullWidth={true}
       style={{
-        ...globalStyles.flexBoxRow,
         ...containerStyle(clickable),
         minHeight,
         ...p.containerStyle,
       }}
     >
-      <Box style={{...globalStyles.flexBoxColumn, justifyContent: 'flex-start'}}>
-        <Box
+      <Box2 direction="vertical">
+        <Box2
+          direction="vertical"
+          centerChildren={true}
           style={{
-            ...globalStyles.flexBoxColumn,
-            alignItems: 'center',
             height: minHeight,
-            justifyContent: 'center',
             width: minHeight,
           }}
         >
           {p.icon}
-        </Box>
-      </Box>
-      <Box style={{...globalStyles.flexBoxColumn, ...bodyContainerStyle(p.type)}}>{p.body}</Box>
-      <Box
+        </Box2>
+      </Box2>
+      <Box2 direction="vertical" style={bodyContainerStyle(p.type)}>
+        {p.body}
+      </Box2>
+      <Box2
+        direction="vertical"
         style={{
-          ...globalStyles.flexBoxColumn,
           ...actionStyle(!!p.extraRightMarginAction),
           justifyContent: 'center',
         }}
       >
         {p.action}
-      </Box>
-    </Box>
+      </Box2>
+    </Box2>
   )
 }
 
diff --git a/shared/common-adapters/list-item.native.tsx b/shared/common-adapters/list-item.native.tsx
index b9cde118939f..8902e3ae6f03 100644
--- a/shared/common-adapters/list-item.native.tsx
+++ b/shared/common-adapters/list-item.native.tsx
@@ -1,47 +1,45 @@
 import type {Props} from './list-item'
-import Box from './box'
+import {Box2} from './box'
 import ClickableBox from './clickable-box'
-import {globalStyles} from '@/styles'
 
 const ListItem = (p: Props) => {
   const height = {Large: 64, Small: 48}[p.type] // minimum height
   const listItem = (
-    <Box style={{...globalStyles.flexBoxRow, ...p.containerStyle}}>
-      <Box style={{height, width: 0}} />
-      <Box style={{...globalStyles.flexBoxColumn, justifyContent: 'flex-start'}}>
-        <Box
+    <Box2 direction="horizontal" fullWidth={true} style={p.containerStyle}>
+      <Box2 direction="vertical" style={{height, width: 0}} />
+      <Box2 direction="vertical">
+        <Box2
+          direction="vertical"
+          centerChildren={true}
           style={{
-            ...globalStyles.flexBoxColumn,
             ...iconContainerThemed[p.type],
-            alignItems: 'center',
             height,
-            justifyContent: 'center',
           }}
         >
           {p.icon}
-        </Box>
-      </Box>
-      <Box
+        </Box2>
+      </Box2>
+      <Box2
+        direction="vertical"
         style={{
-          ...globalStyles.flexBoxColumn,
           ...bodyContainerStyle(p.swipeToAction),
           ...p.bodyContainerStyle,
         }}
       >
         {p.body}
-      </Box>
+      </Box2>
       {!p.swipeToAction && (
-        <Box
+        <Box2
+          direction="vertical"
           style={{
-            ...globalStyles.flexBoxColumn,
             ...actionStyle(!!p.extraRightMarginAction),
             justifyContent: 'center',
           }}
         >
           {p.action}
-        </Box>
+        </Box2>
       )}
-    </Box>
+    </Box2>
   )
   return <ClickableBox onClick={p.onClick}>{listItem}</ClickableBox>
 }
diff --git a/shared/common-adapters/loading-line.desktop.tsx b/shared/common-adapters/loading-line.desktop.tsx
index 32924e927525..46bb23b0addf 100644
--- a/shared/common-adapters/loading-line.desktop.tsx
+++ b/shared/common-adapters/loading-line.desktop.tsx
@@ -1,15 +1,15 @@
-import Box from './box'
+import {Box2} from './box'
 import * as React from 'react'
 import * as Styles from '@/styles'
 import './loading-line.css'
 
-const Kb = {Box}
+const Kb = {Box2}
 
 const LoadingLine = React.memo(function LoadingLine() {
   return (
-    <Kb.Box style={styles.container}>
-      <Kb.Box className="loading-line" style={styles.line} />
-    </Kb.Box>
+    <Kb.Box2 direction="vertical" style={styles.container}>
+      <Kb.Box2 direction="vertical" fullWidth={true} className="loading-line" style={styles.line} />
+    </Kb.Box2>
   )
 })
 
diff --git a/shared/common-adapters/markdown/react.tsx b/shared/common-adapters/markdown/react.tsx
index c48a4dd516fc..ef91e4d73183 100644
--- a/shared/common-adapters/markdown/react.tsx
+++ b/shared/common-adapters/markdown/react.tsx
@@ -3,7 +3,7 @@ import * as SM from '@khanacademy/simple-markdown'
 import type * as T from '@/constants/types'
 import * as Styles from '@/styles'
 import Text, {type StylesTextCrossPlatform} from '@/common-adapters/text'
-import Box from '@/common-adapters/box'
+import {Box2} from '@/common-adapters/box'
 import Spoiler from './spoiler'
 import NativeEmoji from '@/common-adapters/emoji/native-emoji'
 import type {StyleOverride} from '.'
@@ -180,7 +180,7 @@ const InlineCode = (p: {children: React.ReactNode; state: State}) => {
 const Fence = (p: {children: React.ReactNode; state: State}) => {
   const {children, state} = p
   return Styles.isMobile ? (
-    <Box>
+    <Box2 direction="vertical">
       <Text
         type="Body"
         style={Styles.collapseStyles([markdownStyles.codeSnippetBlockTextStyle, state.styleOverride?.fence])}
@@ -188,7 +188,7 @@ const Fence = (p: {children: React.ReactNode; state: State}) => {
       >
         {children}
       </Text>
-    </Box>
+    </Box2>
   ) : (
     <Text
       type="Body"
@@ -232,9 +232,9 @@ const reactComponentsForMarkdownType = {
       state.inBlockQuote = true
 
       const ret = (
-        <Box key={state.key} style={markdownStyles.quoteStyle}>
+        <Box2 direction="vertical" key={state.key} style={markdownStyles.quoteStyle}>
           {output(node['content'], state)}
-        </Box>
+        </Box2>
       )
       state.inBlockQuote = oldInBlockQuote
       return ret
diff --git a/shared/common-adapters/modal.tsx b/shared/common-adapters/modal.tsx
index c094c5aa9ce8..8a8f50f78556 100644
--- a/shared/common-adapters/modal.tsx
+++ b/shared/common-adapters/modal.tsx
@@ -2,13 +2,12 @@ import * as React from 'react'
 import * as Styles from '@/styles'
 import PopupDialog from './popup-dialog'
 import ScrollView, {type ScrollViewRef} from '@/common-adapters/scroll-view'
-import {Box2, Box, type LayoutEvent} from '@/common-adapters/box'
+import {Box2, type LayoutEvent} from '@/common-adapters/box'
 import BoxGrow from './box-grow'
 import Text from '@/common-adapters/text'
 import {useTimeout} from './use-timers'
 
 const Kb = {
-  Box,
   Box2,
   BoxGrow,
   ScrollView,
@@ -175,7 +174,7 @@ const Header = (props: HeaderProps) => {
           </Kb.Box2>
         </Kb.Box2>
         {showTitle && (
-          <Kb.Box style={useMeasuredStyles ? styles.measured : undefined}>
+          <Kb.Box2 direction="vertical" style={useMeasuredStyles ? styles.measured : undefined} centerChildren={useMeasuredStyles}>
             {!!subTitle && props.subTitleAbove && subTitle}
             {typeof props.title === 'string' ? (
               <Kb.Text type={Styles.isMobile ? 'BodyBig' : 'Header'} lineClamp={1} center={true}>
@@ -185,7 +184,7 @@ const Header = (props: HeaderProps) => {
               props.title
             )}
             {!!subTitle && !props.subTitleAbove && subTitle}
-          </Kb.Box>
+          </Kb.Box2>
         )}
         <Kb.Box2
           direction="horizontal"
@@ -300,9 +299,7 @@ const styles = Styles.styleSheetCreate(() => {
       minHeight: 64,
     },
     measured: {
-      alignItems: 'center',
       flex: 1,
-      justifyContent: 'center',
     },
     modeDefault: Styles.platformStyles({
       isElectron: {
diff --git a/shared/common-adapters/modal2.tsx b/shared/common-adapters/modal2.tsx
index e6f6a35bcedc..e532ed66eea5 100644
--- a/shared/common-adapters/modal2.tsx
+++ b/shared/common-adapters/modal2.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react'
 import * as Styles from '@/styles'
 import ScrollView from './scroll-view'
-import {Box2, Box, type LayoutEvent} from './box'
+import {Box2, type LayoutEvent} from './box'
 import BoxGrow from './box-grow'
 import Text from './text'
 import {useTimeout} from './use-timers'
 
 const Kb = {
-  Box,
   Box2,
   BoxGrow,
   ScrollView,
@@ -107,7 +106,7 @@ const Header2 = (props: HeaderProps) => {
           </Kb.Box2>
         </Kb.Box2>
         {
-          <Kb.Box>
+          <Kb.Box2 direction="vertical">
             {!!subTitle && props.subTitleAbove && subTitle}
             {typeof props.title === 'string' ? (
               <Kb.Text type={Styles.isMobile ? 'BodyBig' : 'Header'} lineClamp={1} center={true}>
@@ -117,7 +116,7 @@ const Header2 = (props: HeaderProps) => {
               props.title
             )}
             {!!subTitle && !props.subTitleAbove && subTitle}
-          </Kb.Box>
+          </Kb.Box2>
         }
         <Kb.Box2 direction="horizontal" style={Styles.collapseStyles([styles.headerRight])}>
           <Kb.Box2 direction="horizontal" onLayout={onLayoutSide}>
diff --git a/shared/common-adapters/name-with-icon.tsx b/shared/common-adapters/name-with-icon.tsx
index 07c7f2c4f3c7..da7810497fad 100644
--- a/shared/common-adapters/name-with-icon.tsx
+++ b/shared/common-adapters/name-with-icon.tsx
@@ -3,7 +3,7 @@ import * as Styles from '@/styles'
 import * as C from '@/constants'
 import {useTeamsState} from '@/stores/teams'
 import Avatar, {type AvatarSize} from './avatar'
-import {Box} from './box'
+import {Box2} from './box'
 import ClickableBox from './clickable-box'
 import Icon, {type IconType} from './icon'
 import Text, {
@@ -71,7 +71,6 @@ const NameWithIcon = (props: NameWithIconProps) => {
 
   const isAvatar = !!(username || teamname) && !props.icon
   const commonHeight = size === 'big' ? 64 : Styles.isMobile ? 48 : 32
-  const BoxComponent = onClick ? ClickableBox : Box
   const adapterProps = getAdapterProps(size || 'default')
 
   let avatarOrIcon: React.ReactNode
@@ -158,11 +157,11 @@ const NameWithIcon = (props: NameWithIconProps) => {
     />
   )
   const metas = props.horizontal ? (
-    <Box style={styles.metasBox}>
+    <Box2 direction="horizontal" fullWidth={true} style={styles.metasBox}>
       {metaOne}
       {!!(props.metaTwo && props.metaOne) && <Text type="BodySmall">&nbsp;·&nbsp;</Text>}
       {metaTwo}
-    </Box>
+    </Box2>
   ) : (
     <>
       {metaOne}
@@ -170,43 +169,49 @@ const NameWithIcon = (props: NameWithIconProps) => {
     </>
   )
 
-  return (
-    <BoxComponent
-      onClick={_onClickWrapper}
-      style={Styles.collapseStyles([
-        props.horizontal
-          ? size === 'big'
-            ? styles.hbContainerStyle
-            : styles.hContainerStyle
-          : styles.vContainerStyle,
-        props.containerStyle,
-      ])}
-    >
+  const containerStyle = Styles.collapseStyles([
+    props.horizontal
+      ? size === 'big'
+        ? styles.hbContainerStyle
+        : styles.hContainerStyle
+      : styles.vContainerStyle,
+    props.containerStyle,
+  ])
+
+  const metaContainerStyle = props.horizontal
+    ? Styles.collapseStyles([size === 'big' && styles.textContainer, props.metaStyle])
+    : Styles.collapseStyles([
+        styles.metaStyle,
+        size === 'smaller' && styles.smallerWidthTextContainer,
+        size !== 'smaller' && styles.fullWidthTextContainer,
+        {marginTop: adapterProps.metaMargin},
+        props.metaStyle,
+        size === 'smaller' ? styles.smallerWidthTextContainer : {},
+      ] as const)
+
+  const children = (
+    <>
       {avatarOrIcon}
-      <Box
-        style={
-          props.horizontal
-            ? Styles.collapseStyles([
-                Styles.globalStyles.flexBoxColumn,
-                size === 'big' && styles.textContainer,
-                props.metaStyle,
-              ])
-            : Styles.collapseStyles([
-                Styles.globalStyles.flexBoxRow,
-                styles.metaStyle,
-                size === 'smaller' && styles.smallerWidthTextContainer,
-                size !== 'smaller' && styles.fullWidthTextContainer,
-                {marginTop: adapterProps.metaMargin},
-                props.metaStyle,
-                size === 'smaller' ? styles.smallerWidthTextContainer : {},
-              ] as const)
-        }
-      >
+      <Box2 direction="vertical" centerChildren={!props.horizontal} style={metaContainerStyle}>
         {botAlias}
         {usernameOrTitle}
         {metas}
-      </Box>
-    </BoxComponent>
+      </Box2>
+    </>
+  )
+
+  return _onClickWrapper ? (
+    <ClickableBox onClick={_onClickWrapper} style={containerStyle}>
+      {children}
+    </ClickableBox>
+  ) : (
+    <Box2
+      direction={props.horizontal ? 'horizontal' : 'vertical'}
+      alignItems="center"
+      style={containerStyle}
+    >
+      {children}
+    </Box2>
   )
 }
 
@@ -242,7 +247,7 @@ const styles = Styles.styleSheetCreate(() => ({
   }),
   hContainerStyle: {
     ...Styles.globalStyles.flexBoxRow,
-    alignItems: 'center',
+    alignItems: 'center' as const,
   },
   hIconStyle: Styles.platformStyles({
     isElectron: {
@@ -278,14 +283,10 @@ const styles = Styles.styleSheetCreate(() => ({
     },
   }),
   metaStyle: {
-    ...Styles.globalStyles.flexBoxColumn,
-    ...Styles.globalStyles.flexBoxCenter,
     marginTop: Styles.globalMargins.tiny,
   },
   metasBox: {
-    ...Styles.globalStyles.flexBoxRow,
     maxWidth: '100%',
-    width: '100%',
   },
   smallerWidthTextContainer: Styles.platformStyles({
     isElectron: {
@@ -300,7 +301,7 @@ const styles = Styles.styleSheetCreate(() => ({
   },
   vContainerStyle: {
     ...Styles.globalStyles.flexBoxColumn,
-    alignItems: 'center',
+    alignItems: 'center' as const,
   },
   vUsernameContainerStyle: Styles.platformStyles({
     isElectron: {
diff --git a/shared/common-adapters/new-input.tsx b/shared/common-adapters/new-input.tsx
index bc820ff714da..6f2d43e05b3c 100644
--- a/shared/common-adapters/new-input.tsx
+++ b/shared/common-adapters/new-input.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import PlainInput, {type PropsWithInput, type PlainInputRef} from './plain-input'
-import Box, {Box2} from './box'
+import {Box2} from './box'
 import Icon, {type IconType} from './icon'
 import Text, {getTextStyle} from './text'
 import * as Styles from '@/styles'
@@ -52,14 +52,14 @@ const NewInput = React.forwardRef<PlainInputRef, Props>(function NewInputInner(p
       ])}
     >
       {!!props.icon && (
-        <Box style={styles.icon}>
+        <Box2 direction="horizontal" style={styles.icon}>
           <Icon
             color={Styles.globalColors.black_20} // not sure how to make this dynamic
             type={props.icon}
             fontSize={fontSize}
             style={styles.displayFlex}
           />
-        </Box>
+        </Box2>
       )}
       {!!prefix && (
         <Text type={textType} style={styles.prefix}>
diff --git a/shared/common-adapters/overlay/index.native.tsx b/shared/common-adapters/overlay/index.native.tsx
index 09e30f5be372..72dd196e4161 100644
--- a/shared/common-adapters/overlay/index.native.tsx
+++ b/shared/common-adapters/overlay/index.native.tsx
@@ -1,11 +1,10 @@
-import {TouchableWithoutFeedback} from 'react-native'
-import {Box, Box2} from '@/common-adapters/box'
+import {TouchableWithoutFeedback, View} from 'react-native'
+import {Box2} from '@/common-adapters/box'
 import FloatingBox from '../floating-box'
 import type {Props} from '.'
 import * as Styles from '@/styles'
 
 const Kb = {
-  Box,
   Box2,
   FloatingBox,
 }
@@ -22,8 +21,7 @@ const Overlay = (props: Props) => {
         style={Styles.collapseStyles([styles.container, !!props.color && {color: props.color}])}
       >
         <TouchableWithoutFeedback onPress={props.onHidden}>
-          {/* This has to be a `Box` so `TouchableWithoutFeedback`'s touch responders get piped through to the `View` */}
-          <Kb.Box style={styles.touchArea} />
+          <View style={styles.touchArea} />
         </TouchableWithoutFeedback>
         {props.children}
       </Kb.Box2>
diff --git a/shared/common-adapters/placeholder.tsx b/shared/common-adapters/placeholder.tsx
index a664d7bfc8e7..b6697c2152df 100644
--- a/shared/common-adapters/placeholder.tsx
+++ b/shared/common-adapters/placeholder.tsx
@@ -1,5 +1,5 @@
 import * as Styles from '@/styles'
-import Box from './box'
+import {Box2} from './box'
 
 type PlaceholderProps = {
   style?: Styles.StylesCrossPlatform
@@ -7,7 +7,8 @@ type PlaceholderProps = {
 }
 
 const Placeholder = (props: PlaceholderProps) => (
-  <Box
+  <Box2
+    direction="vertical"
     style={Styles.collapseStyles([
       styles.placeholder,
       props.style,
diff --git a/shared/common-adapters/platform-icon.tsx b/shared/common-adapters/platform-icon.tsx
index 999b641a4a6d..f0db990b20da 100644
--- a/shared/common-adapters/platform-icon.tsx
+++ b/shared/common-adapters/platform-icon.tsx
@@ -1,5 +1,5 @@
 import type * as T from '@/constants/types'
-import Box from './box'
+import {Box2} from './box'
 import Icon, {type IconType} from './icon'
 import {isMobile} from '@/constants/platform'
 
@@ -48,7 +48,7 @@ const getSpecForPlatform = (platform: T.More.PlatformsExpandedType): IconSpec =>
 const Render = ({platform, overlay, style}: Props) => {
   const iconSpec = getSpecForPlatform(platform)
   return (
-    <Box style={{position: 'relative', ...style}}>
+    <Box2 direction="vertical" style={{position: 'relative', ...style}}>
       <Icon type={iconSpec.icon} />
       <Icon
         type={overlay}
@@ -58,7 +58,7 @@ const Render = ({platform, overlay, style}: Props) => {
           right: iconSpec.offsetRight,
         }}
       />
-    </Box>
+    </Box2>
   )
 }
 
diff --git a/shared/common-adapters/popup-dialog.desktop.tsx b/shared/common-adapters/popup-dialog.desktop.tsx
index 2a6bdf200f53..7e284accbf22 100644
--- a/shared/common-adapters/popup-dialog.desktop.tsx
+++ b/shared/common-adapters/popup-dialog.desktop.tsx
@@ -69,6 +69,15 @@ function PopupDialog(p: Props) {
 const styles = Styles.styleSheetCreate(() => ({
   get clipContainer() {
     return Styles.platformStyles({
+      isElectron: {
+        ...Styles.desktopStyles.boxShadow,
+        ...Styles.globalStyles.flexBoxColumn,
+        backgroundColor: Styles.globalColors.white,
+        borderRadius: Styles.borderRadius,
+        flex: 1,
+        maxWidth: '100%',
+        position: 'relative',
+      },
     })
   },
   close: Styles.platformStyles({
diff --git a/shared/common-adapters/popup-dialog.native.tsx b/shared/common-adapters/popup-dialog.native.tsx
index e07c45eb2331..964ea3386c2d 100644
--- a/shared/common-adapters/popup-dialog.native.tsx
+++ b/shared/common-adapters/popup-dialog.native.tsx
@@ -1,4 +1,4 @@
-import Box from './box'
+import {Box2} from './box'
 import {TouchableWithoutFeedback} from 'react-native'
 import * as Styles from '@/styles'
 
@@ -7,31 +7,35 @@ import type {Props} from './popup-dialog'
 export function PopupDialog({children, onClose, styleCover, styleContainer}: Props) {
   return (
     <TouchableWithoutFeedback onPress={onClose || undefined}>
-      <Box style={{...coverStyle, ...styleCover}}>
+      <Box2 direction="vertical" centerChildren={true} style={Styles.collapseStyles([styles.cover, styleCover])}>
         <TouchableWithoutFeedback>
-          <Box style={{...containerStyle, ...styleContainer}}>{children}</Box>
+          <Box2 direction="vertical" style={Styles.collapseStyles([styles.container, styleContainer])}>
+            {children}
+          </Box2>
         </TouchableWithoutFeedback>
-      </Box>
+      </Box2>
     </TouchableWithoutFeedback>
   )
 }
 
-const coverStyle = {
-  ...Styles.globalStyles.flexBoxCenter,
-  ...Styles.globalStyles.fillAbsolute,
-  backgroundColor: Styles.globalColors.black,
-  paddingBottom: Styles.globalMargins.small,
-  paddingLeft: Styles.globalMargins.large,
-  paddingRight: Styles.globalMargins.large,
-  paddingTop: Styles.globalMargins.small,
-} as const
-
-const containerStyle = {
-  ...Styles.globalStyles.flexBoxColumn,
-  backgroundColor: Styles.globalColors.white,
-  borderRadius: 4,
-  flexGrow: 1,
-  position: 'relative',
-} as const
+const styles = Styles.styleSheetCreate(
+  () =>
+    ({
+      container: {
+        backgroundColor: Styles.globalColors.white,
+        borderRadius: 4,
+        flexGrow: 1,
+        position: 'relative',
+      },
+      cover: {
+        ...Styles.globalStyles.fillAbsolute,
+        backgroundColor: Styles.globalColors.black,
+        paddingBottom: Styles.globalMargins.small,
+        paddingLeft: Styles.globalMargins.large,
+        paddingRight: Styles.globalMargins.large,
+        paddingTop: Styles.globalMargins.small,
+      },
+    }) as const
+)
 
 export default PopupDialog
diff --git a/shared/common-adapters/profile-card.tsx b/shared/common-adapters/profile-card.tsx
index a053acccd437..4296b59566c1 100644
--- a/shared/common-adapters/profile-card.tsx
+++ b/shared/common-adapters/profile-card.tsx
@@ -5,7 +5,7 @@ import * as Platforms from '@/util/platforms'
 import * as Tracker from '@/stores/tracker2'
 import type * as T from '@/constants/types'
 import capitalize from 'lodash/capitalize'
-import Box, {Box2, Box2Measure} from './box'
+import {Box2, Box2Measure} from './box'
 import ClickableBox from './clickable-box'
 import ConnectedNameWithIcon from './name-with-icon'
 import {_setWithProfileCardPopup} from './usernames'
@@ -27,7 +27,6 @@ import type {MeasureRef} from './measure-ref'
 const positionFallbacks = ['top center', 'bottom center'] as const
 
 const Kb = {
-  Box,
   Box2,
   Box2Measure,
   ClickableBox,
diff --git a/shared/common-adapters/progress-bar.tsx b/shared/common-adapters/progress-bar.tsx
index 62372e201ac3..f405c80001a7 100644
--- a/shared/common-adapters/progress-bar.tsx
+++ b/shared/common-adapters/progress-bar.tsx
@@ -1,4 +1,4 @@
-import Box from './box'
+import {Box2} from './box'
 import * as Styles from '@/styles'
 
 type Props = {
@@ -18,7 +18,8 @@ const ProgressBar = ({ratio, style, fillStyle, flatLeft, flatRight}: Props) => {
     width: `${Math.max(0, Math.min(1, ratio)) * 100}%`,
   } as const
   return (
-    <Box
+    <Box2
+      direction="vertical"
       style={Styles.collapseStyles([
         styles.outer,
         style,
@@ -26,8 +27,8 @@ const ProgressBar = ({ratio, style, fillStyle, flatLeft, flatRight}: Props) => {
         flatRight ? styles.flatRight : {},
       ])}
     >
-      <Box style={animatedStyles} />
-    </Box>
+      <Box2 direction="vertical" style={animatedStyles} />
+    </Box2>
   )
 }
 
diff --git a/shared/common-adapters/save-indicator.tsx b/shared/common-adapters/save-indicator.tsx
index f571a46c408a..9245f8ccc98e 100644
--- a/shared/common-adapters/save-indicator.tsx
+++ b/shared/common-adapters/save-indicator.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
 import * as Styles from '@/styles'
-import Box from './box'
+import {Box2} from './box'
 import Icon from './icon'
 import ProgressIndicator from './progress-indicator'
 import Text from './text'
 
 const Kb = {
-  Box,
+  Box2,
   Icon,
   ProgressIndicator,
   Text,
@@ -20,10 +20,7 @@ export type Props = {
 }
 
 const defaultStyle = {
-  ...Styles.globalStyles.flexBoxRow,
-  alignItems: 'center',
   height: Styles.globalMargins.medium,
-  justifyContent: 'center',
 } as const
 
 const SaveIndicator = (props: Props) => {
@@ -71,7 +68,7 @@ const SaveIndicator = (props: Props) => {
       break
   }
 
-  return <Kb.Box style={Styles.collapseStyles([defaultStyle, style])}>{content}</Kb.Box>
+  return <Kb.Box2 direction="horizontal" centerChildren={true} style={Styles.collapseStyles([defaultStyle, style])}>{content}</Kb.Box2>
 }
 
 export default SaveIndicator
diff --git a/shared/common-adapters/search-filter.tsx b/shared/common-adapters/search-filter.tsx
index 522262ded330..68aa929a90e6 100644
--- a/shared/common-adapters/search-filter.tsx
+++ b/shared/common-adapters/search-filter.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import Animation from './animation'
-import Box, {Box2, Box2Measure} from './box'
+import {Box2, Box2Measure} from './box'
 import ClickableBox, {ClickableBox2} from './clickable-box'
 import NewInput from './new-input'
 import PlainInput, {type PlainInputRef} from './plain-input'
@@ -15,7 +15,6 @@ import type {MeasureRef} from './measure-ref'
 
 const Kb = {
   Animation,
-  Box,
   Box2,
   Box2Measure,
   ClickableBox,
diff --git a/shared/common-adapters/switch.tsx b/shared/common-adapters/switch.tsx
index 2331728591aa..c16bc640eecc 100644
--- a/shared/common-adapters/switch.tsx
+++ b/shared/common-adapters/switch.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as Styles from '@/styles'
 import ClickableBox from './clickable-box'
-import Box, {Box2} from './box'
+import {Box2} from './box'
 import ProgressIndicator from './progress-indicator'
 import Text from './text'
 import SwitchToggle from './switch-toggle'
@@ -10,7 +10,6 @@ import type {MeasureRef} from './measure-ref'
 import type {TextType} from './text.shared'
 
 const Kb = {
-  Box,
   Box2,
   ClickableBox,
   ProgressIndicator,
@@ -75,8 +74,8 @@ const Switch = React.forwardRef<MeasureRef, Props>(function Switch(props: Props,
           ] as const)}
         />
       </Kb.ClickableBox>
-      {!!props.gapInBetween && <Kb.Box style={styles.gap} />}
-      {!!props.gapSize && <Kb.Box style={{width: props.gapSize}} />}
+      {!!props.gapInBetween && <Kb.Box2 direction="vertical" style={styles.gap} />}
+      {!!props.gapSize && <Kb.Box2 direction="vertical" style={{width: props.gapSize}} />}
       {typeof props.label === 'string' ? (
         <LabelContainer {...props}>
           <Kb.Text type={props.labelType ?? 'BodySemibold'}>{props.label}</Kb.Text>
@@ -94,7 +93,7 @@ const Switch = React.forwardRef<MeasureRef, Props>(function Switch(props: Props,
   )
 
   return Styles.isMobile || !props.labelTooltip ? (
-    <Kb.Box style={getStyle(props)}>{content}</Kb.Box>
+    <Kb.Box2 direction={props.align !== 'right' ? 'horizontal' : 'horizontalReverse'} fullWidth={true} style={Styles.collapseStyles([styles.container, props.style])}>{content}</Kb.Box2>
   ) : (
     <Kb.WithTooltip
       containerStyle={getStyle(props)}
diff --git a/shared/common-adapters/tabs.tsx b/shared/common-adapters/tabs.tsx
index 2d62974eb962..2a7978de13e0 100644
--- a/shared/common-adapters/tabs.tsx
+++ b/shared/common-adapters/tabs.tsx
@@ -5,12 +5,11 @@ import Divider from './divider'
 import Icon, {type IconType} from './icon'
 import ProgressIndicator from './progress-indicator'
 import Text from './text'
-import {Box, Box2} from './box'
+import {Box2} from './box'
 import capitalize from 'lodash/capitalize'
 
 const Kb = {
   Badge,
-  Box,
   Box2,
   ClickableBox,
   Divider,
@@ -61,14 +60,14 @@ const Tabs = <TitleT extends string>(props: Props<TitleT>) => (
           style={props.clickableBoxStyle}
         >
           <Kb.Box2 direction="vertical" style={styles.tabContainer} fullWidth={true}>
-            <Kb.Box style={Styles.collapseStyles([styles.tab, selected && styles.selected, props.tabStyle])}>
+            <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={Styles.collapseStyles([styles.tab, selected && styles.selected, props.tabStyle])}>
               {tab.icon ? (
                 <Kb.Icon type={tab.icon} style={selected ? styles.iconSelected : styles.icon} />
               ) : (
                 <TabText selected={selected} text={tab.text ?? capitalize(tab.title)} />
               )}
               {!!tab.badgeNumber && <Kb.Badge badgeNumber={tab.badgeNumber} badgeStyle={styles.badge} />}
-            </Kb.Box>
+            </Kb.Box2>
             <Kb.Divider style={selected ? styles.dividerSelected : styles.divider} />
           </Kb.Box2>
         </Kb.ClickableBox>
diff --git a/shared/common-adapters/timeline-marker.tsx b/shared/common-adapters/timeline-marker.tsx
index 321c692a29f9..f7428ffab013 100644
--- a/shared/common-adapters/timeline-marker.tsx
+++ b/shared/common-adapters/timeline-marker.tsx
@@ -1,9 +1,9 @@
-import Box from './box'
+import {Box2} from './box'
 import * as Styles from '@/styles'
 import {timeline_grey} from './timeline-marker.meta'
 
 const Kb = {
-  Box,
+  Box2,
 }
 
 export type Props = {
@@ -14,11 +14,11 @@ export type Props = {
 }
 
 const TimelineMarker = ({idx, max, type, style}: Props) => (
-  <Kb.Box style={{...Styles.globalStyles.flexBoxColumn, alignItems: 'center', marginRight: 16, ...style}}>
-    <Kb.Box style={{...styles.line, opacity: idx ? 1 : 0}} />
-    {type === 'closed' ? <Kb.Box style={styles.circleClosed} /> : <Kb.Box style={styles.circleOpen} />}
-    <Kb.Box style={{...styles.line, opacity: idx < max ? 1 : 0}} />
-  </Kb.Box>
+  <Kb.Box2 direction="vertical" alignItems="center" style={Styles.collapseStyles([{marginRight: 16}, style])}>
+    <Kb.Box2 direction="vertical" style={{...styles.line, opacity: idx ? 1 : 0}} />
+    {type === 'closed' ? <Kb.Box2 direction="vertical" style={styles.circleClosed} /> : <Kb.Box2 direction="vertical" style={styles.circleOpen} />}
+    <Kb.Box2 direction="vertical" style={{...styles.line, opacity: idx < max ? 1 : 0}} />
+  </Kb.Box2>
 )
 
 const circleSize = 8
diff --git a/shared/common-adapters/toast.native.tsx b/shared/common-adapters/toast.native.tsx
index cf58d4503172..a5e8577b87e1 100644
--- a/shared/common-adapters/toast.native.tsx
+++ b/shared/common-adapters/toast.native.tsx
@@ -2,7 +2,7 @@ import * as C from '@/constants'
 import * as React from 'react'
 import * as Styles from '@/styles'
 import FloatingBox from './floating-box'
-import Box from './box'
+import {Box2} from './box'
 import {KeyboardAvoidingView2} from './keyboard-avoiding-view'
 import {useTimeout} from './use-timers'
 import {Animated as NativeAnimated, Easing as NativeEasing} from 'react-native'
@@ -12,7 +12,7 @@ import noop from 'lodash/noop'
 import {useColorScheme} from 'react-native'
 
 const Kb = {
-  Box,
+  Box2,
   FloatingBox,
   KeyboardAvoidingView2,
 }
@@ -74,7 +74,7 @@ const Toast = (props: Props) => {
   return shouldRender ? (
     <Kb.FloatingBox>
       <Kb.KeyboardAvoidingView2>
-        <Kb.Box pointerEvents="none" style={styles.wrapper}>
+        <Kb.Box2 direction="vertical" pointerEvents="none" style={styles.wrapper}>
           <NativeAnimated.View
             style={Styles.collapseStyles([
               styles.container,
@@ -89,7 +89,7 @@ const Toast = (props: Props) => {
           >
             {props.children}
           </NativeAnimated.View>
-        </Kb.Box>
+        </Kb.Box2>
       </Kb.KeyboardAvoidingView2>
     </Kb.FloatingBox>
   ) : null
diff --git a/shared/common-adapters/video.native.tsx b/shared/common-adapters/video.native.tsx
index a2235363d576..6eeb1517f7a0 100644
--- a/shared/common-adapters/video.native.tsx
+++ b/shared/common-adapters/video.native.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
 import * as Styles from '@/styles'
-import Box from './box'
+import {Box2} from './box'
 import type {Props} from './video'
 import {StatusBar} from 'react-native'
 import {Video as AVVideo, VideoFullscreenUpdate} from 'expo-av'
 import {useCheckURL} from './video.shared'
 
-const Kb = {Box}
+const Kb = {Box2}
 
 // There seems to be a race between navigation animation and the measurement stuff
 // here that causes stuff to be rendered off-screen. So delay mounting to avoid
@@ -32,7 +32,7 @@ const Video = (props: Props) => {
 
   const content = (
     <DelayMount>
-      <Kb.Box style={styles.container}>
+      <Kb.Box2 direction="horizontal" centerChildren={true} style={styles.container}>
         <AVVideo
           isMuted={muted}
           source={source}
@@ -48,7 +48,7 @@ const Video = (props: Props) => {
           }}
           style={styles.video}
         />
-      </Kb.Box>
+      </Kb.Box2>
     </DelayMount>
   )
 
@@ -58,10 +58,7 @@ export default Video
 
 const styles = Styles.styleSheetCreate(() => ({
   container: {
-    ...Styles.globalStyles.flexBoxRow,
-    alignItems: 'center',
     height: '100%',
-    justifyContent: 'center',
     width: '100%',
   },
   video: {
diff --git a/shared/common-adapters/wave-button.tsx b/shared/common-adapters/wave-button.tsx
index 63a8ab05699a..5a8de12f9f3f 100644
--- a/shared/common-adapters/wave-button.tsx
+++ b/shared/common-adapters/wave-button.tsx
@@ -1,7 +1,7 @@
 import * as C from '@/constants'
 import * as Chat from '@/stores/chat2'
 import * as React from 'react'
-import {Box2, Box} from './box'
+import {Box2} from './box'
 import Icon from './icon'
 import Text from './text'
 import Button from './button'
@@ -11,7 +11,6 @@ import type * as T from '@/constants/types'
 import logger from '@/logger'
 
 const Kb = {
-  Box,
   Box2,
   Button,
   Icon,
@@ -77,7 +76,7 @@ const WaveButtonImpl = (props: Props) => {
 
   const hideButton = waved && !waving
   return (
-    <Kb.Box style={Styles.collapseStyles([props.style, styles.outer])}>
+    <Kb.Box2 direction="vertical" style={Styles.collapseStyles([props.style, styles.outer])}>
       {hideButton && (
         <Kb.Box2 direction="horizontal" centerChildren={true} style={styles.waved} gap="xtiny">
           <Kb.Icon type="iconfont-check" color={Styles.globalColors.black_50} sizeType="Tiny" />
@@ -97,7 +96,7 @@ const WaveButtonImpl = (props: Props) => {
         </Kb.Text>
         <Kb.NativeEmoji emojiName=":wave:" size={18} />
       </Kb.Button>
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
diff --git a/shared/common-adapters/with-tooltip.native.tsx b/shared/common-adapters/with-tooltip.native.tsx
index c5d5af2eb987..71d97dba4736 100644
--- a/shared/common-adapters/with-tooltip.native.tsx
+++ b/shared/common-adapters/with-tooltip.native.tsx
@@ -2,7 +2,7 @@ import * as C from '@/constants'
 import * as React from 'react'
 import {Portal} from './portal.native'
 import {useTimeout} from './use-timers'
-import Box from './box'
+import {Box2} from './box'
 import ClickableBox from './clickable-box'
 import Text from './text'
 import * as Styles from '@/styles'
@@ -17,7 +17,7 @@ import {useSafeAreaFrame} from 'react-native-safe-area-context'
 // "top center" for now.
 
 const Kb = {
-  Box,
+  Box2,
   ClickableBox,
   Portal,
   Text,
@@ -32,12 +32,13 @@ type Dims = {
 
 const FloatingBox = (props: {children: React.ReactNode; style: Styles.StylesCrossPlatform}) => (
   <Kb.Portal hostName="popup-root">
-    <Kb.Box
+    <Kb.Box2
+      direction="vertical"
       pointerEvents="box-none"
       style={Styles.collapseStyles([Styles.globalStyles.fillAbsolute, props.style])}
     >
       {props.children}
-    </Kb.Box>
+    </Kb.Box2>
   </Kb.Portal>
 )
 
diff --git a/shared/crypto/input.tsx b/shared/crypto/input.tsx
index 392908539ed1..61cd4614aa01 100644
--- a/shared/crypto/input.tsx
+++ b/shared/crypto/input.tsx
@@ -134,7 +134,7 @@ const TextInput = (props: TextProps) => {
   ) : null
 
   return (
-    <Kb.Box onClick={onFocusInput} style={styles.containerInputFocus}>
+    <Kb.ClickableBox onClick={onFocusInput} style={styles.containerInputFocus}>
       <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} style={styles.commonContainer}>
         <Kb.Box2
           direction={Kb.Styles.isMobile ? 'vertical' : 'horizontal'}
@@ -166,7 +166,7 @@ const TextInput = (props: TextProps) => {
         </Kb.Box2>
       </Kb.Box2>
       {!Kb.Styles.isMobile && clearButton}
-    </Kb.Box>
+    </Kb.ClickableBox>
   )
 }
 
diff --git a/shared/devices/device-page.tsx b/shared/devices/device-page.tsx
index f270c62a1b27..adfe805f391c 100644
--- a/shared/devices/device-page.tsx
+++ b/shared/devices/device-page.tsx
@@ -10,11 +10,11 @@ type OwnProps = {deviceID: string}
 const TimelineMarker = (p: {first: boolean; last: boolean; closedCircle: boolean}) => {
   const {first, last, closedCircle} = p
   return (
-    <Kb.Box style={styles.marker}>
-      <Kb.Box style={Kb.Styles.collapseStyles([styles.timelineLineTop, first && styles.invisible])} />
-      <Kb.Box style={closedCircle ? styles.circleClosed : styles.circleOpen} />
-      <Kb.Box style={Kb.Styles.collapseStyles([styles.timelineLineBottom, last && styles.invisible])} />
-    </Kb.Box>
+    <Kb.Box2 direction="vertical" alignItems="center">
+      <Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([styles.timelineLineTop, first && styles.invisible])} />
+      <Kb.Box2 direction="vertical" style={closedCircle ? styles.circleClosed : styles.circleOpen} />
+      <Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([styles.timelineLineBottom, last && styles.invisible])} />
+    </Kb.Box2>
   )
 }
 
@@ -37,7 +37,7 @@ const TimelineLabel = (p: {
         </Kb.Text>
       )}
       {!!subDesc && !subDescIsName && <Kb.Text type="BodySmall">{subDesc}</Kb.Text>}
-      {spacerOnBottom && <Kb.Box style={{height: 15}} />}
+      {spacerOnBottom && <Kb.Box2 direction="vertical" style={{height: 15}} />}
     </Kb.Box2>
   )
 }
@@ -175,10 +175,6 @@ const styles = Kb.Styles.styleSheetCreate(
         width: 8,
       },
       invisible: {opacity: 0},
-      marker: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'center',
-      },
       meta: {
         alignSelf: 'center',
         marginTop: 4,
diff --git a/shared/fs/banner/system-file-manager-integration-banner/container.tsx b/shared/fs/banner/system-file-manager-integration-banner/container.tsx
index 232e32b74c5d..3d921bf38001 100644
--- a/shared/fs/banner/system-file-manager-integration-banner/container.tsx
+++ b/shared/fs/banner/system-file-manager-integration-banner/container.tsx
@@ -135,11 +135,11 @@ const Banner = (props: BannerProps) => (
           {props.title}
         </Kb.Text>
         {props.body && (
-          <Kb.Box style={Kb.Styles.globalStyles.flexGrow}>
+          <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.flexGrow}>
             <Kb.Text type="Body" style={backgroundToTextStyle(props.background)}>
               {props.body}
             </Kb.Text>
-          </Kb.Box>
+          </Kb.Box2>
         )}
       </Kb.Box2>
       {props.bodyExtraComponent ?? false}
@@ -166,7 +166,7 @@ const Banner = (props: BannerProps) => (
         </Kb.Box2>
       )}
     </Kb.Box2>
-    <Kb.Box style={Kb.Styles.globalStyles.flexGrow} />
+    <Kb.Box2 direction="horizontal" style={Kb.Styles.globalStyles.flexGrow} />
     {!!props.onDismiss && (
       <Kb.Box2 direction="vertical" alignSelf="flex-start">
         <Kb.Icon
diff --git a/shared/fs/banner/system-file-manager-integration-banner/kext-permission-popup.tsx b/shared/fs/banner/system-file-manager-integration-banner/kext-permission-popup.tsx
index 68bfe35eb805..63d1387760ab 100644
--- a/shared/fs/banner/system-file-manager-integration-banner/kext-permission-popup.tsx
+++ b/shared/fs/banner/system-file-manager-integration-banner/kext-permission-popup.tsx
@@ -31,18 +31,18 @@ const InstallSecurityPrefs = () => {
           </Kb.Text>
           <Kb.Text type="Body">Open your macOS Security & Privacy Settings and follow these steps.</Kb.Text>
           <Kb.Box2 direction="horizontal">
-            <Kb.Box style={styles.illustrationContainer}>
+            <Kb.Box2 direction="vertical" style={styles.illustrationContainer}>
               <Kb.Icon style={styles.image} type="illustration-security-preferences" />
-            </Kb.Box>
+            </Kb.Box2>
             <Kb.Box2 direction="vertical" fullHeight={true} style={styles.numberListContainer}>
-              <Kb.Box style={Kb.Styles.globalStyles.flexBoxRow}>
+              <Kb.Box2 direction="horizontal">
                 <Kb.Text type="BodyBig" style={styles.numberList} negative={false}>
                   •
                 </Kb.Text>
                 <Kb.Text type="BodySemibold" style={styles.listText}>
                   {'Change "Allow applications downloaded from" to "App Store and identified developers"'}
                 </Kb.Text>
-              </Kb.Box>
+              </Kb.Box2>
             </Kb.Box2>
           </Kb.Box2>
           <Kb.Text type="BodySemiboldLink" onClick={openSecurityPrefs}>
@@ -50,7 +50,7 @@ const InstallSecurityPrefs = () => {
           </Kb.Text>
         </Kb.Box2>
         {driverStatus.type === T.FS.DriverStatusType.Disabled && driverStatus.isEnabling && (
-          <Kb.Box style={styles.enablingContainer}>
+          <Kb.Box2 direction="vertical" style={styles.enablingContainer}>
             <Kb.Box2
               direction="vertical"
               gap="small"
@@ -63,7 +63,7 @@ const InstallSecurityPrefs = () => {
                 Checking ...
               </Kb.Text>
             </Kb.Box2>
-          </Kb.Box>
+          </Kb.Box2>
         )}
       </>
     </Kb.PopupWrapper>
diff --git a/shared/fs/browser/rows/common.tsx b/shared/fs/browser/rows/common.tsx
index da8ea3946b01..9a89ae06beec 100644
--- a/shared/fs/browser/rows/common.tsx
+++ b/shared/fs/browser/rows/common.tsx
@@ -38,7 +38,9 @@ export const StillCommon = (
     onClick={props.onOpen}
     body={
       props.body || (
-        <Kb.Box
+        <Kb.Box2
+          direction="vertical"
+          fullWidth={true}
           style={Kb.Styles.collapseStyles([
             rowStyles.itemBox,
             props.writingToJournal && !props.uploadErrored && rowStyles.opacity30,
@@ -48,7 +50,7 @@ export const StillCommon = (
             {props.content}
           </Kb.Box2>
           {props.status || null}
-        </Kb.Box>
+        </Kb.Box2>
       )
     }
     onlyShowActionOnHover="fade"
@@ -74,7 +76,6 @@ export const rowStyles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       itemBox: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
         flex: 1,
         justifyContent: 'center',
         minWidth: 0,
diff --git a/shared/fs/browser/rows/editing.tsx b/shared/fs/browser/rows/editing.tsx
index 99ac037113a7..1d2fba13a49f 100644
--- a/shared/fs/browser/rows/editing.tsx
+++ b/shared/fs/browser/rows/editing.tsx
@@ -42,12 +42,12 @@ const Editing = React.memo(function Editing({editID}: Props) {
         />
       }
       icon={
-        <Kb.Box style={rowStyles.pathItemIcon}>
+        <Kb.Box2 direction="vertical" style={rowStyles.pathItemIcon}>
           <Kb.Icon type="icon-folder-32" />
-        </Kb.Box>
+        </Kb.Box2>
       }
       body={
-        <Kb.Box key="main" style={rowStyles.itemBox}>
+        <Kb.Box2 direction="vertical" key="main" style={rowStyles.itemBox}>
           <Kb.PlainInput
             value={filename}
             placeholder={edit.originalName}
@@ -58,10 +58,10 @@ const Editing = React.memo(function Editing({editID}: Props) {
             autoFocus={true}
             onKeyUp={onKeyUp}
           />
-        </Kb.Box>
+        </Kb.Box2>
       }
       action={
-        <Kb.Box key="right" style={styles.rightBox}>
+        <Kb.Box2 direction="horizontal" alignItems="center" key="right" style={styles.rightBox}>
           {!!edit.error && (
             <Kb.WithTooltip tooltip={edit.error} showOnPressMobile={true}>
               <Kb.Icon type="iconfont-exclamation" color={Kb.Styles.globalColors.red} />
@@ -82,7 +82,7 @@ const Editing = React.memo(function Editing({editID}: Props) {
             hoverColor={Kb.Styles.globalColors.black}
             style={styles.iconCancel}
           />
-        </Kb.Box>
+        </Kb.Box2>
       }
     />
   )
@@ -104,8 +104,6 @@ const styles = Kb.Styles.styleSheetCreate(
         },
       }),
       rightBox: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
-        alignItems: 'center',
         flexShrink: 1,
         justifyContent: 'flex-end',
       },
diff --git a/shared/fs/browser/rows/placeholder.tsx b/shared/fs/browser/rows/placeholder.tsx
index f21847aef538..b8acb0e2e0ab 100644
--- a/shared/fs/browser/rows/placeholder.tsx
+++ b/shared/fs/browser/rows/placeholder.tsx
@@ -10,7 +10,7 @@ const PlaceholderRow = ({type}: PlaceholderProps) => (
   <Kb.ListItem2
     type="Small"
     firstItem={true /* we add divider in Rows */}
-    statusIcon={<Kb.Box />}
+    statusIcon={<Kb.Box2 direction="vertical" />}
     icon={
       <Kb.Icon
         type={type === T.FS.PathType.Folder ? 'icon-folder-placeholder-32' : 'icon-file-placeholder-32'}
@@ -18,9 +18,9 @@ const PlaceholderRow = ({type}: PlaceholderProps) => (
       />
     }
     body={
-      <Kb.Box style={rowStyles.itemBox}>
+      <Kb.Box2 direction="vertical" style={rowStyles.itemBox}>
         <Kb.Placeholder style={styles.placeholder} />
-      </Kb.Box>
+      </Kb.Box2>
     }
   />
 )
diff --git a/shared/fs/browser/rows/rows.tsx b/shared/fs/browser/rows/rows.tsx
index 788835eeeecc..f6b5b9c25383 100644
--- a/shared/fs/browser/rows/rows.tsx
+++ b/shared/fs/browser/rows/rows.tsx
@@ -18,13 +18,13 @@ export type Props = {
 }
 
 export const WrapRow = ({children}: {children: React.ReactNode}) => (
-  <Kb.Box style={styles.rowContainer}>
+  <Kb.Box2 direction="vertical" fullWidth={true} style={styles.rowContainer}>
     {children}
     <Kb.Divider key="divider" style={styles.divider} />
-  </Kb.Box>
+  </Kb.Box2>
 )
 
-const EmptyRow = () => <Kb.Box style={styles.rowContainer} />
+const EmptyRow = () => <Kb.Box2 direction="vertical" fullWidth={true} style={styles.rowContainer} />
 
 const Rows = React.memo(function Rows(props: Props & {listKey: string}) {
   const {items, emptyMode, destinationPickerIndex, listKey} = props
@@ -187,7 +187,6 @@ const styles = Kb.Styles.styleSheetCreate(
         ...Kb.Styles.globalStyles.flexGrow,
       },
       rowContainer: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
         flexShrink: 0,
         height: normalRowHeight,
       },
diff --git a/shared/fs/browser/rows/tlf.tsx b/shared/fs/browser/rows/tlf.tsx
index 1092deddbaff..63728625d969 100644
--- a/shared/fs/browser/rows/tlf.tsx
+++ b/shared/fs/browser/rows/tlf.tsx
@@ -53,13 +53,13 @@ const TLFContainer = (p: OwnProps) => {
   )
 
   const avatar = (
-    <Kb.Box style={styles.avatarBox}>
+    <Kb.Box2 direction="horizontal" style={styles.avatarBox}>
       {FS.isTeamPath(path) ? (
         <Kb.Avatar size={32} isTeam={true} teamname={usernames[0]} />
       ) : (
         <Kb.AvatarLine maxShown={4} size={32} layout="horizontal" usernames={usernames} />
       )}
-    </Kb.Box>
+    </Kb.Box2>
   )
 
   return (
@@ -70,7 +70,7 @@ const TLFContainer = (p: OwnProps) => {
         onOpen={disabled ? undefined : onOpen}
         mixedMode={mixedMode}
         writingToJournal={false}
-        body={Kb.Styles.isMobile ? <Kb.Box style={rowStyles.itemBox}>{content}</Kb.Box> : undefined}
+        body={Kb.Styles.isMobile ? <Kb.Box2 direction="vertical" fullWidth={true} style={rowStyles.itemBox}>{content}</Kb.Box2> : undefined}
         content={
           !Kb.Styles.isMobile ? (
             <>
diff --git a/shared/fs/common/item-icon.tsx b/shared/fs/common/item-icon.tsx
index 8b0d42789caf..c163b7045d15 100644
--- a/shared/fs/common/item-icon.tsx
+++ b/shared/fs/common/item-icon.tsx
@@ -78,21 +78,21 @@ const TlfTypeIcon = (props: TlfTypeIconProps) => {
   const badgeCount = FS.computeBadgeNumberForTlfList(tlfList)
   const badgeStyle = badgeStyles[getIconSizeString(props.size)]
   return (
-    <Kb.Box style={props.style}>
+    <Kb.Box2 direction="vertical" style={props.style}>
       {getTlfTypeIcon(props.size, props.tlfType)}
       {props.badgeOverride ? (
-        <Kb.Box style={styles.badgeContainer}>
+        <Kb.Box2 direction="vertical" style={styles.badgeContainer}>
           <Kb.Icon fixOverdraw={true} type={props.badgeOverride} style={badgeStyle.rightBottomBadge} />
           color={Kb.Styles.globalColors.greyDarker}
-        </Kb.Box>
+        </Kb.Box2>
       ) : (
         !!badgeCount && (
-          <Kb.Box style={styles.badgeContainer}>
+          <Kb.Box2 direction="vertical" style={styles.badgeContainer}>
             <Kb.Badge badgeNumber={badgeCount} badgeStyle={badgeStyle.numberBadge} />
-          </Kb.Box>
+          </Kb.Box2>
         )
       )}
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -104,23 +104,23 @@ type TlfIconProps = {
 }
 
 const TlfIcon = (props: TlfIconProps) => (
-  <Kb.Box style={props.style}>
+  <Kb.Box2 direction="vertical" style={props.style}>
     {props.tlfTypeForFolderIconOverride ? (
       getTlfTypeIcon(props.size, props.tlfTypeForFolderIconOverride)
     ) : (
       <Kb.Icon fixOverdraw={true} type={icons.folder[getIconSizeString(props.size)]} />
     )}
     {!!props.badgeOverride && (
-      <Kb.Box style={styles.badgeContainer}>
+      <Kb.Box2 direction="vertical" style={styles.badgeContainer}>
         <Kb.Icon
           fixOverdraw={true}
           type={props.badgeOverride}
           style={badgeStyles[getIconSizeString(props.size)].rightBottomBadge}
           color={Kb.Styles.globalColors.greyDarker}
         />
-      </Kb.Box>
+      </Kb.Box2>
     )}
-  </Kb.Box>
+  </Kb.Box2>
 )
 
 type InTlfItemIconProps = {
@@ -139,7 +139,7 @@ const InTlfIcon = (props: InTlfItemIconProps) => {
   const badgeStyle = badgeStyles[getIconSizeString(props.size)]
   const badgeIcon = props.badgeOverride || (downloadIntent && 'icon-addon-file-downloading')
   return (
-    <Kb.Box style={props.style}>
+    <Kb.Box2 direction="vertical" style={props.style}>
       {pathItem.type === T.FS.PathType.Folder ? (
         props.tlfTypeForFolderIconOverride ? (
           getTlfTypeIcon(props.size, props.tlfTypeForFolderIconOverride)
@@ -150,15 +150,15 @@ const InTlfIcon = (props: InTlfItemIconProps) => {
         <Kb.Icon type={icons.file[getIconSizeString(props.size)]} />
       )}
       {badgeIcon ? (
-        <Kb.Box style={styles.badgeContainer}>
+        <Kb.Box2 direction="vertical" style={styles.badgeContainer}>
           <Kb.Icon
             type={badgeIcon}
             style={badgeStyle.rightBottomBadge}
             color={Kb.Styles.globalColors.greyDarker}
           />
-        </Kb.Box>
+        </Kb.Box2>
       ) : null}
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
diff --git a/shared/fs/common/kbfs-path.tsx b/shared/fs/common/kbfs-path.tsx
index c49cd7cd96e7..4fa72cf7dbec 100644
--- a/shared/fs/common/kbfs-path.tsx
+++ b/shared/fs/common/kbfs-path.tsx
@@ -87,14 +87,15 @@ const KbfsPath = (props: Props) => {
       {popup}
     </>
   ) : (
-    <Kb.Box
+    <Kb.Box2
+      direction="vertical"
       style={styles.textContainer}
       onMouseOver={() => setShowing(true)}
       onMouseLeave={() => setShowing(false)}
     >
       {text}
       {popup}
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
diff --git a/shared/fs/common/path-item-action/header.tsx b/shared/fs/common/path-item-action/header.tsx
index bad49b1b3836..62a5b18adc17 100644
--- a/shared/fs/common/path-item-action/header.tsx
+++ b/shared/fs/common/path-item-action/header.tsx
@@ -6,7 +6,7 @@ import PathInfo from '../path-info'
 export type Props = {path: T.FS.Path}
 
 const Header = (props: Props) => (
-  <Kb.Box
+  <Kb.ClickableBox
     onClick={
       // This box is necessary as otherwise the click event propagates into
       // the ListItem2 backed row.
@@ -16,7 +16,7 @@ const Header = (props: Props) => (
     <PathItemInfo path={props.path} containerStyle={styles.container} />
     <Kb.Divider />
     <PathInfo path={props.path} containerStyle={styles.container} />
-  </Kb.Box>
+  </Kb.ClickableBox>
 )
 
 export default Header
diff --git a/shared/fs/common/path-item-info.tsx b/shared/fs/common/path-item-info.tsx
index bd9d22d388f1..c02b1c3d2440 100644
--- a/shared/fs/common/path-item-info.tsx
+++ b/shared/fs/common/path-item-info.tsx
@@ -93,7 +93,7 @@ const PathItemInfo = (props: Props) => {
       <SoftErrorBanner path={props.path} />
       <Kb.Box2 direction="vertical" fullWidth={true} centerChildren={true} style={props.containerStyle}>
         <ItemIcon path={props.path} size={48} style={styles.pathItemIcon} />
-        <Kb.Box style={styles.nameTextBox}>{name}</Kb.Box>
+        <Kb.Box2 direction="horizontal" style={styles.nameTextBox}>{name}</Kb.Box2>
         {pathItem.type === T.FS.PathType.File && (
           <Kb.Text type="BodySmall">{FS.humanReadableFileSize(pathItem.size)}</Kb.Text>
         )}
@@ -111,7 +111,6 @@ const styles = Kb.Styles.styleSheetCreate(
     ({
       nameTextBox: Kb.Styles.platformStyles({
         common: {
-          ...Kb.Styles.globalStyles.flexBoxRow,
           flexWrap: 'wrap',
           justifyContent: 'center',
         },
diff --git a/shared/fs/common/path-status-icon.tsx b/shared/fs/common/path-status-icon.tsx
index e2094df33885..429e843b0d84 100644
--- a/shared/fs/common/path-status-icon.tsx
+++ b/shared/fs/common/path-status-icon.tsx
@@ -98,7 +98,7 @@ const PathStatusIcon = React.memo(function PathStatusIcon(props: Props) {
   ) : props.isTlfType ? (
     <Kb.Icon fixOverdraw={true} type="iconfont-root" sizeType="Small" style={styles.iconFont} />
   ) : (
-    <Kb.Box style={styles.placeholder} />
+    <Kb.Box2 direction="vertical" style={styles.placeholder} />
   )
 })
 
diff --git a/shared/fs/common/pie-slice.tsx b/shared/fs/common/pie-slice.tsx
index 8490f2dad3d8..da52293a3d7b 100644
--- a/shared/fs/common/pie-slice.tsx
+++ b/shared/fs/common/pie-slice.tsx
@@ -11,9 +11,10 @@ const Slice = (props: Props) => {
   const styleFilled = props.negative ? styles.filledNegative : styles.filledPositive
   const styleUnfilled = props.negative ? styles.unfilledNegative : styles.unfilledPositive
   return (
-    <Kb.Box style={Kb.Styles.collapseStyles([styles.container, ...(props.style ? [props.style] : [])])}>
-      <Kb.Box style={Kb.Styles.collapseStyles([styles.wholeUnfilled, styleUnfilled])} />
-      <Kb.Box
+    <Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([styles.container, ...(props.style ? [props.style] : [])])}>
+      <Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([styles.wholeUnfilled, styleUnfilled])} />
+      <Kb.Box2
+        direction="vertical"
         style={Kb.Styles.collapseStyles([
           styles.rotateContainer,
           Kb.Styles.platformStyles({
@@ -22,14 +23,15 @@ const Slice = (props: Props) => {
           }),
         ])}
       >
-        <Kb.Box style={Kb.Styles.collapseStyles([styles.leftFilled, styleFilled])} />
-      </Kb.Box>
-      <Kb.Box
+        <Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([styles.leftFilled, styleFilled])} />
+      </Kb.Box2>
+      <Kb.Box2
+        direction="vertical"
         style={Kb.Styles.collapseStyles(
           props.degrees <= 180 ? [styles.leftUnfilled, styleUnfilled] : [styles.rightFilled, styleFilled]
         )}
       />
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
diff --git a/shared/fs/common/sfmi-popup.tsx b/shared/fs/common/sfmi-popup.tsx
index 33aa3bbe952b..db25ac7e9cef 100644
--- a/shared/fs/common/sfmi-popup.tsx
+++ b/shared/fs/common/sfmi-popup.tsx
@@ -29,7 +29,7 @@ const SFMIPopup = (props: Props) => {
 
       return (
         <Kb.Overlay style={styles.popup} attachTo={attachTo} onHidden={hidePopup} position="bottom right">
-          <Kb.Box
+          <Kb.ClickableBox
             style={styles.container}
             onClick={e => {
               e.stopPropagation()
@@ -56,7 +56,7 @@ const SFMIPopup = (props: Props) => {
                 onClick={enableDriver}
               />
             </Kb.Box2>
-          </Kb.Box>
+          </Kb.ClickableBox>
         </Kb.Overlay>
       )
     },
diff --git a/shared/fs/filepreview/bare-preview.tsx b/shared/fs/filepreview/bare-preview.tsx
index f9d95b402178..cc4a6f083ec3 100644
--- a/shared/fs/filepreview/bare-preview.tsx
+++ b/shared/fs/filepreview/bare-preview.tsx
@@ -15,27 +15,27 @@ const ConnectedBarePreview = (ownProps: OwnProps) => {
 
   const onUrlError = Kbfs.useFsFileContext(path)
   return (
-    <Kb.Box style={styles.container}>
-      <Kb.Box style={styles.header}>
+    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
+      <Kb.Box2 direction="horizontal" alignItems="center" fullWidth={true} style={styles.header}>
         <Kb.ClickableBox onClick={onBack} style={styles.closeBox}>
           <Kb.Text type="Body" style={styles.text}>
             Close
           </Kb.Text>
         </Kb.ClickableBox>
-      </Kb.Box>
-      <Kb.Box style={styles.contentContainer}>
+      </Kb.Box2>
+      <Kb.Box2 direction="vertical" fullWidth={true} style={styles.contentContainer}>
         <View path={path} onUrlError={onUrlError} />
-      </Kb.Box>
-      <Kb.Box style={styles.footer}>
+      </Kb.Box2>
+      <Kb.Box2 direction="horizontal" alignItems="center" fullWidth={true} style={styles.footer}>
         <Kbfs.PathItemAction
           path={path}
           clickable={{actionIconWhite: true, type: 'icon'}}
           initView={T.FS.PathItemActionMenuView.Root}
           mode="screen"
         />
-      </Kb.Box>
+      </Kb.Box2>
       <Footer path={path} onlyShowProofBroken={true} />
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -49,7 +49,6 @@ const styles = Kb.Styles.styleSheetCreate(
       },
       container: Kb.Styles.platformStyles({
         common: {
-          ...Kb.Styles.globalStyles.flexBoxColumn,
           ...Kb.Styles.globalStyles.flexGrow,
           backgroundColor: Kb.Styles.globalColors.blackOrBlack,
         },
@@ -58,14 +57,10 @@ const styles = Kb.Styles.styleSheetCreate(
         ...Kb.Styles.globalStyles.flexGrow,
       },
       footer: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
-        alignItems: 'center',
         height: 48,
         paddingLeft: Kb.Styles.globalMargins.tiny,
       },
       header: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
-        alignItems: 'center',
         paddingLeft: Kb.Styles.globalMargins.tiny,
       },
       text: {
diff --git a/shared/fs/filepreview/view.tsx b/shared/fs/filepreview/view.tsx
index aad5f4757683..3a5fef1d5ba8 100644
--- a/shared/fs/filepreview/view.tsx
+++ b/shared/fs/filepreview/view.tsx
@@ -57,14 +57,14 @@ const FilePreviewViewContent = ({path, onUrlError}: Props) => {
   }
 
   const reloadBanner = loadedLastModifiedTimestamp !== pathItem.lastModifiedTimestamp && (
-    <Kb.Box style={styles.bannerContainer}>
+    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.bannerContainer}>
       <Kb.Banner color="blue" style={styles.banner}>
         <Kb.BannerParagraph
           bannerColor="blue"
           content={['The content of this file has updated. ', {onClick: reload, text: 'Reload'}, '.']}
         />
       </Kb.Banner>
-    </Kb.Box>
+    </Kb.Box2>
   )
 
   // Electron caches <img> aggressively and doesn't really probe server to
@@ -141,7 +141,6 @@ const styles = Kb.Styles.styleSheetCreate(
       },
       bannerContainer: {
         position: 'relative',
-        width: '100%',
         zIndex: 200, // needed for mobile
       },
       container: {
diff --git a/shared/fs/footer/download.tsx b/shared/fs/footer/download.tsx
index 9cf91a45cefb..37210707c49c 100644
--- a/shared/fs/footer/download.tsx
+++ b/shared/fs/footer/download.tsx
@@ -14,16 +14,17 @@ export type Props = {
 
 const getProgress = (dlState: T.FS.DownloadState) => (
   <Kb.Box2 style={styles.progress} direction="horizontal" fullWidth={true} centerChildren={true} gap="xtiny">
-    <Kb.Box style={styles.tubeBox}>
-      <Kb.Box style={styles.tube} />
-      <Kb.Box
+    <Kb.Box2 direction="vertical" style={styles.tubeBox}>
+      <Kb.Box2 direction="vertical" style={styles.tube} />
+      <Kb.Box2
+        direction="vertical"
         style={Kb.Styles.collapseStyles([
           styles.tube,
           styles.tubeStuffing,
           {width: `${Math.round(100 * dlState.progress)}%`},
         ])}
       />
-    </Kb.Box>
+    </Kb.Box2>
     <Kb.Text type="BodyTinySemibold" negative={true}>
       {formatDurationFromNowTo(dlState.endEstimate)}
     </Kb.Text>
diff --git a/shared/fs/footer/downloads.tsx b/shared/fs/footer/downloads.tsx
index f00942abd8b0..1274ba5ccc38 100644
--- a/shared/fs/footer/downloads.tsx
+++ b/shared/fs/footer/downloads.tsx
@@ -64,7 +64,7 @@ const Desktop = () => {
             />
           </Kb.WithTooltip>
         )}
-        <Kb.Box style={styles.space} />
+        <Kb.Box2 direction="horizontal" style={styles.space} />
         <Kb.WithTooltip tooltip="Open Downloads folder">
           <Kb.Icon
             type="iconfont-folder-downloads"
diff --git a/shared/fs/footer/upload.native.tsx b/shared/fs/footer/upload.native.tsx
index 49af71f1f450..0f4831c511b9 100644
--- a/shared/fs/footer/upload.native.tsx
+++ b/shared/fs/footer/upload.native.tsx
@@ -112,14 +112,14 @@ const Upload = (props: UploadProps) => {
       {!!debugToggleShow && <Kb.Button onClick={debugToggleShow} label="Toggle" />}
       {showing && (
         <NativeAnimated.View style={{position: 'relative', top: uploadTop}}>
-          <Kb.Box style={styles.backgroundBox}>
+          <Kb.Box2 direction="vertical" fullWidth={true} style={styles.backgroundBox}>
             <NativeAnimated.Image
               resizeMode="repeat"
               source={isDarkMode ? darkPatternImage : lightPatternImage}
               style={{...styles.backgroundImage, marginTop: backgroundTop}}
             />
-          </Kb.Box>
-          <Kb.Box style={styles.box}>
+          </Kb.Box2>
+          <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={styles.box}>
             <Kb.Text key="files" type="BodySmallSemibold" style={styles.text}>
               {files
                 ? `Encrypting and uploading ${files} files...`
@@ -130,7 +130,7 @@ const Upload = (props: UploadProps) => {
             {!!timeLeft.length && (
               <Kb.Text key="left" type="BodyTiny" style={styles.text}>{`${timeLeft} left`}</Kb.Text>
             )}
-          </Kb.Box>
+          </Kb.Box2>
         </NativeAnimated.View>
       )}
     </>
@@ -144,7 +144,6 @@ const styles = Kb.Styles.styleSheetCreate(
         common: {
           height: 48,
           overflow: 'hidden',
-          width: '100%',
         },
       }),
       backgroundImage: {
@@ -152,10 +151,7 @@ const styles = Kb.Styles.styleSheetCreate(
         width: '100%',
       },
       box: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'center',
         height: 48,
-        justifyContent: 'center',
         marginTop: -48,
       },
       text: {
diff --git a/shared/fs/nav-header/mobile-header.tsx b/shared/fs/nav-header/mobile-header.tsx
index 3868d0e25ba9..8c34bb4c5f94 100644
--- a/shared/fs/nav-header/mobile-header.tsx
+++ b/shared/fs/nav-header/mobile-header.tsx
@@ -65,7 +65,7 @@ const NavMobileHeader = (props: Props) => {
             {pop ? (
               <Kb.BackButton badgeNumber={0 /* TODO KBFS-4109 */} onClick={pop} style={styles.backButton} />
             ) : null}
-            <Kb.Box style={styles.gap} />
+            <Kb.Box2 direction="horizontal" style={styles.gap} />
             <Actions path={props.path} onTriggerFilterMobile={triggerFilterMobile} />
           </Kb.Box2>
         )}
diff --git a/shared/fs/top-bar/index.tsx b/shared/fs/top-bar/index.tsx
index 9f5f55ee48cb..317916708293 100644
--- a/shared/fs/top-bar/index.tsx
+++ b/shared/fs/top-bar/index.tsx
@@ -22,7 +22,7 @@ const TopBar = (props: Props) => (
   >
     {!Kb.Styles.isMobile && <Sort path={props.path} />}
     <Loading path={props.path} />
-    <Kb.Box style={styles.flex} />
+    <Kb.Box2 direction="horizontal" style={styles.flex} />
     {T.FS.getPathLevel(props.path) === 3 && <SyncToggle tlfPath={props.path} />}
   </Kb.Box2>
 )
diff --git a/shared/git/delete-repo.tsx b/shared/git/delete-repo.tsx
index 1be08287171f..efdb94fa110a 100644
--- a/shared/git/delete-repo.tsx
+++ b/shared/git/delete-repo.tsx
@@ -56,20 +56,20 @@ const Container = (ownProps: OwnProps) => {
   return (
     <Kb.PopupWrapper onCancel={onClose} title="Delete repo?">
       <Kb.ScrollView>
-        <Kb.Box style={styles.container}>
+        <Kb.Box2 direction="vertical" alignItems="center" fullWidth={true} style={styles.container}>
           {!!error && (
-            <Kb.Box style={styles.error}>
+            <Kb.Box2 direction="vertical" style={styles.error}>
               <Kb.Text type="Body" negative={true}>
                 {error.message}
               </Kb.Text>
-            </Kb.Box>
+            </Kb.Box2>
           )}
           <Kb.Text center={true} type="Header" style={{marginBottom: 27}}>
             Are you sure you want to delete this {teamname ? 'team ' : ''}
             repository?
           </Kb.Text>
           <Kb.Icon type={teamname ? 'icon-repo-team-delete-48' : 'icon-repo-personal-delete-48'} />
-          <Kb.Box style={styles.avatarBox}>
+          <Kb.Box2 direction="horizontal" alignItems="center" style={styles.avatarBox}>
             {!!teamname && (
               <Kb.Avatar
                 isTeam={true}
@@ -84,7 +84,7 @@ const Container = (ownProps: OwnProps) => {
             >
               {teamname ? `${teamname}/${_name}` : _name}
             </Kb.Text>
-          </Kb.Box>
+          </Kb.Box2>
           <Kb.Text center={true} type="Body" style={{marginBottom: Kb.Styles.globalMargins.medium}}>
             {teamname
               ? 'This will permanently delete your remote files and history, and all members of the team will be notified.  This action cannot be undone.'
@@ -125,7 +125,7 @@ const Container = (ownProps: OwnProps) => {
               waitingKey={waitingKey}
             />
           </Kb.ButtonBar>
-        </Kb.Box>
+        </Kb.Box2>
       </Kb.ScrollView>
     </Kb.PopupWrapper>
   )
@@ -133,8 +133,6 @@ const Container = (ownProps: OwnProps) => {
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
   avatarBox: {
-    ...Kb.Styles.globalStyles.flexBoxRow,
-    alignItems: 'center',
     marginBottom: Kb.Styles.globalMargins.medium,
   },
   buttonBar: {alignItems: 'center'},
@@ -149,8 +147,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   },
   container: Kb.Styles.platformStyles({
     common: {
-      ...Kb.Styles.globalStyles.flexBoxColumn,
-      alignItems: 'center',
       flex: 1,
       height: '100%',
     },
diff --git a/shared/git/new-repo.tsx b/shared/git/new-repo.tsx
index 2672731dc6a7..e771eccd7320 100644
--- a/shared/git/new-repo.tsx
+++ b/shared/git/new-repo.tsx
@@ -57,21 +57,21 @@ const Container = (ownProps: OwnProps) => {
 
     if (item === NewTeamSentry) {
       return (
-        <Kb.Box
+        <Kb.Box2
           key={NewTeamSentry}
+          direction="horizontal"
+          alignItems="center"
           style={{
-            ...Kb.Styles.globalStyles.flexBoxRow,
-            alignItems: 'center',
             paddingLeft: Kb.Styles.globalMargins.small,
           }}
         >
           <Kb.Text type="Header">New team...</Kb.Text>
-        </Kb.Box>
+        </Kb.Box2>
       )
     }
 
     return (
-      <Kb.Box2 direction="vertical" key={item} style={styles.avatarBox}>
+      <Kb.Box2 direction="horizontal" key={item} alignItems="center" style={styles.avatarBox}>
         <Kb.Avatar
           isTeam={true}
           teamname={item}
@@ -117,13 +117,13 @@ const Container = (ownProps: OwnProps) => {
   return (
     <Kb.PopupWrapper onCancel={onClose}>
       <Kb.ScrollView>
-        <Kb.Box style={styles.container}>
+        <Kb.Box2 direction="vertical" fullWidth={true} alignItems="center" style={styles.container}>
           {!!error && (
-            <Kb.Box style={styles.error}>
+            <Kb.Box2 direction="vertical" fullWidth={true} style={styles.error}>
               <Kb.Text type="Body" negative={true}>
                 {error.message}
               </Kb.Text>
-            </Kb.Box>
+            </Kb.Box2>
           )}
           <Kb.Text type="Header" style={{marginBottom: 27}}>
             New {isTeam ? 'team' : 'personal'} git repository
@@ -175,7 +175,7 @@ const Container = (ownProps: OwnProps) => {
               waitingKey={waitingKey}
             />
           </Kb.ButtonBar>
-        </Kb.Box>
+        </Kb.Box2>
       </Kb.ScrollView>
     </Kb.PopupWrapper>
   )
@@ -186,8 +186,6 @@ const styles = Kb.Styles.styleSheetCreate(
     ({
       addIcon: {marginBottom: 27},
       avatarBox: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
-        alignItems: 'center',
         paddingLeft: Kb.Styles.globalMargins.xsmall,
         paddingRight: Kb.Styles.globalMargins.small,
         width: '100%',
@@ -199,8 +197,6 @@ const styles = Kb.Styles.styleSheetCreate(
       },
       container: Kb.Styles.platformStyles({
         common: {
-          ...Kb.Styles.globalStyles.flexBoxColumn,
-          alignItems: 'center',
           flex: 1,
           height: '100%',
           padding: Kb.Styles.isMobile ? Kb.Styles.globalMargins.tiny : Kb.Styles.globalMargins.large,
diff --git a/shared/git/row.tsx b/shared/git/row.tsx
index af0167090a53..ae42d3340397 100644
--- a/shared/git/row.tsx
+++ b/shared/git/row.tsx
@@ -93,17 +93,16 @@ const ConnectedRow = React.memo(function ConnectedRow(ownProps: OwnProps) {
   const url = gitURL
   // TODO use ListItem2
   return (
-    <Kb.Box style={styles.container}>
-      <Kb.Box style={styles.containerMobile}>
-        <Kb.Box
-          style={{
-            ...styles.rowStyle,
-            ...(expanded
-              ? {
-                  backgroundColor: Kb.Styles.globalColors.white,
-                }
-              : {}),
-          }}
+    <Kb.Box2 direction="vertical" fullWidth={true}>
+      <Kb.Box2 direction="vertical" fullWidth={true} style={styles.containerMobile}>
+        <Kb.Box2
+          direction="vertical"
+          fullWidth={true}
+          alignItems="flex-start"
+          style={Kb.Styles.collapseStyles([
+            styles.rowStyle,
+            expanded && {backgroundColor: Kb.Styles.globalColors.white},
+          ])}
         >
           <Kb.ClickableBox
             onClick={onToggleExpand}
@@ -111,7 +110,7 @@ const ConnectedRow = React.memo(function ConnectedRow(ownProps: OwnProps) {
             hoverColor={Kb.Styles.isMobile ? undefined : Kb.Styles.globalColors.transparent}
             underlayColor={Kb.Styles.globalColors.transparent}
           >
-            <Kb.Box style={styles.rowTop}>
+            <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.rowTop}>
               <Kb.Icon
                 type={expanded ? 'iconfont-caret-down' : 'iconfont-caret-right'}
                 style={styles.iconCaret}
@@ -130,14 +129,15 @@ const ConnectedRow = React.memo(function ConnectedRow(ownProps: OwnProps) {
               {isNew && (
                 <Kb.Meta title="new" style={styles.meta} backgroundColor={Kb.Styles.globalColors.orange} />
               )}
-            </Kb.Box>
+            </Kb.Box2>
           </Kb.ClickableBox>
           {expanded && (
-            <Kb.Box style={styles.rowBottom}>
-              <Kb.Box
+            <Kb.Box2 direction="vertical" fullWidth={true} style={styles.rowBottom}>
+              <Kb.Box2
+                direction="horizontal"
+                fullWidth={true}
+                alignItems="center"
                 style={{
-                  ...Kb.Styles.globalStyles.flexBoxRow,
-                  alignItems: 'center',
                   maxWidth: '100%',
                   position: 'relative',
                 }}
@@ -146,12 +146,13 @@ const ConnectedRow = React.memo(function ConnectedRow(ownProps: OwnProps) {
                 <Kb.Box2 direction="horizontal" style={styles.copyTextContainer}>
                   <Kb.CopyText text={url} containerStyle={{width: '100%'}} />
                 </Kb.Box2>
-              </Kb.Box>
-              <Kb.Box
+              </Kb.Box2>
+              <Kb.Box2
+                direction="horizontal"
+                fullWidth={true}
+                alignItems="center"
+                alignSelf="flex-start"
                 style={{
-                  ...Kb.Styles.globalStyles.flexBoxRow,
-                  alignItems: 'center',
-                  alignSelf: 'flex-start',
                   flexWrap: 'wrap',
                   marginTop: Kb.Styles.globalMargins.tiny,
                 }}
@@ -167,7 +168,7 @@ const ConnectedRow = React.memo(function ConnectedRow(ownProps: OwnProps) {
                   />
                 )}
                 {!!teamname && !!lastEditUser && (
-                  <Kb.Box style={{marginLeft: 2}}>
+                  <Kb.Box2 direction="vertical" style={{marginLeft: 2}}>
                     <Kb.ConnectedUsernames
                       type="BodySmallBold"
                       underline={true}
@@ -175,7 +176,7 @@ const ConnectedRow = React.memo(function ConnectedRow(ownProps: OwnProps) {
                       usernames={lastEditUser}
                       onUsernameClicked={() => openUserTracker(lastEditUser)}
                     />
-                  </Kb.Box>
+                  </Kb.Box2>
                 )}
                 {Kb.Styles.isMobile && <Kb.Text type="BodySmall">. </Kb.Text>}
                 <Kb.Text type="BodySmall">
@@ -190,9 +191,9 @@ const ConnectedRow = React.memo(function ConnectedRow(ownProps: OwnProps) {
                   </Kb.Text>
                   <Kb.Text type="BodySmall">.</Kb.Text>
                 </Kb.Text>
-              </Kb.Box>
+              </Kb.Box2>
               {!!teamname && (
-                <Kb.Box style={{...Kb.Styles.globalStyles.flexBoxRow, alignItems: 'center'}}>
+                <Kb.Box2 direction="horizontal" alignItems="center">
                   {canEdit && (
                     <Kb.Checkbox
                       checked={!chatDisabled}
@@ -218,7 +219,7 @@ const ConnectedRow = React.memo(function ConnectedRow(ownProps: OwnProps) {
                         : `Pushes are announced in ${teamname}${channelNameToString(channelName)}`}
                     </Kb.Text>
                   )}
-                </Kb.Box>
+                </Kb.Box2>
               )}
               <Kb.Box2
                 direction="horizontal"
@@ -264,30 +265,23 @@ const ConnectedRow = React.memo(function ConnectedRow(ownProps: OwnProps) {
                   />
                 )}
               </Kb.Box2>
-            </Kb.Box>
+            </Kb.Box2>
           )}
-        </Kb.Box>
-      </Kb.Box>
-      <Kb.Box
-        style={{
-          ...(expanded
-            ? {
-                backgroundColor: Kb.Styles.globalColors.blueLighter3,
-                height: 6,
-              }
-            : {}),
-        }}
+        </Kb.Box2>
+      </Kb.Box2>
+      <Kb.Box2
+        direction="vertical"
+        fullWidth={true}
+        style={expanded ? styles.expandedSpacer : undefined}
       />
-    </Kb.Box>
+    </Kb.Box2>
   )
 })
 
 const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
-      container: {width: '100%'},
       containerMobile: Kb.Styles.platformStyles({
-        common: {width: '100%'},
         isMobile: {
           paddingLeft: Kb.Styles.globalMargins.small,
           paddingRight: Kb.Styles.globalMargins.small,
@@ -305,6 +299,10 @@ const styles = Kb.Styles.styleSheetCreate(
         ...Kb.Styles.globalStyles.italic,
         color: Kb.Styles.globalColors.black_50,
       },
+      expandedSpacer: {
+        backgroundColor: Kb.Styles.globalColors.blueLighter3,
+        height: 6,
+      },
       iconCaret: Kb.Styles.platformStyles({
         common: {
           marginBottom: 2,
@@ -319,10 +317,8 @@ const styles = Kb.Styles.styleSheetCreate(
         marginLeft: 6,
       },
       rowBottom: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
         paddingBottom: Kb.Styles.globalMargins.tiny,
         paddingLeft: Kb.Styles.globalMargins.medium,
-        width: '100%',
       },
       rowClick: {
         ...Kb.Styles.globalStyles.flexBoxColumn,
@@ -338,19 +334,13 @@ const styles = Kb.Styles.styleSheetCreate(
       },
 
       rowStyle: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'flex-start',
         flexShrink: 0,
         minHeight: Kb.Styles.globalMargins.large,
         paddingLeft: 0,
-        width: '100%',
       },
       rowTop: Kb.Styles.platformStyles({
         common: {
-          ...Kb.Styles.globalStyles.flexBoxRow,
-          alignItems: 'center',
           marginBottom: Kb.Styles.globalMargins.xtiny,
-          width: '100%',
         },
         isElectron: {paddingLeft: Kb.Styles.globalMargins.tiny},
       }),
diff --git a/shared/git/select-channel.tsx b/shared/git/select-channel.tsx
index a4b40c3af1af..2b1da5b21a7a 100644
--- a/shared/git/select-channel.tsx
+++ b/shared/git/select-channel.tsx
@@ -38,14 +38,14 @@ const SelectChannel = (ownProps: OwnProps) => {
           <Kb.Box2 direction="vertical" fullWidth={true} style={styles.innerContainer} gap="tiny">
             <Kb.Text type="Header">Select a channel</Kb.Text>
             {channelNames.map(name => (
-              <Kb.Box key={name} style={styles.row}>
+              <Kb.Box2 key={name} direction="horizontal" fullWidth={true} style={styles.row}>
                 <Kb.RadioButton
                   label={name}
                   selected={selected === name}
                   style={styles.radioButton}
                   onSelect={selected => selected && setSelected(name)}
                 />
-              </Kb.Box>
+              </Kb.Box2>
             ))}
           </Kb.Box2>
         </Kb.ScrollView>
@@ -71,7 +71,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     marginLeft: Kb.Styles.globalMargins.tiny,
   },
   row: {
-    ...Kb.Styles.globalStyles.flexBoxRow,
     paddingLeft: Kb.Styles.globalMargins.tiny,
     paddingRight: Kb.Styles.globalMargins.tiny,
   },
diff --git a/shared/login/forms/container.native.tsx b/shared/login/forms/container.native.tsx
index 386e00905714..ecc88699501f 100644
--- a/shared/login/forms/container.native.tsx
+++ b/shared/login/forms/container.native.tsx
@@ -5,7 +5,7 @@ import NativeScrollView from '@/common-adapters/scroll-view.native'
 const Container = ({children, style, outerStyle}: Props) => {
   return (
     <NativeScrollView style={{...styles.container, ...outerStyle}}>
-      <Kb.Box style={{...styles.innerContainer, ...style}}>{children}</Kb.Box>
+      <Kb.Box2 direction="vertical" fullWidth={true} style={{...styles.innerContainer, ...style}}>{children}</Kb.Box2>
     </NativeScrollView>
   )
 }
@@ -20,7 +20,6 @@ const styles = Kb.Styles.styleSheetCreate(
         paddingRight: Kb.Styles.globalMargins.medium,
       },
       innerContainer: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
         flexGrow: 1,
         marginTop: Kb.Styles.globalMargins.medium,
       },
diff --git a/shared/login/relogin/dropdown.native.tsx b/shared/login/relogin/dropdown.native.tsx
index 4ba86b5e3776..38cc33b62ad1 100644
--- a/shared/login/relogin/dropdown.native.tsx
+++ b/shared/login/relogin/dropdown.native.tsx
@@ -99,30 +99,30 @@ const Dropdown = (props: Props) => {
   if (Kb.Styles.isIOS) {
     return (
       <TouchableWithoutFeedback onPress={() => showModal(true)}>
-        <Kb.Box style={styles.container}>
+        <Kb.Box2 direction="horizontal" alignItems="center" fullWidth={true} style={styles.container}>
           <Modal
             animationType="slide"
             transparent={true}
             visible={modalVisible}
             onRequestClose={() => showModal(false)}
           >
-            <Kb.Box style={styles.pickerContainer}>
+            <Kb.Box2 direction="vertical" fullWidth={true} style={styles.pickerContainer}>
               <TouchableWithoutFeedback onPress={() => showModal(false)}>
-                <Kb.Box style={{flex: 1}} />
+                <Kb.Box2 direction="vertical" style={{flex: 1}} />
               </TouchableWithoutFeedback>
               {picker}
-            </Kb.Box>
+            </Kb.Box2>
           </Modal>
           {labelAndCaret}
-        </Kb.Box>
+        </Kb.Box2>
       </TouchableWithoutFeedback>
     )
   } else {
     return (
-      <Kb.Box style={styles.container}>
+      <Kb.Box2 direction="horizontal" alignItems="center" fullWidth={true} style={styles.container}>
         {labelAndCaret}
         {picker}
-      </Kb.Box>
+      </Kb.Box2>
     )
   }
 }
@@ -131,8 +131,6 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       container: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
-        alignItems: 'center',
         backgroundColor: Kb.Styles.globalColors.white,
         borderColor: Kb.Styles.globalColors.black_10,
         borderRadius: Kb.Styles.borderRadius,
diff --git a/shared/login/relogin/index.native.tsx b/shared/login/relogin/index.native.tsx
index 58f5598f4a8d..75bcc4c729cb 100644
--- a/shared/login/relogin/index.native.tsx
+++ b/shared/login/relogin/index.native.tsx
@@ -21,18 +21,20 @@ const LoginRender = (props: Props) => {
   }
 
   return (
-    <Kb.Box
+    <Kb.Box2
+      direction="vertical"
+      fullWidth={true}
       onLayout={evt => setScrollViewHeight(evt.nativeEvent.layout.height)}
       style={Kb.Styles.globalStyles.flexOne}
     >
       <NativeScrollView style={styles.scrollView} contentContainerStyle={{minHeight: scrollViewHeight}}>
-        <Kb.Box style={styles.container}>
+        <Kb.Box2 direction="vertical" fullWidth={true} alignItems="center" style={styles.container}>
           {C.isAndroid && !C.isDeviceSecureAndroid && !C.isAndroidNewerThanM && (
-            <Kb.Box style={styles.deviceNotSecureContainer}>
+            <Kb.Box2 direction="vertical" fullWidth={true} style={styles.deviceNotSecureContainer}>
               <Kb.Text center={true} type="Body" negative={true} style={styles.deviceNotSecureText}>
                 {"Since you don't have a lock screen, you'll have to type your password everytime."}
               </Kb.Text>
-            </Kb.Box>
+            </Kb.Box2>
           )}
           {!!props.error && <Kb.Banner color="red">{props.error}</Kb.Banner>}
           <UserCard username={props.selectedUser} outerStyle={styles.card} style={styles.cardInner}>
@@ -90,9 +92,9 @@ const LoginRender = (props: Props) => {
               style={{flexGrow: 0}}
             />
           </Kb.Box2>
-        </Kb.Box>
+        </Kb.Box2>
       </NativeScrollView>
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -107,8 +109,6 @@ const styles = Kb.Styles.styleSheetCreate(
         isTablet: {paddingBottom: 0},
       }),
       container: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'center',
         backgroundColor: Kb.Styles.globalColors.blueGrey,
         flex: 1,
       },
diff --git a/shared/login/user-card/index.native.tsx b/shared/login/user-card/index.native.tsx
index 979959a8d36e..8cdfcebcd51b 100644
--- a/shared/login/user-card/index.native.tsx
+++ b/shared/login/user-card/index.native.tsx
@@ -5,9 +5,10 @@ const UserCard = (p: Props) => {
   const {avatarBackgroundStyle, avatarSize = 96, outerStyle, onAvatarClicked} = p
   const {username, style, children, lighterPlaceholders} = p
   return (
-    <Kb.Box style={Kb.Styles.collapseStyles([styles.container, outerStyle])}>
-      <Kb.Box style={styles.avatar}>
-        <Kb.Box
+    <Kb.Box2 direction="vertical" fullWidth={true} style={Kb.Styles.collapseStyles([styles.container, outerStyle])}>
+      <Kb.Box2 direction="vertical" alignItems="center" alignSelf="stretch" style={styles.avatar}>
+        <Kb.Box2
+          direction="vertical"
           style={Kb.Styles.collapseStyles([
             styles.avatarBackground,
             {
@@ -23,17 +24,14 @@ const UserCard = (p: Props) => {
           username={username}
           lighterPlaceholders={lighterPlaceholders}
         />
-      </Kb.Box>
-      <Kb.Box style={Kb.Styles.collapseStyles([styles.inside, style])}>{children}</Kb.Box>
-    </Kb.Box>
+      </Kb.Box2>
+      <Kb.Box2 direction="vertical" fullWidth={true} style={Kb.Styles.collapseStyles([styles.inside, style])}>{children}</Kb.Box2>
+    </Kb.Box2>
   )
 }
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
   avatar: {
-    ...Kb.Styles.globalStyles.flexBoxColumn,
-    alignItems: 'center',
-    alignSelf: 'stretch',
     marginTop: 0,
   },
   avatarBackground: {
@@ -43,20 +41,14 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   },
   container: Kb.Styles.platformStyles({
     common: {
-      ...Kb.Styles.globalStyles.flexBoxColumn,
-      alignItems: 'stretch',
-      width: '100%',
     },
     isTablet: {
       maxWidth: 410,
     },
   }),
   inside: {
-    ...Kb.Styles.globalStyles.flexBoxColumn,
-    alignItems: 'stretch',
     justifyContent: 'flex-start',
     padding: 16,
-    width: '100%',
   },
 }))
 
diff --git a/shared/menubar/files.desktop.tsx b/shared/menubar/files.desktop.tsx
index 1182ceb25a41..ea320164a0b2 100644
--- a/shared/menubar/files.desktop.tsx
+++ b/shared/menubar/files.desktop.tsx
@@ -37,9 +37,9 @@ export const FileUpdate = (props: FileUpdateProps) => (
     <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.fileUpdateRow} alignItems="flex-start">
       <Kb.Icon type="icon-file-16" style={styles.iconStyle} />
       {props.uploading && (
-        <Kb.Box style={styles.iconBadgeBox}>
+        <Kb.Box2 direction="vertical" style={styles.iconBadgeBox}>
           <Kb.Icon type="icon-addon-file-uploading" style={styles.iconBadge} />
-        </Kb.Box>
+        </Kb.Box2>
       )}
       <Filename type="Body" path={props.path} />
     </Kb.Box2>
diff --git a/shared/menubar/index.desktop.tsx b/shared/menubar/index.desktop.tsx
index e2961e3a28b4..c81b75b075ee 100644
--- a/shared/menubar/index.desktop.tsx
+++ b/shared/menubar/index.desktop.tsx
@@ -41,7 +41,8 @@ export type Props = Pick<DeserializeProps, 'remoteTlfUpdates' | 'conversationsTo
 const ArrowTick = () => {
   const isDarkMode = useColorScheme() === 'dark'
   return (
-    <Kb.Box
+    <Kb.Box2
+      direction="vertical"
       style={Kb.Styles.collapseStyles([
         styles.arrowTick,
         {borderBottomColor: isDarkMode ? '#2d2d2d' : Kb.Styles.globalColors.blueDark},
@@ -205,20 +206,24 @@ const IconBar = (p: Props & {showBadges?: boolean}) => {
   const badgeCountInMenu = badgesInMenu.reduce((acc, val) => navBadges.get(val) ?? 0 + acc, 0)
   const isDarkMode = useColorScheme() === 'dark'
   return (
-    <Kb.Box
+    <Kb.Box2
+      direction="horizontal"
+      fullWidth={true}
+      alignItems="center"
       style={Kb.Styles.collapseStyles([
         styles.topRow,
         {backgroundColor: isDarkMode ? '#2d2d2d' : Kb.Styles.globalColors.blueDark},
       ])}
     >
-      <Kb.Box style={styles.headerBadgesContainer}>
+      <Kb.Box2 direction="horizontal" alignItems="center" style={styles.headerBadgesContainer}>
         {showBadges
           ? badgeTypesInHeader.map(tab => (
               <BadgeIcon key={tab} tab={tab} countMap={navBadges} openApp={openApp} />
             ))
           : null}
-      </Kb.Box>
-      <Kb.Box
+      </Kb.Box2>
+      <Kb.Box2
+        direction="vertical"
         style={Kb.Styles.platformStyles({
           isElectron: {
             ...Kb.Styles.desktopStyles.clickable,
@@ -236,9 +241,9 @@ const IconBar = (p: Props & {showBadges?: boolean}) => {
           ref={popupAnchor}
         />
         {!!badgeCountInMenu && <Kb.Badge badgeNumber={badgeCountInMenu} badgeStyle={styles.badge} />}
-      </Kb.Box>
+      </Kb.Box2>
       {popup}
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -269,7 +274,7 @@ const LoggedIn = (p: Props) => {
           </Kb.Box2>
         )}
       </Kb.ScrollView>
-      <Kb.Box style={styles.footer}>
+      <Kb.Box2 direction="vertical" style={styles.footer}>
         <UploadWithCountdown
           endEstimate={endEstimate}
           isOnline={kbfsDaemonStatus.onlineStatus !== T.FS.KbfsDaemonOnlineStatus.Offline}
@@ -278,7 +283,7 @@ const LoggedIn = (p: Props) => {
           totalSyncingBytes={totalSyncingBytes}
           smallMode={true}
         />
-      </Kb.Box>
+      </Kb.Box2>
     </>
   )
 }
@@ -355,10 +360,10 @@ const TabView = (p: {title: string; iconType: Kb.IconType; count?: number}) => {
   const {count, iconType, title} = p
   return (
     <Kb.Box2 direction="horizontal" fullWidth={true} style={{alignItems: 'center'}}>
-      <Kb.Box style={{marginRight: Kb.Styles.globalMargins.tiny, position: 'relative'}}>
+      <Kb.Box2 direction="vertical" style={{marginRight: Kb.Styles.globalMargins.tiny, position: 'relative'}}>
         <Kb.Icon type={iconType} color={Kb.Styles.globalColors.blue} sizeType="Big" />
         {!!count && <Kb.Badge badgeNumber={count} badgeStyle={styles.badge} />}
-      </Kb.Box>
+      </Kb.Box2>
       <Kb.Text className="title" type="BodySemibold" style={Kb.Styles.collapseStyles([{color: undefined}])}>
         {title}
       </Kb.Text>
@@ -389,7 +394,8 @@ const BadgeIcon = (p: {tab: Tabs; countMap: ReadonlyMap<string, number>; openApp
   }
 
   return (
-    <Kb.Box
+    <Kb.Box2
+      direction="vertical"
       style={Kb.Styles.platformStyles({
         isElectron: {...Kb.Styles.desktopStyles.clickable, position: 'relative'},
       })}
@@ -403,7 +409,7 @@ const BadgeIcon = (p: {tab: Tabs; countMap: ReadonlyMap<string, number>; openApp
         type={iconType}
       />
       {!!count && <Kb.Badge badgeNumber={count} badgeStyle={styles.badge} />}
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -432,8 +438,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   flexOne: {flexGrow: 1},
   footer: {width: 360},
   headerBadgesContainer: {
-    ...Kb.Styles.globalStyles.flexBoxRow,
-    alignItems: 'center',
     flex: 1,
     justifyContent: 'center',
     marginLeft: 24 + 8,
@@ -444,8 +448,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   },
   navIcons: {paddingLeft: Kb.Styles.globalMargins.xtiny, paddingRight: Kb.Styles.globalMargins.xtiny},
   topRow: {
-    ...Kb.Styles.globalStyles.flexBoxRow,
-    alignItems: 'center',
     borderTopLeftRadius: Kb.Styles.globalMargins.xtiny,
     borderTopRightRadius: Kb.Styles.globalMargins.xtiny,
     flex: 1,
diff --git a/shared/package.json b/shared/package.json
index f9a28d172ca9..d6aa96a9d201 100644
--- a/shared/package.json
+++ b/shared/package.json
@@ -50,7 +50,7 @@
     "rn-jsbuild-ios": "mkdir -p ios/dist && react-native bundle --platform ios --dev false --entry-file index.ios.js --bundle-output ios/dist/main.jsbundle --sourcemap-output ios/dist/main.jsbundle.sourcemap",
     "rn-jsbuild-android": "mkdir -p android/dist && react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/dist/main.jsbundle --sourcemap-output android/dist/main.jsbundle.sourcemap",
     "tsc": "./node_modules/.bin/tsgo --project ./tsconfig.json",
-    "modules": "yarn install --pure-lockfile --ignore-optional --ignore-scripts && yarn postinstall && cd node_modules/electron && yarn postinstall",
+    "modules": "yarn install --pure-lockfile --ignore-optional --ignore-scripts && yarn postinstall && cd node_modules/electron && yarn postinstall && cd ../.. && cd node_modules/@typescript/native-preview && yarn install",
     "log-to-trace": "yarn _node desktop/yarn-helper/log-to-trace",
     "pod-clean": "pod cache clean --all ; rm -rf ios/build; rm -rf ios/Pods; rm -f ios/.xcode.env.local; rm -rf ../rnmodules/react-native-kb/node_modules",
     "pod-install": "cd ios; pod install --repo-update",
diff --git a/shared/people/follow-suggestions.tsx b/shared/people/follow-suggestions.tsx
index fc52381711c9..018ce1512e86 100644
--- a/shared/people/follow-suggestions.tsx
+++ b/shared/people/follow-suggestions.tsx
@@ -8,7 +8,7 @@ export type Props = {
 }
 
 const FollowSuggestions = (props: Props) => (
-  <Kb.Box style={styles.container}>
+  <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
     <Kb.Text type="BodySmallSemibold" style={styles.text}>
       Consider following...
     </Kb.Text>
@@ -29,13 +29,12 @@ const FollowSuggestions = (props: Props) => (
         />
       ))}
     </Kb.ScrollView>
-  </Kb.Box>
+  </Kb.Box2>
 )
 export default FollowSuggestions
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
   container: {
-    ...Kb.Styles.globalStyles.flexBoxColumn,
     backgroundColor: Kb.Styles.globalColors.fastBlank,
     paddingTop: Kb.Styles.globalMargins.tiny,
     position: 'relative',
diff --git a/shared/people/index.shared.tsx b/shared/people/index.shared.tsx
index e51585aa6339..94e6e091a21c 100644
--- a/shared/people/index.shared.tsx
+++ b/shared/people/index.shared.tsx
@@ -114,7 +114,7 @@ const ResentEmailVerificationBanner = React.memo(function ResentEmailVerificatio
 
 export const PeoplePageList = React.memo(function PeoplePageList(props: Props) {
   return (
-    <Kb.Box style={{...Kb.Styles.globalStyles.flexBoxColumn, position: 'relative', width: '100%'}}>
+    <Kb.Box2 direction="vertical" fullWidth={true} style={{position: 'relative'}}>
       <EmailVerificationBanner />
       <ResentEmailVerificationBanner />
       {props.newItems
@@ -132,6 +132,6 @@ export const PeoplePageList = React.memo(function PeoplePageList(props: Props) {
 
       <FollowSuggestions suggestions={props.followSuggestions} />
       {props.oldItems.map((item): React.ReactNode => itemToComponent(item, props))}
-    </Kb.Box>
+    </Kb.Box2>
   )
 })
diff --git a/shared/people/item.tsx b/shared/people/item.tsx
index 1706067f3f0c..19c99a2bf86e 100644
--- a/shared/people/item.tsx
+++ b/shared/people/item.tsx
@@ -25,11 +25,11 @@ export type Props = {
 }
 
 const PeopleItem = (props: Props) => (
-  <Kb.Box style={Kb.Styles.collapseStyles([styles.container, props.badged && styles.containerBadged])}>
+  <Kb.Box2 direction="horizontal" fullWidth={true} style={Kb.Styles.collapseStyles([styles.container, props.badged && styles.containerBadged])}>
     {!!props.icon && (
-      <Kb.Box key="icon" style={Kb.Styles.collapseStyles([styles.iconContainer, props.iconContainerStyle])}>
+      <Kb.Box2 key="icon" direction="vertical" style={Kb.Styles.collapseStyles([styles.iconContainer, props.iconContainerStyle])}>
         {props.icon}
-      </Kb.Box>
+      </Kb.Box2>
     )}
 
     <Kb.Box2
@@ -43,16 +43,18 @@ const PeopleItem = (props: Props) => (
           props.buttons.length > 0 &&
           props.buttons.map((b, idx) =>
             React.isValidElement(b) ? (
-              <Kb.Box key={idx} style={styles.button}>
+              <Kb.Box2 key={idx} direction="vertical" style={styles.button}>
                 {b}
-              </Kb.Box>
+              </Kb.Box2>
             ) : (
               <Kb.Button key={b.label} small={true} style={styles.button} {...b} />
             )
           )}
       </Kb.Box2>
     </Kb.Box2>
-    <Kb.Box
+    <Kb.Box2
+      direction="horizontal"
+      alignItems="center"
       style={Kb.Styles.collapseStyles([
         styles.timestampContainer,
         props.format === 'multi' && styles.timestampContainerMulti,
@@ -62,8 +64,8 @@ const PeopleItem = (props: Props) => (
       {props.badged && (
         <Kb.Badge badgeStyle={styles.badge} height={Kb.Styles.globalMargins.tiny} leftRightPadding={0} />
       )}
-    </Kb.Box>
-  </Kb.Box>
+    </Kb.Box2>
+  </Kb.Box2>
 )
 export default PeopleItem
 
@@ -84,7 +86,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   },
   container: Kb.Styles.platformStyles({
     common: {
-      ...Kb.Styles.globalStyles.flexBoxRow,
       backgroundColor: Kb.Styles.globalColors.white,
       borderBottomColor: Kb.Styles.globalColors.black_10,
       borderBottomWidth: 1,
@@ -105,8 +106,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   },
   timestampContainer: Kb.Styles.platformStyles({
     common: {
-      ...Kb.Styles.globalStyles.flexBoxRow,
-      alignItems: 'center',
       alignSelf: 'center',
       marginLeft: 'auto',
       marginRight: Kb.Styles.globalMargins.small,
diff --git a/shared/pinentry/index.desktop.tsx b/shared/pinentry/index.desktop.tsx
index 9fb6d42d9168..561e6871f524 100644
--- a/shared/pinentry/index.desktop.tsx
+++ b/shared/pinentry/index.desktop.tsx
@@ -38,9 +38,9 @@ const Pinentry = (props: Props) => {
   const isPaperKey = props.type === T.RPCGen.PassphraseType.paperKey
 
   return (
-    <Kb.Box style={styles.container}>
+    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
       <DragHeader icon={false} title="" onClose={props.onCancel} windowDragging={true} />
-      <Kb.Box style={{...Kb.Styles.globalStyles.flexBoxColumn, paddingLeft: 30, paddingRight: 30}}>
+      <Kb.Box2 direction="vertical" fullWidth={true} style={{paddingLeft: 30, paddingRight: 30}}>
         <Kb.Text type="Body" center={true}>
           {props.prompt}
         </Kb.Text>
@@ -83,15 +83,14 @@ const Pinentry = (props: Props) => {
           onClick={handleSubmit}
           disabled={!password}
         />
-      </Kb.Box>
-    </Kb.Box>
+      </Kb.Box2>
+    </Kb.Box2>
   )
 }
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
   alignment: {marginLeft: Kb.Styles.globalMargins.xsmall},
   container: {
-    ...Kb.Styles.globalStyles.flexBoxColumn,
     backgroundColor: Kb.Styles.globalColors.white,
     paddingBottom: Kb.Styles.globalMargins.medium,
   },
diff --git a/shared/profile/edit-avatar/index.desktop.tsx b/shared/profile/edit-avatar/index.desktop.tsx
index 883b30795fc9..ba1a5a76ac12 100644
--- a/shared/profile/edit-avatar/index.desktop.tsx
+++ b/shared/profile/edit-avatar/index.desktop.tsx
@@ -166,11 +166,11 @@ const EditAvatar = (_p: Props) => {
         ])}
       >
         {type === 'team' && createdTeam && !wizard && (
-          <Kb.Box style={styles.createdBanner}>
+          <Kb.Box2 direction="vertical" fullWidth={true} style={styles.createdBanner}>
             <Kb.Text type="BodySmallSemibold" negative={true}>
               Hoorah! Your team {teamname} was created.
             </Kb.Text>
-          </Kb.Box>
+          </Kb.Box2>
         )}
         <Kb.Text center={true} type="Body" style={styles.instructions}>
           Drag and drop a {type} avatar or{' '}
@@ -179,7 +179,7 @@ const EditAvatar = (_p: Props) => {
           </Kb.Text>{' '}
           for one.
         </Kb.Text>
-        <Kb.Box
+        <Kb.ClickableBox
           className={Kb.Styles.classNames('hoverbox', {filled: loading !== 'loaded'})}
           onClick={!loading ? filePickerOpen : undefined}
           style={{
@@ -211,7 +211,7 @@ const EditAvatar = (_p: Props) => {
               type="iconfont-camera"
             />
           )}
-        </Kb.Box>
+        </Kb.ClickableBox>
         {loading === 'loaded' ? <Kb.Text type="Body">Click to select. Scroll to zoom.</Kb.Text> : null}
       </div>
     </Kb.Modal>
diff --git a/shared/profile/edit-avatar/index.native.tsx b/shared/profile/edit-avatar/index.native.tsx
index 30ef727a7bc2..e91766d8fa3a 100644
--- a/shared/profile/edit-avatar/index.native.tsx
+++ b/shared/profile/edit-avatar/index.native.tsx
@@ -147,7 +147,7 @@ const AvatarUploadWrapper = (p: Props) => {
       >
         <Kb.Box2 direction="vertical" style={styles.wizardContainer} fullHeight={true} gap="small">
           {renderImageZoomer()}
-          <Kb.Box style={styles.flexReallyGrow} />
+          <Kb.Box2 direction="vertical" style={styles.flexReallyGrow} />
           <Kb.Button
             label={selectedImage ? 'Pick a new avatar' : 'Pick an avatar'}
             mode="Secondary"
@@ -165,8 +165,8 @@ const AvatarUploadWrapper = (p: Props) => {
           <Kb.Text type="Body">{error}</Kb.Text>
         </Kb.Banner>
       ) : null}
-      <Kb.Box style={styles.container}>
-        <Kb.Box>{renderImageZoomer()}</Kb.Box>
+      <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
+        <Kb.Box2 direction="vertical">{renderImageZoomer()}</Kb.Box2>
         <Kb.ButtonBar direction="column">
           <Kb.WaitingButton
             fullWidth={true}
@@ -176,7 +176,7 @@ const AvatarUploadWrapper = (p: Props) => {
             waitingKey={waitingKey}
           />
         </Kb.ButtonBar>
-      </Kb.Box>
+      </Kb.Box2>
     </Kb.Box2>
   )
 }
diff --git a/shared/profile/generic/proofs-list.tsx b/shared/profile/generic/proofs-list.tsx
index 92608611f7d4..28be4cc9ec4e 100644
--- a/shared/profile/generic/proofs-list.tsx
+++ b/shared/profile/generic/proofs-list.tsx
@@ -32,14 +32,14 @@ const Container = () => {
 
   return (
     <Kb.PopupWrapper onCancel={onCancel}>
-      <Kb.Box style={styles.mobileFlex}>
+      <Kb.Box2 direction="vertical" fullWidth={true} style={styles.mobileFlex}>
         <Kb.Box2 direction="vertical" style={styles.container}>
           {!Kb.Styles.isMobile && (
             <Kb.Text center={true} type="Header" style={styles.header}>
               Prove your...
             </Kb.Text>
           )}
-          <Kb.Box style={styles.inputContainer}>
+          <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.inputContainer}>
             <Kb.Icon
               type="iconfont-search"
               color={Kb.Styles.globalColors.black_50}
@@ -55,7 +55,7 @@ const Container = () => {
               style={styles.text}
               value={filter}
             />
-          </Kb.Box>
+          </Kb.Box2>
           <Kb.Box2 direction="vertical" fullWidth={true} style={styles.listContainer}>
             <Providers
               filter={filter}
@@ -67,7 +67,7 @@ const Container = () => {
             <Kb.Divider />
           </Kb.Box2>
         </Kb.Box2>
-      </Kb.Box>
+      </Kb.Box2>
     </Kb.PopupWrapper>
   )
 }
@@ -208,8 +208,6 @@ const styles = Kb.Styles.styleSheetCreate(
       },
       iconArrow: {marginRight: Kb.Styles.globalMargins.small},
       inputContainer: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
-        alignItems: 'center',
         backgroundColor: Kb.Styles.globalColors.black_10,
         borderRadius: Kb.Styles.borderRadius,
         marginBottom: Kb.Styles.globalMargins.xsmall,
diff --git a/shared/profile/generic/shared.tsx b/shared/profile/generic/shared.tsx
index 8d75636ce461..4dcd2da9008e 100644
--- a/shared/profile/generic/shared.tsx
+++ b/shared/profile/generic/shared.tsx
@@ -24,7 +24,8 @@ export const SiteIcon = (props: SiteIconProps) => {
       style={Kb.Styles.collapseStyles([style, props.style])}
     />
   ) : (
-    <Kb.Box
+    <Kb.Box2
+      direction="vertical"
       style={Kb.Styles.collapseStyles([
         style,
         props.style,
diff --git a/shared/profile/pgp/import/index.desktop.tsx b/shared/profile/pgp/import/index.desktop.tsx
index b8d93f7d2422..c021e87e3c8e 100644
--- a/shared/profile/pgp/import/index.desktop.tsx
+++ b/shared/profile/pgp/import/index.desktop.tsx
@@ -17,13 +17,13 @@ export default function Import() {
         To register your existing PGP public key on Keybase, please run the following command from your
         terminal:
       </Kb.Text>
-      <Kb.Box style={styleTerminal}>
+      <Kb.Box2 direction="vertical" fullWidth={true} style={styleTerminal}>
         <Kb.Text type="TerminalComment">{"# import a key from gpg's key chain"}</Kb.Text>
         <Kb.Text type="Terminal">keybase pgp select</Kb.Text>
         <Kb.Text type="TerminalEmpty" />
         <Kb.Text type="TerminalComment"># for more options</Kb.Text>
         <Kb.Text type="Terminal">keybase pgp help</Kb.Text>
-      </Kb.Box>
+      </Kb.Box2>
     </Modal>
   )
 }
@@ -38,8 +38,6 @@ const styleBody = {
 }
 
 const styleTerminal = {
-  ...Kb.Styles.globalStyles.flexBoxColumn,
-  alignItems: 'stretch',
   backgroundColor: Kb.Styles.globalColors.blueDarker2,
   borderRadius: 4,
   boxSizing: 'content-box',
diff --git a/shared/profile/post-proof.tsx b/shared/profile/post-proof.tsx
index 74f1cc9fd63c..f58be7fe5e74 100644
--- a/shared/profile/post-proof.tsx
+++ b/shared/profile/post-proof.tsx
@@ -157,7 +157,7 @@ const WebDescription = ({platformUserName}: {platformUserName: string}) => {
   const root = `${platformUserName}/keybase.txt`
   const wellKnown = `${platformUserName}/.well-known/keybase.txt`
   return (
-    <Kb.Box style={Kb.Styles.globalStyles.flexBoxColumn}>
+    <Kb.Box2 direction="vertical" fullWidth={true}>
       <Kb.Text center={true} type="BodySemibold">
         Please serve the text below <Kb.Text type="BodySemiboldItalic">exactly as it appears</Kb.Text>
         {" at one of these URL's."}
@@ -178,7 +178,7 @@ const WebDescription = ({platformUserName}: {platformUserName: string}) => {
       >
         {wellKnown}
       </Kb.Text>
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
diff --git a/shared/profile/revoke.tsx b/shared/profile/revoke.tsx
index aa34864f41ae..9b28c1f324a1 100644
--- a/shared/profile/revoke.tsx
+++ b/shared/profile/revoke.tsx
@@ -32,17 +32,17 @@ const RevokeProof = (ownProps: OwnProps) => {
   return (
     <Modal onCancel={onCancel} skipButton={true}>
       {!!errorMessage && (
-        <Kb.Box style={styles.errorBanner}>
+        <Kb.Box2 direction="vertical" alignItems="center" fullWidth={true} style={styles.errorBanner}>
           <Kb.Text center={!Kb.Styles.isMobile} style={styles.errorBannerText} type="BodySemibold">
             {errorMessage}
           </Kb.Text>
-        </Kb.Box>
+        </Kb.Box2>
       )}
-      <Kb.Box style={styles.contentContainer}>
-        <Kb.Box style={styles.positionRelative}>
+      <Kb.Box2 direction="vertical" centerChildren={true} style={styles.contentContainer}>
+        <Kb.Box2 direction="vertical" style={styles.positionRelative}>
           <SiteIcon set={icon} full={true} style={styles.siteIcon} />
           <Kb.Icon type="icon-proof-broken" style={styles.revokeIcon} />
-        </Kb.Box>
+        </Kb.Box2>
         <Kb.Text center={!Kb.Styles.isMobile} style={styles.platformUsername} type="Header">
           {platformHandle}
         </Kb.Text>
@@ -66,7 +66,7 @@ const RevokeProof = (ownProps: OwnProps) => {
             waitingKey={C.waitingKeyProfile}
           />
         </Kb.ButtonBar>
-      </Kb.Box>
+      </Kb.Box2>
     </Modal>
   )
 }
@@ -75,18 +75,13 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       contentContainer: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'center',
         flexGrow: 1,
-        justifyContent: 'center',
         margin: Kb.Styles.isMobile ? Kb.Styles.globalMargins.tiny : Kb.Styles.globalMargins.large,
         maxWidth: 512,
         textAlign: Kb.Styles.isMobile ? undefined : 'center',
       },
       descriptionText: {marginTop: Kb.Styles.globalMargins.medium},
       errorBanner: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'center',
         backgroundColor: Kb.Styles.globalColors.red,
         justifyContent: 'center',
         minHeight: Kb.Styles.globalMargins.large,
diff --git a/shared/profile/showcase-team-offer.tsx b/shared/profile/showcase-team-offer.tsx
index 12c43db82598..d23cd99028f4 100644
--- a/shared/profile/showcase-team-offer.tsx
+++ b/shared/profile/showcase-team-offer.tsx
@@ -113,7 +113,7 @@ const TeamRow = (p: RowProps) => {
 }
 
 const ShowcaseTeamOfferHeader = () => (
-  <Kb.Box style={styles.headerContainer}>
+  <Kb.Box2 direction="vertical" fullWidth={true} style={styles.headerContainer}>
     {!Kb.Styles.isMobile && (
       <Kb.Box2 direction="vertical" fullWidth={true} centerChildren={true} style={styles.headerText}>
         <Kb.Text type="Header">{"Feature the teams you're in"}</Kb.Text>
@@ -125,7 +125,7 @@ const ShowcaseTeamOfferHeader = () => (
         members will be public.
       </Kb.Text>
     </Kb.InfoNote>
-  </Kb.Box>
+  </Kb.Box2>
 )
 
 const styles = Kb.Styles.styleSheetCreate(
diff --git a/shared/provision/code-page/qr-scan/lines.tsx b/shared/provision/code-page/qr-scan/lines.tsx
index 31b8b9b01305..f1db23d7fa5f 100644
--- a/shared/provision/code-page/qr-scan/lines.tsx
+++ b/shared/provision/code-page/qr-scan/lines.tsx
@@ -8,31 +8,39 @@ const QRScanLines = ({canScan, color}: {canScan: boolean; color?: Kb.Styles.Colo
   const s = [styles.common, {backgroundColor: color}]
   return canScan ? (
     <>
-      <Kb.Box
+      <Kb.Box2
+        direction="vertical"
         style={Kb.Styles.collapseStyles([...s, {height: long, left: padding, top: padding, width: small}])}
       />
-      <Kb.Box
+      <Kb.Box2
+        direction="vertical"
         style={Kb.Styles.collapseStyles([...s, {height: small, left: padding, top: padding, width: long}])}
       />
-      <Kb.Box
+      <Kb.Box2
+        direction="vertical"
         style={Kb.Styles.collapseStyles([...s, {height: long, right: padding, top: padding, width: small}])}
       />
-      <Kb.Box
+      <Kb.Box2
+        direction="vertical"
         style={Kb.Styles.collapseStyles([...s, {height: small, right: padding, top: padding, width: long}])}
       />
-      <Kb.Box
+      <Kb.Box2
+        direction="vertical"
         style={Kb.Styles.collapseStyles([...s, {bottom: padding, height: long, left: padding, width: small}])}
       />
-      <Kb.Box
+      <Kb.Box2
+        direction="vertical"
         style={Kb.Styles.collapseStyles([...s, {bottom: padding, height: small, left: padding, width: long}])}
       />
-      <Kb.Box
+      <Kb.Box2
+        direction="vertical"
         style={Kb.Styles.collapseStyles([
           ...s,
           {bottom: padding, height: long, right: padding, width: small},
         ])}
       />
-      <Kb.Box
+      <Kb.Box2
+        direction="vertical"
         style={Kb.Styles.collapseStyles([
           ...s,
           {bottom: padding, height: small, right: padding, width: long},
diff --git a/shared/router-v2/header/index.desktop.tsx b/shared/router-v2/header/index.desktop.tsx
index 5107b454d820..cbe3fd35e488 100644
--- a/shared/router-v2/header/index.desktop.tsx
+++ b/shared/router-v2/header/index.desktop.tsx
@@ -185,7 +185,7 @@ const DesktopHeader = React.memo(function DesktopHeader(p: Props) {
         >
           {/* TODO have headerLeft be the back button */}
           {headerLeft !== null && (
-            <Kb.Box
+            <Kb.ClickableBox
               className={Kb.Styles.classNames('hover_container', {
                 hover_background_color_black_10: !!back,
               })}
@@ -198,7 +198,7 @@ const DesktopHeader = React.memo(function DesktopHeader(p: Props) {
                 className={Kb.Styles.classNames({hover_contained_color_blackOrBlack: back})}
                 boxStyle={styles.icon}
               />
-            </Kb.Box>
+            </Kb.ClickableBox>
           )}
           <Kb.Box2 direction="horizontal" style={styles.topRightContainer}>
             <SyncingFolders
diff --git a/shared/settings/account/email-phone-row.tsx b/shared/settings/account/email-phone-row.tsx
index 1eec1a6336e7..5fae4b118d0e 100644
--- a/shared/settings/account/email-phone-row.tsx
+++ b/shared/settings/account/email-phone-row.tsx
@@ -10,7 +10,8 @@ const addSpacer = (into: string, add: string) => {
 }
 
 const Badge = (p: {backgroundColor: string; menuItem?: boolean}) => (
-  <Kb.Box
+  <Kb.Box2
+    direction="vertical"
     style={Kb.Styles.collapseStyles([
       styles.badge,
       p.menuItem ? styles.badgeMenuItem : styles.badgeGearIcon,
diff --git a/shared/settings/advanced.tsx b/shared/settings/advanced.tsx
index 1f7414a76e96..402f0422f625 100644
--- a/shared/settings/advanced.tsx
+++ b/shared/settings/advanced.tsx
@@ -253,7 +253,7 @@ const Developer = () => {
   const onClearLogs = useSettingsState(s => s.dispatch.clearLogs)
 
   return (
-    <Kb.Box style={styles.developerContainer}>
+    <Kb.Box2 direction="vertical" fullWidth={true} alignItems="center" style={styles.developerContainer}>
       <Kb.Text center={true} type="BodySmallSemibold" onClick={onLabelClick} style={styles.text}>
         {"Please don't do anything below here unless instructed to by a developer."}
       </Kb.Text>
@@ -309,8 +309,8 @@ const Developer = () => {
           </Kb.Text>
         </>
       )}
-      <Kb.Box style={styles.filler} />
-    </Kb.Box>
+      <Kb.Box2 direction="vertical" style={styles.filler} />
+    </Kb.Box2>
   )
 }
 
@@ -321,8 +321,6 @@ const styles = Kb.Styles.styleSheetCreate(
         marginTop: Kb.Styles.globalMargins.small,
       },
       developerContainer: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'center',
         flex: 1,
         paddingBottom: Kb.Styles.globalMargins.medium,
       },
diff --git a/shared/settings/archive/index.tsx b/shared/settings/archive/index.tsx
index 36eebb035e7e..b107ce6c1297 100644
--- a/shared/settings/archive/index.tsx
+++ b/shared/settings/archive/index.tsx
@@ -233,7 +233,7 @@ const KBFSJob = React.memo(function KBFSJob(p: {index: number; id: string}) {
               <Kb.Text type="BodyBold" lineClamp={1} style={{flexShrink: 1}} ellipsizeMode="head">
                 {job.gitRepo ?? job.kbfsPath}
               </Kb.Text>
-              {C.isMobile ? null : <Kb.Box style={{flex: 1}} />}
+              {C.isMobile ? null : <Kb.Box2 direction="horizontal" style={{flex: 1}} />}
               {C.isMobile ? null : job.bytesTotal ? (
                 <Kb.Text type="BodySmall">{FS.humanReadableFileSize(job.bytesTotal)}</Kb.Text>
               ) : null}
@@ -252,7 +252,7 @@ const KBFSJob = React.memo(function KBFSJob(p: {index: number; id: string}) {
             >
               <Kb.ProgressBar ratio={progress} />
               <Kb.Text type="Body">{Math.round(progress * 100) + '%'}</Kb.Text>
-              <Kb.Box style={{flex: 1}} />
+              <Kb.Box2 direction="horizontal" style={{flex: 1}} />
               {errorStr && (
                 <Kb.WithTooltip tooltip={errorStr} showOnPressMobile={true}>
                   <Kb.Icon type="iconfont-exclamation" color={Kb.Styles.globalColors.red} fontSize={14} />
diff --git a/shared/settings/chat.tsx b/shared/settings/chat.tsx
index 1759ee2dbaa1..ff558b5b8f2c 100644
--- a/shared/settings/chat.tsx
+++ b/shared/settings/chat.tsx
@@ -292,8 +292,8 @@ const Links = () => {
             {getUnfurlWhitelist(false).map((w, idx) => {
               const wlremoved = unfurlWhitelistRemoved[w]
               return (
-                <Kb.Box key={w} style={styles.whitelistInner}>
-                  {idx === 0 && <Kb.Box style={styles.whitelistOuter} />}
+                <Kb.Box2 direction="vertical" key={w} style={styles.whitelistInner}>
+                  {idx === 0 && <Kb.Box2 direction="vertical" style={styles.whitelistOuter} />}
                   <Kb.Box2
                     fullWidth={true}
                     direction="horizontal"
@@ -312,7 +312,7 @@ const Links = () => {
                         Restore
                       </Kb.Text>
                     ) : (
-                      <Kb.Box style={{position: 'relative'}}>
+                      <Kb.Box2 direction="vertical" style={{position: 'relative'}}>
                         <Kb.WithTooltip tooltip="Remove">
                           <Kb.Icon
                             onClick={() => toggleUnfurlWhitelist(w)}
@@ -320,10 +320,10 @@ const Links = () => {
                             type="iconfont-trash"
                           />
                         </Kb.WithTooltip>
-                      </Kb.Box>
+                      </Kb.Box2>
                     )}
                   </Kb.Box2>
-                </Kb.Box>
+                </Kb.Box2>
               )
             })}
           </Kb.ScrollView>
diff --git a/shared/settings/common.desktop.tsx b/shared/settings/common.desktop.tsx
index 526004e2fb7e..2dd0210bbdda 100644
--- a/shared/settings/common.desktop.tsx
+++ b/shared/settings/common.desktop.tsx
@@ -3,11 +3,11 @@ import range from 'lodash/range'
 
 function Stars({count}: {count: number}) {
   return (
-    <Kb.Box style={Kb.Styles.globalStyles.flexBoxRow}>
+    <Kb.Box2 direction="horizontal">
       {range(count).map(i => (
         <Kb.Icon key={i} color={Kb.Styles.globalColors.green} type="iconfont-star" />
       ))}
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
diff --git a/shared/settings/contacts-joined.tsx b/shared/settings/contacts-joined.tsx
index 994dcd5a5a85..7c63bb4161cf 100644
--- a/shared/settings/contacts-joined.tsx
+++ b/shared/settings/contacts-joined.tsx
@@ -61,9 +61,9 @@ const Item = ({item}: {item: T.RPCGen.ProcessedContact}) => {
   }
   return (
     <Kb.Box2 direction="horizontal" key={username} fullWidth={true}>
-      <Kb.Box style={styles.avatar}>
+      <Kb.Box2 direction="vertical" style={styles.avatar}>
         <Kb.Avatar username={username} size={48} />
-      </Kb.Box>
+      </Kb.Box2>
       <Kb.Box2 direction="vertical" style={styles.rightBox}>
         <Kb.ConnectedUsernames colorFollowing={true} type="BodyBold" usernames={username} />
         <Kb.Text type="BodySmall">{label}</Kb.Text>
diff --git a/shared/settings/db-nuke.confirm.tsx b/shared/settings/db-nuke.confirm.tsx
index d286b5367ddd..f06fdf93649b 100644
--- a/shared/settings/db-nuke.confirm.tsx
+++ b/shared/settings/db-nuke.confirm.tsx
@@ -14,14 +14,11 @@ const DbNukeConfirm = () => {
   }
 
   return (
-    <Kb.Box
-      style={{
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'center',
-        flex: 1,
-        justifyContent: 'center',
-        padding: Kb.Styles.globalMargins.medium,
-      }}
+    <Kb.Box2
+      direction="vertical"
+      centerChildren={true}
+      fullWidth={true}
+      style={{flex: 1, padding: Kb.Styles.globalMargins.medium}}
     >
       <Kb.Text center={true} type="Header" style={{marginTop: Kb.Styles.globalMargins.medium, width: 320}}>
         Are you sure you want to blast away your local database?
@@ -30,7 +27,7 @@ const DbNukeConfirm = () => {
         <Kb.Button type="Dim" label="Cancel" onClick={onCancel} />
         <Kb.Button type="Danger" label="Yes, blow it away" onClick={onDBNuke} />
       </Kb.ButtonBar>
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
diff --git a/shared/settings/display.tsx b/shared/settings/display.tsx
index f7ab52aafed4..10b6d64a0a2a 100644
--- a/shared/settings/display.tsx
+++ b/shared/settings/display.tsx
@@ -29,7 +29,7 @@ const Display = () => {
   }
   return (
     <Kb.ScrollView style={styles.scrollview}>
-      <Kb.Box style={styles.container}>
+      <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
         <Kb.Box2 direction="vertical" fullWidth={true} gap="medium">
           <Kb.Box2 direction="vertical" fullWidth={true} gap="tiny">
             <Kb.Text type="Header">Appearance</Kb.Text>
@@ -70,17 +70,15 @@ const Display = () => {
             </Kb.Box2>
           )}
         </Kb.Box2>
-      </Kb.Box>
+      </Kb.Box2>
     </Kb.ScrollView>
   )
 }
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
   container: {
-    ...Kb.Styles.globalStyles.flexBoxColumn,
     flex: 1,
     padding: Kb.Styles.globalMargins.small,
-    width: '100%',
   },
   scrollview: {
     width: '100%',
diff --git a/shared/settings/files/index.desktop.tsx b/shared/settings/files/index.desktop.tsx
index f62f7811fba2..884b736f8312 100644
--- a/shared/settings/files/index.desktop.tsx
+++ b/shared/settings/files/index.desktop.tsx
@@ -80,8 +80,8 @@ const FinderIntegration = () => {
   return Platform.isDarwin || Platform.isWindows ? (
     <>
       <Kb.Box2 direction="vertical" fullWidth={true} style={styles.finderIntegrationContent}>
-        <Kb.Box>
-          <Kb.Box2 direction="horizontal" gap="tiny" style={styles.contentHeader}>
+        <Kb.Box2 direction="vertical" fullWidth={true}>
+          <Kb.Box2 direction="horizontal" fullWidth={true} gap="tiny" style={styles.contentHeader}>
             <Kb.Text type="Header">{Platform.fileUIName} integration</Kb.Text>
             {isPending && <Kb.ProgressIndicator style={styles.spinner} />}
             {driverStatus.type === T.FS.DriverStatusType.Disabled && driverStatus.kextPermissionError && (
@@ -124,7 +124,7 @@ const FinderIntegration = () => {
               </Kb.Box2>
             </Kb.Box2>
           )}
-        </Kb.Box>
+        </Kb.Box2>
       </Kb.Box2>
       <Kb.Divider style={styles.divider} />
     </>
@@ -141,8 +141,8 @@ const FilesSettings = () => {
       <Kb.Box2 direction="vertical" fullHeight={true} fullWidth={true}>
         <FinderIntegration />
         <Kb.Box2 direction="vertical" fullWidth={true} style={styles.syncContent}>
-          <Kb.Box>
-            <Kb.Box2 direction="horizontal" gap="tiny" style={styles.contentHeader}>
+          <Kb.Box2 direction="vertical" fullWidth={true}>
+            <Kb.Box2 direction="horizontal" fullWidth={true} gap="tiny" style={styles.contentHeader}>
               <Kb.Text type="Header">File sync</Kb.Text>
             </Kb.Box2>
             <Kb.Checkbox
@@ -161,7 +161,7 @@ const FilesSettings = () => {
               disabled={props.areSettingsLoading}
               style={styles.syncNotificationCheckbox}
             />
-          </Kb.Box>
+          </Kb.Box2>
         </Kb.Box2>
       </Kb.Box2>
     </>
diff --git a/shared/settings/invite-generated/index.desktop.tsx b/shared/settings/invite-generated/index.desktop.tsx
index 61c4f07e4851..fb4f70956367 100644
--- a/shared/settings/invite-generated/index.desktop.tsx
+++ b/shared/settings/invite-generated/index.desktop.tsx
@@ -6,14 +6,11 @@ const InviteGeneratedRender = (props: Props) => {
   const {link, email} = props
   const onClose = C.useRouterState(s => s.dispatch.navigateUp)
   return (
-    <Kb.Box
-      style={{
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'center',
-        flex: 1,
-        justifyContent: 'center',
-        position: 'relative',
-      }}
+    <Kb.Box2
+      direction="vertical"
+      centerChildren={true}
+      fullWidth={true}
+      style={{flex: 1, position: 'relative'}}
     >
       <Kb.Icon type="iconfont-close" style={styles.icon} onClick={onClose} />
       <Kb.Icon type="icon-invite-link-48" />
@@ -27,7 +24,7 @@ const InviteGeneratedRender = (props: Props) => {
           Yay! Please share the below link with your friend. It contains signup &amp; install instructions.
         </Kb.Text>
       )}
-      <Kb.Box style={styles.linkContainer}>
+      <Kb.Box2 direction="horizontal" alignItems="center" style={styles.linkContainer}>
         <Kb.Icon
           type="iconfont-link"
           style={{height: 14, marginRight: Kb.Styles.globalMargins.tiny}}
@@ -36,9 +33,9 @@ const InviteGeneratedRender = (props: Props) => {
         <Kb.Text type="BodySemibold" selectable={true} style={{color: Kb.Styles.globalColors.greenDark}}>
           {link}
         </Kb.Text>
-      </Kb.Box>
+      </Kb.Box2>
       <Kb.Button style={{marginTop: Kb.Styles.globalMargins.medium}} label="Close" onClick={onClose} />
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -52,8 +49,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     },
   }),
   linkContainer: {
-    ...Kb.Styles.globalStyles.flexBoxRow,
-    alignItems: 'center',
     backgroundColor: Kb.Styles.globalColors.greenLighter,
     borderRadius: Kb.Styles.borderRadius,
     height: 32,
diff --git a/shared/settings/invites/index.desktop.tsx b/shared/settings/invites/index.desktop.tsx
index c9dd76394d51..9389385972b9 100644
--- a/shared/settings/invites/index.desktop.tsx
+++ b/shared/settings/invites/index.desktop.tsx
@@ -75,16 +75,17 @@ const Invites = () => {
   }
 
   return (
-    <Kb.Box style={{...Kb.Styles.globalStyles.flexBoxColumn, flex: 1}}>
+    <Kb.Box2 direction="vertical" fullWidth={true} style={{flex: 1}}>
       {!!error && (
         <Kb.Banner color="red">
           <Kb.BannerParagraph bannerColor="red" content={error} />
         </Kb.Banner>
       )}
-      <Kb.Box
+      <Kb.Box2
+        direction="vertical"
+        fullWidth={true}
         style={Kb.Styles.platformStyles({
           isElectron: {
-            ...Kb.Styles.globalStyles.flexBoxColumn,
             flex: 1,
             overflow: 'auto',
             padding: Kb.Styles.globalMargins.medium,
@@ -114,7 +115,7 @@ const Invites = () => {
           />
         </Kb.Box2>
         {pendingInvites.length > 0 && (
-          <Kb.Box style={{...Kb.Styles.globalStyles.flexBoxColumn, flexShrink: 0, marginBottom: 16}}>
+          <Kb.Box2 direction="vertical" fullWidth={true} style={{flexShrink: 0, marginBottom: 16}}>
             <SubHeading>Pending invites ({pendingInvites.length})</SubHeading>
             {intersperseDividers(
               pendingInvites.map(invite => (
@@ -126,9 +127,9 @@ const Invites = () => {
                 />
               ))
             )}
-          </Kb.Box>
+          </Kb.Box2>
         )}
-        <Kb.Box style={{...Kb.Styles.globalStyles.flexBoxColumn, flexShrink: 0}}>
+        <Kb.Box2 direction="vertical" fullWidth={true} style={{flexShrink: 0}}>
           <SubHeading>Accepted invites ({acceptedInvites.length})</SubHeading>
           {intersperseDividers(
             acceptedInvites.map(invite => (
@@ -139,9 +140,9 @@ const Invites = () => {
               />
             ))
           )}
-        </Kb.Box>
-      </Kb.Box>
-    </Kb.Box>
+        </Kb.Box2>
+      </Kb.Box2>
+    </Kb.Box2>
   )
 }
 
@@ -159,13 +160,13 @@ function PendingInviteItem({
   onSelectPendingInvite: (invite: PendingInvite) => void
 }) {
   return (
-    <Kb.Box style={styles.inviteItem}>
+    <Kb.Box2 direction="horizontal" alignItems="center" style={styles.inviteItem}>
       {invite.email ? (
         <PendingEmailContent invite={invite} onSelectPendingInvite={onSelectPendingInvite} />
       ) : (
         <PendingURLContent invite={invite} />
       )}
-      <Kb.Box style={{flex: 1}} />
+      <Kb.Box2 direction="horizontal" style={{flex: 1}} />
       <Kb.Text
         type="BodyPrimaryLink"
         onClick={() => onReclaimInvitation(invite.id)}
@@ -173,7 +174,7 @@ function PendingInviteItem({
       >
         Reclaim
       </Kb.Text>
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -185,23 +186,23 @@ function PendingEmailContent({
   onSelectPendingInvite: (invite: PendingInvite) => void
 }) {
   return (
-    <Kb.Box style={{...Kb.Styles.globalStyles.flexBoxRow, alignItems: 'center'}}>
+    <Kb.Box2 direction="horizontal" alignItems="center">
       <Kb.Avatar size={32} />
-      <Kb.Box style={{...Kb.Styles.globalStyles.flexBoxColumn, marginLeft: Kb.Styles.globalMargins.small}}>
+      <Kb.Box2 direction="vertical" style={{marginLeft: Kb.Styles.globalMargins.small}}>
         <Kb.Text type="BodySemibold" onClick={() => onSelectPendingInvite(invite)}>
           {invite.email}
         </Kb.Text>
         <Kb.Text type="BodySmall">
           Invited {dateFns.format(dateFns.fromUnixTime(invite.created), 'MMM d, yyyy')}
         </Kb.Text>
-      </Kb.Box>
-    </Kb.Box>
+      </Kb.Box2>
+    </Kb.Box2>
   )
 }
 
 function PendingURLContent({invite}: {invite: PendingInvite}) {
   return (
-    <Kb.Box style={{...Kb.Styles.globalStyles.flexBoxRow, alignItems: 'center'}}>
+    <Kb.Box2 direction="horizontal" alignItems="center">
       <Kb.Icon
         type="iconfont-link"
         style={{
@@ -214,36 +215,37 @@ function PendingURLContent({invite}: {invite: PendingInvite}) {
       <Kb.Text type="Body" selectable={true} style={{color: Kb.Styles.globalColors.blueDark}}>
         {invite.url}
       </Kb.Text>
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
 function AcceptedInviteItem(p: {invite: AcceptedInvite; onClick: () => void}) {
   const {invite, onClick} = p
   return (
-    <Kb.Box
+    <Kb.ClickableBox
       style={Kb.Styles.platformStyles({
         isElectron: {...styles.inviteItem, ...Kb.Styles.desktopStyles.clickable, flexShrink: 0},
       })}
       onClick={onClick}
     >
       <Kb.Avatar username={invite.username} size={32} />
-      <Kb.Box style={{...Kb.Styles.globalStyles.flexBoxColumn, marginLeft: Kb.Styles.globalMargins.small}}>
+      <Kb.Box2 direction="vertical" style={{marginLeft: Kb.Styles.globalMargins.small}}>
         <Kb.ConnectedUsernames type="BodyBold" usernames={invite.username} />
-      </Kb.Box>
-    </Kb.Box>
+      </Kb.Box2>
+    </Kb.ClickableBox>
   )
 }
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
   container: {
+    alignSelf: 'flex-start' as const,
     marginTop: Kb.Styles.globalMargins.small,
     minHeight: 269,
     width: 400,
   },
   inviteItem: {
     ...Kb.Styles.globalStyles.flexBoxRow,
-    alignItems: 'center',
+    alignItems: 'center' as const,
     flexShrink: 0,
     height: 40,
     marginLeft: Kb.Styles.globalMargins.tiny,
diff --git a/shared/settings/notifications/index.native.tsx b/shared/settings/notifications/index.native.tsx
index d7cf7fe2d81a..d9c8a4c1ae00 100644
--- a/shared/settings/notifications/index.native.tsx
+++ b/shared/settings/notifications/index.native.tsx
@@ -35,17 +35,18 @@ const TurnOnNotifications = () => {
   if (mobileHasPermissions) return null
   const onEnable = requestPermissions
   return (
-    <Kb.Box
+    <Kb.Box2
+      direction="vertical"
+      fullWidth={true}
       style={{
-        ...Kb.Styles.globalStyles.flexBoxColumn,
         backgroundColor: Kb.Styles.globalColors.red,
         height: 330,
         overflow: 'hidden',
         position: 'relative',
-        width: '100%',
       }}
     >
-      <Kb.Box
+      <Kb.Box2
+        direction="vertical"
         style={{
           height: 270,
           left: Kb.Styles.globalMargins.medium,
@@ -55,7 +56,7 @@ const TurnOnNotifications = () => {
         }}
       >
         <Kb.Icon type="illustration-turn-on-notifications" />
-      </Kb.Box>
+      </Kb.Box2>
       <Kb.Text
         type="BodySemibold"
         center={true}
@@ -77,7 +78,7 @@ const TurnOnNotifications = () => {
           Enable notifications
         </Kb.Text>
       </Kb.Text>
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
diff --git a/shared/settings/notifications/render.tsx b/shared/settings/notifications/render.tsx
index cecb718a4115..1a7c68d2d392 100644
--- a/shared/settings/notifications/render.tsx
+++ b/shared/settings/notifications/render.tsx
@@ -39,7 +39,7 @@ const Notifications = () => {
       <Kb.ProgressIndicator type="Small" style={{width: Kb.Styles.globalMargins.medium}} />
     </Kb.Box2>
   ) : (
-    <Kb.Box style={styles.main}>
+    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.main}>
       {props.showEmailSection ? (
         <EmailSection {...props} />
       ) : (
@@ -60,7 +60,7 @@ const Notifications = () => {
           <PhoneSection {...props} />
         </>
       ) : null}
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -74,7 +74,7 @@ const styles = Kb.Styles.styleSheetCreate(
       },
       loading: {alignItems: 'center', flex: 1, justifyContent: 'center'},
       main: Kb.Styles.platformStyles({
-        common: {flex: 1, padding: Kb.Styles.globalMargins.small, paddingRight: 0, width: '100%'},
+        common: {flex: 1, padding: Kb.Styles.globalMargins.small, paddingRight: 0},
         isElectron: Kb.Styles.desktopStyles.scrollable,
       }),
     }) as const
diff --git a/shared/settings/proxy.tsx b/shared/settings/proxy.tsx
index 28ee5dba5c54..4a4071dd8894 100644
--- a/shared/settings/proxy.tsx
+++ b/shared/settings/proxy.tsx
@@ -170,22 +170,22 @@ const ProxySettingsPopup = (props: Props) => {
   if (Kb.Styles.isMobile) {
     return (
       <Kb.HeaderHocWrapper onBack={props.onBack}>
-        <Kb.Box style={styles.popupBox}>
-          <Kb.Box style={styles.proxySettingPopupBox}>
+        <Kb.Box2 direction="vertical" fullWidth={true} style={styles.popupBox}>
+          <Kb.Box2 direction="vertical" fullWidth={true} style={styles.proxySettingPopupBox}>
             <ProxySettingsComponent {...props} />
-          </Kb.Box>
-        </Kb.Box>
+          </Kb.Box2>
+        </Kb.Box2>
       </Kb.HeaderHocWrapper>
     )
   }
   return (
     <Kb.PopupDialog>
-      <Kb.Box style={styles.popupBox}>
+      <Kb.Box2 direction="vertical" fullWidth={true} style={styles.popupBox}>
         <Kb.BackButton onClick={props.onBack} />
-        <Kb.Box style={styles.proxySettingPopupBox}>
+        <Kb.Box2 direction="vertical" fullWidth={true} style={styles.proxySettingPopupBox}>
           <ProxySettingsComponent {...props} />
-        </Kb.Box>
-      </Kb.Box>
+        </Kb.Box2>
+      </Kb.Box2>
     </Kb.PopupDialog>
   )
 }
diff --git a/shared/settings/subheading.desktop.tsx b/shared/settings/subheading.desktop.tsx
index d751df255603..2bdcef6e0aa7 100644
--- a/shared/settings/subheading.desktop.tsx
+++ b/shared/settings/subheading.desktop.tsx
@@ -4,14 +4,14 @@ import type {Props} from './subheading'
 
 function SubHeading({children}: Props) {
   return (
-    <Kb.Box style={{...Kb.Styles.globalStyles.flexBoxColumn, marginBottom: 2}}>
+    <Kb.Box2 direction="vertical" fullWidth={true} style={{marginBottom: 2}}>
       <Kb.Text
         style={{color: Kb.Styles.globalColors.black_50, marginBottom: Kb.Styles.globalMargins.xtiny}}
         type="BodySmallSemibold"
       >
         {children}
       </Kb.Text>
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
diff --git a/shared/team-building/go-button.tsx b/shared/team-building/go-button.tsx
index b2d827d75ceb..6a39c0c96422 100644
--- a/shared/team-building/go-button.tsx
+++ b/shared/team-building/go-button.tsx
@@ -8,7 +8,7 @@ export type Props = {
 }
 
 const GoButton = (props: Props) => (
-  <Kb.Box style={styles.container}>
+  <Kb.Box2 direction="vertical" style={styles.container}>
     <Kb.WithTooltip
       tooltip={
         <Kb.Box2 direction="horizontal">
@@ -32,7 +32,7 @@ const GoButton = (props: Props) => (
         waitingKey={props.waitingKey}
       />
     </Kb.WithTooltip>
-  </Kb.Box>
+  </Kb.Box2>
 )
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
diff --git a/shared/teams/channel/index.tsx b/shared/teams/channel/index.tsx
index d2168f70d831..5a62a4d944f2 100644
--- a/shared/teams/channel/index.tsx
+++ b/shared/teams/channel/index.tsx
@@ -255,7 +255,7 @@ const Channel = (props: OwnProps) => {
   }
 
   return (
-    <Kb.Box style={styles.container}>
+    <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} style={styles.container}>
       <Kb.SectionList
         renderSectionHeader={({section}) =>
           section.title ? <Kb.SectionDivider label={section.title} /> : null
@@ -266,7 +266,7 @@ const Channel = (props: OwnProps) => {
         style={styles.list}
       />
       <SelectionPopup selectedTab={selectedTab === 'members' ? 'channelMembers' : ''} teamID={teamID} />
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -274,12 +274,8 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       container: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'stretch',
         flex: 1,
-        height: '100%',
         position: 'relative',
-        width: '100%',
       },
       list: {},
       listContentContainer: Kb.Styles.platformStyles({
diff --git a/shared/teams/channel/rows.tsx b/shared/teams/channel/rows.tsx
index 5c77b0f6a518..b7f1edbb8c6b 100644
--- a/shared/teams/channel/rows.tsx
+++ b/shared/teams/channel/rows.tsx
@@ -106,11 +106,11 @@ const ChannelMemberRow = (props: Props) => {
       <Kb.Avatar username={username} size={32} />
 
       <Kb.Box2 direction="vertical" style={styles.nameContainer}>
-        <Kb.Box style={Kb.Styles.globalStyles.flexBoxRow}>
+        <Kb.Box2 direction="horizontal" fullWidth={true}>
           <Kb.ConnectedUsernames type="BodySemibold" usernames={props.username} />
-        </Kb.Box>
+        </Kb.Box2>
 
-        <Kb.Box style={styles.nameContainerInner}>
+        <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center">
           {fullNameLabel}
           {crown}
           {!active && (
@@ -123,7 +123,7 @@ const ChannelMemberRow = (props: Props) => {
             {!!active && Teams.typeToLabel[teamMemberInfo.type]}
             {resetLabel}
           </Kb.Text>
-        </Kb.Box>
+        </Kb.Box2>
       </Kb.Box2>
     </Kb.Box2>
   )
@@ -294,7 +294,6 @@ const styles = Kb.Styles.styleSheetCreate(
       marginRight: {marginRight: Kb.Styles.globalMargins.xtiny},
       mobileMarginsHack: Kb.Styles.platformStyles({isMobile: {marginRight: 48}}), // ListItem2 is malfunctioning because the checkbox width is unusual
       nameContainer: {flex: 1, marginLeft: Kb.Styles.globalMargins.small},
-      nameContainerInner: {...Kb.Styles.globalStyles.flexBoxRow, alignItems: 'center'},
       selected: {backgroundColor: Kb.Styles.globalColors.blueLighterOrBlueDarker},
       widenClickableArea: {margin: -5, padding: 5},
     }) as const
diff --git a/shared/teams/channel/tabs.tsx b/shared/teams/channel/tabs.tsx
index bc8d5526ea3a..fd3517a080eb 100644
--- a/shared/teams/channel/tabs.tsx
+++ b/shared/teams/channel/tabs.tsx
@@ -25,7 +25,7 @@ const ChannelTabs = (props: Props) => {
 
   return (
     <Kb.Box2 direction="vertical" fullWidth={true}>
-      <Kb.Box style={styles.container}>
+      <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.container}>
         <Kb.Tabs
           clickableBoxStyle={styles.clickableBox}
           tabs={tabs}
@@ -34,7 +34,7 @@ const ChannelTabs = (props: Props) => {
           style={styles.tabContainer}
           tabStyle={styles.tab}
         />
-      </Kb.Box>
+      </Kb.Box2>
       {!!error && <Kb.Banner color="red">{error}</Kb.Banner>}
     </Kb.Box2>
   )
@@ -46,7 +46,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   },
   container: {
     backgroundColor: Kb.Styles.globalColors.white,
-    width: '100%',
   },
   tab: Kb.Styles.platformStyles({
     isMobile: {
diff --git a/shared/teams/common/selection-popup.tsx b/shared/teams/common/selection-popup.tsx
index 531efe9d707a..c1d6a3d810c8 100644
--- a/shared/teams/common/selection-popup.tsx
+++ b/shared/teams/common/selection-popup.tsx
@@ -113,12 +113,12 @@ const JointSelectionPopup = (props: JointSelectionPopupProps) => {
       {!Kb.Styles.isPhone && <Kb.BoxGrow />}
       {children}
       {/* bottom safe area */}
-      {Kb.Styles.isPhone && <Kb.Box style={{height: bottom}} />}
+      {Kb.Styles.isPhone && <Kb.Box2 direction="vertical" style={{height: bottom}} />}
     </Kb.Box2>
   )
   return Kb.Styles.isMobile ? (
     <>
-      {<Kb.Box style={{height: height > 48 ? height - 48 - bottom : -bottom}} />}
+      {<Kb.Box2 direction="vertical" style={{height: height > 48 ? height - 48 - bottom : -bottom}} />}
       <Kb.FloatingBox>{popup}</Kb.FloatingBox>
     </>
   ) : (
diff --git a/shared/teams/confirm-modals/confirm-kick-out.tsx b/shared/teams/confirm-modals/confirm-kick-out.tsx
index 4c9d358d20a3..f8d209f0181a 100644
--- a/shared/teams/confirm-modals/confirm-kick-out.tsx
+++ b/shared/teams/confirm-modals/confirm-kick-out.tsx
@@ -65,7 +65,7 @@ const ConfirmKickOut = (props: Props) => {
     </Kb.Text>
   )
   const header = (
-    <Kb.Box style={styles.positionRelative}>
+    <Kb.Box2 direction="vertical" style={styles.positionRelative}>
       <Kb.AvatarLine usernames={members} size={64} layout="horizontal" maxShown={5} />
       <Kb.Box2
         direction="horizontal"
@@ -82,7 +82,7 @@ const ConfirmKickOut = (props: Props) => {
           style={styles.headerIcon}
         />
       </Kb.Box2>
-    </Kb.Box>
+    </Kb.Box2>
   )
   return (
     <Kb.ConfirmModal
diff --git a/shared/teams/confirm-modals/confirm-remove-from-channel.tsx b/shared/teams/confirm-modals/confirm-remove-from-channel.tsx
index c05aa0d0d84b..c67338584e46 100644
--- a/shared/teams/confirm-modals/confirm-remove-from-channel.tsx
+++ b/shared/teams/confirm-modals/confirm-remove-from-channel.tsx
@@ -49,7 +49,7 @@ const ConfirmRemoveFromChannel = (props: Props) => {
 
   const prompt = `Remove ${Teams.stringifyPeople(members)} from #${channelname}?`
   const header = (
-    <Kb.Box style={styles.positionRelative}>
+    <Kb.Box2 direction="vertical" style={styles.positionRelative}>
       <Kb.AvatarLine usernames={members} size={64} layout="horizontal" maxShown={5} />
       <Kb.Icon
         boxStyle={members.length <= 5 ? styles.iconContainerSingle : styles.iconContainer}
@@ -57,7 +57,7 @@ const ConfirmRemoveFromChannel = (props: Props) => {
         style={styles.headerIcon}
         sizeType="Small"
       />
-    </Kb.Box>
+    </Kb.Box2>
   )
   return (
     <Kb.ConfirmModal
diff --git a/shared/teams/emojis/add-emoji.tsx b/shared/teams/emojis/add-emoji.tsx
index 81c4e896a1f7..2e840ec0a61a 100644
--- a/shared/teams/emojis/add-emoji.tsx
+++ b/shared/teams/emojis/add-emoji.tsx
@@ -324,9 +324,9 @@ const renderRow = (_: number, item: EmojiToAddOrAddRow) =>
         item.emojiToAdd.error && styles.emojiToAddRowWithError,
       ])}
     >
-      <Kb.Box style={styles.emojiToAddImageContainer}>
+      <Kb.Box2 direction="vertical" style={styles.emojiToAddImageContainer}>
         <Kb.Image2 src={item.emojiToAdd.path} style={styles.emojiToAddImage} />
-      </Kb.Box>
+      </Kb.Box2>
       <AliasInput
         error={item.emojiToAdd.error}
         alias={item.emojiToAdd.alias}
diff --git a/shared/teams/invite-by-contact/index.native.tsx b/shared/teams/invite-by-contact/index.native.tsx
index d4734971d949..e5eb0193546e 100644
--- a/shared/teams/invite-by-contact/index.native.tsx
+++ b/shared/teams/invite-by-contact/index.native.tsx
@@ -16,23 +16,23 @@ const contactRow = (_: number, props: ContactRowProps) => {
   const hasThumbnail = !!props.pictureUri
 
   return (
-    <Kb.Box style={styles.contactRowBox}>
-      <Kb.Box style={styles.contactRowInnerBox}>
-        <Kb.Box style={styles.contactRowInnerBox}>
+    <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.contactRowBox}>
+      <Kb.Box2 direction="horizontal" alignItems="center" style={styles.contactRowInnerBox}>
+        <Kb.Box2 direction="horizontal" alignItems="center" style={styles.contactRowInnerBox}>
           {!!hasThumbnail && !!props.pictureUri && (
             <Kb.Image2 style={styles.thumbnail} src={props.pictureUri} />
           )}
           {!hasThumbnail && <Kb.Avatar size={48} style={styles.placeHolderAvatar} />}
-          <Kb.Box>
-            <Kb.Box style={Kb.Styles.globalStyles.flexBoxRow}>
+          <Kb.Box2 direction="vertical">
+            <Kb.Box2 direction="horizontal" fullWidth={true}>
               <Kb.Text type="BodySemibold">{props.name}</Kb.Text>
-            </Kb.Box>
-            <Kb.Box style={Kb.Styles.globalStyles.flexBoxRow}>
+            </Kb.Box2>
+            <Kb.Box2 direction="horizontal" fullWidth={true}>
               <Kb.Text type="BodySmall">{props.valueFormatted || props.value}</Kb.Text>
-            </Kb.Box>
-          </Kb.Box>
-        </Kb.Box>
-        <Kb.Box>
+            </Kb.Box2>
+          </Kb.Box2>
+        </Kb.Box2>
+        <Kb.Box2 direction="vertical">
           <Kb.Button
             type="Success"
             mode={props.alreadyInvited ? 'Secondary' : 'Primary'}
@@ -42,9 +42,9 @@ const contactRow = (_: number, props: ContactRowProps) => {
             onClick={props.onClick}
             style={styles.inviteButton}
           />
-        </Kb.Box>
-      </Kb.Box>
-    </Kb.Box>
+        </Kb.Box2>
+      </Kb.Box2>
+    </Kb.Box2>
   )
 }
 
@@ -99,7 +99,7 @@ export const InviteByContact = (props: InviteByContactProps) => {
         </Kb.Box2>
       )}
       {hasItems && (
-        <Kb.Box style={styles.listContainer}>
+        <Kb.Box2 direction="vertical" fullWidth={true} style={styles.listContainer}>
           <Kb.Box2 direction="horizontal" style={styles.filterContainer}>
             <Kb.PlainInput
               autoFocus={true}
@@ -135,7 +135,7 @@ export const InviteByContact = (props: InviteByContactProps) => {
             renderItem={contactRow}
             style={styles.contactList}
           />
-        </Kb.Box>
+        </Kb.Box2>
       )}
     </Kb.Box2>
   )
@@ -148,15 +148,10 @@ const styles = Kb.Styles.styleSheetCreate(
         alignSelf: 'stretch',
       },
       contactRowBox: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
-        alignItems: 'center',
         height: 56,
         padding: Kb.Styles.globalMargins.small,
-        width: '100%',
       },
       contactRowInnerBox: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
-        alignItems: 'center',
         flex: 1,
       },
       errorMessageContainer: {
@@ -179,7 +174,6 @@ const styles = Kb.Styles.styleSheetCreate(
         width: 100,
       },
       listContainer: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
         flex: 1,
         paddingBottom: Kb.Styles.globalMargins.xtiny,
       },
diff --git a/shared/teams/invite-by-email.tsx b/shared/teams/invite-by-email.tsx
index f0201964e4d5..c6d30557a184 100644
--- a/shared/teams/invite-by-email.tsx
+++ b/shared/teams/invite-by-email.tsx
@@ -59,23 +59,20 @@ const Container = (ownProps: OwnProps) => {
 
   return (
     <Kb.PopupDialog onClose={onClose} styleCover={styles.cover} styleContainer={styles.container}>
-      <Kb.Box style={{...Kb.Styles.globalStyles.flexBoxColumn}}>
-        <Kb.Box
-          style={{
-            ...Kb.Styles.globalStyles.flexBoxColumn,
-            alignItems: 'center',
-            margin: Kb.Styles.globalMargins.medium,
-          }}
+      <Kb.Box2 direction="vertical" fullWidth={true}>
+        <Kb.Box2
+          direction="vertical"
+          alignItems="center"
+          fullWidth={true}
+          style={{margin: Kb.Styles.globalMargins.medium}}
         >
           <Kb.Text style={styles.header} type="Header">
             Invite by email
           </Kb.Text>
-          <Kb.Box
-            style={{
-              ...Kb.Styles.globalStyles.flexBoxRow,
-              alignItems: 'center',
-              margin: Kb.Styles.globalMargins.tiny,
-            }}
+          <Kb.Box2
+            direction="horizontal"
+            alignItems="center"
+            style={{margin: Kb.Styles.globalMargins.tiny}}
           >
             <Kb.Text style={{margin: Kb.Styles.globalMargins.tiny}} type="Body">
               Add these team members to {name} as:
@@ -95,8 +92,8 @@ const Container = (ownProps: OwnProps) => {
                 style={{width: 100}}
               />
             </FloatingRolePicker>
-          </Kb.Box>
-          <Kb.Box2 direction="vertical" gap="xtiny" fullWidth={true} style={{alignItems: 'flex-start'}}>
+          </Kb.Box2>
+          <Kb.Box2 direction="vertical" gap="xtiny" fullWidth={true} alignItems="flex-start">
             <Kb.LabeledInput
               autoFocus={true}
               error={!!errorMessage}
@@ -116,24 +113,24 @@ const Container = (ownProps: OwnProps) => {
           <Kb.ButtonBar>
             <Kb.WaitingButton label="Invite" onClick={onInvite} waitingKey={waitingKey} />
           </Kb.ButtonBar>
-        </Kb.Box>
-      </Kb.Box>
+        </Kb.Box2>
+      </Kb.Box2>
     </Kb.PopupDialog>
   )
 }
 
 const _makeDropdownItem = (item: string) => (
-  <Kb.Box
+  <Kb.Box2
     key={item}
+    direction="horizontal"
+    alignItems="center"
     style={{
-      ...Kb.Styles.globalStyles.flexBoxRow,
-      alignItems: 'center',
       paddingLeft: Kb.Styles.globalMargins.small,
       paddingRight: Kb.Styles.globalMargins.small,
     }}
   >
     <Kb.Text type="BodyBig">{capitalize(item)}</Kb.Text>
-  </Kb.Box>
+  </Kb.Box2>
 )
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
diff --git a/shared/teams/join-team/container.tsx b/shared/teams/join-team/container.tsx
index 7a1e2e4df322..a745a5655594 100644
--- a/shared/teams/join-team/container.tsx
+++ b/shared/teams/join-team/container.tsx
@@ -73,13 +73,13 @@ const Container = (ownProps: OwnProps) => {
               <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.banner} centerChildren={true}>
                 <Kb.Icon type="icon-illustration-teams-zen-460-96" />
               </Kb.Box2>
-              <Kb.Box style={styles.container}>
+              <Kb.Box2 direction="vertical" style={styles.container}>
                 <Kb.Text center={true} type="Body">
                   Your request was sent to the admins of{' '}
                   {successTeamName ? <Kb.Text type="BodySemibold">{successTeamName}</Kb.Text> : 'the team'}.
                   {"Hang tight, you'll get notified as soon as you're let in."}
                 </Kb.Text>
-              </Kb.Box>
+              </Kb.Box2>
             </Kb.Box2>
           )}
         </Kb.Box2>
diff --git a/shared/teams/join-team/join-from-invite.tsx b/shared/teams/join-team/join-from-invite.tsx
index f87440ceac61..1f6f7d8b5fde 100644
--- a/shared/teams/join-team/join-from-invite.tsx
+++ b/shared/teams/join-team/join-from-invite.tsx
@@ -104,7 +104,7 @@ const JoinFromInvite = () => {
         gap="xtiny"
         style={styles.body}
       >
-        <Kb.Box style={styles.avatar}>
+        <Kb.Box2 direction="vertical" style={styles.avatar}>
           <Kb.Avatar
             size={96}
             teamname={teamname}
@@ -121,7 +121,7 @@ const JoinFromInvite = () => {
               <Kb.Meta backgroundColor={Kb.Styles.globalColors.green} title="open" size="Small" />
             </Kb.Box2>
           )}
-        </Kb.Box>
+        </Kb.Box2>
         <Kb.Text type="Header">Join {teamname}</Kb.Text>
         <Kb.Text type="BodySmall">{details.teamNumMembers.toLocaleString()} members</Kb.Text>
         <Kb.Text type="Body" lineClamp={3} style={styles.description}>
@@ -144,7 +144,7 @@ const JoinFromInvite = () => {
           <Kb.Button type="Dim" label="Later" onClick={onClose} style={styles.button} waiting={waiting} />
         </Kb.Box2>
         {!!error && <Kb.Text type="BodySmallError">{error}</Kb.Text>}
-        <Kb.Box style={Kb.Styles.globalStyles.flexOne} />
+        <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.flexOne} />
         <Kb.Box2 direction="horizontal" gap="xtiny" style={styles.inviterBox}>
           <Kb.Avatar
             size={16}
diff --git a/shared/teams/main/banner.tsx b/shared/teams/main/banner.tsx
index 8825b1dbe05c..b1974804f56b 100644
--- a/shared/teams/main/banner.tsx
+++ b/shared/teams/main/banner.tsx
@@ -6,12 +6,12 @@ export type Props = {
 }
 
 const Banner = ({onReadMore, onHideChatBanner}: Props) => (
-  <Kb.Box style={styles.containerBanner}>
+  <Kb.Box2 direction={Kb.Styles.isMobile ? 'vertical' : 'horizontal'} alignItems="center" fullWidth={true} style={styles.containerBanner}>
     <Kb.Icon
       style={styles.illustration}
       type={Kb.Styles.isMobile ? 'icon-illustration-teams-216' : 'icon-illustration-teams-180'}
     />
-    <Kb.Box style={styles.containerHeader}>
+    <Kb.Box2 direction="vertical" style={styles.containerHeader}>
       <Kb.Text negative={true} type="Header" style={styles.header}>
         Create a team on Keybase
       </Kb.Text>
@@ -22,15 +22,15 @@ const Banner = ({onReadMore, onHideChatBanner}: Props) => (
       <Kb.Text negative={true} type="BodySmallSemiboldPrimaryLink" className="underline" onClick={onReadMore}>
         Read more
       </Kb.Text>
-    </Kb.Box>
-    <Kb.Box style={styles.closeIconContainer}>
+    </Kb.Box2>
+    <Kb.Box2 direction="vertical" style={styles.closeIconContainer}>
       <Kb.Icon
         type="iconfont-close"
         style={{padding: Kb.Styles.globalMargins.xtiny}}
         onClick={onHideChatBanner}
       />
-    </Kb.Box>
-  </Kb.Box>
+    </Kb.Box2>
+  </Kb.Box2>
 )
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
@@ -51,28 +51,21 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   }),
   containerBanner: Kb.Styles.platformStyles({
     common: {
-      alignItems: 'center',
       backgroundColor: Kb.Styles.globalColors.blue,
       flexShrink: 0,
       position: 'relative',
-      width: '100%',
     },
     isElectron: {
-      ...Kb.Styles.globalStyles.flexBoxRow,
       height: 212,
       justifyContent: 'flex-start',
       paddingRight: Kb.Styles.globalMargins.large,
     },
     isMobile: {
-      ...Kb.Styles.globalStyles.flexBoxColumn,
       justifyContent: 'center',
       padding: 24,
     },
   }),
   containerHeader: Kb.Styles.platformStyles({
-    common: {
-      ...Kb.Styles.globalStyles.flexBoxColumn,
-    },
     isElectron: {
       maxWidth: 360,
     },
diff --git a/shared/teams/main/footer.tsx b/shared/teams/main/footer.tsx
index fd9f2f2f4645..4d4937726349 100644
--- a/shared/teams/main/footer.tsx
+++ b/shared/teams/main/footer.tsx
@@ -11,15 +11,15 @@ const TeamsFooter = (props: {empty: boolean}) => {
         <>
           {props.empty && (
             <Kb.Box2 direction="vertical" alignItems="center" gap="tiny" style={styles.empty}>
-              <Kb.Box style={Kb.Styles.globalStyles.flexOne} />
-              <Kb.Box>
+              <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.flexOne} />
+              <Kb.Box2 direction="vertical">
                 <Kb.Icon type="icon-dark-empty-lone-wolf-116-96" />
-              </Kb.Box>
+              </Kb.Box2>
               <Kb.Text type="BodySmall">You are not a part of any team, lone wolf.</Kb.Text>
-              <Kb.Box style={Kb.Styles.globalStyles.flexOne} />
+              <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.flexOne} />
             </Kb.Box2>
           )}
-          <Kb.Box style={Kb.Styles.globalStyles.flexOne} />
+          <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.flexOne} />
           {(Kb.Styles.isMobile || !props.empty) && (
             <Kb.Text type="BodySmall" center={true}>
               Keybase team chats are encrypted – unlike Slack – and work for any size group, from casual
diff --git a/shared/teams/main/index.tsx b/shared/teams/main/index.tsx
index a98031f54722..abd48e43a7dd 100644
--- a/shared/teams/main/index.tsx
+++ b/shared/teams/main/index.tsx
@@ -40,10 +40,10 @@ const TeamBigButtons = (props: HeaderProps & {empty: boolean}) => (
     >
       <Kb.Box2 direction="vertical" gap="tiny" alignItems="center">
         <Kb.Text type="BodyBig">Create a team</Kb.Text>
-        <Kb.Box style={styles.relative}>
+        <Kb.Box2 direction="vertical" style={styles.relative}>
           <Kb.Avatar isTeam={true} size={96} />
           <Kb.Icon type="iconfont-add-solid" sizeType="Default" style={styles.teamPlus} />
-        </Kb.Box>
+        </Kb.Box2>
       </Kb.Box2>
     </Kb.ClickableBox>
     <Kb.ClickableBox
diff --git a/shared/teams/team/index.tsx b/shared/teams/team/index.tsx
index d7064f6f079e..a21764ca827e 100644
--- a/shared/teams/team/index.tsx
+++ b/shared/teams/team/index.tsx
@@ -168,7 +168,7 @@ const Team = (props: Props) => {
 
   return (
     <Kb.Styles.CanFixOverdrawContext.Provider value={false}>
-      <Kb.Box style={styles.container}>
+      <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} style={styles.container}>
         <Kb.SectionList
           renderSectionHeader={renderSectionHeader}
           stickySectionHeadersEnabled={Kb.Styles.isMobile}
@@ -183,20 +183,16 @@ const Team = (props: Props) => {
           }
           teamID={teamID}
         />
-      </Kb.Box>
+      </Kb.Box2>
     </Kb.Styles.CanFixOverdrawContext.Provider>
   )
 }
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
   container: {
-    ...Kb.Styles.globalStyles.flexBoxColumn,
-    alignItems: 'stretch',
     backgroundColor: Kb.Styles.globalColors.blueGrey,
     flex: 1,
-    height: '100%',
     position: 'relative',
-    width: '100%',
   },
   list: Kb.Styles.platformStyles({}),
   listContentContainer: Kb.Styles.platformStyles({
diff --git a/shared/teams/team/member/add-to-channels.tsx b/shared/teams/team/member/add-to-channels.tsx
index 3e3035cb798e..c6543d903f06 100644
--- a/shared/teams/team/member/add-to-channels.tsx
+++ b/shared/teams/team/member/add-to-channels.tsx
@@ -232,9 +232,9 @@ const AddToChannels = React.memo(function AddToChannels(props: Props) {
       onClose={onCancel}
     >
       {loadingChannels && !channelMetas.size ? (
-        <Kb.Box style={Kb.Styles.globalStyles.flexOne}>
+        <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.flexOne}>
           <Kb.ProgressIndicator type="Large" />
-        </Kb.Box>
+        </Kb.Box2>
       ) : (
         <Kb.Box2 direction="vertical" fullWidth={true} style={Kb.Styles.globalStyles.flexOne}>
           <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.searchFilterContainer}>
@@ -293,7 +293,7 @@ const HeaderRow = React.memo(function HeaderRow(p: {
         icon="iconfont-new"
       />
       {mode === 'self' || (!onSelectAll && !onSelectNone) ? (
-        <Kb.Box /> // box so that the other item aligns to the left
+        <Kb.Box2 direction="vertical" /> // box so that the other item aligns to the left
       ) : (
         <Kb.Text type="BodyPrimaryLink" onClick={onSelectAll || onSelectNone}>
           {onSelectAll ? 'Select all' : 'Clear'}
diff --git a/shared/teams/team/new-header.tsx b/shared/teams/team/new-header.tsx
index b5f05946e03b..47210405cf1c 100644
--- a/shared/teams/team/new-header.tsx
+++ b/shared/teams/team/new-header.tsx
@@ -50,9 +50,9 @@ const FeatureTeamCard = ({teamID}: FeatureTeamCardProps) => {
       alignSelf="flex-end"
       fullWidth={true}
     >
-      <Kb.Box style={styles.illustration}>
+      <Kb.Box2 direction="vertical" fullWidth={true} style={styles.illustration}>
         <Kb.Icon type="icon-illustration-teams-feature-profile-460-64" />
-      </Kb.Box>
+      </Kb.Box2>
       <Kb.Text type="BodySemibold">Feature team on your profile?</Kb.Text>
       <Kb.Text type="BodySmall">{"So your friends or coworkers know of your team's existence."}</Kb.Text>
       <Kb.Box2 direction="horizontal" gap="xtiny" fullWidth={true}>
diff --git a/shared/teams/team/rows/bot-row/bot.tsx b/shared/teams/team/rows/bot-row/bot.tsx
index 8806f0744ddc..71dba895f68b 100644
--- a/shared/teams/team/rows/bot-row/bot.tsx
+++ b/shared/teams/team/rows/bot-row/bot.tsx
@@ -70,19 +70,19 @@ export const TeamBotRow = (props: Props) => {
 
   // TODO: switch this to a ListItem2 so that we get dividers, free styling, etc
   return (
-    <Kb.Box style={Kb.Styles.collapseStyles([styles.container, !active && styles.containerReset])}>
-      <Kb.Box style={styles.innerContainerTop}>
-        <Kb.Box style={styles.clickable}>
+    <Kb.Box2 direction="vertical" fullWidth={true} alignItems="center" style={Kb.Styles.collapseStyles([styles.container, !active && styles.containerReset])}>
+      <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.innerContainerTop}>
+        <Kb.Box2 direction="horizontal" alignItems="center" style={styles.clickable}>
           <Kb.Avatar
             username={props.username}
             size={Kb.Styles.isMobile ? 48 : 32}
             onClick={props.onShowTracker}
           />
-          <Kb.Box style={styles.nameContainer}>
-            <Kb.Box style={Kb.Styles.globalStyles.flexBoxRow}>{usernameDisplay}</Kb.Box>
-            <Kb.Box style={styles.nameContainerInner}>{descriptionLabel}</Kb.Box>
-          </Kb.Box>
-        </Kb.Box>
+          <Kb.Box2 direction="vertical" style={styles.nameContainer}>
+            <Kb.Box2 direction="horizontal" fullWidth={true}>{usernameDisplay}</Kb.Box2>
+            <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center">{descriptionLabel}</Kb.Box2>
+          </Kb.Box2>
+        </Kb.Box2>
         <Kb.Box2Measure direction="vertical" style={styles.menuIconContainer} ref={popupAnchor}>
           {(active || C.isLargeScreen) && (
             // Desktop & mobile large screen - display on the far right of the first row
@@ -107,37 +107,29 @@ export const TeamBotRow = (props: Props) => {
             onHidden={_onHideMenu}
           />
         </Kb.Box2Measure>
-      </Kb.Box>
-    </Kb.Box>
+      </Kb.Box2>
+    </Kb.Box2>
   )
 }
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
   clickable: {
-    ...Kb.Styles.globalStyles.flexBoxRow,
-    alignItems: 'center',
     flexGrow: 1,
   },
   container: {
-    ...Kb.Styles.globalStyles.flexBoxColumn,
-    alignItems: 'center',
     backgroundColor: Kb.Styles.globalColors.white,
     flex: 1,
     height: '100%',
     position: 'relative',
-    width: '100%',
   },
   containerReset: {
     backgroundColor: Kb.Styles.globalColors.blueLighter2,
   },
   fullNameLabel: {marginRight: Kb.Styles.globalMargins.xtiny},
   innerContainerTop: {
-    ...Kb.Styles.globalStyles.flexBoxRow,
     ...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall, Kb.Styles.globalMargins.small),
-    alignItems: 'center',
     flexShrink: 0,
     height: Kb.Styles.isMobile ? 56 : 48,
-    width: '100%',
   },
   menuButtonDesktop: {
     marginLeft: Kb.Styles.globalMargins.small,
@@ -153,13 +145,10 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     top: 12,
   },
   menuIconContainer: {
-    ...Kb.Styles.globalStyles.flexBoxRow,
-    alignItems: 'center',
     flexShrink: 1,
     height: '100%',
   },
-  nameContainer: {...Kb.Styles.globalStyles.flexBoxColumn, marginLeft: Kb.Styles.globalMargins.small},
-  nameContainerInner: {...Kb.Styles.globalStyles.flexBoxRow, alignItems: 'center'},
+  nameContainer: {marginLeft: Kb.Styles.globalMargins.small},
 }))
 
 type OwnProps = {
diff --git a/shared/teams/team/rows/emoji-row/item.tsx b/shared/teams/team/rows/emoji-row/item.tsx
index 41c72d14f68b..613e44d672e6 100644
--- a/shared/teams/team/rows/emoji-row/item.tsx
+++ b/shared/teams/team/rows/emoji-row/item.tsx
@@ -74,7 +74,7 @@ const ItemRow = ({conversationIDKey, emoji, firstItem, teamID}: OwnProps) => {
   const {showPopup, popup, popupAnchor} = Kb.usePopup2(makePopup)
 
   return (
-    <Kb.Box style={styles.outerContainer}>
+    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.outerContainer}>
       <Kb.ListItem2
         type="Small"
         body={
@@ -127,7 +127,7 @@ const ItemRow = ({conversationIDKey, emoji, firstItem, teamID}: OwnProps) => {
         fullDivider={true}
         height={Kb.Styles.isMobile ? 48 : 42}
       />
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
diff --git a/shared/teams/team/rows/member-row.tsx b/shared/teams/team/rows/member-row.tsx
index 7fc8920b2a01..9285675978f2 100644
--- a/shared/teams/team/rows/member-row.tsx
+++ b/shared/teams/team/rows/member-row.tsx
@@ -118,14 +118,14 @@ export const TeamMemberRow = (props: Props) => {
     <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center">
       <Kb.Avatar username={props.username} size={32} />
       <Kb.Box2 direction="vertical" style={styles.nameContainer}>
-        <Kb.Box style={Kb.Styles.globalStyles.flexBoxRow}>
+        <Kb.Box2 direction="horizontal" fullWidth={true}>
           <Kb.ConnectedUsernames
             type="BodyBold"
             usernames={props.username}
             colorFollowing={true}
             onUsernameClicked={onClick}
           />
-        </Kb.Box>
+        </Kb.Box2>
 
         <Kb.Box2 direction="horizontal" centerChildren={true} alignSelf="flex-start">
           {fullNameLabel}
@@ -293,8 +293,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   lockedOutMeta: {marginRight: Kb.Styles.globalMargins.xtiny},
   mobileMarginsHack: Kb.Styles.platformStyles({isMobile: {marginRight: 48}}), // ListItem2 is malfunctioning because the checkbox width is unusual
   nameContainer: {
-    ...Kb.Styles.globalStyles.flexBoxColumn,
-    alignSelf: undefined,
     flex: 1,
     justifyContent: 'center',
     marginLeft: Kb.Styles.globalMargins.small,
diff --git a/shared/teams/team/settings-tab/open-team-warning.tsx b/shared/teams/team/settings-tab/open-team-warning.tsx
index cf765f0eabb2..172beab25bfd 100644
--- a/shared/teams/team/settings-tab/open-team-warning.tsx
+++ b/shared/teams/team/settings-tab/open-team-warning.tsx
@@ -35,7 +35,7 @@ const OpenTeamWarning = (props: Props) => {
 
   return (
     <Wrapper onBack={onCancel}>
-      <Kb.Box style={styles.container}>
+      <Kb.Box2 direction="vertical" alignItems="center" style={styles.container}>
         <Kb.Icon type={'icon-illustration-teams-216'} style={styles.iconStyle} />
         <Kb.Text center={true} type="Header" style={styles.headerStyle}>
           Make {teamname} into {isOpenTeam ? 'an open' : 'a closed'} team?
@@ -70,7 +70,7 @@ const OpenTeamWarning = (props: Props) => {
             disabled={!enabled}
           />
         </Kb.ButtonBar>
-      </Kb.Box>
+      </Kb.Box2>
     </Wrapper>
   )
 }
@@ -87,8 +87,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   }),
   container: Kb.Styles.platformStyles({
     common: {
-      ...Kb.Styles.globalStyles.flexBoxColumn,
-      alignItems: 'center',
       paddingBottom: Kb.Styles.globalMargins.large,
     },
     isElectron: {
diff --git a/shared/teams/team/settings-tab/retention/index.tsx b/shared/teams/team/settings-tab/retention/index.tsx
index 0c539384b43c..1a0b23bd09e7 100644
--- a/shared/teams/team/settings-tab/retention/index.tsx
+++ b/shared/teams/team/settings-tab/retention/index.tsx
@@ -214,11 +214,11 @@ const RetentionPicker = (p: Props) => {
   const {showPopup, popup, popupAnchor} = Kb.usePopup2(makePopup)
 
   return (
-    <Kb.Box style={Kb.Styles.collapseStyles([Kb.Styles.globalStyles.flexBoxColumn, containerStyle])}>
+    <Kb.Box2 direction="vertical" style={containerStyle} fullWidth={true}>
       {popup}
-      <Kb.Box style={styles.heading}>
+      <Kb.Box2 direction="horizontal" alignItems="center" style={styles.heading} fullWidth={true}>
         <Kb.Text type="BodySmallSemibold">Message deletion</Kb.Text>
-      </Kb.Box>
+      </Kb.Box2>
       <Kb.ClickableBox
         onClick={showPopup}
         ref={popupAnchor}
@@ -238,7 +238,7 @@ const RetentionPicker = (p: Props) => {
       )}
       {showOverrideNotice && <Kb.Text type="BodySmall">Individual channels can override this.</Kb.Text>}
       {showSaveIndicator && <SaveIndicator saving={saving} style={styles.saveState} />}
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -263,12 +263,12 @@ const RetentionDisplay = (
   }
   const text = policyToExplanation(convType, props.policy, props.teamPolicy)
   return (
-    <Kb.Box style={Kb.Styles.collapseStyles([Kb.Styles.globalStyles.flexBoxColumn, props.containerStyle])}>
-      <Kb.Box style={Kb.Styles.collapseStyles([styles.heading, styles.displayHeading])}>
+    <Kb.Box2 direction="vertical" style={props.containerStyle} fullWidth={true}>
+      <Kb.Box2 direction="horizontal" alignItems="center" fullWidth={true} style={Kb.Styles.collapseStyles([styles.heading, styles.displayHeading])}>
         <Kb.Text type="BodySmallSemibold">Message deletion</Kb.Text>
-      </Kb.Box>
+      </Kb.Box2>
       <Kb.Text type="BodySmall">{text}</Kb.Text>
-    </Kb.Box>
+    </Kb.Box2>
   )
 }
 
@@ -279,8 +279,6 @@ const styles = Kb.Styles.styleSheetCreate(
         marginBottom: 2,
       },
       heading: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
-        alignItems: 'center',
         marginBottom: Kb.Styles.globalMargins.tiny,
       },
       label: {
diff --git a/shared/teams/team/settings-tab/retention/warning.tsx b/shared/teams/team/settings-tab/retention/warning.tsx
index 8bd576602f48..c45ebcd1c02d 100644
--- a/shared/teams/team/settings-tab/retention/warning.tsx
+++ b/shared/teams/team/settings-tab/retention/warning.tsx
@@ -34,14 +34,14 @@ const RetentionWarning = (props: Props) => {
   const convType: string = getConvType(props.entityType)
   return (
     <Wrapper>
-      <Kb.Box style={styles.container}>
-        <Kb.Box style={styles.iconBoxStyle}>
+      <Kb.Box2 direction="vertical" alignItems="center" style={styles.container}>
+        <Kb.Box2 direction="vertical" style={styles.iconBoxStyle}>
           <Kb.Icon
             color={props.exploding ? Kb.Styles.globalColors.black : Kb.Styles.globalColors.black_20}
             fontSize={48}
             type={props.exploding ? 'iconfont-bomb-solid' : 'iconfont-timer-solid'}
           />
-        </Kb.Box>
+        </Kb.Box2>
         <Kb.Text center={true} type="Header" style={styles.headerStyle}>
           {props.exploding ? 'Explode' : 'Auto-delete'} chat messages after {props.timePeriod}?
         </Kb.Text>
@@ -78,7 +78,7 @@ const RetentionWarning = (props: Props) => {
             disabled={!enabled}
           />
         </Kb.ButtonBar>
-      </Kb.Box>
+      </Kb.Box2>
     </Wrapper>
   )
 }
@@ -117,8 +117,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   }),
   container: Kb.Styles.platformStyles({
     common: {
-      ...Kb.Styles.globalStyles.flexBoxColumn,
-      alignItems: 'center',
       paddingBottom: Kb.Styles.globalMargins.large,
     },
     isElectron: {
diff --git a/shared/teams/team/tabs.tsx b/shared/teams/team/tabs.tsx
index 762f5eb58207..f96ecc8d6608 100644
--- a/shared/teams/team/tabs.tsx
+++ b/shared/teams/team/tabs.tsx
@@ -45,7 +45,7 @@ const TeamTabs = (props: TeamTabsProps) => {
   )
   return (
     <Kb.Box2 direction="vertical" fullWidth={true}>
-      <Kb.Box style={styles.container}>
+      <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.container}>
         {Kb.Styles.isMobile ? (
           <Kb.ScrollView
             horizontal={true}
@@ -57,7 +57,7 @@ const TeamTabs = (props: TeamTabsProps) => {
         ) : (
           tabContent
         )}
-      </Kb.Box>
+      </Kb.Box2>
       {!!props.error && <Kb.Banner color="red">{props.error}</Kb.Banner>}
     </Kb.Box2>
   )
diff --git a/shared/tracker2/assertion.tsx b/shared/tracker2/assertion.tsx
index 1cf078bf5ece..2c59572e7e20 100644
--- a/shared/tracker2/assertion.tsx
+++ b/shared/tracker2/assertion.tsx
@@ -526,7 +526,7 @@ const Value = (p: {
 }
 
 const HoverOpacity = (p: {children: React.ReactNode}) => (
-  <Kb.Box className="hover-opacy inverted">{p.children}</Kb.Box>
+  <Kb.Box2 direction="vertical" className="hover-opacy inverted">{p.children}</Kb.Box2>
 )
 
 type SIProps = {
diff --git a/shared/unlock-folders/success.desktop.tsx b/shared/unlock-folders/success.desktop.tsx
index af9a6ee189e0..d4b0bfa0e28d 100644
--- a/shared/unlock-folders/success.desktop.tsx
+++ b/shared/unlock-folders/success.desktop.tsx
@@ -3,7 +3,7 @@ import * as Kb from '@/common-adapters'
 const PaperKeyInput = ({onClose}: {onClose: () => void}) => (
   <div style={styles.container}>
     <Kb.Icon type="icon-folder-success-48" />
-    <Kb.Box style={Kb.Styles.globalStyles.flexBoxColumn}>
+    <Kb.Box2 direction="vertical">
       <Kb.Text center={true} type="BodySemibold">
         Success!
       </Kb.Text>
@@ -11,7 +11,7 @@ const PaperKeyInput = ({onClose}: {onClose: () => void}) => (
         Your paper key is now rekeying folders for this computer. It takes just a couple minutes but lasts
         forever, like the decision to have a child
       </Kb.Text>
-    </Kb.Box>
+    </Kb.Box2>
     <Kb.ButtonBar>
       <Kb.Button label="Okay" onClick={onClose} />
     </Kb.ButtonBar>
diff --git a/shared/whats-new/icon/index.tsx b/shared/whats-new/icon/index.tsx
index 08ee61d17832..be60d008b669 100644
--- a/shared/whats-new/icon/index.tsx
+++ b/shared/whats-new/icon/index.tsx
@@ -46,7 +46,7 @@ export const IconWithPopupDesktop = (p: PopupOwnProps) => {
   const popupVisibleColor = color || Kb.Styles.globalColors.black
   return (
     <>
-      <Kb.Box style={styles.iconContainerMargins} onClick={showPopup}>
+      <Kb.ClickableBox style={styles.iconContainerMargins} onClick={showPopup}>
         <Kb.Box2Measure
           ref={popupAnchor}
           direction="vertical"
@@ -66,7 +66,7 @@ export const IconWithPopupDesktop = (p: PopupOwnProps) => {
             newRelease={newRelease}
           />
         </Kb.Box2Measure>
-      </Kb.Box>
+      </Kb.ClickableBox>
       {popup}
     </>
   )