the very awful square ui toggle (not well made n wip)

src/components/AccountList.tsx

···
 import {isJwtExpired} from '#/lib/jwt'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useProfilesQuery} from '#/state/queries/profile'
 import {type SessionAccount, useSession} from '#/state/session'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
···
   const {currentAccount, accounts} = useSession()
   const t = useTheme()
   const {_} = useLingui()
+  const enableSquareButtons = useEnableSquareButtons()
   const {data: profiles} = useProfilesQuery({
     handles: accounts.map(acc => acc.did),
   })
···
             <View
               style={[
                 t.atoms.bg_contrast_25,
-                a.rounded_full,
+                enableSquareButtons ? a.rounded_sm : a.rounded_full,
                 {width: 48, height: 48},
                 a.justify_center,
                 a.align_center,
···
   const {_} = useLingui()
   const verification = useSimpleVerificationState({profile})
   const {isActive: live} = useActorStatus(profile)
+  const enableSquareButtons = useEnableSquareButtons()
 
   const onPress = useCallback(() => {
     onSelect(account)
···
                   height: 20,
                   backgroundColor: t.palette.positive_500,
                 },
-                a.rounded_full,
+                enableSquareButtons ? a.rounded_sm : a.rounded_full,
                 a.justify_center,
                 a.align_center,
               ]}>

src/components/BlockedGeoOverlay.tsx

···
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
 import {useDeviceGeolocationApi} from '#/state/geolocation'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
···
   const insets = useSafeAreaInsets()
   const geoDialog = Dialog.useDialogControl()
   const {setDeviceGeolocation} = useDeviceGeolocationApi()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   useEffect(() => {
     // just counting overall hits here
···
                 a.pl_md,
                 a.pr_lg,
                 a.py_sm,
-                a.rounded_full,
+                enableSquareButtons ? a.rounded_sm : a.rounded_full,
                 a.flex_row,
                 a.align_center,
                 a.gap_xs,

src/components/Button.tsx

···
   type ViewStyle,
 } from 'react-native'
 
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, flatten, select, useTheme} from '#/alf'
 import {type Props as SVGIconProps} from '#/components/icons/common'
 import {Text} from '#/components/Typography'
···
     if (!variant && color) {
       variant = 'solid'
     }
+
+    const enableSquareButtons = useEnableSquareButtons()
 
     const t = useTheme()
     const [state, setState] = React.useState({
···
 
       if (shape === 'default') {
         if (size === 'large') {
-          baseStyles.push(a.rounded_full, {
+          baseStyles.push(enableSquareButtons ? a.rounded_sm : a.rounded_full, {
             paddingVertical: 12,
             paddingHorizontal: 24,
             gap: 6,
           })
         } else if (size === 'small') {
-          baseStyles.push(a.rounded_full, {
+          baseStyles.push(enableSquareButtons ? a.rounded_sm : a.rounded_full, {
             paddingVertical: 8,
             paddingHorizontal: 14,
             gap: 5,
           })
         } else if (size === 'tiny') {
-          baseStyles.push(a.rounded_full, {
+          baseStyles.push(enableSquareButtons ? a.rounded_sm : a.rounded_full, {
             paddingVertical: 5,
             paddingHorizontal: 10,
             gap: 3,
···
         }
 
         if (shape === 'round') {
-          baseStyles.push(a.rounded_full)
+          baseStyles.push(enableSquareButtons ? a.rounded_sm : a.rounded_full)
         } else if (shape === 'square') {
           if (size === 'tiny') {
             baseStyles.push({
···
         baseStyles,
         hoverStyles,
       }
-    }, [t, variant, color, size, shape, disabled])
+    }, [t, variant, color, size, shape, disabled, enableSquareButtons])
 
     const context = React.useMemo<ButtonContext>(
       () => ({

src/components/ContextMenu/index.tsx

···
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {logger} from '#/logger'
 import {isAndroid, isIOS} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, platform, tokens, useTheme} from '#/alf'
 import {
   Context,
···
 
 export function ItemRadio({selected}: {selected: boolean}) {
   const t = useTheme()
+  const enableSquareButtons = useEnableSquareButtons()
   return (
     <View
       style={[
         a.justify_center,
         a.align_center,
-        a.rounded_full,
+        enableSquareButtons ? a.rounded_sm : a.rounded_full,
         t.atoms.border_contrast_high,
         {
           borderWidth: 1,
···
         <View
           style={[
             a.absolute,
-            a.rounded_full,
+            enableSquareButtons ? a.rounded_sm : a.rounded_full,
             {height: 14, width: 14},
             selected ? {backgroundColor: t.palette.primary_500} : {},
           ]}

src/components/Dialog/index.web.tsx

···
 import {logger} from '#/logger'
 import {useA11y} from '#/state/a11y'
 import {useDialogStateControlContext} from '#/state/dialogs'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {Context} from '#/components/Dialog/context'
···
 export function Close() {
   const {_} = useLingui()
   const {close} = React.useContext(Context)
+
+  const enableSquareButtons = useEnableSquareButtons()
+
   return (
     <View
       style={[
···
         size="small"
         variant="ghost"
         color="secondary"
-        shape="round"
+        shape={enableSquareButtons ? 'square' : 'round'}
         onPress={() => close()}
         label={_(msg`Close active dialog`)}>
         <ButtonIcon icon={X} size="md" />

src/components/IconCircle.tsx

···
 import {View} from 'react-native'
 
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   atoms as a,
   type TextStyleProp,
···
   iconStyle?: TextStyleProp['style']
 }) {
   const t = useTheme()
+  const enableSquareButtons = useEnableSquareButtons()
 
   return (
     <View
       style={[
         a.justify_center,
         a.align_center,
-        a.rounded_full,
+        enableSquareButtons ? a.rounded_sm : a.rounded_full,
         {
           width: size === 'lg' ? 52 : 64,
           height: size === 'lg' ? 52 : 64,

src/components/InterestTabs.tsx

···
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {isWeb} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {DraggableScrollView} from '#/view/com/pager/DraggableScrollView'
 import {atoms as a, tokens, useTheme, web} from '#/alf'
 import {transparentifyColor} from '#/alf/util/colorGeneration'
···
   const [contentWidth, setContentWidth] = useState(0)
   const pendingTabOffsets = useRef<{x: number; width: number}[]>([])
   const [tabOffsets, setTabOffsets] = useState<{x: number; width: number}[]>([])
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const onInitialLayout = useNonReactiveCallback(() => {
     const index = interests.indexOf(selectedInterest)
···
               t.atoms.bg,
               a.h_full,
               a.aspect_square,
-              a.rounded_full,
+              enableSquareButtons ? a.rounded_sm : a.rounded_full,
             ]}>
             <ButtonIcon icon={ArrowLeft} />
           </Button>
···
               t.atoms.bg,
               a.h_full,
               a.aspect_square,
-              a.rounded_full,
+              enableSquareButtons ? a.rounded_sm : a.rounded_full,
             ]}>
             <ButtonIcon icon={ArrowRight} />
           </Button>
···
 }) {
   const t = useTheme()
   const {_} = useLingui()
+  const enableSquareButtons = useEnableSquareButtons()
   const label = active
     ? _(
         msg({
···
         {({hovered, pressed, focused}) => (
           <View
             style={[
-              a.rounded_full,
+              enableSquareButtons ? a.rounded_sm : a.rounded_full,
               a.px_lg,
               a.py_sm,
               a.border,

src/components/Menu/index.tsx

···
 import flattenReactChildren from 'react-keyed-flatten-children'
 
 import {isAndroid, isIOS, isNative} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
···
 
 export function ItemRadio({selected}: {selected: boolean}) {
   const t = useTheme()
+  const enableSquareButtons = useEnableSquareButtons()
   return (
     <View
       style={[
         a.justify_center,
         a.align_center,
-        a.rounded_full,
+        enableSquareButtons ? a.rounded_sm : a.rounded_full,
         t.atoms.border_contrast_high,
         {
           borderWidth: 1,
···
         <View
           style={[
             a.absolute,
-            a.rounded_full,
+            enableSquareButtons ? a.rounded_sm : a.rounded_full,
             {height: 14, width: 14},
             selected
               ? {

src/components/Menu/index.web.tsx

···
 import {DropdownMenu} from 'radix-ui'
 
 import {useA11y} from '#/state/a11y'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, flatten, useTheme, web} from '#/alf'
 import type * as Dialog from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
···
 
 export function ItemRadio({selected}: {selected: boolean}) {
   const t = useTheme()
+  const enableSquareButtons = useEnableSquareButtons()
   return (
     <View
       style={[
         a.justify_center,
         a.align_center,
-        a.rounded_full,
+        enableSquareButtons ? a.rounded_sm : a.rounded_full,
         t.atoms.border_contrast_high,
         {
           borderWidth: 1,
···
         <View
           style={[
             a.absolute,
-            a.rounded_full,
+            enableSquareButtons ? a.rounded_sm : a.rounded_full,
             {height: 14, width: 14},
             selected
               ? {

src/components/Pills.tsx

···
 import {Trans} from '@lingui/macro'
 
 import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
 import {Button} from '#/components/Button'
···
   const isBlueskyLabel =
     desc.sourceType === 'labeler' && desc.sourceDid === BSKY_LABELER_DID
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const {outer, avi, text} = React.useMemo(() => {
     switch (size) {
       case 'lg': {
···
             style={[
               a.flex_row,
               a.align_center,
-              a.rounded_full,
+              enableSquareButtons ? a.rounded_sm : a.rounded_full,
               outer,
               (hovered || pressed) && t.atoms.bg_contrast_50,
             ]}>

src/components/PolicyUpdateOverlay/Badge.tsx

···
 import {View} from 'react-native'
 import {Trans} from '@lingui/macro'
 
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {Logo} from '#/view/icons/Logo'
 import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 
 export function Badge() {
   const t = useTheme()
+  const enableSquareButtons = useEnableSquareButtons()
   return (
     <View style={[a.align_start]}>
       <View
···
           a.pl_md,
           a.pr_lg,
           a.py_sm,
-          a.rounded_full,
+          enableSquareButtons ? a.rounded_sm : a.rounded_full,
           a.flex_row,
           a.align_center,
           a.gap_xs,

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoEmbedInnerNative.tsx

···
 
 import {HITSLOP_30} from '#/lib/constants'
 import {useAutoplayDisabled} from '#/state/preferences'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useTheme} from '#/alf'
 import {useIsWithinMessage} from '#/components/dms/MessageContext'
 import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute'
···
   accessibilityHint: string
   style?: StyleProp<ViewStyle>
 }) {
+  const enableSquareButtons = useEnableSquareButtons()
   return (
     <View
       style={[
         a.absolute,
-        a.rounded_full,
+        enableSquareButtons ? a.rounded_sm : a.rounded_full,
         a.justify_center,
         {
           backgroundColor: 'rgba(0, 0, 0, 0.5)',

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/ControlButton.tsx

···
 import {type SvgProps} from 'react-native-svg'
 
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {PressableWithHover} from '#/view/com/util/PressableWithHover'
 import {atoms as a, useTheme, web} from '#/alf'
 
···
   onPress: () => void
 }) {
   const t = useTheme()
+  const enableSquareButtons = useEnableSquareButtons()
   return (
     <PressableWithHover
       accessibilityRole="button"
···
       onPress={onPress}
       style={[
         a.p_xs,
-        a.rounded_full,
+        enableSquareButtons ? a.rounded_sm : a.rounded_full,
         web({transition: 'background-color 0.1s'}),
       ]}
       hoverStyle={{backgroundColor: 'rgba(255, 255, 255, 0.2)'}}>

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/Scrubber.tsx

···
 
 import {isFirefox, isTouchDevice} from '#/lib/browser'
 import {clamp} from '#/lib/numbers'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useTheme, web} from '#/alf'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {formatTime} from './utils'
···
   const {_} = useLingui()
   const t = useTheme()
   const [scrubberActive, setScrubberActive] = useState(false)
+  const enableSquareButtons = useEnableSquareButtons()
   const {
     state: hovered,
     onIn: onStartHover,
···
         <View
           style={[
             a.w_full,
-            a.rounded_full,
+            enableSquareButtons ? a.rounded_sm : a.rounded_full,
             a.overflow_hidden,
             {backgroundColor: 'rgba(255, 255, 255, 0.4)'},
             {height: hovered || scrubberActive ? 6 : 3},
···
             style={[
               a.w_full,
               a.h_full,
-              a.rounded_full,
+              enableSquareButtons ? a.rounded_sm : a.rounded_full,
               {backgroundColor: t.palette.white},
               {
                 transform: [

src/components/Post/Embed/VideoEmbed/index.tsx

···
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {ConstrainedImage} from '#/view/com/util/images/AutoSizedImage'
 import {atoms as a} from '#/alf'
···
   const {_} = useLingui()
   const ref = useRef<{togglePlayback: () => void}>(null)
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const [status, setStatus] = useState<'playing' | 'paused' | 'pending'>(
     'pending',
   )
···
             {showSpinner ? (
               <View
                 style={[
-                  a.rounded_full,
+                  enableSquareButtons ? a.rounded_sm : a.rounded_full,
                   a.p_xs,
                   a.align_center,
                   a.justify_center,

src/components/PostControls/PostControlButton.tsx

···
 import {type GestureResponderEvent, type Insets, type View} from 'react-native'
 
 import {useHaptics} from '#/lib/haptics'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, type ButtonProps} from '#/components/Button'
 import {type Props as SVGIconProps} from '#/components/icons/common'
···
 }) {
   const t = useTheme()
   const playHaptic = useHaptics()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const ctx = useMemo(
     () => ({
···
       onLongPress={handleLongPress}
       style={style}
       hoverStyle={t.atoms.bg_contrast_25}
-      shape="round"
+      shape={enableSquareButtons ? 'square' : 'round'}
       variant="ghost"
       color="secondary"
       {...props}

src/components/PostControls/ShareMenu/RecentChats.tsx

···
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {logger} from '#/logger'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useListConvosQuery} from '#/state/queries/messages/list-conversations'
 import {useSession} from '#/state/session'
···
 
 function ConvoSkeleton() {
   const t = useTheme()
+  const enableSquareButtons = useEnableSquareButtons()
   return (
     <View
       style={[
···
         style={[
           t.atoms.bg_contrast_50,
           {width: WIDTH - 8, height: WIDTH - 8},
-          a.rounded_full,
+          enableSquareButtons ? a.rounded_sm : a.rounded_full,
         ]}
       />
       <View

src/components/ProfileHoverCard/index.web.tsx

···
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {usePrefetchProfileQuery, useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
···
   const isLabeler = profile.associated?.labeler
   const verification = useSimpleVerificationState({profile})
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   return (
     <View>
       <View style={[a.flex_row, a.justify_between, a.align_start]}>
···
               size="small"
               color="secondary"
               variant="solid"
-              style={[a.rounded_full]}>
+              style={enableSquareButtons ? [a.rounded_sm] : [a.rounded_full]}>
               <ButtonText>{_(msg`View profile`)}</ButtonText>
             </Link>
           ) : (
···
                   ? _(msg`Following`)
                   : _(msg`Follow`)
               }
-              style={[a.rounded_full]}
+              style={enableSquareButtons ? [a.rounded_sm] : [a.rounded_full]}
               onPress={profileShadow.viewer?.following ? unfollow : follow}>
               <ButtonIcon
                 position="left"

src/components/Select/index.tsx

···
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useTheme} from '#/alf'
 import {atoms as a} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
···
   const {_} = useLingui()
   const [headerHeight, setHeaderHeight] = useState(50)
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const render = useCallback(
     ({item, index}: {item: T; index: number}) => {
       return renderItem(item, index, context.value)
···
         size="small"
         color="primary"
         variant="ghost"
-        style={[a.rounded_full]}>
+        style={[enableSquareButtons ? a.rounded_sm : a.rounded_full]}>
         <ButtonText style={[a.text_md]}>
           <Trans>Done</Trans>
         </ButtonText>
       </Button>
     ),
-    [control, _],
+    [control, _, enableSquareButtons],
   )
 
   return (

src/components/TrendingTopics.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {PressableScale} from '#/lib/custom-animations/PressableScale'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 // import {makeProfileLink} from '#/lib/routes/links'
 // import {feedUriToHref} from '#/lib/strings/url-helpers'
 // import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
···
   const hasIcon = topic.type === 'starter-pack' && !isSmall
   const iconSize = 20
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   return (
     <View
       style={[
         a.flex_row,
         a.align_center,
-        a.rounded_full,
+        enableSquareButtons ? a.rounded_sm : a.rounded_full,
         a.border,
         t.atoms.border_contrast_medium,
         t.atoms.bg,
···
 }) {
   const t = useTheme()
   const isSmall = size === 'small'
+
+  const enableSquareButtons = useEnableSquareButtons()
+
   return (
     <View
       style={[
-        a.rounded_full,
+        enableSquareButtons ? a.rounded_sm : a.rounded_full,
         a.border,
         t.atoms.border_contrast_medium,
         t.atoms.bg_contrast_25,

src/components/activity-notifications/SubscribeProfileButton.tsx

···
 
 import {useRequireEmailVerification} from '#/lib/hooks/useRequireEmailVerification'
 import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {Button, ButtonIcon} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {BellPlus_Stroke2_Corner0_Rounded as BellPlusIcon} from '#/components/icons/BellPlus'
···
 
   const Icon = isSubscribed ? BellRingingIcon : BellPlusIcon
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   return (
     <>
       <Tooltip.Outer
···
             testID="dmBtn"
             size="small"
             color="secondary"
-            shape="round"
+            shape={enableSquareButtons ? 'square' : 'round'}
             label={_(msg`Get notified when ${name} posts`)}
             onPress={wrappedOnPress}>
             <ButtonIcon icon={Icon} size="md" />

src/components/ageAssurance/AgeAssuranceAdmonition.tsx

···
 
 import {useAgeAssurance} from '#/state/ageAssurance/useAgeAssurance'
 import {logger} from '#/state/ageAssurance/util'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, select, useTheme, type ViewStyleProp} from '#/alf'
 import {useDialogControl} from '#/components/ageAssurance/AgeAssuranceInitDialog'
 import type * as Dialog from '#/components/Dialog'
···
 }) {
   const t = useTheme()
   const {_} = useLingui()
+  const enableSquareButtons = useEnableSquareButtons()
 
   return (
     <>
···
             style={[
               a.align_center,
               a.justify_center,
-              a.rounded_full,
+              enableSquareButtons ? a.rounded_sm : a.rounded_full,
               {
                 width: 32,
                 height: 32,

src/components/ageAssurance/AgeAssuranceBadge.tsx

···
 import {View} from 'react-native'
 import {Trans} from '@lingui/macro'
 
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, select, useTheme} from '#/alf'
 import {ShieldCheck_Stroke2_Corner0_Rounded as Shield} from '#/components/icons/Shield'
 import {Text} from '#/components/Typography'
 
 export function AgeAssuranceBadge() {
   const t = useTheme()
+  const enableSquareButtons = useEnableSquareButtons()
 
   return (
     <View
···
         a.px_sm,
         a.py_xs,
         a.pr_sm,
-        a.rounded_full,
+        enableSquareButtons ? a.rounded_sm : a.rounded_full,
         {
           backgroundColor: select(t.name, {
             light: t.palette.primary_100,

src/components/ageAssurance/AgeAssuranceDismissibleFeedBanner.tsx

···
 
 import {useAgeAssurance} from '#/state/ageAssurance/useAgeAssurance'
 import {logger} from '#/state/ageAssurance/util'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {Nux, useNux, useSaveNux} from '#/state/queries/nuxs'
 import {atoms as a, select, useTheme} from '#/alf'
 import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
···
   const {visible, close} = useInternalState()
   const copy = useAgeAssuranceCopy()
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   if (!visible) return null
 
   return (
···
           style={[
             a.align_center,
             a.justify_center,
-            a.rounded_full,
+            enableSquareButtons ? a.rounded_sm : a.rounded_full,
             {
               width: 42,
               height: 42,

src/components/ageAssurance/AgeAssuranceDismissibleNotice.tsx

···
 
 import {useAgeAssurance} from '#/state/ageAssurance/useAgeAssurance'
 import {logger} from '#/state/ageAssurance/util'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {Nux, useNux, useSaveNux} from '#/state/queries/nuxs'
 import {atoms as a, type ViewStyleProp} from '#/alf'
 import {AgeAssuranceAdmonition} from '#/components/ageAssurance/AgeAssuranceAdmonition'
···
   const copy = useAgeAssuranceCopy()
   const {mutate: save, variables} = useSaveNux()
   const hidden = !!variables
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   if (!isReady) return null
   if (isDeclaredUnderage) return null
···
           size="tiny"
           variant="solid"
           color="secondary_inverted"
-          shape="round"
+          shape={enableSquareButtons ? 'square' : 'round'}
           onPress={() => {
             save({
               id: Nux.AgeAssuranceDismissibleNotice,

src/components/dialogs/GifSelect.tsx

···
 import {logEvent} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
 import {isWeb} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   type Gif,
   tenorUrlToBskyGifUrl,
···
   const trendingQuery = useFeaturedGifsQuery()
   const searchQuery = useGifSearchQuery(search)
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const {
     data,
     fetchNextPage,
···
             size="small"
             variant="ghost"
             color="secondary"
-            shape="round"
+            shape={enableSquareButtons ? 'square' : 'round'}
             onPress={() => control.close()}
             label={_(msg`Close GIF dialog`)}>
             <ButtonIcon icon={Arrow} size="md" />
···
         </TextField.Root>
       </View>
     )
-  }, [gtMobile, t.atoms.bg, _, control])
+  }, [gtMobile, t.atoms.bg, _, control, enableSquareButtons])
 
   return (
     <>

src/components/dialogs/MutedWords.tsx

···
 
 import {logger} from '#/logger'
 import {isNative} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   usePreferencesQuery,
   useRemoveMutedWordMutation,
···
   const isExpired = expiryDate && expiryDate < new Date()
   const formatDistance = useFormatDistance()
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const remove = React.useCallback(async () => {
     control.close()
     removeMutedWord(word)
···
         <Button
           label={_(msg`Remove mute word from your list`)}
           size="tiny"
-          shape="round"
+          shape={enableSquareButtons ? 'square' : 'round'}
           variant="outline"
           color="secondary"
           onPress={() => control.open()}

src/components/dialogs/SearchablePeopleList.tsx

···
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {isWeb} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
 import {useListConvosQuery} from '#/state/queries/messages/list-conversations'
···
   const inputRef = useRef<TextInput>(null)
 
   const [searchText, setSearchText] = useState('')
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const {
     data: results,
···
             <Button
               label={_(msg`Close`)}
               size="small"
-              shape="round"
+              shape={enableSquareButtons ? 'square' : 'round'}
               variant={isWeb ? 'ghost' : 'solid'}
               color="secondary"
               style={[
···
     title,
     searchText,
     control,
+    enableSquareButtons,
   ])
 
   return (
···
 
 function ProfileCardSkeleton() {
   const t = useTheme()
+  const enableSquareButtons = useEnableSquareButtons()
 
   return (
     <View
···
       ]}>
       <View
         style={[
-          a.rounded_full,
+          enableSquareButtons ? a.rounded_sm : a.rounded_full,
           {width: 42, height: 42},
           t.atoms.bg_contrast_25,
         ]}

src/components/dialogs/StarterPackDialog.tsx

···
 import {type NavigationProp} from '#/lib/routes/types'
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   invalidateActorStarterPacksWithMembershipQuery,
   useActorStarterPacksWithMembershipsQuery,
···
   const control = Dialog.useDialogContext()
   const {_} = useLingui()
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const {
     data,
     isError,
···
           variant="ghost"
           color="secondary"
           size="small"
-          shape="round">
+          shape={enableSquareButtons ? 'square' : 'round'}>
           <ButtonIcon icon={XIcon} />
         </Button>
       </View>

src/components/dialogs/lists/CreateOrEditListDialog.tsx

···
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
 import {type ImageMeta} from '#/state/gallery'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   useListCreateMutation,
   useListMetadataMutation,
···
     return 'app.bsky.graph.defs#curatelist'
   }, [list, purpose])
   const isCurateList = activePurpose === 'app.bsky.graph.defs#curatelist'
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const {_} = useLingui()
   const t = useTheme()
···
         size="small"
         color="primary"
         variant="ghost"
-        style={[a.rounded_full]}
+        style={[enableSquareButtons ? a.rounded_sm : a.rounded_full]}
         testID="editProfileCancelBtn">
         <ButtonText style={[a.text_md]}>
           <Trans>Cancel</Trans>
         </ButtonText>
       </Button>
     ),
-    [onPressCancel, _],
+    [onPressCancel, _, enableSquareButtons],
   )
 
   const saveButton = useCallback(
···
         size="small"
         color="primary"
         variant="ghost"
-        style={[a.rounded_full]}
+        style={[enableSquareButtons ? a.rounded_sm : a.rounded_full]}
         testID="editProfileSaveBtn">
         <ButtonText style={[a.text_md, !dirty && t.atoms.text_contrast_low]}>
           <Trans>Save</Trans>
···
       isUpdatingList,
       displayNameTooLong,
       descriptionTooLong,
+      enableSquareButtons,
     ],
   )
 

src/components/dialogs/nuxs/ActivitySubscriptions.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {isWeb} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useTheme, web} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
···
   const {_} = useLingui()
   const nuxDialogs = useNuxDialogContext()
   const control = Dialog.useDialogControl()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   Dialog.useAutoOpen(control)
 
···
               a.pl_sm,
               a.pr_md,
               a.py_sm,
-              a.rounded_full,
+              enableSquareButtons ? a.rounded_sm : a.rounded_full,
               a.flex_row,
               a.align_center,
               a.gap_xs,

src/components/dialogs/nuxs/InitialVerificationAnnouncement.tsx

···
 import {urls} from '#/lib/constants'
 import {logger} from '#/logger'
 import {isNative} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
···
   const {gtMobile} = useBreakpoints()
   const nuxDialogs = useNuxDialogContext()
   const control = Dialog.useDialogControl()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   Dialog.useAutoOpen(control)
 
···
               a.pl_sm,
               a.pr_md,
               a.py_sm,
-              a.rounded_full,
+              enableSquareButtons ? a.rounded_sm : a.rounded_full,
               a.flex_row,
               a.align_center,
               a.gap_xs,

src/components/dms/ActionsWrapper.web.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {useConvoActive} from '#/state/messages/convo'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
···
   const {currentAccount} = useSession()
 
   const [showActions, setShowActions] = useState(false)
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const onMouseEnter = useCallback(() => {
     setShowActions(true)
···
                 style={[
                   {opacity: showMenuTrigger},
                   a.p_xs,
-                  a.rounded_full,
+                  enableSquareButtons ? a.rounded_sm : a.rounded_full,
                   (state.hovered || state.pressed) && t.atoms.bg_contrast_25,
                 ]}>
                 <EmojiSmileIcon
···
                 style={[
                   {opacity: showMenuTrigger},
                   a.p_xs,
-                  a.rounded_full,
+                  enableSquareButtons ? a.rounded_sm : a.rounded_full,
                   (state.hovered || state.pressed) && t.atoms.bg_contrast_25,
                 ]}>
                 <DotsHorizontalIcon

src/components/dms/ChatEmptyPill.tsx

···
 import {ShrinkAndPop} from '#/lib/custom-animations/ShrinkAndPop'
 import {useHaptics} from '#/lib/haptics'
 import {isWeb} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 
···
   const [promptIndex, setPromptIndex] = React.useState(lastIndex)
 
   const scale = useSharedValue(1)
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const prompts = React.useMemo(() => {
     return [
···
         style={[
           a.px_xl,
           a.py_md,
-          a.rounded_full,
+          enableSquareButtons ? a.rounded_sm : a.rounded_full,
           t.atoms.bg_contrast_25,
           a.align_center,
           animatedStyle,

src/components/dms/ConvoMenu.tsx

···
 
 import {type NavigationProp} from '#/lib/routes/types'
 import {type Shadow} from '#/state/cache/types'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   useConvoQuery,
   useMarkAsReadMutation,
···
 
   const {listBlocks} = blockInfo
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   return (
     <>
       <Menu.Root control={control}>
···
                   }}
                   size="small"
                   color="secondary"
-                  shape="round"
+                  shape={enableSquareButtons ? 'square' : 'round'}
                   variant="ghost"
                   style={[a.bg_transparent]}>
                   <ButtonIcon icon={DotsHorizontal} size="md" />

src/components/dms/EmojiPopup.android.tsx

···
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {TimesLarge_Stroke2_Corner0_Rounded as CloseIcon} from '#/components/icons/Times'
···
   const [modalVisible, setModalVisible] = useState(false)
   const {_} = useLingui()
   const t = useTheme()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   return (
     <>
···
               size="small"
               variant="ghost"
               color="secondary"
-              shape="round">
+              shape={enableSquareButtons ? 'square' : 'round'}>
               <ButtonIcon icon={CloseIcon} />
             </Button>
           </View>

src/components/dms/EmojiReactionPicker.tsx

···
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useSession} from '#/state/session'
 import {atoms as a, tokens, useTheme} from '#/alf'
 import * as ContextMenu from '#/components/ContextMenu'
···
 
   const bgColor = t.scheme === 'light' ? t.atoms.bg : t.atoms.bg_contrast_25
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   return (
     <View
       onLayout={evt => setLayout(evt.nativeEvent.layout)}
       style={[
         bgColor,
-        a.rounded_full,
+        enableSquareButtons ? a.rounded_sm : a.rounded_full,
         a.absolute,
         {bottom: '100%'},
         isFromSelf ? a.right_0 : a.left_0,
···
             {hovered => (
               <View
                 style={[
-                  a.rounded_full,
+                  enableSquareButtons ? a.rounded_sm : a.rounded_full,
                   hovered
                     ? {
                         backgroundColor: alreadyReacted
···
         }}>
         <View
           style={[
-            a.rounded_full,
+            enableSquareButtons ? a.rounded_sm : a.rounded_full,
             t.scheme === 'light'
               ? t.atoms.bg_contrast_25
               : t.atoms.bg_contrast_50,

src/components/dms/EmojiReactionPicker.web.tsx

···
 import {useLingui} from '@lingui/react'
 import {DropdownMenu} from 'radix-ui'
 
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useSession} from '#/state/session'
 import {type Emoji} from '#/view/com/composer/text-input/web/EmojiPicker'
 import {useWebPreloadEmoji} from '#/view/com/composer/text-input/web/useWebPreloadEmoji'
···
 
   const [prevOpen, setPrevOpen] = useState(control.isOpen)
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   if (control.isOpen !== prevOpen) {
     setPrevOpen(control.isOpen)
     if (!control.isOpen) {
···
       </DropdownMenu.Content>
     </DropdownMenu.Portal>
   ) : (
-    <Menu.Outer style={[a.rounded_full]}>
+    <Menu.Outer style={[enableSquareButtons ? a.rounded_sm : a.rounded_full]}>
       <View style={[a.flex_row, a.gap_xs]}>
         {['👍', '😆', '❤️', '👀', '😢'].map(emoji => {
           const alreadyReacted = hasAlreadyReacted(
···
               style={flatten([
                 a.flex,
                 a.flex_col,
-                a.rounded_full,
+                enableSquareButtons ? a.rounded_sm : a.rounded_full,
                 a.justify_center,
                 a.align_center,
                 a.transition_transform,
···
             role="button"
             onPress={() => setExpanded(true)}
             style={flatten([
-              a.rounded_full,
+              enableSquareButtons ? a.rounded_sm : a.rounded_full,
               {height: 34, width: 34},
               a.justify_center,
               a.align_center,

src/components/dms/MessageProfileButton.tsx

···
 import {useRequireEmailVerification} from '#/lib/hooks/useRequireEmailVerification'
 import {type NavigationProp} from '#/lib/routes/types'
 import {logEvent} from '#/lib/statsig/statsig'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useGetConvoAvailabilityQuery} from '#/state/queries/messages/get-convo-availability'
 import {useGetConvoForMembers} from '#/state/queries/messages/get-convo-for-members'
 import * as Toast from '#/view/com/util/Toast'
···
   const t = useTheme()
   const navigation = useNavigation<NavigationProp>()
   const requireEmailVerification = useRequireEmailVerification()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const {data: convoAvailability} = useGetConvoAvailabilityQuery(profile.did)
   const {mutate: initiateConvo} = useGetConvoForMembers({
···
             a.justify_center,
             a.align_center,
             t.atoms.bg_contrast_25,
-            a.rounded_full,
+            enableSquareButtons ? a.rounded_sm : a.rounded_full,
             // Matches size of button below to avoid layout shift
             {width: 33, height: 33},
           ]}>
···
           size="small"
           color="secondary"
           variant="solid"
-          shape="round"
+          shape={enableSquareButtons ? 'square' : 'round'}
           label={_(msg`Message ${profile.handle}`)}
           style={[a.justify_center]}
           onPress={wrappedOnPress}>

src/components/dms/NewMessagesPill.tsx

···
 } from '#/lib/custom-animations/ScaleAndFade'
 import {useHaptics} from '#/lib/haptics'
 import {isAndroid, isIOS, isWeb} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 
···
   const bottomOffset = isWeb ? 0 : bottomInset + bottomBarHeight
 
   const scale = useSharedValue(1)
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const onPressIn = React.useCallback(() => {
     if (isWeb) return
···
       <AnimatedPressable
         style={[
           a.py_sm,
-          a.rounded_full,
+          enableSquareButtons ? a.rounded_sm : a.rounded_full,
           a.shadow_sm,
           a.border,
           t.atoms.bg_contrast_50,

src/components/forms/SearchInput.tsx

···
 
 import {HITSLOP_10} from '#/lib/constants'
 import {isNative} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import * as TextField from '#/components/forms/TextField'
···
     const t = useTheme()
     const {_} = useLingui()
     const showClear = value && value.length > 0
+
+    const enableSquareButtons = useEnableSquareButtons()
 
     return (
       <View style={[a.w_full, a.relative]}>
···
               label={_(msg`Clear search query`)}
               hitSlop={HITSLOP_10}
               size="tiny"
-              shape="round"
+              shape={enableSquareButtons ? 'square' : 'round'}
               variant="ghost"
               color="secondary">
               <ButtonIcon icon={X} size="xs" />

src/components/forms/Toggle/index.tsx

···
 import {HITSLOP_10} from '#/lib/constants'
 import {useHaptics} from '#/lib/haptics'
 import {isNative} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   atoms as a,
   native,
···
 export function Switch() {
   const t = useTheme()
   const {selected, hovered, disabled, isInvalid} = useItemContext()
+  const enableSquareButtons = useEnableSquareButtons()
   const {baseStyles, baseHoverStyles, indicatorStyles} = useMemo(() => {
     const base: ViewStyle[] = []
     const baseHover: ViewStyle[] = []
···
     <View
       style={[
         a.relative,
-        a.rounded_full,
+        enableSquareButtons ? a.rounded_sm : a.rounded_full,
         t.atoms.bg,
         {
           height: 28,
···
           }),
         ).easing(Easing.inOut(Easing.cubic))}
         style={[
-          a.rounded_full,
+          enableSquareButtons ? a.rounded_sm : a.rounded_full,
           {
             backgroundColor: t.palette.white,
             height: 22,
···
 
 export function Radio() {
   const t = useTheme()
+  const enableSquareButtons = useEnableSquareButtons()
   const {selected, hovered, focused, disabled, isInvalid} =
     useContext(ItemContext)
   const {baseStyles, baseHoverStyles, indicatorStyles} =
···
       style={[
         a.justify_center,
         a.align_center,
-        a.rounded_full,
+        enableSquareButtons ? a.rounded_sm : a.rounded_full,
         t.atoms.border_contrast_high,
         a.transition_color,
         {
···
         <View
           style={[
             a.absolute,
-            a.rounded_full,
+            enableSquareButtons ? a.rounded_sm : a.rounded_full,
             {height: 12, width: 12},
             {backgroundColor: t.palette.white},
             indicatorStyles,

src/components/interstitials/Trending.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {logEvent} from '#/lib/statsig/statsig'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   useTrendingSettings,
   useTrendingSettingsApi,
···
   const {setTrendingDisabled} = useTrendingSettingsApi()
   const {data: trending, error, isLoading} = useTrendingTopics()
   const noTopics = !isLoading && !error && !trending?.topics?.length
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const onConfirmHide = React.useCallback(() => {
     logEvent('trendingTopics:hide', {context: 'interstitial'})
···
                   size="tiny"
                   variant="ghost"
                   color="secondary"
-                  shape="round"
+                  shape={enableSquareButtons ? 'square' : 'round'}
                   onPress={() => trendingPrompt.open()}>
                   <ButtonIcon icon={X} />
                 </Button>

src/components/interstitials/TrendingVideos.tsx

···
 import {VIDEO_FEED_URI} from '#/lib/constants'
 import {makeCustomFeedLink} from '#/lib/routes/links'
 import {logEvent} from '#/lib/statsig/statsig'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useTrendingSettingsApi} from '#/state/preferences/trending'
 import {usePostFeedQuery} from '#/state/queries/post-feed'
 import {RQKEY} from '#/state/queries/post-feed'
···
     return makeCustomFeedLink(urip.host, urip.rkey, undefined, 'discover')
   }, [])
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   return (
     <View style={[{width: CARD_WIDTH * 2}]}>
       <Link
···
             <Button
               color="primary"
               size="small"
-              shape="round"
+              shape={enableSquareButtons ? 'square' : 'round'}
               label={_(msg`View more trending videos`)}>
               <ButtonIcon icon={ChevronRight} />
             </Button>

src/components/moderation/ReportDialog/index.tsx

···
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {Logger} from '#/logger'
 import {isNative} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useMyLabelersQuery} from '#/state/queries/preferences'
 import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
···
   const copy = useCopyForSubject(props.subject)
   const {categories, getCategory} = useReportOptions()
   const [state, dispatch] = React.useReducer(reducer, initialState)
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   /**
    * Submission handling
···
                     size="tiny"
                     variant="solid"
                     color="secondary"
-                    shape="round"
+                    shape={enableSquareButtons ? 'square' : 'round'}
                     onPress={() => {
                       dispatch({type: 'clearCategory'})
                     }}>
···
                 size="tiny"
                 variant="solid"
                 color="secondary"
-                shape="round"
+                shape={enableSquareButtons ? 'square' : 'round'}
                 onPress={() => {
                   dispatch({type: 'clearOption'})
                 }}>
···
                           size="tiny"
                           variant="solid"
                           color="secondary"
-                          shape="round"
+                          shape={enableSquareButtons ? 'square' : 'round'}
                           onPress={() => {
                             dispatch({type: 'clearLabeler'})
                           }}>
···
   const t = useTheme()
   const active = activeIndex1 === index
   const completed = activeIndex1 > index
+  const enableSquareButtons = useEnableSquareButtons()
   return (
     <View style={[a.flex_row, a.gap_sm, a.pr_3xl]}>
       <View
         style={[
           a.justify_center,
           a.align_center,
-          a.rounded_full,
+          enableSquareButtons ? a.rounded_sm : a.rounded_full,
           a.border,
           {
             width: 24,

src/components/moderation/ScreenHider.tsx

···
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
 import {type NavigationProp} from '#/lib/routes/types'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {CenteredView} from '#/view/com/util/Views'
 import {atoms as a, useTheme, web} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
···
   const control = useModerationDetailsDialogControl()
   const blur = modui.blurs[0]
   const desc = useModerationCauseDescription(blur)
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   if (!blur || override) {
     return (
···
           variant="solid"
           color="primary"
           size="large"
-          style={[a.rounded_full]}
+          style={[enableSquareButtons ? a.rounded_sm : a.rounded_full]}
           label={_(msg`Go back`)}
           onPress={() => {
             if (navigation.canGoBack()) {
···
             variant="solid"
             color="secondary"
             size="large"
-            style={[a.rounded_full]}
+            style={[enableSquareButtons ? a.rounded_sm : a.rounded_full]}
             label={_(msg`Show anyway`)}
             onPress={() => setOverride(v => !v)}>
             <ButtonText>

src/components/verification/VerificationsDialog.tsx

···
 import {urls} from '#/lib/constants'
 import {getUserDisplayName} from '#/lib/getUserDisplayName'
 import {logger} from '#/logger'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
···
   const verificationRemovePromptControl = useDialogControl()
   const canAdminister = verification.issuer === currentAccount?.did
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   return (
     <View
       style={{
···
                     size="small"
                     variant="outline"
                     color="negative"
-                    shape="round"
+                    shape={enableSquareButtons ? 'square' : 'round'}
                     onPress={() => {
                       verificationRemovePromptControl.open()
                     }}>

src/components/video/PlayButtonIcon.tsx

···
 import {View} from 'react-native'
 
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useTheme} from '#/alf'
 import {Play_Filled_Corner0_Rounded as PlayIcon} from '#/components/icons/Play'
 
···
   const bg = t.name === 'light' ? t.palette.contrast_25 : t.palette.contrast_975
   const fg = t.name === 'light' ? t.palette.contrast_975 : t.palette.contrast_25
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   return (
     <>
       <View
         style={[
-          a.rounded_full,
+          enableSquareButtons ? a.rounded_sm : a.rounded_full,
           {
             backgroundColor: bg,
             shadowColor: 'black',

src/screens/Hashtag.tsx

···
 import {cleanError} from '#/lib/strings/errors'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {enforceLen} from '#/lib/strings/helpers'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useSearchPostsQuery} from '#/state/queries/search-posts'
 import {useSession} from '#/state/session'
 import {useSetMinimalShellMode} from '#/state/shell'
···
 
   const [activeTab, setActiveTab] = React.useState(0)
   const setMinimalShellMode = useSetMinimalShellMode()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   useFocusEffect(
     React.useCallback(() => {
···
                   size="small"
                   variant="ghost"
                   color="primary"
-                  shape="round"
+                  shape={enableSquareButtons ? 'square' : 'round'}
                   onPress={onShare}
                   hitSlop={HITSLOP_10}
                   style={[{right: -3}]}>

src/screens/Messages/ChatList.tsx

···
 import {listenSoftReset} from '#/state/events'
 import {MESSAGE_SCREEN_POLL_INTERVAL} from '#/state/messages/convo/const'
 import {useMessagesEventBus} from '#/state/messages/events'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useLeftConvos} from '#/state/queries/messages/leave-conversation'
 import {useListConvosQuery} from '#/state/queries/messages/list-conversations'
 import {useSession} from '#/state/session'
···
   const {gtMobile} = useBreakpoints()
   const requireEmailVerification = useRequireEmailVerification()
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const openChatControl = useCallback(() => {
     newChatControl.open()
   }, [newChatControl])
···
       size="small"
       variant="ghost"
       color="secondary"
-      shape="round"
+      shape={enableSquareButtons ? 'square' : 'round'}
       style={[a.justify_center]}>
       <ButtonIcon icon={SettingsIcon} size="lg" />
     </Link>

src/screens/Messages/components/ChatListItem.tsx

···
 } from '#/lib/strings/url-helpers'
 import {isNative} from '#/platform/detection'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {
   precacheConvoQuery,
···
   const {gtMobile} = useBreakpoints()
   const profile = useProfileShadow(profileUnshadowed)
   const {mutate: markAsRead} = useMarkAsReadMutation()
+
+  const enableSquareButtons = useEnableSquareButtons()
+
   const moderation = React.useMemo(
     () => moderateProfile(profile, moderationOpts),
     [profile, moderationOpts],
···
                   <View
                     style={[
                       a.absolute,
-                      a.rounded_full,
+                      enableSquareButtons ? a.rounded_sm : a.rounded_full,
                       {
                         backgroundColor: isDimStyle
                           ? t.palette.contrast_200

src/screens/Messages/components/InboxPreview.tsx

···
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useTheme} from '#/alf'
 import {AvatarStack} from '#/components/AvatarStack'
 import {ButtonIcon, ButtonText} from '#/components/Button'
···
 }) {
   const {_} = useLingui()
   const t = useTheme()
+  const enableSquareButtons = useEnableSquareButtons()
   return (
     <Link
       label={_(msg`Chat request inbox`)}
···
           <View
             style={[
               a.absolute,
-              a.rounded_full,
+              enableSquareButtons ? a.rounded_sm : a.rounded_full,
               a.z_20,
               {
                 top: -4,

src/screens/Messages/components/MessageInput.tsx

···
   useMessageDraft,
   useSaveMessageDraft,
 } from '#/state/messages/message-drafts'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {type EmojiPickerPosition} from '#/view/com/composer/text-input/web/EmojiPicker'
 import * as Toast from '#/view/com/util/Toast'
 import {android, atoms as a, useTheme} from '#/alf'
···
   const [shouldEnforceClear, setShouldEnforceClear] = useState(false)
 
   const {needsEmailVerification} = useEmail()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   useSaveMessageDraft(message)
   useExtractEmbedFromFacets(message, setEmbed)
···
           accessibilityHint=""
           hitSlop={HITSLOP_10}
           style={[
-            a.rounded_full,
+            enableSquareButtons ? a.rounded_sm : a.rounded_full,
             a.align_center,
             a.justify_center,
             {height: 30, width: 30, backgroundColor: t.palette.primary_500},

src/screens/Messages/components/MessageInput.web.tsx

···
   useMessageDraft,
   useSaveMessageDraft,
 } from '#/state/messages/message-drafts'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter'
 import {
   type Emoji,
···
   const [isHovered, setIsHovered] = React.useState(false)
   const [textAreaHeight, setTextAreaHeight] = React.useState(38)
   const textAreaRef = React.useRef<HTMLTextAreaElement>(null)
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const onSubmit = React.useCallback(() => {
     if (!hasEmbed && message.trim() === '') {
···
             })
           }}
           style={[
-            a.rounded_full,
+            enableSquareButtons ? a.rounded_sm : a.rounded_full,
             a.overflow_hidden,
             a.align_center,
             a.justify_center,
···
           accessibilityLabel={_(msg`Send message`)}
           accessibilityHint=""
           style={[
-            a.rounded_full,
+            enableSquareButtons ? a.rounded_sm : a.rounded_full,
             a.align_center,
             a.justify_center,
             {

src/screens/Messages/components/MessageInputEmbed.tsx

···
   isBskyPostUrl,
   makeRecordUri,
 } from '#/lib/strings/url-helpers'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {usePostQuery} from '#/state/queries/post'
 import {PostMeta} from '#/view/com/util/PostMeta'
···
 }) {
   const t = useTheme()
   const {_} = useLingui()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const {data: post, status} = usePostQuery(embedUri)
 
···
         size="tiny"
         variant="solid"
         color="secondary"
-        shape="round">
+        shape={enableSquareButtons ? 'square' : 'round'}>
         <ButtonIcon icon={X} />
       </Button>
     </View>

src/screens/PostThread/components/HeaderDropdown.tsx

···
 
 import {HITSLOP_10} from '#/lib/constants'
 import {logger} from '#/logger'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {type ThreadPreferences} from '#/state/queries/preferences/useThreadPreferences'
 import {Button, ButtonIcon} from '#/components/Button'
 import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider'
···
   'sort' | 'setSort' | 'view' | 'setView'
 >): React.ReactNode {
   const {_} = useLingui()
+
+  const enableSquareButtons = useEnableSquareButtons()
+
   return (
     <Menu.Root>
       <Menu.Trigger label={_(msg`Thread options`)}>
···
             size="small"
             variant="ghost"
             color="secondary"
-            shape="round"
+            shape={enableSquareButtons ? 'square' : 'round'}
             hitSlop={HITSLOP_10}
             onPress={() => {
               logger.metric('thread:click:headerMenuOpen', {})

src/screens/PostThread/components/ThreadComposePrompt.tsx

···
 import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {useHaptics} from '#/lib/haptics'
 import {useHideBottomBarBorderForScreen} from '#/lib/hooks/useHideBottomBarBorder'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
···
   const {gtMobile} = useBreakpoints()
   const t = useTheme()
   const playHaptic = useHaptics()
+  const enableSquareButtons = useEnableSquareButtons()
   const {
     state: hovered,
     onIn: onHoverIn,
···
           a.align_center,
           a.p_sm,
           a.gap_sm,
-          a.rounded_full,
+          enableSquareButtons ? a.rounded_sm : a.rounded_full,
           (!gtMobile || hovered) && t.atoms.bg_contrast_25,
           native([a.border, t.atoms.border_contrast_low]),
           a.transition_color,

src/screens/PostThread/components/ThreadItemAnchor.tsx

···
 import {useDisableQuotesMetrics} from '#/state/preferences/disable-quotes-metrics'
 import {useDisableRepostsMetrics} from '#/state/preferences/disable-reposts-metrics'
 import {useDisableSavesMetrics} from '#/state/preferences/disable-saves-metrics'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {type ThreadItem} from '#/state/queries/usePostThread/types'
 import {useSession} from '#/state/session'
 import {type OnPostSuccessData} from '#/state/shell/composer'
···
   const t = useTheme()
   const {_, i18n} = useLingui()
   const control = Prompt.usePromptControl()
+  const enableSquareButtons = useEnableSquareButtons()
 
   const indexedAt = new Date(post.indexedAt)
   const createdAt = bsky.dangerousIsType<AppBskyFeedPost.Record>(
···
             style={[
               a.flex_row,
               a.align_center,
-              a.rounded_full,
+              enableSquareButtons ? a.rounded_sm : a.rounded_full,
               t.atoms.bg_contrast_25,
               (hovered || pressed) && t.atoms.bg_contrast_50,
               {

src/screens/PostThread/components/ThreadItemAnchorFollowButton.tsx

···
 
 import {logger} from '#/logger'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   useProfileFollowMutationQueue,
   useProfileQuery,
···
   const isFollowing = !!profile.viewer?.following
   const isFollowedBy = !!profile.viewer?.followedBy
   const [wasFollowing, setWasFollowing] = React.useState<boolean>(isFollowing)
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   // This prevents the button from disappearing as soon as we follow.
   const showFollowBtn = React.useMemo(
···
       size="small"
       variant="solid"
       color={isFollowing ? 'secondary' : 'secondary_inverted'}
-      style={[a.rounded_full]}>
+      style={enableSquareButtons ? [a.rounded_sm] : [a.rounded_full]}>
       {gtMobile && (
         <ButtonIcon
           icon={isFollowing ? Check : Plus}

src/screens/Profile/Header/EditProfileDialog.tsx

···
 import {logger} from '#/logger'
 import {type ImageMeta} from '#/state/gallery'
 import {useEnableSquareAvatars} from '#/state/preferences/enable-square-avatars'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useProfileUpdateMutation} from '#/state/queries/profile'
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
 import * as Toast from '#/view/com/util/Toast'
···
   const {_} = useLingui()
   const t = useTheme()
   const control = Dialog.useDialogContext()
+  const enableSquareButtons = useEnableSquareButtons()
   const verification = useSimpleVerificationState({
     profile,
   })
···
         size="small"
         color="primary"
         variant="ghost"
-        style={[a.rounded_full]}
+        style={[enableSquareButtons ? a.rounded_sm : a.rounded_full]}
         testID="editProfileCancelBtn">
         <ButtonText style={[a.text_md]}>
           <Trans>Cancel</Trans>
         </ButtonText>
       </Button>
     ),
-    [onPressCancel, _],
+    [onPressCancel, _, enableSquareButtons],
   )
 
   const saveButton = useCallback(
···
         size="small"
         color="primary"
         variant="ghost"
-        style={[a.rounded_full]}
+        style={[enableSquareButtons ? a.rounded_sm : a.rounded_full]}
         testID="editProfileSaveBtn">
         <ButtonText style={[a.text_md, !dirty && t.atoms.text_contrast_low]}>
           <Trans>Save</Trans>
···
       isUpdatingProfile,
       displayNameTooLong,
       descriptionTooLong,
+      enableSquareButtons,
     ],
   )
 

src/screens/Profile/Header/ProfileHeaderLabeler.tsx

···
 import {isIOS} from '#/platform/detection'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {type Shadow} from '#/state/cache/types'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useLabelerSubscriptionMutation} from '#/state/queries/labeler'
 import {useLikeMutation, useUnlikeMutation} from '#/state/queries/like'
 import {usePreferencesQuery} from '#/state/queries/preferences'
···
   const playHaptic = useHaptics()
   const cantSubscribePrompt = Prompt.usePromptControl()
   const isSelf = currentAccount?.did === profile.did
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const moderation = useMemo(
     () => moderateProfile(profile, moderationOpts),
···
                 variant="solid"
                 onPress={editProfileControl.open}
                 label={_(msg`Edit profile`)}
-                style={a.rounded_full}>
+                style={enableSquareButtons ? a.rounded_sm : a.rounded_full}>
                 <ButtonText>
                   <Trans>Edit Profile</Trans>
                 </ButtonText>
···
                   size="small"
                   color="secondary"
                   variant="solid"
-                  shape="round"
+                  shape={enableSquareButtons ? 'square' : 'round'}
                   label={_(msg`Like this labeler`)}
                   disabled={!hasSession || isLikePending || isUnlikePending}
                   onPress={onToggleLiked}>

src/screens/Profile/Header/ProfileHeaderStandard.tsx

···
 import {logger} from '#/logger'
 import {isIOS} from '#/platform/detection'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   useProfileBlockMutationQueue,
   useProfileFollowMutationQueue,
···
   const playHaptic = useHaptics()
 
   const editProfileControl = useDialogControl()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const onPressFollow = () => {
     playHaptic()
···
                   variant="solid"
                   onPress={editProfileControl.open}
                   label={_(msg`Edit profile`)}
-                  style={[a.rounded_full]}>
+                  style={
+                    enableSquareButtons ? [a.rounded_sm] : [a.rounded_full]
+                  }>
                   <ButtonText>
                     <Trans>Edit Profile</Trans>
                   </ButtonText>
···
                   label={_(msg`Unblock`)}
                   disabled={!hasSession}
                   onPress={() => unblockPromptControl.open()}
-                  style={[a.rounded_full]}>
+                  style={
+                    enableSquareButtons ? [a.rounded_sm] : [a.rounded_full]
+                  }>
                   <ButtonText>
                     <Trans context="action">Unblock</Trans>
                   </ButtonText>
···
                   onPress={
                     profile.viewer?.following ? onPressUnfollow : onPressFollow
                   }
-                  style={[a.rounded_full]}>
+                  style={
+                    enableSquareButtons ? [a.rounded_sm] : [a.rounded_full]
+                  }>
                   {!profile.viewer?.following && (
                     <ButtonIcon position="left" icon={Plus} />
                   )}

src/screens/Profile/Header/Shell.tsx

···
 import {type Shadow} from '#/state/cache/types'
 import {useLightboxControls} from '#/state/lightbox'
 import {useEnableSquareAvatars} from '#/state/preferences/enable-square-avatars'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   maybeModifyHighQualityImage,
   useHighQualityImages,
···
   const liveStatusControl = useDialogControl()
   const highQualityImages = useHighQualityImages()
   const enableSquareAvatars = useEnableSquareAvatars()
+  const enableSquareButtons = useEnableSquareButtons()
 
   const aviRef = useAnimatedRef()
   const bannerRef = useAnimatedRef()
···
                     style={[
                       a.align_center,
                       a.justify_center,
-                      a.rounded_full,
+                      enableSquareButtons ? a.rounded_sm : a.rounded_full,
                       {
                         width: 31,
                         height: 31,

src/screens/Profile/components/ProfileFeedHeader.tsx

···
 import {toShareUrl} from '#/lib/strings/url-helpers'
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {type FeedSourceFeedInfo} from '#/state/queries/feed'
 import {useLikeMutation, useUnlikeMutation} from '#/state/queries/like'
 import {
···
 
 export function ProfileFeedHeaderSkeleton() {
   const t = useTheme()
+  const enableSquareButtons = useEnableSquareButtons()
 
   return (
     <Layout.Header.Outer>
···
           style={[
             a.justify_center,
             a.align_center,
-            a.rounded_full,
+            enableSquareButtons ? a.rounded_sm : a.rounded_full,
             t.atoms.bg_contrast_25,
             {
               height: 34,
···
   const isLiked = !!likeUri
   const feedRkey = React.useMemo(() => new AtUri(info.uri).rkey, [info.uri])
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const onToggleLiked = async () => {
     try {
       playHaptic()
···
           size="small"
           variant="ghost"
           color="secondary"
-          shape="round"
+          shape={enableSquareButtons ? 'square' : 'round'}
           onPress={onPressShare}>
           <ButtonIcon icon={Share} size="lg" />
         </Button>

src/screens/ProfileList/components/Header.tsx

···
 import {useHaptics} from '#/lib/haptics'
 import {makeListLink} from '#/lib/routes/links'
 import {logger} from '#/logger'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useListBlockMutation, useListMuteMutation} from '#/state/queries/list'
 import {
   useAddSavedFeedsMutation,
···
   const isBlocking = !!list.viewer?.blocked
   const isMuting = !!list.viewer?.muted
   const playHaptic = useHaptics()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const {mutateAsync: muteList, isPending: isMutePending} =
     useListMuteMutation()
···
             onPress={onTogglePinned}
             disabled={isPending}
             size="small"
-            style={[a.rounded_full]}>
+            style={[enableSquareButtons ? a.rounded_sm : a.rounded_full]}>
             {!isPinned && <ButtonIcon icon={isPending ? Loader : PinIcon} />}
             <ButtonText>
               {isPinned ? <Trans>Unpin</Trans> : <Trans>Pin to home</Trans>}
···
               label={_(msg`Unblock`)}
               onPress={onUnsubscribeBlock}
               size="small"
-              style={[a.rounded_full]}
+              style={[enableSquareButtons ? a.rounded_sm : a.rounded_full]}
               disabled={isBlockPending}>
               {isBlockPending && <ButtonIcon icon={Loader} />}
               <ButtonText>
···
               label={_(msg`Unmute`)}
               onPress={onUnsubscribeMute}
               size="small"
-              style={[a.rounded_full]}
+              style={[enableSquareButtons ? a.rounded_sm : a.rounded_full]}
               disabled={isMutePending}>
               {isMutePending && <ButtonIcon icon={Loader} />}
               <ButtonText>

src/screens/ProfileList/components/MoreOptionsMenu.tsx

···
 import {toShareUrl} from '#/lib/strings/url-helpers'
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   useListBlockMutation,
   useListDeleteMutation,
···
   const isMuting = !!list.viewer?.muted
   const isPinned = Boolean(savedFeedConfig?.pinned)
   const isOwner = currentAccount?.did === list.creator.did
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const onPressShare = () => {
     const {rkey} = new AtUri(list.uri)
···
               testID="moreOptionsBtn"
               size="small"
               color="secondary"
-              shape="round"
+              shape={enableSquareButtons ? 'square' : 'round'}
               {...props}>
               <ButtonIcon icon={DotGridIcon} />
             </Button>

src/screens/ProfileList/components/SubscribeMenu.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {logger} from '#/logger'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useListBlockMutation, useListMuteMutation} from '#/state/queries/list'
 import {atoms as a} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
···
     useListBlockMutation()
 
   const isPending = isMutePending || isBlockPending
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const onSubscribeMute = async () => {
     try {
···
               testID="subscribeBtn"
               size="small"
               color="primary_subtle"
-              style={[a.rounded_full]}
+              style={[enableSquareButtons ? a.rounded_sm : a.rounded_full]}
               disabled={isPending}
               {...props}>
               {isPending && <ButtonIcon icon={Loader} />}

src/screens/Search/components/ModuleHeader.tsx

···
 import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {makeCustomFeedLink} from '#/lib/routes/links'
 import {logger} from '#/logger'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, native, useTheme, type ViewStyleProp} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
···
   metricsTag: 'suggestedAccounts' | 'suggestedFeeds'
   onPress?: () => void
 }) {
+  const enableSquareButtons = useEnableSquareButtons()
   return (
     <Button
       label={label}
       size="small"
       variant="ghost"
       color="secondary"
-      shape="round"
+      shape={enableSquareButtons ? 'square' : 'round'}
       PressableComponent={native(PressableScale)}
       onPress={() => {
         logger.metric(

src/screens/Search/components/SearchHistory.tsx

···
 import {makeProfileLink} from '#/lib/routes/links'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
···
 }) {
   const {_} = useLingui()
   const moderationOpts = useModerationOpts()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   return (
     <Layout.Content
···
                   size="small"
                   variant="ghost"
                   color="secondary"
-                  shape="round">
+                  shape={enableSquareButtons ? 'square' : 'round'}>
                   <ButtonIcon icon={XIcon} />
                 </Button>
               </View>
···
   )
   const verification = useSimpleVerificationState({profile})
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   return (
     <View style={[a.relative]}>
       <Link
···
         size="tiny"
         variant="outline"
         color="secondary"
-        shape="round"
+        shape={enableSquareButtons ? 'square' : 'round'}
         onPress={onRemove}
         style={[
           a.absolute,

src/screens/Search/components/StarterPackCard.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {sanitizeHandle} from '#/lib/strings/handles'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useSession} from '#/state/session'
 import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
···
   const widthPerc = 100 / circlesCount
   const [size, setSize] = React.useState<number | null>(null)
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const isPending = (numPending && profiles.length === 0) || !moderationOpts
 
   const items = isPending
···
             <View
               onLayout={e => setSize(e.nativeEvent.layout.width)}
               style={[
-                a.rounded_full,
+                enableSquareButtons ? a.rounded_sm : a.rounded_full,
                 t.atoms.bg_contrast_25,
                 {
                   paddingTop: '100%',
···
                   style={[a.absolute, a.inset_0]}
                 />
               ) : (
-                <MediaInsetBorder style={[a.rounded_full]} />
+                <MediaInsetBorder
+                  style={[enableSquareButtons ? a.rounded_sm : a.rounded_full]}
+                />
               )}
             </View>
           </View>
···
               style={[
                 a.absolute,
                 a.inset_0,
-                a.rounded_full,
+                enableSquareButtons ? a.rounded_sm : a.rounded_full,
                 a.align_center,
                 a.justify_center,
                 {

src/screens/Search/modules/ExploreInterestsCard.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {useInterestsDisplayNames} from '#/lib/interests'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {Nux, useSaveNux} from '#/state/queries/nuxs'
 import {usePreferencesQuery} from '#/state/queries/preferences'
 import {atoms as a, useTheme} from '#/alf'
···
   const {mutateAsync: saveNux} = useSaveNux()
   const trendingPrompt = Prompt.usePromptControl()
   const [closing, setClosing] = useState(false)
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const onClose = () => {
     trendingPrompt.open()
···
                   style={[
                     a.justify_center,
                     a.align_center,
-                    a.rounded_full,
+                    enableSquareButtons ? a.rounded_sm : a.rounded_full,
                     t.atoms.bg_contrast_25,
                     a.px_lg,
                     {height: 32},
···
             size="small"
             variant="ghost"
             color="secondary"
-            shape="round"
+            shape={enableSquareButtons ? 'square' : 'round'}
             onPress={onClose}
             style={[
               a.absolute,

src/screens/Search/modules/ExploreTrendingTopics.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {logger} from '#/logger'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useTrendingSettings} from '#/state/preferences/trending'
 import {useGetTrendsQuery} from '#/state/queries/trending/useGetTrendsQuery'
···
 function TrendingIndicator({type}: {type: TrendingIndicatorType | 'skeleton'}) {
   const t = useTheme()
   const {_} = useLingui()
+
+  const enableSquareButtons = useEnableSquareButtons()
+
   const pillStyles = [
     a.flex_row,
     a.align_center,
     a.gap_xs,
-    a.rounded_full,
+    enableSquareButtons ? a.rounded_sm : a.rounded_full,
     {height: 28, paddingHorizontal: 10},
   ]
 
···
   const t = useTheme()
   const gutters = useGutters([0, 'base'])
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   return (
     <View
       style={[
···
             <LoadingPlaceholder
               width={12}
               height={12}
-              style={[a.rounded_full]}
+              style={[enableSquareButtons ? a.rounded_sm : a.rounded_full]}
             />
           </View>
           <LoadingPlaceholder width={90} height={17} />

src/screens/Search/modules/ExploreTrendingVideos.tsx

···
 import {VIDEO_FEED_URI} from '#/lib/constants'
 import {makeCustomFeedLink} from '#/lib/routes/links'
 import {logger} from '#/logger'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {RQKEY, usePostFeedQuery} from '#/state/queries/post-feed'
 import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
 import {atoms as a, tokens, useGutters, useTheme} from '#/alf'
···
 }) {
   const t = useTheme()
   const {_} = useLingui()
+  const enableSquareButtons = useEnableSquareButtons()
   const items = useMemo(() => {
     return data.pages
       .flatMap(page => page.slices)
···
                 style={[
                   a.align_center,
                   a.justify_center,
-                  a.rounded_full,
+                  enableSquareButtons ? a.rounded_sm : a.rounded_full,
                   {
                     width: 34,
                     height: 34,

src/screens/Settings/DeerSettings.tsx

···
   useSetEnableSquareAvatars,
 } from '#/state/preferences/enable-square-avatars'
 import {
+  useEnableSquareButtons,
+  useSetEnableSquareButtons,
+} from '#/state/preferences/enable-square-buttons'
+import {
   useHideFeedsPromoTab,
   useSetHideFeedsPromoTab,
 } from '#/state/preferences/hide-feeds-promo-tab'
···
 
   const enableSquareAvatars = useEnableSquareAvatars()
   const setEnableSquareAvatars = useSetEnableSquareAvatars()
+
+  const enableSquareButtons = useEnableSquareButtons()
+  const setEnableSquareButtons = useSetEnableSquareButtons()
 
   const constellationInstance = useConstellationInstance()
   const setConstellationInstanceControl = Dialog.useDialogControl()
···
               style={[a.w_full]}>
               <Toggle.LabelText style={[a.flex_1]}>
                 <Trans>Enable square avatars</Trans>
+              </Toggle.LabelText>
+              <Toggle.Platform />
+            </Toggle.Item>
+
+            <Toggle.Item
+              name="enable_square_buttons"
+              label={_(msg`Enable square buttons`)}
+              value={enableSquareButtons}
+              onChange={value => setEnableSquareButtons(value)}
+              style={[a.w_full]}>
+              <Toggle.LabelText style={[a.flex_1]}>
+                <Trans>Enable square buttons</Trans>
               </Toggle.LabelText>
               <Toggle.Platform />
             </Toggle.Item>

src/screens/Settings/InterestsSettings.tsx

···
   useInterestsDisplayNames,
 } from '#/lib/interests'
 import {type CommonNavigatorParams} from '#/lib/routes/types'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   preferencesQueryKey,
   usePreferencesQuery,
···
   const interestsDisplayNames = useInterestsDisplayNames()
   const ctx = Toggle.useItemContext()
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const styles = useMemo(() => {
     const hovered: ViewStyle[] = [t.atoms.bg_contrast_100]
     const focused: ViewStyle[] = []
···
   return (
     <View
       style={[
-        a.rounded_full,
+        enableSquareButtons ? a.rounded_sm : a.rounded_full,
         a.py_md,
         a.px_xl,
         t.atoms.bg_contrast_50,

src/screens/Settings/Settings.tsx

···
 import {useProfileShadow} from '#/state/cache/profile-shadow'
 import * as persisted from '#/state/persisted'
 import {clearStorage} from '#/state/persisted'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useDeleteActorDeclaration} from '#/state/queries/messages/actor-declaration'
 import {useProfileQuery, useProfilesQuery} from '#/state/queries/profile'
···
   const {removeAccount} = useSessionApi()
   const {isActive: live} = useActorStatus(profile)
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const onSwitchAccount = () => {
     if (pendingDid) return
     onPressSwitchAccount(account, 'Settings')
···
                   a.absolute,
                   {top: 10, right: tokens.space.lg},
                   a.p_xs,
-                  a.rounded_full,
+                  enableSquareButtons ? a.rounded_sm : a.rounded_full,
                   (state.hovered || state.pressed) && t.atoms.bg_contrast_25,
                 ]}>
                 <DotsHorizontal size="md" style={t.atoms.text} />

src/screens/Settings/components/ChangeHandleDialog.tsx

···
 import {cleanError} from '#/lib/strings/errors'
 import {createFullHandle, validateServiceHandle} from '#/lib/strings/handles'
 import {sanitizeHandle} from '#/lib/strings/handles'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useFetchDid, useUpdateHandleMutation} from '#/state/queries/handle'
 import {RQKEY as RQKEY_PROFILE} from '#/state/queries/profile'
 import {useServiceQuery} from '#/state/queries/service'
···
   const control = Dialog.useDialogContext()
   const {_} = useLingui()
   const agent = useAgent()
+  const enableSquareButtons = useEnableSquareButtons()
   const {
     data: serviceInfo,
     error: serviceInfoError,
···
         size="small"
         color="primary"
         variant="ghost"
-        style={[a.rounded_full]}>
+        style={[enableSquareButtons ? a.rounded_sm : a.rounded_full]}>
         <ButtonText style={[a.text_md]}>
           <Trans>Cancel</Trans>
         </ButtonText>
       </Button>
     ),
-    [control, _],
+    [control, _, enableSquareButtons],
   )
 
   return (
···
 function SuccessMessage({text}: {text: string}) {
   const {gtMobile} = useBreakpoints()
   const t = useTheme()
+  const enableSquareButtons = useEnableSquareButtons()
   return (
     <View
       style={[
···
       <View
         style={[
           {height: 20, width: 20},
-          a.rounded_full,
+          enableSquareButtons ? a.rounded_sm : a.rounded_full,
           a.align_center,
           a.justify_center,
           {backgroundColor: t.palette.positive_500},

src/screens/StarterPack/StarterPackScreen.tsx

···
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
 import {updateProfileShadow} from '#/state/cache/profile-shadow'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {getAllListMembers} from '#/state/queries/list-members'
 import {useResolvedStarterPackShortLink} from '#/state/queries/resolve-short-link'
···
   const deleteDialogControl = useDialogControl()
   const navigation = useNavigation<NavigationProp>()
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const {
     mutate: deleteStarterPack,
     isPending: isDeletePending,
···
               variant="solid"
               color="secondary"
               size="small"
-              shape="round">
+              shape={enableSquareButtons ? 'square' : 'round'}>
               <ButtonIcon icon={Ellipsis} />
             </Button>
           )}

src/screens/StarterPack/Wizard/index.tsx

···
 } from '#/lib/strings/starter-pack'
 import {logger} from '#/logger'
 import {isNative} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useAllListMembersQuery} from '#/state/queries/list-members'
 import {useProfileQuery} from '#/state/queries/profile'
···
   const {bottom: bottomInset} = useSafeAreaInsets()
   const {currentAccount} = useSession()
   const items = state.currentStep === 'Profiles' ? state.profiles : state.feeds
+  const enableSquareButtons = useEnableSquareButtons()
 
   const minimumItems = state.currentStep === 'Profiles' ? 8 : 0
 
···
           <View
             key={index}
             style={[
-              a.rounded_full,
+              enableSquareButtons ? a.rounded_sm : a.rounded_full,
               {
                 borderWidth: 0.5,
                 borderColor: t.atoms.bg.backgroundColor,

src/screens/Topic.tsx

···
 import {shareUrl} from '#/lib/sharing'
 import {cleanError} from '#/lib/strings/errors'
 import {enforceLen} from '#/lib/strings/helpers'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useSearchPostsQuery} from '#/state/queries/search-posts'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {Pager} from '#/view/com/pager/Pager'
···
 }: NativeStackScreenProps<CommonNavigatorParams, 'Topic'>) {
   const {topic} = route.params
   const {_} = useLingui()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const headerTitle = React.useMemo(() => {
     return enforceLen(decodeURIComponent(topic), 24, true, 'middle')
···
                   size="small"
                   variant="ghost"
                   color="primary"
-                  shape="round"
+                  shape={enableSquareButtons ? 'square' : 'round'}
                   onPress={onShare}
                   hitSlop={HITSLOP_10}
                   style={[{right: -3}]}>

src/screens/VideoFeed/components/Header.tsx

···
 import {HITSLOP_30} from '#/lib/constants'
 import {type NavigationProp} from '#/lib/routes/types'
 import {sanitizeHandle} from '#/lib/strings/handles'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useFeedSourceInfoQuery} from '#/state/queries/feed'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {type VideoFeedSourceContext} from '#/screens/VideoFeed/types'
···
   const {_} = useLingui()
   const navigation = useNavigation<NavigationProp>()
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const onPressBack = useCallback(
     (evt: GestureResponderEvent) => {
       onPress?.(evt)
···
         size="small"
         variant="ghost"
         color="secondary"
-        shape="round"
+        shape={enableSquareButtons ? 'square' : 'round'}
         onPress={onPressBack}
         hitSlop={HITSLOP_30}
         style={[

src/screens/VideoFeed/index.tsx

···
   useFeedFeedbackContext,
 } from '#/state/feed-feedback'
 import {useFeedFeedback} from '#/state/feed-feedback'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useFeedInfo} from '#/state/queries/feed'
 import {usePostLikeMutationQueue} from '#/state/queries/post'
 import {
···
   const navigation = useNavigation<NavigationProp>()
   const {_} = useLingui()
   const t = useTheme()
+  const enableSquareButtons = useEnableSquareButtons()
   return (
     <View
       style={[
···
       <View
         style={[
           {height: 100, width: 100},
-          a.rounded_full,
+          enableSquareButtons ? a.rounded_sm : a.rounded_full,
           t.atoms.bg_contrast_700,
           a.align_center,
           a.justify_center,

src/state/persisted/schema.ts

···
   disableReplyMetrics: z.boolean().optional(),
   hideSimilarAccountsRecomm: z.boolean().optional(),
   enableSquareAvatars: z.boolean().optional(),
+  enableSquareButtons: z.boolean().optional(),
   deerVerification: z
     .object({
       enabled: z.boolean(),
···
   disableReplyMetrics: false,
   hideSimilarAccountsRecomm: false,
   enableSquareAvatars: false,
+  enableSquareButtons: false,
   deerVerification: {
     enabled: false,
     // https://social.daniela.lol/profile/did:plc:p2cp5gopk7mgjegy6wadk3ep/post/3lndyqyyr4k2k

src/state/preferences/enable-square-buttons.tsx

···
+import React from 'react'
+
+import * as persisted from '#/state/persisted'
+
+// Preference: enableSquareButtons – when true, disables notifications sent when liking/reposting a post someone else reposted
+
+type StateContext = persisted.Schema['enableSquareButtons']
+// Same setter signature used across other preference modules
+type SetContext = (v: persisted.Schema['enableSquareButtons']) => void
+
+const stateContext = React.createContext<StateContext>(
+  persisted.defaults.enableSquareButtons,
+)
+const setContext = React.createContext<SetContext>(
+  (_: persisted.Schema['enableSquareButtons']) => {},
+)
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, setState] = React.useState(persisted.get('enableSquareButtons'))
+
+  const setStateWrapped = React.useCallback(
+    (value: persisted.Schema['enableSquareButtons']) => {
+      setState(value)
+      persisted.write('enableSquareButtons', value)
+    },
+    [setState],
+  )
+
+  React.useEffect(() => {
+    return persisted.onUpdate('enableSquareButtons', next => {
+      setState(next)
+    })
+  }, [setStateWrapped])
+
+  return (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setStateWrapped}>
+        {children}
+      </setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function useEnableSquareButtons() {
+  return React.useContext(stateContext)
+}
+
+export function useSetEnableSquareButtons() {
+  return React.useContext(setContext)
+}

src/state/preferences/index.tsx

···
 import {Provider as DisableSavesMetricsProvider} from './disable-saves-metrics'
 import {Provider as DisableViaRepostNotificationProvider} from './disable-via-repost-notification'
 import {Provider as EnableSquareAvatarsProvider} from './enable-square-avatars'
+import {Provider as EnableSquareButtonsProvider} from './enable-square-buttons'
 import {Provider as ExternalEmbedsProvider} from './external-embeds-prefs'
 import {Provider as GoLinksProvider} from './go-links-enabled'
 import {Provider as HiddenPostsProvider} from './hidden-posts'
···
                                                             <DisableReplyMetricsProvider>
                                                               <HideSimilarAccountsRecommProvider>
                                                                 <EnableSquareAvatarsProvider>
-                                                                  {children}
+                                                                  <EnableSquareButtonsProvider>
+                                                                    {children}
+                                                                  </EnableSquareButtonsProvider>
                                                                 </EnableSquareAvatarsProvider>
                                                               </HideSimilarAccountsRecommProvider>
                                                             </DisableReplyMetricsProvider>

src/view/com/composer/Composer.tsx

···
 } from '#/state/gallery'
 import {useModalControls} from '#/state/modals'
 import {useRequireAltTextEnabled} from '#/state/preferences'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   fromPostLanguages,
   toPostLanguages,
···
     : _(msg`What's up?`)
   const discardPromptControl = Prompt.usePromptControl()
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const dispatchPost = useCallback(
     (action: PostAction) => {
       dispatch({
···
             size="small"
             color="secondary"
             variant="ghost"
-            shape="round"
+            shape={enableSquareButtons ? 'square' : 'round'}
             style={[a.absolute, {top: 0, right: 0}]}
             onPress={() => {
               if (
···
 }) {
   const pal = usePalette('default')
   const {_} = useLingui()
+
+  const enableSquareButtons = useEnableSquareButtons()
+
   return (
     <Animated.View
       style={topBarAnimatedStyle}
···
           color="primary"
           shape="default"
           size="small"
-          style={[a.rounded_full, a.py_sm, {paddingLeft: 7, paddingRight: 7}]}
+          style={[
+            enableSquareButtons ? a.rounded_sm : a.rounded_full,
+            a.py_sm,
+            {paddingLeft: 7, paddingRight: 7},
+          ]}
           onPress={onCancel}
           accessibilityHint={_(
             msg`Closes post composer and discards post draft`,
···
             color="primary"
             shape="default"
             size="small"
-            style={[a.rounded_full, a.py_sm]}
+            style={[
+              enableSquareButtons ? a.rounded_sm : a.rounded_full,
+              a.py_sm,
+            ]}
             onPress={onPublish}
             disabled={!canPost || isPublishQueued}>
             <ButtonText style={[a.text_md]}>
···
   let selectedAssetsCount = 0
   let isMediaSelectionDisabled = false
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   if (media?.type === 'images') {
     isMediaSelectionDisabled = isMaxImages
     selectedAssetsCount = images.length
···
                   label={_(msg`Open emoji picker`)}
                   accessibilityHint={_(msg`Opens emoji picker`)}
                   variant="ghost"
-                  shape="round"
+                  shape={enableSquareButtons ? 'square' : 'round'}
                   color="primary">
                   <EmojiSmileIcon size="lg" />
                 </Button>
···
             onPress={onAddPost}
             style={[a.p_sm]}
             variant="ghost"
-            shape="round"
+            shape={enableSquareButtons ? 'square' : 'round'}
             color="primary">
             <PlusIcon size="lg" />
           </Button>
···
   const t = useTheme()
   const {_} = useLingui()
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const videoError =
     videoState.status === 'error' ? videoState.error : undefined
   const error = standardError || videoError
···
             size="tiny"
             color="secondary"
             variant="ghost"
-            shape="round"
+            shape={enableSquareButtons ? 'square' : 'round'}
             style={[a.absolute, {top: 0, right: 0}]}
             onPress={onClearError}>
             <ButtonIcon icon={XIcon} />

src/view/com/composer/ExternalEmbedRemoveBtn.tsx

···
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
···
 }: {onRemove: () => void} & ViewStyleProp) {
   const t = useTheme()
   const {_} = useLingui()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   return (
     <View style={[a.absolute, {top: 8, right: 8}, a.z_50, style]}>
···
         size="small"
         variant="solid"
         color="secondary"
-        shape="round"
+        shape={enableSquareButtons ? 'square' : 'round'}
         style={[t.atoms.shadow_sm]}>
         <ButtonIcon icon={X} size="sm" />
       </Button>

src/view/com/composer/SelectMediaButton.tsx

···
 import {openUnifiedPicker} from '#/lib/media/picker'
 import {extractDataUriMime} from '#/lib/media/util'
 import {isNative, isWeb} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {MAX_IMAGES} from '#/view/com/composer/state/composer'
 import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
···
     selectionCountRemaining,
   ])
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   return (
     <Button
       testID="openMediaBtn"
···
       )}
       style={a.p_sm}
       variant="ghost"
-      shape="round"
+      shape={enableSquareButtons ? 'square' : 'round'}
       color="primary"
       disabled={disabled}>
       <ImageIcon

src/view/com/composer/photos/EditImageDialog.web.tsx

···
   type ImageTransformation,
   manipulateImage,
 } from '#/state/gallery'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
···
   const [pending, setPending] = useState(false)
   const ref = useRef<{save: () => Promise<void>}>(null)
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const cancelButton = useCallback(
     () => (
       <Button
···
         size="small"
         color="primary"
         variant="ghost"
-        style={[a.rounded_full]}
+        style={enableSquareButtons ? [a.rounded_sm] : [a.rounded_full]}
         testID="cropImageCancelBtn">
         <ButtonText style={[a.text_md]}>
           <Trans>Cancel</Trans>
         </ButtonText>
       </Button>
     ),
-    [control, _, pending],
+    [control, _, pending, enableSquareButtons],
   )
 
   const saveButton = useCallback(
···
         size="small"
         color="primary"
         variant="ghost"
-        style={[a.rounded_full]}
+        style={enableSquareButtons ? [a.rounded_sm] : [a.rounded_full]}
         testID="cropImageSaveBtn">
         <ButtonText style={[a.text_md]}>
           <Trans>Save</Trans>
···
         {pending && <ButtonIcon icon={Loader} />}
       </Button>
     ),
-    [_, pending],
+    [_, pending, enableSquareButtons],
   )
 
   return (

src/view/com/composer/photos/Gallery.tsx

···
 import {colors, s} from '#/lib/styles'
 import {isNative} from '#/platform/detection'
 import {type ComposerImage, cropImage} from '#/state/gallery'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {Text} from '#/view/com/util/text/Text'
 import {tokens, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
···
   const altTextControl = Dialog.useDialogControl()
   const editControl = Dialog.useDialogControl()
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const onImageEdit = () => {
     if (isNative) {
       cropImage(image).then(next => {
···
           accessibilityLabel={_(msg`Edit image`)}
           accessibilityHint=""
           onPress={onImageEdit}
-          style={styles.imageControl}>
+          style={
+            enableSquareButtons
+              ? styles.imageControlSquare
+              : styles.imageControl
+          }>
           <FontAwesomeIcon icon="pen" size={12} style={{color: colors.white}} />
         </TouchableOpacity>
         <TouchableOpacity
···
           accessibilityLabel={_(msg`Remove image`)}
           accessibilityHint=""
           onPress={onRemove}
-          style={styles.imageControl}>
+          style={
+            enableSquareButtons
+              ? styles.imageControlSquare
+              : styles.imageControl
+          }>
           <FontAwesomeIcon
             icon="xmark"
             size={16}
···
     width: 24,
     height: 24,
     borderRadius: tokens.borderRadius.md,
+    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  imageControlSquare: {
+    width: 24,
+    height: 24,
+    borderRadius: tokens.borderRadius.sm,
     backgroundColor: 'rgba(0, 0, 0, 0.75)',
     alignItems: 'center',
     justifyContent: 'center',

src/view/com/composer/photos/OpenCameraBtn.tsx

···
 import {logger} from '#/logger'
 import {isMobileWeb, isNative} from '#/platform/detection'
 import {type ComposerImage, createComposerImage} from '#/state/gallery'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {Camera_Stroke2_Corner0_Rounded as Camera} from '#/components/icons/Camera'
···
   const [mediaPermissionRes, requestMediaPermission] =
     MediaLibrary.usePermissions({granularPermissions: ['photo']})
   const t = useTheme()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const onPressTakePicture = useCallback(async () => {
     try {
···
       accessibilityHint={_(msg`Opens camera on device`)}
       style={a.p_sm}
       variant="ghost"
-      shape="round"
+      shape={enableSquareButtons ? 'square' : 'round'}
       color="primary"
       disabled={disabled}>
       <Camera size="lg" style={disabled && t.atoms.text_contrast_low} />

src/view/com/composer/photos/SelectGifBtn.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {logEvent} from '#/lib/statsig/statsig'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {type Gif} from '#/state/queries/tenor'
 import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
···
   const {_} = useLingui()
   const ref = useRef<{open: () => void}>(null)
   const t = useTheme()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const onPressSelectGif = useCallback(async () => {
     logEvent('composer:gif:open', {})
···
         accessibilityHint={_(msg`Opens GIF select dialog`)}
         style={a.p_sm}
         variant="ghost"
-        shape="round"
+        shape={enableSquareButtons ? 'square' : 'round'}
         color="primary"
         disabled={disabled}>
         <GifIcon size="lg" style={disabled && t.atoms.text_contrast_low} />

src/view/com/composer/select-language/PostLanguageSelectDialog.tsx

···
 import {languageName} from '#/locale/helpers'
 import {type Language, LANGUAGES, LANGUAGES_MAP_CODE2} from '#/locale/languages'
 import {isNative, isWeb} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   toPostLanguages,
   useLanguagePrefs,
···
   const setLangPrefs = useLanguagePrefsApi()
   const t = useTheme()
   const {_} = useLingui()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const handleClose = () => {
     control.close(() => {
···
             variant="ghost"
             size="small"
             color="secondary"
-            shape="round"
+            shape={enableSquareButtons ? 'square' : 'round'}
             label={_(msg`Close dialog`)}
             onPress={handleClose}>
             <ButtonIcon icon={XIcon} />

src/view/com/composer/videos/SubtitleDialog.tsx

···
 import {LANGUAGES} from '#/locale/languages'
 import {isWeb} from '#/platform/detection'
 import {useLanguagePrefs} from '#/state/preferences'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
···
     [setCaptions, language],
   )
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   return (
     <View
       style={[
···
       <Button
         label={_(msg`Remove subtitle file`)}
         size="tiny"
-        shape="round"
+        shape={enableSquareButtons ? 'square' : 'round'}
         variant="outline"
         color="secondary"
         onPress={() =>

src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {createHitslop} from '#/lib/constants'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 
 type Props = {
   onRequestClose: () => void
···
 
 const ImageDefaultHeader = ({onRequestClose}: Props) => {
   const {_} = useLingui()
+  const enableSquareButtons = useEnableSquareButtons()
   return (
     <SafeAreaView style={styles.root}>
       <TouchableOpacity
-        style={[styles.closeButton, styles.blurredBackground]}
+        style={[
+          enableSquareButtons ? styles.closeButtonSquare : styles.closeButton,
+          styles.blurredBackground,
+        ]}
         onPress={onRequestClose}
         hitSlop={HIT_SLOP}
         accessibilityRole="button"
···
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: 22,
+    backgroundColor: '#00000077',
+  },
+  closeButtonSquare: {
+    marginRight: 10,
+    marginTop: 10,
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 11,
     backgroundColor: '#00000077',
   },
   blurredBackground: {

src/view/com/lists/MyLists.tsx

···
 import {cleanError} from '#/lib/strings/errors'
 import {s} from '#/lib/styles'
 import {logger} from '#/logger'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {type MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists'
 import {atoms as a, useTheme} from '#/alf'
···
   const {data, isFetching, isFetched, isError, error, refetch} =
     useMyListsQuery(filter)
   const isEmpty = !isFetching && !data?.length
+  const enableSquareButtons = useEnableSquareButtons()
 
   const items = React.useMemo(() => {
     let items: any[] = []
···
               style={[
                 a.align_center,
                 a.justify_center,
-                a.rounded_full,
+                enableSquareButtons ? a.rounded_sm : a.rounded_full,
                 t.atoms.bg_contrast_25,
                 {
                   width: 32,
···
         </View>
       )
     },
-    [t, renderItem, error, onRefresh, emptyText],
+    [t, renderItem, error, onRefresh, emptyText, enableSquareButtons],
   )
 
   if (inline) {

src/view/com/posts/PostFeedItemCarousel.tsx

···
 import {msg, Plural} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {type FeedPostSlice} from '#/state/queries/post-feed'
 import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
 import {atoms as a, useTheme} from '#/alf'
···
   const {_} = useLingui()
   const ref = React.useRef<ScrollView>(null)
   const [scrollX, setScrollX] = React.useState(0)
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const scrollTo = React.useCallback(
     (item: number) => {
···
             size="tiny"
             variant="ghost"
             color="secondary"
-            shape="round"
+            shape={enableSquareButtons ? 'square' : 'round'}
             onPress={() => scrollLeft()}>
             <ButtonIcon icon={ChevronLeft} />
           </Button>
···
             size="tiny"
             variant="ghost"
             color="secondary"
-            shape="round"
+            shape={enableSquareButtons ? 'square' : 'round'}
             onPress={() => scrollRight()}>
             <ButtonIcon icon={ChevronRight} />
           </Button>
···
                       isCarouselItem={true}
                       rootPost={slice.items[0].post}
                       showReplyTo={false}
+                      reqId={undefined}
                     />
                   </View>
                 )

src/view/com/profile/ProfileMenu.tsx

···
   useDeerVerificationTrusted,
   useSetDeerVerificationTrust,
 } from '#/state/preferences/deer-verification'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   RQKEY as profileQueryKey,
   useProfileBlockMutationQueue,
···
 
   const status = useActorStatus(profile)
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   return (
     <EventStopper onKeyDown={false}>
       <Menu.Root>
···
                 variant="solid"
                 color="secondary"
                 size="small"
-                shape="round">
+                shape={enableSquareButtons ? 'square' : 'round'}>
                 <ButtonIcon icon={Ellipsis} size="sm" />
               </Button>
             )

src/view/com/util/LoadingPlaceholder.tsx

···
 } from 'react-native'
 
 import {s} from '#/lib/styles'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useTheme} from '#/alf'
 import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble'
 import {
···
 }) {
   const t = useTheme()
   const random = useMemo(() => Math.random(), [])
+  const enableSquareButtons = useEnableSquareButtons()
   return (
     <View style={[a.flex_row, a.gap_md, a.px_lg, a.mt_lg, t.atoms.bg, style]}>
-      <LoadingPlaceholder width={52} height={52} style={a.rounded_full} />
+      <LoadingPlaceholder
+        width={52}
+        height={52}
+        style={enableSquareButtons ? a.rounded_sm : a.rounded_full}
+      />
       <View>
         <LoadingPlaceholder width={140} height={12} style={a.mt_xs} />
         <LoadingPlaceholder width={120} height={8} style={a.mt_sm} />

src/view/com/util/error/ErrorScreen.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {usePalette} from '#/lib/hooks/usePalette'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as ArrowRotateCounterClockwiseIcon} from '#/components/icons/ArrowRotateCounterClockwise'
···
   const t = useTheme()
   const pal = usePalette('default')
   const {_} = useLingui()
+  const enableSquareButtons = useEnableSquareButtons()
 
   return (
     <Layout.Center testID={testID}>
···
         <View style={[a.mb_md, a.align_center]}>
           <View
             style={[
-              a.rounded_full,
+              enableSquareButtons ? a.rounded_sm : a.rounded_full,
               {width: 50, height: 50},
               a.align_center,
               a.justify_center,

src/view/com/util/fab/FABInner.tsx

···
 import {clamp} from '#/lib/numbers'
 import {gradients} from '#/lib/styles'
 import {isWeb} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {ios} from '#/alf'
 import {atoms as a} from '#/alf'
 
···
   const {isMobile, isTablet} = useWebMediaQueries()
   const playHaptic = useHaptics()
   const fabMinimalShellTransform = useMinimalShellFabTransform()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const size = isTablet ? styles.sizeLarge : styles.sizeRegular
 
···
           playHaptic('Heavy')
         })}
         targetScale={0.9}
-        style={[a.rounded_full, style]}
+        style={[enableSquareButtons ? a.rounded_sm : a.rounded_full, style]}
         {...props}>
         <LinearGradient
           colors={[gradients.blueLight.start, gradients.blueLight.end]}

src/view/com/util/load-latest/LoadLatestBtn.tsx

···
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {clamp} from '#/lib/numbers'
 import {useGate} from '#/lib/statsig/statsig'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useSession} from '#/state/session'
 import {atoms as a, useLayoutBreakpoints, useTheme, web} from '#/alf'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
···
   const fabMinimalShellTransform = useMinimalShellFabTransform()
   const insets = useSafeAreaInsets()
   const t = useTheme()
+  const enableSquareButtons = useEnableSquareButtons()
   const {
     state: hovered,
     onIn: onHoverIn,
···
             width: 42,
             height: 42,
           },
-          a.rounded_full,
+          enableSquareButtons ? a.rounded_sm : a.rounded_full,
           a.align_center,
           a.justify_center,
           a.border,
···
         targetScale={0.9}
         onPointerEnter={onHoverIn}
         onPointerLeave={onHoverOut}>
-        <SubtleHover hover={hovered} style={[a.rounded_full]} />
+        <SubtleHover
+          hover={hovered}
+          style={[enableSquareButtons ? a.rounded_sm : a.rounded_full]}
+        />
         <ArrowIcon
           size="md"
           style={[

src/view/screens/DebugMod.tsx

···
   type CommonNavigatorParams,
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {moderationOptsOverrideContext} from '#/state/preferences/moderation-opts'
 import {type FeedNotification} from '#/state/queries/notifications/types'
···
   const [view, setView] = React.useState<string[]>(['post'])
   const labelStrings = useGlobalLabelStrings()
   const {currentAccount} = useSession()
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const isTargetMe =
     scenario[0] === 'label' && scenarioSwitches.includes('targetMe')
···
                     <View
                       style={[
                         a.border,
-                        a.rounded_full,
+                        enableSquareButtons ? a.rounded_sm : a.rounded_full,
                         a.px_md,
                         a.py_sm,
                         t.atoms.border_contrast_medium,
···
   >
 }) {
   const t = useTheme()
+  const enableSquareButtons = useEnableSquareButtons()
   return (
     <View
       style={[
···
         <View
           style={[
             a.border,
-            a.rounded_full,
+            enableSquareButtons ? a.rounded_sm : a.rounded_full,
             a.px_md,
             a.py_sm,
             t.atoms.border_contrast_medium,
···
         <View
           style={[
             a.border,
-            a.rounded_full,
+            enableSquareButtons ? a.rounded_sm : a.rounded_full,
             a.px_md,
             a.py_sm,
             t.atoms.border_contrast_medium,

src/view/screens/Feeds.tsx

···
 import {cleanError} from '#/lib/strings/errors'
 import {s} from '#/lib/styles'
 import {isNative, isWeb} from '#/platform/detection'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   type SavedFeedItem,
   useGetPopularFeedsQuery,
···
   } = useSearchPopularFeedsMutation()
   const {hasSession} = useSession()
   const listRef = React.useRef<ListMethods>(null)
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   /**
    * A search query is present. We may not have search results yet.
···
               size="small"
               variant="ghost"
               color="secondary"
-              shape="round"
+              shape={enableSquareButtons ? 'square' : 'round'}
               style={[a.justify_center, {right: -3}]}>
               <ButtonIcon icon={Gear} size="lg" />
             </Link>

src/view/screens/Notifications.tsx

···
 import {logger} from '#/logger'
 import {isNative} from '#/platform/detection'
 import {emitSoftReset, listenSoftReset} from '#/state/events'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed'
 import {useNotificationSettingsQuery} from '#/state/queries/notifications/settings'
 import {
···
   const initialActiveTab = lastActiveTab
   const [activeTab, setActiveTab] = useState(initialActiveTab)
   const isLoading = activeTab === 0 ? isLoadingAll : isLoadingMentions
+
+  const enableSquareButtons = useEnableSquareButtons()
 
   const onPageSelected = useCallback(
     (index: number) => {
···
             size="small"
             variant="ghost"
             color="secondary"
-            shape="round"
+            shape={enableSquareButtons ? 'square' : 'round'}
             style={[a.justify_center]}>
             <ButtonIcon icon={isLoading ? Loader : SettingsIcon} size="lg" />
           </Link>

src/view/screens/Storybook/Links.tsx

···
 import {View} from 'react-native'
 
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, useTheme} from '#/alf'
 import {ButtonText} from '#/components/Button'
 import {InlineLinkText, Link} from '#/components/Link'
···
 
 export function Links() {
   const t = useTheme()
+  const enableSquareButtons = useEnableSquareButtons()
   return (
     <View style={[a.gap_md, a.align_start]}>
       <H1>Links</H1>
···
             <View
               style={[
                 {width: 32, height: 32},
-                a.rounded_full,
+                enableSquareButtons ? a.rounded_sm : a.rounded_full,
                 t.atoms.bg_contrast_200,
               ]}
             />

src/view/shell/Drawer.tsx

···
 import {colors} from '#/lib/styles'
 import {isWeb} from '#/platform/detection'
 import {emitSoftReset} from '#/state/events'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useKawaiiMode} from '#/state/preferences/kawaii'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {useProfileQuery} from '#/state/queries/profile'
···
 
 function MenuItem({icon, label, count, bold, onPress}: MenuItemProps) {
   const t = useTheme()
+  const enableSquareButtons = useEnableSquareButtons()
   return (
     <Button
       testID={`menuItemButton-${label}`}
···
                 ]}>
                 <View
                   style={[
-                    a.rounded_full,
+                    enableSquareButtons ? a.rounded_sm : a.rounded_full,
                     {
                       right: count.length === 1 ? 6 : 0,
                       paddingHorizontal: 4,

src/view/shell/bottom-bar/BottomBar.tsx

···
 import {useGate} from '#/lib/statsig/statsig'
 import {emitSoftReset} from '#/state/events'
 import {useHomeBadge} from '#/state/home-badge'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useUnreadMessageCount} from '#/state/queries/messages/list-conversations'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {useProfileQuery} from '#/state/queries/profile'
···
   accessibilityHint,
   accessibilityLabel,
 }: BtnProps) {
+  const enableSquareButtons = useEnableSquareButtons()
   return (
     <PressableScale
       testID={testID}
···
       accessibilityShowsLargeContentViewer>
       {icon}
       {notificationCount ? (
-        <View style={[styles.notificationCount, a.rounded_full]}>
+        <View
+          style={[
+            styles.notificationCount,
+            enableSquareButtons ? a.rounded_sm : a.rounded_full,
+          ]}>
           <Text style={styles.notificationCountLabel}>{notificationCount}</Text>
         </View>
       ) : hasNew ? (
-        <View style={[styles.hasNewBadge, a.rounded_full]} />
+        <View
+          style={[
+            styles.hasNewBadge,
+            enableSquareButtons ? a.rounded_sm : a.rounded_full,
+          ]}
+        />
       ) : null}
     </PressableScale>
   )

src/view/shell/desktop/LeftNav.tsx

···
 import {isInvalidHandle, sanitizeHandle} from '#/lib/strings/handles'
 import {emitSoftReset} from '#/state/events'
 import {useHomeBadge} from '#/state/home-badge'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useFetchHandle} from '#/state/queries/handle'
 import {useUnreadMessageCount} from '#/state/queries/messages/list-conversations'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
···
 
   const {isActive: live} = useActorStatus(profile)
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   return (
     <View style={[a.my_md, !leftNavMinimal && [a.w_full, a.align_start]]}>
       {!isLoading && profile ? (
···
                     a.w_full,
                     a.transition_color,
                     active ? t.atoms.bg_contrast_25 : a.transition_delay_50ms,
-                    a.rounded_full,
+                    enableSquareButtons ? a.rounded_sm : a.rounded_full,
                     a.justify_between,
                     a.align_center,
                     a.flex_row,
···
   const {currentAccount} = useSession()
   const {leftNavMinimal} = useLayoutBreakpoints()
   const [pathName] = useMemo(() => router.matchPath(href), [href])
+
+  const enableSquareButtons = useEnableSquareButtons()
+
   const currentRouteInfo = useNavigationState(state => {
     if (!state) {
       return {name: 'Home'}
···
                 a.absolute,
                 a.text_xs,
                 a.font_semi_bold,
-                a.rounded_full,
+                enableSquareButtons ? a.rounded_sm : a.rounded_full,
                 a.text_center,
                 a.leading_tight,
                 a.z_20,
···
           <View
             style={[
               a.absolute,
-              a.rounded_full,
+              enableSquareButtons ? a.rounded_sm : a.rounded_full,
               a.z_20,
               {
                 backgroundColor: t.palette.primary_500,
···
   const [isFetchingHandle, setIsFetchingHandle] = useState(false)
   const fetchHandle = useFetchHandle()
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const getProfileHandle = async () => {
     const routes = getState()?.routes
     const currentRoute = routes?.[routes?.length - 1]
···
         size="large"
         variant="solid"
         color="primary"
-        style={[a.rounded_full]}>
+        style={enableSquareButtons ? [a.rounded_sm] : [a.rounded_full]}>
         <ButtonIcon icon={EditBig} position="left" />
         <ButtonText>
           <Trans context="action">New Post</Trans>

src/view/shell/desktop/SidebarTrendingTopics.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {logEvent} from '#/lib/statsig/statsig'
+import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   useTrendingSettings,
   useTrendingSettingsApi,
···
   const {data: trending, error, isLoading} = useTrendingTopics()
   const noTopics = !isLoading && !error && !trending?.topics?.length
 
+  const enableSquareButtons = useEnableSquareButtons()
+
   const onConfirmHide = React.useCallback(() => {
     logEvent('trendingTopics:hide', {context: 'sidebar'})
     setTrendingDisabled(true)
···
             size="tiny"
             variant="ghost"
             color="secondary"
-            shape="round"
+            shape={enableSquareButtons ? 'square' : 'round'}
             onPress={() => trendingPrompt.open()}>
             <ButtonIcon icon={X} />
           </Button>
···
                 <TrendingTopicLink
                   key={topic.link}
                   topic={topic}
-                  style={a.rounded_full}
+                  style={enableSquareButtons ? a.rounded_sm : a.rounded_full}
                   onPress={() => {
                     logEvent('trendingTopic:click', {context: 'sidebar'})
                   }}>