diff --git a/packages/common/src/hooks/content/types.ts b/packages/common/src/hooks/content/types.ts
index b613e3fc232..d4e620f5690 100644
--- a/packages/common/src/hooks/content/types.ts
+++ b/packages/common/src/hooks/content/types.ts
@@ -1 +1 @@
-export type LockedStatusVariant = 'premium' | 'gated'
+export type LockedStatusVariant = 'premium' | 'gated' | 'tokenGated'
diff --git a/packages/common/src/hooks/content/useIsTrackUnlockable.ts b/packages/common/src/hooks/content/useIsTrackUnlockable.ts
index dfc46ff2879..fffefa150b3 100644
--- a/packages/common/src/hooks/content/useIsTrackUnlockable.ts
+++ b/packages/common/src/hooks/content/useIsTrackUnlockable.ts
@@ -1,6 +1,7 @@
 import { useTrack } from '~/api'
 import {
   isContentSpecialAccess,
+  isContentTokenGated,
   isContentUSDCPurchaseGated,
   ID
 } from '~/models'
@@ -14,6 +15,7 @@ export const useIsTrackUnlockable = (trackId: ID) => {
 
   const isPurchaseable = isContentUSDCPurchaseGated(streamConditions)
   const isSpecialAccess = isContentSpecialAccess(streamConditions)
+  const isTokenGated = isContentTokenGated(streamConditions)
 
-  return isPurchaseable || isSpecialAccess
+  return isPurchaseable || isSpecialAccess || isTokenGated
 }
diff --git a/packages/common/src/hooks/content/useTrackLockedStatusVariant.ts b/packages/common/src/hooks/content/useTrackLockedStatusVariant.ts
index 8e87a6e499c..2260b190a53 100644
--- a/packages/common/src/hooks/content/useTrackLockedStatusVariant.ts
+++ b/packages/common/src/hooks/content/useTrackLockedStatusVariant.ts
@@ -2,6 +2,7 @@ import { useTrack } from '~/api'
 import {
   ID,
   isContentSpecialAccess,
+  isContentTokenGated,
   isContentUSDCPurchaseGated
 } from '~/models'
 import { Nullable } from '~/utils'
@@ -15,12 +16,15 @@ export const useTrackLockedStatusVariant = (trackId: ID) => {
 
   const isPurchaseable = isContentUSDCPurchaseGated(streamConditions)
   const isSpecialAccess = isContentSpecialAccess(streamConditions)
+  const isTokenGated = isContentTokenGated(streamConditions)
 
   let variant: Nullable<LockedStatusVariant> = null
   if (isPurchaseable) {
     variant = 'premium'
   } else if (isSpecialAccess) {
     variant = 'gated'
+  } else if (isTokenGated) {
+    variant = 'tokenGated'
   }
 
   return variant
diff --git a/packages/harmony/src/components/button/Button/Button.tsx b/packages/harmony/src/components/button/Button/Button.tsx
index 7b7d4008850..4747730d764 100644
--- a/packages/harmony/src/components/button/Button/Button.tsx
+++ b/packages/harmony/src/components/button/Button/Button.tsx
@@ -25,6 +25,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       hoverColor,
       variant = 'primary',
       size = 'default',
+      rounded,
       disabled,
       ...baseProps
     } = props
@@ -176,7 +177,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       color: themeColors.static.white,
       boxSizing: 'border-box',
       border: 'none',
-      borderRadius: cornerRadius.s,
+      borderRadius: rounded ? cornerRadius['2xl'] : cornerRadius.s,
       boxShadow: shadows.near,
 
       ...(isSmallOrXs
diff --git a/packages/harmony/src/components/button/Button/types.ts b/packages/harmony/src/components/button/Button/types.ts
index de765fda401..4e52a3f1b2b 100644
--- a/packages/harmony/src/components/button/Button/types.ts
+++ b/packages/harmony/src/components/button/Button/types.ts
@@ -34,4 +34,9 @@ export type ButtonProps = {
    * The button size
    */
   size?: ButtonSize
+
+  /**
+   * When true, uses fully rounded (pill-shaped) corners
+   */
+  rounded?: boolean
 } & Omit<BaseButtonProps, 'styles'>
diff --git a/packages/mobile/src/components/core/AccessTypeLabel.tsx b/packages/mobile/src/components/core/AccessTypeLabel.tsx
index 3fd4c3dcef1..ee05de41b4a 100644
--- a/packages/mobile/src/components/core/AccessTypeLabel.tsx
+++ b/packages/mobile/src/components/core/AccessTypeLabel.tsx
@@ -13,8 +13,6 @@ import {
   IconArtistCoin
 } from '@audius/harmony-native'
 
-import { CoinGatedLabelSvg } from './CoinGatedLabelSvg'
-
 type AccessTypeLabelProps = {
   type?: AccessType
   scheduledReleaseDate?: string
@@ -59,8 +57,8 @@ const ACCESS_TYPE_CONFIG: Record<AccessType, AccessTypeConfig> = {
   },
   [AccessType.TOKEN_GATED]: {
     icon: IconArtistCoin,
-    label: 'Coin Gated',
-    color: 'artistCoin'
+    label: 'Fan Club',
+    color: 'subdued'
   },
   [AccessType.EXTRAS]: {
     icon: IconReceive,
@@ -79,14 +77,6 @@ export const AccessTypeLabel = (props: AccessTypeLabelProps) => {
       ? config.label(scheduledReleaseDate)
       : config.label
 
-  if (type === AccessType.TOKEN_GATED) {
-    return (
-      <Flex direction='row' gap='xs' alignItems='center'>
-        <CoinGatedLabelSvg />
-      </Flex>
-    )
-  }
-
   return (
     <Flex direction='row' gap='xs' alignItems='center'>
       {config.icon ? (
diff --git a/packages/mobile/src/components/lineup-tile/LineupTileAccessStatus.tsx b/packages/mobile/src/components/lineup-tile/LineupTileAccessStatus.tsx
index 442f1626a49..f46ddf560b8 100644
--- a/packages/mobile/src/components/lineup-tile/LineupTileAccessStatus.tsx
+++ b/packages/mobile/src/components/lineup-tile/LineupTileAccessStatus.tsx
@@ -24,6 +24,7 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import type { FlexProps } from '@audius/harmony-native'
 import {
+  Button,
   Flex,
   IconLock,
   IconLockUnlocked,
@@ -47,7 +48,7 @@ const { setLockedContentId } = gatedContentActions
 const messages = {
   unlocking: 'Unlocking',
   locked: 'Locked',
-  buyArtistCoin: 'Buy Fan Club Token',
+  unlock: 'Unlock',
   price: (price: string) => `$${price}`
 }
 
@@ -148,7 +149,7 @@ export const LineupTileAccessStatus = ({
         USDC(streamConditions.usdc_purchase.price / 100).toLocaleString()
       )
     : isTokenGated
-      ? messages.buyArtistCoin
+      ? messages.unlock
       : isUnlocking
         ? messages.unlocking
         : messages.locked
@@ -180,6 +181,20 @@ export const LineupTileAccessStatus = ({
     style: { backgroundColor }
   }
 
+  if (isTokenGated && !hasStreamAccess && !isUnlocking) {
+    return (
+      <Button
+        variant='secondary'
+        size='small'
+        rounded
+        onPress={handlePressWithBlock}
+        style={{ height: 24 }}
+      >
+        {buttonText}
+      </Button>
+    )
+  }
+
   return (
     <TouchableOpacity onPressIn={blockTilePress} onPress={handlePressWithBlock}>
       <Flex
@@ -208,9 +223,9 @@ export const LineupTileAccessStatus = ({
             style={styles.loadingSpinner}
             fill={color.icon.staticWhite}
           />
-        ) : !isTokenGated ? (
+        ) : (
           <IconLock color='white' size='s' />
-        ) : null}
+        )}
         {showButtonText ? (
           <Text color='white' variant='label' size='m'>
             {buttonText}
diff --git a/packages/mobile/src/components/navigation-container/NavigationContainer.tsx b/packages/mobile/src/components/navigation-container/NavigationContainer.tsx
index d3b2101be6b..87497d194a0 100644
--- a/packages/mobile/src/components/navigation-container/NavigationContainer.tsx
+++ b/packages/mobile/src/components/navigation-container/NavigationContainer.tsx
@@ -186,9 +186,6 @@ const NavigationContainer = (props: NavigationContainerProps) => {
                         },
                         CoinRedeemScreen: {
                           path: 'coins/:ticker/redeem/:code?'
-                        },
-                        ExclusiveTracksScreen: {
-                          path: 'coins/:ticker/exclusive-tracks'
                         }
                       }
                     },
diff --git a/packages/mobile/src/components/track-details-tile/TrackDetailsTile.tsx b/packages/mobile/src/components/track-details-tile/TrackDetailsTile.tsx
index 5f1bfaf8e5c..f3569c9fe4c 100644
--- a/packages/mobile/src/components/track-details-tile/TrackDetailsTile.tsx
+++ b/packages/mobile/src/components/track-details-tile/TrackDetailsTile.tsx
@@ -26,14 +26,13 @@ import { makeStyles, flexRowCentered, typography } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
 import { useThemeColors } from 'app/utils/theme'
 
-import { CoinGatedLabelSvg } from '../core/CoinGatedLabelSvg'
 import { TrackImage } from '../image/TrackImage'
 import { TrackDogEar } from '../track/TrackDogEar'
 
 const messages = {
   specialAccess: 'SPECIAL ACCESS',
   premiumTrack: 'PREMIUM TRACK',
-  coinGated: 'COIN GATED',
+  coinGated: 'FAN CLUB',
   earn: (amount: string) => `Earn ${amount} $AUDIO for this purchase!`
 }
 
@@ -142,26 +141,20 @@ export const TrackDetailsTile = ({
         <View style={styles.metadataContainer}>
           {showLabel ? (
             <View style={styles.streamContentLabelContainer}>
-              {isTokenGated ? (
-                <CoinGatedLabelSvg style={{ height: 28, width: 108 }} />
-              ) : (
-                <>
-                  <IconComponent
-                    fill={color}
-                    width={spacing(5)}
-                    height={spacing(5)}
-                  />
-                  <Text
-                    fontSize='small'
-                    colorValue={color}
-                    weight='demiBold'
-                    textTransform='uppercase'
-                    style={styles.streamContentLabel}
-                  >
-                    {title}
-                  </Text>
-                </>
-              )}
+              <IconComponent
+                fill={color}
+                width={spacing(5)}
+                height={spacing(5)}
+              />
+              <Text
+                fontSize='small'
+                colorValue={color}
+                weight='demiBold'
+                textTransform='uppercase'
+                style={styles.streamContentLabel}
+              >
+                {title}
+              </Text>
             </View>
           ) : null}
           <Text
diff --git a/packages/mobile/src/components/track/TrackLockedStatusBadge.tsx b/packages/mobile/src/components/track/TrackLockedStatusBadge.tsx
index 2dc3bcc1231..99b81b7ea8c 100644
--- a/packages/mobile/src/components/track/TrackLockedStatusBadge.tsx
+++ b/packages/mobile/src/components/track/TrackLockedStatusBadge.tsx
@@ -4,8 +4,14 @@ import {
 } from '@audius/common/hooks'
 import type { ID } from '@audius/common/models'
 
+import { Flex, IconLock, Text } from '@audius/harmony-native'
+
 import { LockedStatusBadge } from '../core/LockedStatusBadge'
 
+const messages = {
+  membersOnly: 'Members Only'
+}
+
 type TrackLockedStatusBadgeProps = {
   trackId: ID
 }
@@ -16,5 +22,23 @@ export const TrackLockedStatusBadge = (props: TrackLockedStatusBadgeProps) => {
   const variant = useTrackLockedStatusVariant(trackId)
   if (!variant) return null
 
+  if (variant === 'tokenGated' && !hasStreamAccess) {
+    return (
+      <Flex
+        direction='row'
+        gap='xs'
+        alignItems='center'
+        justifyContent='center'
+      >
+        <IconLock size='s' color='default' />
+        <Flex>
+          <Text variant='body' size='xs' color='default'>
+            {messages.membersOnly}
+          </Text>
+        </Flex>
+      </Flex>
+    )
+  }
+
   return <LockedStatusBadge variant={variant} locked={!hasStreamAccess} />
 }
diff --git a/packages/mobile/src/harmony-native/components/Button/Button/Button.tsx b/packages/mobile/src/harmony-native/components/Button/Button/Button.tsx
index a0ee5e325f7..1bffe49c706 100644
--- a/packages/mobile/src/harmony-native/components/Button/Button/Button.tsx
+++ b/packages/mobile/src/harmony-native/components/Button/Button/Button.tsx
@@ -23,6 +23,7 @@ export const Button = (props: ButtonProps) => {
     hexColor,
     variant = 'primary',
     size = 'default',
+    rounded,
     disabled,
     style,
     gradient,
@@ -199,7 +200,7 @@ export const Button = (props: ButtonProps) => {
 
   const buttonStyles: ViewStyle = {
     borderWidth: 0,
-    borderRadius: cornerRadius.s,
+    borderRadius: rounded ? cornerRadius['2xl'] : cornerRadius.s,
     alignItems: 'center',
     justifyContent: 'center',
     // TODO bring this back properly
diff --git a/packages/mobile/src/harmony-native/components/Button/Button/types.ts b/packages/mobile/src/harmony-native/components/Button/Button/types.ts
index dac6bc93261..04f97977333 100644
--- a/packages/mobile/src/harmony-native/components/Button/Button/types.ts
+++ b/packages/mobile/src/harmony-native/components/Button/Button/types.ts
@@ -30,5 +30,10 @@ export type ButtonProps = {
    */
   size?: ButtonSize
 
+  /**
+   * When true, uses fully rounded (pill-shaped) corners
+   */
+  rounded?: boolean
+
   style?: StyleProp<ViewStyle>
 } & Omit<BaseButtonProps, 'styles'>
diff --git a/packages/mobile/src/screens/app-screen/AppTabScreen.tsx b/packages/mobile/src/screens/app-screen/AppTabScreen.tsx
index f7bf9825504..870c7c3e88a 100644
--- a/packages/mobile/src/screens/app-screen/AppTabScreen.tsx
+++ b/packages/mobile/src/screens/app-screen/AppTabScreen.tsx
@@ -32,8 +32,7 @@ import { ChatScreen } from 'app/screens/chat-screen/ChatScreen'
 import { ChatUserListScreen } from 'app/screens/chat-screen/ChatUserListScreen'
 import {
   CoinDetailsScreen,
-  EditCoinDetailsScreen,
-  ExclusiveTracksScreen
+  EditCoinDetailsScreen
 } from 'app/screens/coin-details-screen'
 import { CoinRedeemScreen } from 'app/screens/coin-redeem-screen'
 import { CollectionScreen } from 'app/screens/collection-screen/CollectionScreen'
@@ -123,7 +122,6 @@ export type AppTabScreenParamList = {
   CoinDetailsScreen: { ticker: string }
   CoinRedeemScreen: { ticker: string; code?: string }
   EditCoinDetailsScreen: { ticker: string }
-  ExclusiveTracksScreen: { ticker: string }
   Upload: {
     initialMetadata?: Partial<TrackMetadataForUpload>
   }
@@ -246,10 +244,6 @@ export const AppTabScreen = ({ baseScreen, Stack }: AppTabScreenProps) => {
         name='EditCoinDetailsScreen'
         component={EditCoinDetailsScreen}
       />
-      <Stack.Screen
-        name='ExclusiveTracksScreen'
-        component={ExclusiveTracksScreen}
-      />
       <Stack.Screen
         name='ArtistCoinsExplore'
         component={ArtistCoinsExploreScreen}
diff --git a/packages/mobile/src/screens/coin-details-screen/ExclusiveTracksScreen.tsx b/packages/mobile/src/screens/coin-details-screen/ExclusiveTracksScreen.tsx
deleted file mode 100644
index 79f87546f26..00000000000
--- a/packages/mobile/src/screens/coin-details-screen/ExclusiveTracksScreen.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useMemo } from 'react'
-
-import { useArtistCoinByTicker } from '@audius/common/api'
-import { useProxySelector } from '@audius/common/hooks'
-import {
-  exclusiveTracksPageLineupActions as exclusiveTracksActions,
-  exclusiveTracksPageSelectors
-} from '@audius/common/store'
-import { useRoute } from '@react-navigation/native'
-
-import { Flex, Text } from '@audius/harmony-native'
-import { Screen, ScreenContent } from 'app/components/core'
-import { Lineup } from 'app/components/lineup'
-
-const { getLineup } = exclusiveTracksPageSelectors
-
-const messages = {
-  emptyTitle: 'No exclusive tracks yet',
-  emptyDescription: 'Check back later for exclusive content!'
-}
-
-const EmptyExclusiveTracks = () => {
-  return (
-    <Flex
-      justifyContent='center'
-      alignItems='center'
-      gap='m'
-      pv='4xl'
-      ph='xl'
-      w='100%'
-    >
-      <Text variant='title' size='l' textAlign='center'>
-        {messages.emptyTitle}
-      </Text>
-      <Text variant='body' size='m' color='subdued' textAlign='center'>
-        {messages.emptyDescription}
-      </Text>
-    </Flex>
-  )
-}
-
-export const ExclusiveTracksScreen = () => {
-  const { ticker } = useRoute().params as { ticker: string }
-  const { data: coin } = useArtistCoinByTicker({ ticker })
-  const ownerId = coin?.ownerId
-  const coinName = coin?.name ?? ticker
-
-  const title = coinName ? `${coinName} Exclusive Tracks` : 'Exclusive Tracks'
-
-  const lineup = useProxySelector((state) => getLineup(state), [])
-
-  const fetchPayload = useMemo(() => ({ userId: ownerId }), [ownerId])
-
-  if (!ownerId) {
-    return (
-      <Screen variant='secondary' title={title}>
-        <ScreenContent>
-          <EmptyExclusiveTracks />
-        </ScreenContent>
-      </Screen>
-    )
-  }
-
-  return (
-    <Screen variant='secondary' title={title}>
-      <ScreenContent>
-        <Lineup
-          selfLoad
-          pullToRefresh
-          actions={exclusiveTracksActions}
-          lineup={lineup}
-          fetchPayload={fetchPayload}
-          LineupEmptyComponent={<EmptyExclusiveTracks />}
-          showsVerticalScrollIndicator={false}
-        />
-      </ScreenContent>
-    </Screen>
-  )
-}
diff --git a/packages/mobile/src/screens/coin-details-screen/components/ExclusiveTracksCard.tsx b/packages/mobile/src/screens/coin-details-screen/components/ExclusiveTracksCard.tsx
deleted file mode 100644
index 5ba71772f39..00000000000
--- a/packages/mobile/src/screens/coin-details-screen/components/ExclusiveTracksCard.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { useCallback } from 'react'
-
-import {
-  useArtistCoin,
-  useExclusiveTracks,
-  useExclusiveTracksCount
-} from '@audius/common/api'
-import { exclusiveTracksPageLineupActions as exclusiveTracksActions } from '@audius/common/store'
-
-import { Button, Flex, Text } from '@audius/harmony-native'
-import { TanQueryLineup } from 'app/components/lineup/TanQueryLineup'
-import { useNavigation } from 'app/hooks/useNavigation'
-
-const messages = {
-  exclusiveTracks: 'Exclusive Tracks',
-  viewAll: 'View All'
-}
-
-const MAX_PREVIEW_TRACKS = 3
-
-const itemStyles = {
-  paddingHorizontal: 0
-}
-
-type ExclusiveTracksSectionProps = {
-  mint: string
-}
-
-export const ExclusiveTracksSection = ({
-  mint
-}: ExclusiveTracksSectionProps) => {
-  const navigation = useNavigation()
-  const { data: coin } = useArtistCoin(mint)
-  const ownerId = coin?.ownerId
-  const coinName = coin?.name ?? coin?.ticker
-
-  const { data, lineup, pageSize, isFetching, loadNextPage, isPending } =
-    useExclusiveTracks({
-      userId: ownerId,
-      pageSize: MAX_PREVIEW_TRACKS
-    })
-
-  const { data: totalCount = 0 } = useExclusiveTracksCount({
-    userId: ownerId
-  })
-
-  const handleViewAll = useCallback(() => {
-    if (coin?.ticker) {
-      navigation.navigate('ExclusiveTracksScreen', { ticker: coin.ticker })
-    }
-  }, [coin?.ticker, navigation])
-
-  const shouldShowCard = totalCount > 0 && ownerId
-
-  if (!shouldShowCard) return null
-
-  const title = coinName
-    ? `${coinName} ${messages.exclusiveTracks}`
-    : messages.exclusiveTracks
-
-  return (
-    <Flex column w='100%' gap='l'>
-      <Flex
-        row
-        alignItems='center'
-        justifyContent='space-between'
-        w='100%'
-        gap='m'
-      >
-        <Flex row alignItems='center' gap='xs' style={{ flex: 1 }}>
-          <Text variant='title' size='l'>
-            {title}
-          </Text>
-          {totalCount > 0 ? (
-            <Text variant='title' size='l' color='subdued'>
-              ({totalCount})
-            </Text>
-          ) : null}
-        </Flex>
-        <Button
-          variant='secondary'
-          size='small'
-          onPress={handleViewAll}
-          fullWidth={false}
-        >
-          {messages.viewAll}
-        </Button>
-      </Flex>
-      <TanQueryLineup
-        actions={exclusiveTracksActions}
-        lineup={lineup}
-        offset={0}
-        maxEntries={MAX_PREVIEW_TRACKS}
-        pageSize={pageSize}
-        includeLineupStatus
-        itemStyles={itemStyles}
-        isFetching={isFetching}
-        loadNextPage={loadNextPage}
-        hasMore={false}
-        isPending={isPending}
-        queryData={data}
-        hidePlayBarChin={true}
-      />
-    </Flex>
-  )
-}
diff --git a/packages/mobile/src/screens/coin-details-screen/components/ExclusiveTracksSection.tsx b/packages/mobile/src/screens/coin-details-screen/components/ExclusiveTracksSection.tsx
deleted file mode 100644
index 0f57de69492..00000000000
--- a/packages/mobile/src/screens/coin-details-screen/components/ExclusiveTracksSection.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { useCallback } from 'react'
-
-import {
-  useArtistCoin,
-  useExclusiveTracks,
-  useExclusiveTracksCount
-} from '@audius/common/api'
-import { exclusiveTracksPageLineupActions as exclusiveTracksActions } from '@audius/common/store'
-
-import { Flex, PlainButton, Text } from '@audius/harmony-native'
-import { TanQueryLineup } from 'app/components/lineup/TanQueryLineup'
-import { useNavigation } from 'app/hooks/useNavigation'
-
-const messages = {
-  exclusiveTracks: 'Exclusive Tracks',
-  viewAll: 'View All'
-}
-
-const MAX_PREVIEW_TRACKS = 3
-
-const itemStyles = {
-  paddingHorizontal: 0
-}
-
-type ExclusiveTracksSectionProps = {
-  mint: string
-}
-
-export const ExclusiveTracksSection = ({
-  mint
-}: ExclusiveTracksSectionProps) => {
-  const navigation = useNavigation()
-  const { data: coin } = useArtistCoin(mint)
-  const ownerId = coin?.ownerId
-  const coinName = coin?.name ?? coin?.ticker
-
-  const { data, lineup, pageSize, isFetching, loadNextPage, isPending } =
-    useExclusiveTracks({
-      userId: ownerId,
-      pageSize: MAX_PREVIEW_TRACKS
-    })
-
-  const { data: totalCount = 0 } = useExclusiveTracksCount({
-    userId: ownerId
-  })
-
-  const handleViewAll = useCallback(() => {
-    if (coin?.ticker) {
-      navigation.navigate('ExclusiveTracksScreen', { ticker: coin.ticker })
-    }
-  }, [coin?.ticker, navigation])
-
-  const shouldShowCard = totalCount > 0 && ownerId
-
-  if (!shouldShowCard) return null
-
-  const title = coinName
-    ? `${coinName} ${messages.exclusiveTracks}`
-    : messages.exclusiveTracks
-
-  return (
-    <Flex column w='100%'>
-      <Flex
-        row
-        alignItems='center'
-        justifyContent='space-between'
-        w='100%'
-        gap='m'
-      >
-        <Flex row alignItems='center' gap='xs' style={{ flex: 1 }}>
-          <Text variant='heading' size='s'>
-            {title}{' '}
-            {totalCount > 0 ? (
-              <Text color='subdued'>({totalCount})</Text>
-            ) : null}
-          </Text>
-        </Flex>
-        <PlainButton onPress={handleViewAll} size='large'>
-          {messages.viewAll}
-        </PlainButton>
-      </Flex>
-      <TanQueryLineup
-        actions={exclusiveTracksActions}
-        lineup={lineup}
-        offset={0}
-        maxEntries={MAX_PREVIEW_TRACKS}
-        pageSize={pageSize}
-        includeLineupStatus
-        itemStyles={itemStyles}
-        isFetching={isFetching}
-        loadNextPage={loadNextPage}
-        hasMore={false}
-        isPending={isPending}
-        queryData={data}
-        hidePlayBarChin={true}
-      />
-    </Flex>
-  )
-}
diff --git a/packages/mobile/src/screens/coin-details-screen/components/FanClubTab.tsx b/packages/mobile/src/screens/coin-details-screen/components/FanClubTab.tsx
index f8104fff461..ff9201adf85 100644
--- a/packages/mobile/src/screens/coin-details-screen/components/FanClubTab.tsx
+++ b/packages/mobile/src/screens/coin-details-screen/components/FanClubTab.tsx
@@ -44,7 +44,7 @@ const messages = {
   uploadExclusiveTrack: coinDetailsMessages.coinInfo.uploadExclusiveTrack,
   becomeAMember: coinDetailsMessages.balance.becomeAMember,
   hintDescription: coinDetailsMessages.balance.hintDescription,
-  fanClubFeed: 'Fan Club Feed'
+  title: 'Fan Club Feed'
 }
 
 const MAX_PREVIEW_TRACKS = 3
@@ -260,7 +260,7 @@ const FanClubFeed = ({
         <Flex column w='100%'>
           <Flex row alignItems='center' gap='xs' pb='s'>
             <Text variant='heading' size='s'>
-              {messages.fanClubFeed}
+              {messages.title}
             </Text>
           </Flex>
           <Flex alignItems='center' justifyContent='center' pv='xl' w='100%'>
@@ -280,7 +280,7 @@ const FanClubFeed = ({
     <Flex column w='100%'>
       <Flex row alignItems='center' gap='xs' pb='s'>
         <Text variant='heading' size='s'>
-          {messages.fanClubFeed}
+          {messages.title}
         </Text>
         {totalCount > 0 ? (
           <Text variant='heading' size='s' color='subdued'>
diff --git a/packages/mobile/src/screens/coin-details-screen/index.ts b/packages/mobile/src/screens/coin-details-screen/index.ts
index 58fd1c13202..1b88375a13a 100644
--- a/packages/mobile/src/screens/coin-details-screen/index.ts
+++ b/packages/mobile/src/screens/coin-details-screen/index.ts
@@ -1,3 +1,2 @@
 export { CoinDetailsScreen } from './CoinDetailsScreen'
 export { EditCoinDetailsScreen } from './EditCoinDetailsScreen'
-export { ExclusiveTracksScreen } from './ExclusiveTracksScreen'
diff --git a/packages/web/src/app/web-player/WebPlayer.tsx b/packages/web/src/app/web-player/WebPlayer.tsx
index 2136f043b76..42c8c7b7c04 100644
--- a/packages/web/src/app/web-player/WebPlayer.tsx
+++ b/packages/web/src/app/web-player/WebPlayer.tsx
@@ -104,23 +104,11 @@ const FanClubDetailPage = lazy(() =>
     default: m.FanClubDetailPage
   }))
 )
-const ExclusiveTracksPage = lazy(() =>
-  import('pages/fan-club-detail-page/components/ExclusiveTracksPage').then(
-    (m) => ({
-      default: m.ExclusiveTracksPage
-    })
-  )
-)
 const ArtistFanClubDetailsPage = lazy(() =>
   import(
     'pages/fan-club-detail-page/components/mobile/ArtistFanClubDetailsPage'
   ).then((m) => ({ default: m.ArtistFanClubDetailsPage }))
 )
-const MobileExclusiveTracksPage = lazy(() =>
-  import(
-    'pages/fan-club-detail-page/components/mobile/ExclusiveTracksPage'
-  ).then((m) => ({ default: m.ExclusiveTracksPage }))
-)
 const CoinRedeemPage = lazy(() =>
   import('pages/coin-redeem-page/CoinRedeemPage').then((m) => ({
     default: m.CoinRedeemPage
@@ -408,10 +396,10 @@ const FanClubDetailPageRoute = ({
   return <FanClubDetailPage />
 }
 
-const CoinExclusiveTracksMobileRoute = () => {
+const CoinExclusiveTracksLegacyRedirect = () => {
   const params = useParams<{ ticker?: string }>()
-  const { ticker } = params
-  return <MobileExclusiveTracksPage ticker={ticker ?? ''} />
+  const ticker = (params.ticker ?? '').toUpperCase()
+  return <Navigate to={generatePath(COIN_DETAIL_PAGE, { ticker })} replace />
 }
 
 type HomePageRedirectProps = {
@@ -559,7 +547,7 @@ const WebPlayer = (props: WebPlayerProps) => {
   useEffect(() => {
     const client = getClient()
 
-    if (client === Client.ELECTRON) {
+    if (client === Client.ELECTRON && typeof window.require === 'function') {
       // eslint-disable-next-line @typescript-eslint/no-var-requires
       ipcRef.current = window.require('electron').ipcRenderer
 
@@ -950,20 +938,13 @@ const WebPlayer = (props: WebPlayerProps) => {
                   }
                 />
                 <Route path={COIN_REDEEM_PAGE} element={<CoinRedeemPage />} />
-                {!isMobile ? (
-                  <Route
-                    path={COIN_EXCLUSIVE_TRACKS_PAGE}
-                    element={<ExclusiveTracksPage />}
-                  />
-                ) : (
-                  <Route
-                    path={COIN_EXCLUSIVE_TRACKS_PAGE}
-                    element={<Navigate to={TRENDING_PAGE} replace />}
-                  />
-                )}
+                <Route
+                  path={COIN_EXCLUSIVE_TRACKS_PAGE}
+                  element={<CoinExclusiveTracksLegacyRedirect />}
+                />
                 <Route
                   path={COIN_EXCLUSIVE_TRACKS_MOBILE_ROUTE}
-                  element={<CoinExclusiveTracksMobileRoute />}
+                  element={<CoinExclusiveTracksLegacyRedirect />}
                 />
                 <Route
                   path={EDIT_COIN_DETAILS_PAGE}
@@ -1362,7 +1343,11 @@ const WebPlayer = (props: WebPlayerProps) => {
                 <Route path={COIN_REDEEM_PAGE} element={<CoinRedeemPage />} />
                 <Route
                   path={COIN_EXCLUSIVE_TRACKS_PAGE}
-                  element={<ExclusiveTracksPage />}
+                  element={<CoinExclusiveTracksLegacyRedirect />}
+                />
+                <Route
+                  path={COIN_EXCLUSIVE_TRACKS_MOBILE_ROUTE}
+                  element={<CoinExclusiveTracksLegacyRedirect />}
                 />
                 <Route
                   path={EDIT_COIN_DETAILS_PAGE}
diff --git a/packages/web/src/components/access-type-label/AccessTypeLabel.tsx b/packages/web/src/components/access-type-label/AccessTypeLabel.tsx
index ee695d76bb0..431ce81950f 100644
--- a/packages/web/src/components/access-type-label/AccessTypeLabel.tsx
+++ b/packages/web/src/components/access-type-label/AccessTypeLabel.tsx
@@ -9,8 +9,7 @@ import {
   IconColors,
   Flex,
   Text,
-  IconArtistCoin,
-  IconCoinGatedLabel
+  IconArtistCoin
 } from '@audius/harmony'
 
 type AccessTypeLabelProps = {
@@ -57,8 +56,8 @@ const ACCESS_TYPE_CONFIG: Record<AccessType, AccessTypeConfig> = {
   },
   [AccessType.TOKEN_GATED]: {
     icon: IconArtistCoin,
-    label: 'Coin Gated',
-    color: 'artistCoin'
+    label: 'Fan Club',
+    color: 'subdued'
   },
   [AccessType.EXTRAS]: {
     icon: IconReceive,
@@ -77,15 +76,6 @@ export const AccessTypeLabel = (props: AccessTypeLabelProps) => {
       ? config.label(scheduledReleaseDate)
       : config.label
 
-  // Use coin gated label svg instead of icon and text for token gated
-  if (type === AccessType.TOKEN_GATED) {
-    return (
-      <Flex alignItems='center'>
-        <IconCoinGatedLabel height={20} />
-      </Flex>
-    )
-  }
-
   return (
     <Flex gap='xs' alignItems='center'>
       {config.icon ? (
diff --git a/packages/web/src/components/track/GatedConditionsPill.tsx b/packages/web/src/components/track/GatedConditionsPill.tsx
index c6417488125..1fd32cc1f21 100644
--- a/packages/web/src/components/track/GatedConditionsPill.tsx
+++ b/packages/web/src/components/track/GatedConditionsPill.tsx
@@ -17,7 +17,7 @@ import { make, track } from 'services/analytics'
 const messages = {
   unlocking: 'Unlocking',
   locked: 'Locked',
-  buyArtistCoin: 'Buy Artist Coin'
+  unlock: 'Unlock'
 }
 
 export const GatedConditionsPill = ({
@@ -50,7 +50,7 @@ export const GatedConditionsPill = ({
     message = isPurchase
       ? USDC(streamConditions.usdc_purchase.price / 100).toLocaleString()
       : isTokenGated
-        ? messages.buyArtistCoin
+        ? messages.unlock
         : messages.locked
   }
 
@@ -87,12 +87,28 @@ export const GatedConditionsPill = ({
     ]
   )
 
+  if (isTokenGated) {
+    return (
+      <Button
+        className={className}
+        variant='secondary'
+        size='small'
+        rounded
+        onClick={handleClick}
+        isLoading={unlocking}
+        css={{ height: '24px' }}
+      >
+        {message}
+      </Button>
+    )
+  }
+
   return (
     <Button
       className={className}
       size={buttonSize}
       onClick={handleClick}
-      color={isPurchase ? 'lightGreen' : isTokenGated ? 'coinGradient' : 'blue'}
+      color={isPurchase ? 'lightGreen' : 'blue'}
       isLoading={unlocking}
       iconLeft={showIcon ? IconLock : undefined}
       // TODO: Add 'xs' button size in harmony
diff --git a/packages/web/src/components/track/TrackLockedStatusBadge.tsx b/packages/web/src/components/track/TrackLockedStatusBadge.tsx
index 800a0b594c6..9960a1f519c 100644
--- a/packages/web/src/components/track/TrackLockedStatusBadge.tsx
+++ b/packages/web/src/components/track/TrackLockedStatusBadge.tsx
@@ -3,9 +3,14 @@ import {
   useTrackLockedStatusVariant
 } from '@audius/common/hooks'
 import { ID } from '@audius/common/models'
+import { Flex, IconLock, Text } from '@audius/harmony'
 
 import { LockedStatusBadge } from 'components/locked-status-badge'
 
+const messages = {
+  membersOnly: 'Members Only'
+}
+
 type TrackLockedStatusBadgeProps = {
   trackId: ID
 }
@@ -18,5 +23,16 @@ export const TrackLockedStatusBadge = (props: TrackLockedStatusBadgeProps) => {
 
   if (!variant) return null
 
+  if (variant === 'tokenGated' && !hasStreamAccess) {
+    return (
+      <Flex gap='xs' alignItems='center' justifyContent='center'>
+        <IconLock size='s' color='default' />
+        <Text variant='body' size='s' strength='strong' color='default'>
+          {messages.membersOnly}
+        </Text>
+      </Flex>
+    )
+  }
+
   return <LockedStatusBadge variant={variant} locked={!hasStreamAccess} />
 }
diff --git a/packages/web/src/components/unsaved-changes-dialog/UnsavedChangesDialog.tsx b/packages/web/src/components/unsaved-changes-dialog/UnsavedChangesDialog.tsx
index d857679ce5a..79298e5e0c9 100644
--- a/packages/web/src/components/unsaved-changes-dialog/UnsavedChangesDialog.tsx
+++ b/packages/web/src/components/unsaved-changes-dialog/UnsavedChangesDialog.tsx
@@ -41,7 +41,8 @@ export const UnsavedChangesDialog = () => {
   const hotkeyHookRef =
     useRef<(e: KeyboardEvent) => void | undefined>(undefined)
 
-  const addElectronListener = isElectron()
+  const addElectronListener =
+    isElectron() && typeof window.require === 'function'
   const ipcRef = useRef<any>(null)
 
   useEffect(() => {
diff --git a/packages/web/src/pages/fan-club-detail-page/FanClubDetailContent.tsx b/packages/web/src/pages/fan-club-detail-page/FanClubDetailContent.tsx
index 0a66642dbe4..f06302e3715 100644
--- a/packages/web/src/pages/fan-club-detail-page/FanClubDetailContent.tsx
+++ b/packages/web/src/pages/fan-club-detail-page/FanClubDetailContent.tsx
@@ -1,7 +1,7 @@
 import { Flex, makeResponsiveStyles } from '@audius/harmony'
 
 import { BalanceSection } from './components/BalanceSection'
-import { ExclusiveTracksSection } from './components/ExclusiveTracksSection'
+import { FanClubFeedSection } from './components/FanClubFeedSection'
 import { FanClubInfoSection } from './components/FanClubInfoSection'
 import { FanClubInsights } from './components/FanClubInsights'
 import { FanClubLeaderboardCard } from './components/FanClubLeaderboardCard'
@@ -26,10 +26,10 @@ const useStyles = makeResponsiveStyles(({ media, theme }) => {
         paddingBottom: hasEnoughSpaceForTwoColumns ? 0 : theme.spacing.m
       }
     },
-    /** Primary column: fan club story + exclusive tracks (desktop left). */
+    /** Primary column: fan club story + fan club feed (desktop left). */
     mainColumn: {
       base: {
-        order: hasEnoughSpaceForTwoColumns ? 1 : 2,
+        order: 1,
         width: hasEnoughSpaceForTwoColumns ? MAIN_SECTION_WIDTH : '100%',
         maxWidth: hasEnoughSpaceForTwoColumns ? MAIN_SECTION_WIDTH : '100%',
         minWidth: 0,
@@ -42,7 +42,7 @@ const useStyles = makeResponsiveStyles(({ media, theme }) => {
     /** Sidebar: balance, leaderboard, insights, on-chain details (desktop right). */
     sidebarColumn: {
       base: {
-        order: hasEnoughSpaceForTwoColumns ? 2 : 1,
+        order: 2,
         width: hasEnoughSpaceForTwoColumns ? SIDEBAR_SECTION_WIDTH : '100%',
         maxWidth: hasEnoughSpaceForTwoColumns ? SIDEBAR_SECTION_WIDTH : '100%',
         minWidth: 0,
@@ -66,7 +66,7 @@ export const FanClubDetailContent = ({ mint }: FanClubDetailContentProps) => {
     <Flex css={styles.container}>
       <Flex css={styles.mainColumn}>
         <FanClubInfoSection mint={mint} variant='hero' />
-        <ExclusiveTracksSection mint={mint} />
+        <FanClubFeedSection mint={mint} />
       </Flex>
       <Flex css={styles.sidebarColumn}>
         <BalanceSection mint={mint} />
diff --git a/packages/web/src/pages/fan-club-detail-page/FanClubDetailPage.tsx b/packages/web/src/pages/fan-club-detail-page/FanClubDetailPage.tsx
index 0cdef486a4e..6b71c210064 100644
--- a/packages/web/src/pages/fan-club-detail-page/FanClubDetailPage.tsx
+++ b/packages/web/src/pages/fan-club-detail-page/FanClubDetailPage.tsx
@@ -16,6 +16,7 @@ import { useIsMobile } from 'hooks/useIsMobile'
 import { BASE_URL } from 'utils/route'
 
 import { useFanClubDetailTabs } from './FanClubDetailTabs'
+import { MobileFanClubDetailContent } from './MobileFanClubDetailContent'
 
 const { CLUBS_EXPLORE_PAGE, COIN_DETAIL_PAGE, NOT_FOUND_PAGE } = route
 
@@ -72,8 +73,6 @@ const MobileFanClubDetailPageContent = ({
   ogTitle,
   description
 }: FanClubDetailPageContentProps) => {
-  const { body } = useFanClubDetailTabs({ mint })
-
   return (
     <MobilePageContainer
       title={visualTitle}
@@ -81,9 +80,7 @@ const MobileFanClubDetailPageContent = ({
       description={description}
       canonicalUrl={`${BASE_URL}${COIN_DETAIL_PAGE}/${visualTitle}`}
     >
-      <Flex column w='100%' p='l'>
-        {body}
-      </Flex>
+      <MobileFanClubDetailContent mint={mint} />
     </MobilePageContainer>
   )
 }
diff --git a/packages/web/src/pages/fan-club-detail-page/MobileFanClubDetailContent.tsx b/packages/web/src/pages/fan-club-detail-page/MobileFanClubDetailContent.tsx
new file mode 100644
index 00000000000..ccee4795999
--- /dev/null
+++ b/packages/web/src/pages/fan-club-detail-page/MobileFanClubDetailContent.tsx
@@ -0,0 +1,155 @@
+import { useCallback, useState } from 'react'
+
+import {
+  useArtistCoin,
+  useCoinBalance,
+  useCurrentUserId
+} from '@audius/common/api'
+import { Flex, Text, useTheme } from '@audius/harmony'
+
+import { BalanceSection } from './components/BalanceSection'
+import { FanClubFeedSection } from './components/FanClubFeedSection'
+import { FanClubInfoSection } from './components/FanClubInfoSection'
+import { FanClubInsights } from './components/FanClubInsights'
+import { FanClubLeaderboardCard } from './components/FanClubLeaderboardCard'
+
+enum TabType {
+  FAN_CLUB = 'fanClub',
+  COIN = 'coin'
+}
+
+const messages = {
+  fanClub: 'Fan Club',
+  coin: 'Coin'
+}
+
+type TabButtonProps = {
+  label: string
+  isActive: boolean
+  onClick: () => void
+}
+
+const TabButton = ({ label, isActive, onClick }: TabButtonProps) => {
+  const { color, spacing } = useTheme()
+
+  return (
+    <Flex
+      onClick={onClick}
+      justifyContent='center'
+      alignItems='center'
+      css={{
+        flex: 1,
+        cursor: 'pointer',
+        height: spacing.unit10,
+        borderBottom: `2px solid ${isActive ? color.primary.primary : 'transparent'}`,
+        transition: 'border-color 0.2s ease'
+      }}
+    >
+      <Text
+        variant='body'
+        strength={isActive ? 'strong' : 'default'}
+        color={isActive ? 'default' : 'subdued'}
+      >
+        {label}
+      </Text>
+    </Flex>
+  )
+}
+
+type MobileFanClubTabBarProps = {
+  activeTab: TabType
+  onTabChange: (tab: TabType) => void
+}
+
+const MobileFanClubTabBar = ({
+  activeTab,
+  onTabChange
+}: MobileFanClubTabBarProps) => {
+  const { color } = useTheme()
+
+  return (
+    <Flex
+      w='100%'
+      css={{
+        borderBottom: `1px solid ${color.border.default}`,
+        backgroundColor: color.background.white
+      }}
+    >
+      <TabButton
+        label={messages.fanClub}
+        isActive={activeTab === TabType.FAN_CLUB}
+        onClick={() => onTabChange(TabType.FAN_CLUB)}
+      />
+      <TabButton
+        label={messages.coin}
+        isActive={activeTab === TabType.COIN}
+        onClick={() => onTabChange(TabType.COIN)}
+      />
+    </Flex>
+  )
+}
+
+type FanClubTabContentProps = {
+  mint: string
+}
+
+const FanClubTabContent = ({ mint }: FanClubTabContentProps) => {
+  const { data: coin } = useArtistCoin(mint)
+  const { data: currentUserId } = useCurrentUserId()
+  const { data: tokenBalance } = useCoinBalance({ mint })
+
+  const isOwner = currentUserId != null && currentUserId === coin?.ownerId
+  const hasBalance = !!(
+    tokenBalance?.balance && Number(tokenBalance.balance.toString()) > 0
+  )
+  const isMemberOrOwner = isOwner || hasBalance
+
+  return (
+    <Flex column gap='l' w='100%' p='l'>
+      <FanClubInfoSection mint={mint} variant='hero' />
+      {isMemberOrOwner ? <FanClubLeaderboardCard mint={mint} /> : null}
+      <FanClubFeedSection mint={mint} />
+    </Flex>
+  )
+}
+
+type CoinTabContentProps = {
+  mint: string
+}
+
+const CoinTabContent = ({ mint }: CoinTabContentProps) => {
+  return (
+    <Flex column gap='l' w='100%' p='l'>
+      <BalanceSection mint={mint} />
+      <FanClubInsights mint={mint} />
+    </Flex>
+  )
+}
+
+type MobileFanClubDetailContentProps = {
+  mint: string
+}
+
+export const MobileFanClubDetailContent = ({
+  mint
+}: MobileFanClubDetailContentProps) => {
+  const [activeTab, setActiveTab] = useState(TabType.FAN_CLUB)
+
+  const handleTabChange = useCallback((tab: TabType) => {
+    setActiveTab(tab)
+  }, [])
+
+  return (
+    <Flex column w='100%'>
+      <MobileFanClubTabBar
+        activeTab={activeTab}
+        onTabChange={handleTabChange}
+      />
+      {activeTab === TabType.FAN_CLUB ? (
+        <FanClubTabContent mint={mint} />
+      ) : (
+        <CoinTabContent mint={mint} />
+      )}
+    </Flex>
+  )
+}
diff --git a/packages/web/src/pages/fan-club-detail-page/components/ExclusiveTracksPage.tsx b/packages/web/src/pages/fan-club-detail-page/components/ExclusiveTracksPage.tsx
deleted file mode 100644
index 47c10c8b992..00000000000
--- a/packages/web/src/pages/fan-club-detail-page/components/ExclusiveTracksPage.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useArtistCoinByTicker, useExclusiveTracks } from '@audius/common/api'
-import { exclusiveTracksPageLineupActions } from '@audius/common/store'
-import { Flex } from '@audius/harmony'
-import { useParams } from 'react-router'
-
-import { Header } from 'components/header/desktop/Header'
-import { TanQueryLineup } from 'components/lineup/TanQueryLineup'
-import Page from 'components/page/Page'
-
-const PAGE_SIZE = 100
-
-export const ExclusiveTracksPage = () => {
-  const { ticker } = useParams<{ ticker?: string }>()
-
-  const { data: coin } = useArtistCoinByTicker({ ticker: ticker ?? '' })
-  const ownerId = coin?.ownerId
-  const coinName = coin?.name ?? ticker
-
-  const title = coinName ? `${coinName} Fan Club Feed` : 'Fan Club Feed'
-
-  const {
-    data,
-    isFetching,
-    isPending,
-    isError,
-    hasNextPage,
-    play,
-    pause,
-    loadNextPage,
-    isPlaying,
-    lineup
-  } = useExclusiveTracks({
-    userId: ownerId,
-    pageSize: PAGE_SIZE
-  })
-
-  const header = <Header primary={title} showBackButton={true} />
-
-  return (
-    <Page title={title} header={header}>
-      <Flex
-        column
-        gap='xl'
-        alignItems='center'
-        ph='3xl'
-        pt='2xl'
-        pb='3xl'
-        w='100%'
-      >
-        <Flex
-          column
-          gap='l'
-          css={{
-            maxWidth: 1080,
-            width: '100%'
-          }}
-        >
-          <TanQueryLineup
-            data={data}
-            isFetching={isFetching}
-            isPending={isPending}
-            isError={isError}
-            hasNextPage={hasNextPage}
-            play={play}
-            pause={pause}
-            loadNextPage={loadNextPage}
-            isPlaying={isPlaying}
-            lineup={lineup}
-            actions={exclusiveTracksPageLineupActions}
-            pageSize={PAGE_SIZE}
-          />
-        </Flex>
-      </Flex>
-    </Page>
-  )
-}
diff --git a/packages/web/src/pages/fan-club-detail-page/components/ExclusiveTracksSection.tsx b/packages/web/src/pages/fan-club-detail-page/components/FanClubFeedSection.tsx
similarity index 88%
rename from packages/web/src/pages/fan-club-detail-page/components/ExclusiveTracksSection.tsx
rename to packages/web/src/pages/fan-club-detail-page/components/FanClubFeedSection.tsx
index db986544ae2..e44bf58b6d7 100644
--- a/packages/web/src/pages/fan-club-detail-page/components/ExclusiveTracksSection.tsx
+++ b/packages/web/src/pages/fan-club-detail-page/components/FanClubFeedSection.tsx
@@ -10,18 +10,16 @@ import { TanQueryLineup } from 'components/lineup/TanQueryLineup'
 import { LineupVariant } from 'components/lineup/types'
 
 const messages = {
-  fanClubFeed: 'Fan Club Feed'
+  title: 'Fan Club Feed'
 }
 
 const FEED_PAGE_SIZE = 10
 
-type ExclusiveTracksSectionProps = {
+type FanClubFeedSectionProps = {
   mint: string
 }
 
-export const ExclusiveTracksSection = ({
-  mint
-}: ExclusiveTracksSectionProps) => {
+export const FanClubFeedSection = ({ mint }: FanClubFeedSectionProps) => {
   const { data: coin } = useArtistCoin(mint)
   const ownerId = coin?.ownerId
 
@@ -55,7 +53,7 @@ export const ExclusiveTracksSection = ({
     <Flex column gap='l' w='100%'>
       <Flex alignItems='center' gap='s' w='100%'>
         <Text variant='heading' size='m' color='default'>
-          {messages.fanClubFeed}
+          {messages.title}
         </Text>
         <Text variant='heading' size='m' color='subdued'>
           ({totalCount})
@@ -76,7 +74,7 @@ export const ExclusiveTracksSection = ({
         actions={exclusiveTracksPageLineupActions}
         pageSize={pageSize}
         initialPageSize={FEED_PAGE_SIZE}
-        variant={LineupVariant.SECTION}
+        variant={LineupVariant.MAIN}
         shouldLoadMore
       />
     </Flex>
diff --git a/packages/web/src/pages/fan-club-detail-page/components/FanClubInfoSection.tsx b/packages/web/src/pages/fan-club-detail-page/components/FanClubInfoSection.tsx
index 94af566c50d..0c347593339 100644
--- a/packages/web/src/pages/fan-club-detail-page/components/FanClubInfoSection.tsx
+++ b/packages/web/src/pages/fan-club-detail-page/components/FanClubInfoSection.tsx
@@ -78,6 +78,9 @@ const toastMessages = coinDetailsMessages.toasts
 const BANNER_HEIGHT = 160
 const DISCOVERY_COVER_HEIGHT = 96
 
+/** Matches FanClubDetailContent two-column breakpoint; hero stacks coin header before artist row. */
+const HERO_STACKED_ORDER_RESET = '@media (min-width: 1440px)'
+
 const fanClubCardMessages = walletMessages.artistCoins
 
 // Minimum claimable fee amount (0.01 $AUDIO = 10^6 in smallest denomination with 8 decimals)
@@ -197,7 +200,15 @@ const FanClubInfoHeroSkeleton = () => {
         alignSelf='stretch'
         css={{ marginTop: -theme.spacing.unit9 }}
       >
-        <Flex gap='s' alignItems='flex-end' w='100%'>
+        <Flex
+          gap='s'
+          alignItems='flex-end'
+          w='100%'
+          css={{
+            order: 3,
+            [HERO_STACKED_ORDER_RESET]: { order: 0 }
+          }}
+        >
           <Skeleton borderRadius='circle' w={72} h={72} />
           <Flex column gap='xs' flex={1}>
             <Skeleton h={12} w={64} />
@@ -212,6 +223,10 @@ const FanClubInfoHeroSkeleton = () => {
           gap='m'
           backgroundColor='surface1'
           w='100%'
+          css={{
+            order: 1,
+            [HERO_STACKED_ORDER_RESET]: { order: 0 }
+          }}
         >
           <Flex gap='m' alignItems='center'>
             <Skeleton w={40} h={40} />
@@ -221,7 +236,15 @@ const FanClubInfoHeroSkeleton = () => {
             </Flex>
           </Flex>
         </Paper>
-        <Flex column gap='m' w='100%'>
+        <Flex
+          column
+          gap='m'
+          w='100%'
+          css={{
+            order: 2,
+            [HERO_STACKED_ORDER_RESET]: { order: 0 }
+          }}
+        >
           <Skeleton width='100%' height='20px' />
           <Skeleton width='90%' height='20px' />
           <Skeleton width='100%' height='20px' />
@@ -991,9 +1014,21 @@ export const FanClubInfoSection = ({
           pb='l'
           pt='l'
           alignSelf='stretch'
-          css={{ marginTop: -theme.spacing.unit9 }}
+          css={{
+            marginTop: -theme.spacing.unit9
+            // Below 1440px: coin header + description first, then artist + social (flex order on children).
+          }}
         >
-          <Flex gap='s' alignItems='flex-end' w='100%' css={{ minWidth: 0 }}>
+          <Flex
+            gap='s'
+            alignItems='flex-end'
+            w='100%'
+            css={{
+              minWidth: 0,
+              order: 3,
+              [HERO_STACKED_ORDER_RESET]: { order: 0 }
+            }}
+          >
             <Avatar userId={coin.ownerId} size='large' />
             <Flex column gap='2xs' flex={1} css={{ minWidth: 0 }}>
               <Text variant='label' size='s' color='subdued'>
@@ -1008,7 +1043,16 @@ export const FanClubInfoSection = ({
             </Flex>
           </Flex>
 
-          {hasSocialLinks ? <SocialLinksDisplay coin={coin} /> : null}
+          {hasSocialLinks ? (
+            <Flex
+              css={{
+                order: 4,
+                [HERO_STACKED_ORDER_RESET]: { order: 0 }
+              }}
+            >
+              <SocialLinksDisplay coin={coin} />
+            </Flex>
+          ) : null}
 
           <Paper
             backgroundColor='surface1'
@@ -1019,6 +1063,10 @@ export const FanClubInfoSection = ({
             column
             gap='m'
             w='100%'
+            css={{
+              order: 1,
+              [HERO_STACKED_ORDER_RESET]: { order: 0 }
+            }}
           >
             <Flex gap='m' alignItems='center' w='100%' css={{ minWidth: 0 }}>
               <TokenIcon logoURI={coin.logoUri} size='xl' hex />
@@ -1034,7 +1082,15 @@ export const FanClubInfoSection = ({
           </Paper>
 
           {hasDescriptionText ? (
-            <Flex column gap='m' alignSelf='stretch'>
+            <Flex
+              column
+              gap='m'
+              alignSelf='stretch'
+              css={{
+                order: 2,
+                [HERO_STACKED_ORDER_RESET]: { order: 0 }
+              }}
+            >
               {descriptionParagraphs.map((paragraph) => {
                 if (paragraph.trim() === '') {
                   return null
@@ -1060,6 +1116,10 @@ export const FanClubInfoSection = ({
               fullWidth
               iconLeft={IconCloudUpload}
               onClick={handleUploadExclusiveTrack}
+              css={{
+                order: 5,
+                [HERO_STACKED_ORDER_RESET]: { order: 0 }
+              }}
             >
               {messages.uploadExclusiveTrack}
             </Button>
diff --git a/packages/web/src/pages/fan-club-detail-page/components/mobile/ExclusiveTracksPage.module.css b/packages/web/src/pages/fan-club-detail-page/components/mobile/ExclusiveTracksPage.module.css
deleted file mode 100644
index a85e8ed07d1..00000000000
--- a/packages/web/src/pages/fan-club-detail-page/components/mobile/ExclusiveTracksPage.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.container {
-  padding: 0;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--unit-2);
-  width: 100%;
-}
-
-.tracksContainer {
-  padding: var(--unit-3);
-}
diff --git a/packages/web/src/pages/fan-club-detail-page/components/mobile/ExclusiveTracksPage.tsx b/packages/web/src/pages/fan-club-detail-page/components/mobile/ExclusiveTracksPage.tsx
deleted file mode 100644
index 00791441075..00000000000
--- a/packages/web/src/pages/fan-club-detail-page/components/mobile/ExclusiveTracksPage.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useEffect, useContext } from 'react'
-
-import { useArtistCoinByTicker, useExclusiveTracks } from '@audius/common/api'
-import { exclusiveTracksPageLineupActions } from '@audius/common/store'
-
-import Header from 'components/header/mobile/Header'
-import { HeaderContext } from 'components/header/mobile/HeaderContextProvider'
-import { TanQueryLineup } from 'components/lineup/TanQueryLineup'
-import MobilePageContainer from 'components/mobile-page-container/MobilePageContainer'
-import { useSubPageHeader } from 'components/nav/mobile/NavContext'
-
-import styles from './ExclusiveTracksPage.module.css'
-
-const PAGE_SIZE = 100
-
-type ExclusiveTracksPageProps = {
-  ticker: string
-}
-
-export const ExclusiveTracksPage = ({ ticker }: ExclusiveTracksPageProps) => {
-  useSubPageHeader()
-
-  const { data: coin } = useArtistCoinByTicker({ ticker })
-  const ownerId = coin?.ownerId
-  const coinName = coin?.name ?? ticker
-
-  const title = coinName ? `${coinName} Fan Club Feed` : 'Fan Club Feed'
-
-  const {
-    data,
-    isFetching,
-    isPending,
-    isError,
-    hasNextPage,
-    play,
-    pause,
-    loadNextPage,
-    isPlaying,
-    lineup,
-    pageSize
-  } = useExclusiveTracks({
-    userId: ownerId,
-    pageSize: PAGE_SIZE
-  })
-
-  const { setHeader } = useContext(HeaderContext)
-  useEffect(() => {
-    setHeader(
-      <>
-        <Header className={styles.header} title={title} />
-      </>
-    )
-  }, [setHeader, title])
-
-  return (
-    <MobilePageContainer
-      title={title}
-      description={title}
-      containerClassName={styles.container}
-    >
-      <div className={styles.tracksContainer}>
-        <TanQueryLineup
-          data={data}
-          isFetching={isFetching}
-          isPending={isPending}
-          isError={isError}
-          hasNextPage={hasNextPage}
-          play={play}
-          pause={pause}
-          loadNextPage={loadNextPage}
-          isPlaying={isPlaying}
-          lineup={lineup}
-          actions={exclusiveTracksPageLineupActions}
-          pageSize={pageSize}
-        />
-      </div>
-    </MobilePageContainer>
-  )
-}