diff --git a/packages/mobile/src/app/Drawers.tsx b/packages/mobile/src/app/Drawers.tsx
index 32e2d49f089..a01b4d0f90f 100644
--- a/packages/mobile/src/app/Drawers.tsx
+++ b/packages/mobile/src/app/Drawers.tsx
@@ -19,6 +19,7 @@ import { EditCollectiblesDrawer } from 'app/components/edit-collectibles-drawer'
 import { EnablePushNotificationsDrawer } from 'app/components/enable-push-notifications-drawer'
 import { FeedFilterDrawer } from 'app/components/feed-filter-drawer'
 import { ForgotPasswordDrawer } from 'app/components/forgot-password-drawer'
+import { GatedContentUploadPromptDrawer } from 'app/components/gated-content-upload-prompt-drawer/GatedContentUploadPromptDrawer'
 import { LockedContentDrawer } from 'app/components/locked-content-drawer'
 import { OverflowMenuDrawer } from 'app/components/overflow-menu-drawer'
 import { PlaybackRateDrawer } from 'app/components/playback-rate-drawer'
@@ -115,6 +116,7 @@ const nativeDrawersMap: { [DrawerName in Drawer]?: ComponentType } = {
   RemoveDownloadedFavorites: RemoveDownloadedFavoritesDrawer,
   UnfavoriteDownloadedCollection: UnfavoriteDownloadedCollectionDrawer,
   LockedContent: LockedContentDrawer,
+  GatedContentUploadPrompt: GatedContentUploadPromptDrawer,
   ChatActions: ChatActionsDrawer,
   BlockMessages: BlockMessagesDrawer
 }
diff --git a/packages/mobile/src/assets/images/iconRocket.svg b/packages/mobile/src/assets/images/iconRocket.svg
new file mode 100644
index 00000000000..88accca541c
--- /dev/null
+++ b/packages/mobile/src/assets/images/iconRocket.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>iconRocket</title>
+    <g id="Assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="assets" transform="translate(-763.000000, -1519.000000)">
+            <g id="icon/Rocket" transform="translate(763.000000, 1519.000000)">
+                <path d="M20.7601739,3.67145254 C20.7144615,3.45700958 20.5456772,3.28826758 20.3311805,3.24256662 C19.1989194,3 18.312802,3 17.4302009,3 C13.8013392,3 11.6247254,4.94053298 10.0001768,7.49978663 L6.33615171,7.49978663 C5.69617803,7.49978663 5.11246577,7.86187884 4.82764232,8.43138308 L3.0905709,11.9046559 C2.80926379,12.4671292 3.2171591,13.1245199 3.84658376,13.1245199 L7.19062206,13.1245199 C6.98315807,13.5744986 6.77217773,14.0209618 6.55768106,14.4498477 C6.44867455,14.6678061 6.49087062,14.92795 6.66317123,15.1002075 L8.89956277,17.336039 C9.07186337,17.5082964 9.33207245,17.5504819 9.55008547,17.4415027 C9.97907881,17.2270598 10.4256539,17.0196477 10.8757452,16.8122357 L10.8757452,20.1554365 C10.8757452,20.7811881 11.5368169,21.1889813 12.0959148,20.9112601 L15.5665413,19.1746237 C16.1397046,18.8898715 16.4983711,18.30279 16.4983711,17.666492 L16.4983711,13.9963536 C19.0512332,12.3686964 20.9992849,10.1855968 20.9992849,6.5752211 C21.0028013,5.6893256 21.0028013,4.80343011 20.7601739,3.67145254 Z M17.0645017,8.62473329 C16.1326719,8.62473329 15.376659,7.86890975 15.376659,6.9373133 C15.376659,6.00571685 16.1326719,5.24989331 17.0645017,5.24989331 C17.9963315,5.24989331 18.7523444,6.00571685 18.7523444,6.9373133 C18.7523444,7.86890975 17.9963315,8.62473329 17.0645017,8.62473329 Z" id="Mask" fill="#000" fill-rule="evenodd"></path>
+                <rect id="bound" x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/mobile/src/components/gated-content-upload-prompt-drawer/GatedContentUploadPromptDrawer.tsx b/packages/mobile/src/components/gated-content-upload-prompt-drawer/GatedContentUploadPromptDrawer.tsx
new file mode 100644
index 00000000000..344505fb4a3
--- /dev/null
+++ b/packages/mobile/src/components/gated-content-upload-prompt-drawer/GatedContentUploadPromptDrawer.tsx
@@ -0,0 +1,147 @@
+import { useCallback } from 'react'
+
+import { TouchableOpacity, View } from 'react-native'
+import { useDispatch } from 'react-redux'
+
+import IconArrow from 'app/assets/images/iconArrow.svg'
+import IconExternalLink from 'app/assets/images/iconExternalLink.svg'
+import IconRocket from 'app/assets/images/iconRocket.svg'
+import { Button, Text, useLink } from 'app/components/core'
+import { NativeDrawer } from 'app/components/drawer'
+import { useNavigation } from 'app/hooks/useNavigation'
+import { setVisibility } from 'app/store/drawers/slice'
+import { flexRowCentered, makeStyles } from 'app/styles'
+import { useColor } from 'app/utils/theme'
+
+const LEARN_MORE_URL =
+  'https://blog.audius.co/guide-to-audius-availability-settings'
+
+const messages = {
+  title: 'NEW UPDATE!',
+  subtitle: 'Control who has access to your tracks!',
+  description:
+    'Availability settings allow you to limit access to specific groups of users or offer exclusive content to your most dedicated fans.',
+  learnMore: 'Learn More',
+  gotIt: 'Got It',
+  checkItOut: 'Check It Out'
+}
+
+const useStyles = makeStyles(({ spacing, palette, typography }) => ({
+  drawer: {
+    marginVertical: spacing(8),
+    marginHorizontal: spacing(4),
+    alignItems: 'flex-start'
+  },
+  titleContainer: {
+    ...flexRowCentered(),
+    justifyContent: 'center',
+    width: '100%',
+    paddingBottom: spacing(4),
+    marginBottom: spacing(6),
+    borderBottomWidth: 1,
+    borderBottomColor: palette.neutralLight8
+  },
+  titleText: {
+    marginLeft: spacing(3),
+    fontFamily: typography.fontByWeight.heavy,
+    fontSize: typography.fontSize.medium,
+    color: palette.neutralLight4
+  },
+  subtitle: {
+    marginBottom: spacing(6),
+    fontFamily: typography.fontByWeight.bold,
+    fontSize: typography.fontSize.large
+  },
+  description: {
+    marginBottom: spacing(6),
+    fontFamily: typography.fontByWeight.medium,
+    fontSize: typography.fontSize.large,
+    lineHeight: spacing(7)
+  },
+  button: {
+    marginBottom: spacing(6)
+  },
+  buttonText: {
+    fontSize: typography.fontSize.large
+  },
+  learnMore: {
+    ...flexRowCentered(),
+    marginBottom: spacing(6)
+  },
+  learnMoreIcon: {
+    marginLeft: spacing(1)
+  }
+}))
+
+export const GatedContentUploadPromptDrawer = ({
+  isUpload
+}: {
+  isUpload?: boolean
+}) => {
+  const styles = useStyles()
+  const neutralLight4 = useColor('neutralLight4')
+  const navigation = useNavigation()
+  const dispatch = useDispatch()
+  const { onPress: onLearnMorePress } = useLink(LEARN_MORE_URL)
+
+  const handleClose = useCallback(() => {
+    dispatch(
+      setVisibility({ drawer: 'GatedContentUploadPrompt', visible: false })
+    )
+  }, [dispatch])
+
+  const handleSubmit = useCallback(() => {
+    handleClose()
+    navigation.push('Availability')
+  }, [handleClose, navigation])
+
+  if (!isUpload) return null
+
+  return (
+    <NativeDrawer drawerName='GatedContentUploadPrompt'>
+      <View style={styles.drawer}>
+        <View style={styles.titleContainer}>
+          <IconRocket fill={neutralLight4} width={24} height={24} />
+          <Text style={styles.titleText} weight='heavy' color='neutral'>
+            {messages.title}
+          </Text>
+        </View>
+        <Text style={styles.subtitle}>{messages.subtitle}</Text>
+        <Text style={styles.description}>{messages.description}</Text>
+        <TouchableOpacity style={styles.learnMore} onPress={onLearnMorePress}>
+          <Text weight='bold' color='neutralLight4' fontSize='large'>
+            {messages.learnMore}
+          </Text>
+          <IconExternalLink
+            style={styles.learnMoreIcon}
+            width={20}
+            height={20}
+            fill={neutralLight4}
+          />
+        </TouchableOpacity>
+        <Button
+          title={messages.gotIt}
+          onPress={handleClose}
+          variant='commonAlt'
+          size='large'
+          styles={{
+            root: styles.button,
+            text: styles.buttonText
+          }}
+          fullWidth
+        />
+        <Button
+          title={messages.checkItOut}
+          onPress={handleSubmit}
+          styles={{
+            root: styles.button,
+            text: styles.buttonText
+          }}
+          size='large'
+          icon={IconArrow}
+          fullWidth
+        />
+      </View>
+    </NativeDrawer>
+  )
+}
diff --git a/packages/mobile/src/components/gated-content-upload-prompt-drawer/index.ts b/packages/mobile/src/components/gated-content-upload-prompt-drawer/index.ts
new file mode 100644
index 00000000000..77a9ffbd863
--- /dev/null
+++ b/packages/mobile/src/components/gated-content-upload-prompt-drawer/index.ts
@@ -0,0 +1 @@
+export { GatedContentUploadPromptDrawer } from './GatedContentUploadPromptDrawer'
diff --git a/packages/mobile/src/hooks/useOneTimeDrawer.ts b/packages/mobile/src/hooks/useOneTimeDrawer.ts
new file mode 100644
index 00000000000..b9ae5661281
--- /dev/null
+++ b/packages/mobile/src/hooks/useOneTimeDrawer.ts
@@ -0,0 +1,33 @@
+import { useEffect } from 'react'
+
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import { useDispatch } from 'react-redux'
+import { useAsync } from 'react-use'
+
+import type { Drawer as DrawerName } from 'app/store/drawers/slice'
+import { setVisibility } from 'app/store/drawers/slice'
+
+type UseOneTimeDrawerProps = {
+  key: string // AsyncStorage key
+  name: DrawerName
+  disabled?: boolean
+}
+
+export const useOneTimeDrawer = ({
+  key,
+  name,
+  disabled = false
+}: UseOneTimeDrawerProps) => {
+  const dispatch = useDispatch()
+  const { value: seen, loading } = useAsync(() => AsyncStorage.getItem(key))
+
+  useEffect(() => {
+    if (disabled) return
+
+    const shouldOpen = !loading && !seen
+    if (shouldOpen) {
+      dispatch(setVisibility({ drawer: name, visible: true }))
+      AsyncStorage.setItem(key, 'true')
+    }
+  }, [disabled, loading, seen, dispatch, name, key])
+}
diff --git a/packages/mobile/src/screens/edit-track-screen/EditTrackForm.tsx b/packages/mobile/src/screens/edit-track-screen/EditTrackForm.tsx
index 0f922496765..6492c67f1de 100644
--- a/packages/mobile/src/screens/edit-track-screen/EditTrackForm.tsx
+++ b/packages/mobile/src/screens/edit-track-screen/EditTrackForm.tsx
@@ -10,7 +10,10 @@ import IconCaretRight from 'app/assets/images/iconCaretRight.svg'
 import IconUpload from 'app/assets/images/iconUpload.svg'
 import { Button, Tile } from 'app/components/core'
 import { InputErrorMessage } from 'app/components/core/InputErrorMessage'
+import { useIsGatedContentEnabled } from 'app/hooks/useIsGatedContentEnabled'
+import { useIsSpecialAccessEnabled } from 'app/hooks/useIsSpecialAccessEnabled'
 import { useNavigation } from 'app/hooks/useNavigation'
+import { useOneTimeDrawer } from 'app/hooks/useOneTimeDrawer'
 import { setVisibility } from 'app/store/drawers/slice'
 import { makeStyles } from 'app/styles'
 
@@ -36,6 +39,9 @@ const messages = {
   fixErrors: 'Fix Errors To Continue'
 }
 
+const GATED_CONTENT_UPLOAD_PROMPT_DRAWER_SEEN_KEY =
+  'gated_content_upload_prompt_drawer_seen'
+
 const useStyles = makeStyles(({ spacing }) => ({
   backButton: {
     transform: [{ rotate: '180deg' }],
@@ -70,6 +76,15 @@ export const EditTrackForm = (props: EditTrackFormProps) => {
   const navigation = useNavigation()
   const dispatch = useDispatch()
 
+  const isGatedContentEnabled = useIsGatedContentEnabled()
+  const isSpecialAccessEnabled = useIsSpecialAccessEnabled()
+
+  useOneTimeDrawer({
+    key: GATED_CONTENT_UPLOAD_PROMPT_DRAWER_SEEN_KEY,
+    name: 'GatedContentUploadPrompt',
+    disabled: !isGatedContentEnabled || !isSpecialAccessEnabled
+  })
+
   const handlePressBack = useCallback(() => {
     if (!dirty) {
       navigation.goBack()
diff --git a/packages/mobile/src/screens/edit-track-screen/EditTrackNavigator.tsx b/packages/mobile/src/screens/edit-track-screen/EditTrackNavigator.tsx
index e9056aebcb1..a3c0042c805 100644
--- a/packages/mobile/src/screens/edit-track-screen/EditTrackNavigator.tsx
+++ b/packages/mobile/src/screens/edit-track-screen/EditTrackNavigator.tsx
@@ -1,5 +1,6 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 
+import { GatedContentUploadPromptDrawer } from 'app/components/gated-content-upload-prompt-drawer'
 import { useIsGatedContentEnabled } from 'app/hooks/useIsGatedContentEnabled'
 import { useAppScreenOptions } from 'app/screens/app-screen/useAppScreenOptions'
 
@@ -28,27 +29,39 @@ export const EditTrackNavigator = (props: EditTrackNavigatorProps) => {
   const screenOptions = useAppScreenOptions(screenOptionOverrides)
 
   return (
-    <Stack.Navigator screenOptions={screenOptions}>
-      <Stack.Screen name='CompleteTrackForm'>
-        {() => <EditTrackForm {...props} />}
-      </Stack.Screen>
-      <Stack.Screen name='SelectGenre' component={SelectGenreScreen} />
-      <Stack.Screen name='SelectMood' component={SelectMoodScreen} />
-      <Stack.Screen name='RemixSettings' component={RemixSettingsScreen} />
-      <Stack.Screen name='AdvancedOptions' component={AdvancedOptionsScreen} />
-      {isGatedContentEnabled ? (
-        <Stack.Screen name='Availability' component={TrackAvailabilityScreen} />
-      ) : (
+    <>
+      <Stack.Navigator screenOptions={screenOptions}>
+        <Stack.Screen name='CompleteTrackForm'>
+          {() => <EditTrackForm {...props} />}
+        </Stack.Screen>
+        <Stack.Screen name='SelectGenre' component={SelectGenreScreen} />
+        <Stack.Screen name='SelectMood' component={SelectMoodScreen} />
+        <Stack.Screen name='RemixSettings' component={RemixSettingsScreen} />
         <Stack.Screen
-          name='TrackVisibility'
-          component={TrackVisibilityScreen}
+          name='AdvancedOptions'
+          component={AdvancedOptionsScreen}
         />
-      )}
-      {isGatedContentEnabled && (
-        <Stack.Screen name='NFTCollections' component={NFTCollectionsScreen} />
-      )}
-      <Stack.Screen name='IsrcIswc' component={IsrcIswcScreen} />
-      <Stack.Screen name='LicenseType' component={LicenseTypeScreen} />
-    </Stack.Navigator>
+        {isGatedContentEnabled ? (
+          <Stack.Screen
+            name='Availability'
+            component={TrackAvailabilityScreen}
+          />
+        ) : (
+          <Stack.Screen
+            name='TrackVisibility'
+            component={TrackVisibilityScreen}
+          />
+        )}
+        {isGatedContentEnabled && (
+          <Stack.Screen
+            name='NFTCollections'
+            component={NFTCollectionsScreen}
+          />
+        )}
+        <Stack.Screen name='IsrcIswc' component={IsrcIswcScreen} />
+        <Stack.Screen name='LicenseType' component={LicenseTypeScreen} />
+      </Stack.Navigator>
+      <GatedContentUploadPromptDrawer isUpload={props.isUpload} />
+    </>
   )
 }
diff --git a/packages/mobile/src/screens/edit-track-screen/components/CollectibleGatedAvailability.tsx b/packages/mobile/src/screens/edit-track-screen/components/CollectibleGatedAvailability.tsx
index 26eccfb200a..a470d90f3ce 100644
--- a/packages/mobile/src/screens/edit-track-screen/components/CollectibleGatedAvailability.tsx
+++ b/packages/mobile/src/screens/edit-track-screen/components/CollectibleGatedAvailability.tsx
@@ -7,10 +7,10 @@ import { View, Image, Dimensions } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 import { useSelector } from 'react-redux'
 
-import IconArrow from 'app/assets/images/iconArrow.svg'
 import IconCaretRight from 'app/assets/images/iconCaretRight.svg'
 import IconCollectible from 'app/assets/images/iconCollectible.svg'
-import { Link, Text } from 'app/components/core'
+import IconExternalLink from 'app/assets/images/iconExternalLink.svg'
+import { Text, useLink } from 'app/components/core'
 import { HelpCallout } from 'app/components/help-callout/HelpCallout'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { useSetTrackAvailabilityFields } from 'app/hooks/useSetTrackAvailabilityFields'
@@ -73,10 +73,10 @@ const useStyles = makeStyles(({ typography, spacing, palette }) => ({
     alignItems: 'center'
   },
   learnMoreText: {
-    marginRight: spacing(0.5),
+    marginRight: spacing(1),
     fontFamily: typography.fontByWeight.bold,
-    fontSize: typography.fontSize.small,
-    color: palette.secondary
+    fontSize: typography.fontSize.large,
+    color: palette.neutralLight4
   },
   collectionContainer: {
     marginTop: spacing(4),
@@ -129,6 +129,9 @@ const useStyles = makeStyles(({ typography, spacing, palette }) => ({
     marginRight: spacing(4),
     width: spacing(5),
     height: spacing(5)
+  },
+  learnMoreIcon: {
+    marginLeft: spacing(1)
   }
 }))
 
@@ -148,6 +151,7 @@ export const CollectibleGatedAvailability = ({
   const secondary = useColor('secondary')
   const neutral = useColor('neutral')
   const neutralLight4 = useColor('neutralLight4')
+  const { onPress: onLearnMorePress } = useLink(LEARN_MORE_URL)
 
   const titleStyles: object[] = [styles.title]
   if (selected) {
@@ -237,10 +241,17 @@ export const CollectibleGatedAvailability = ({
           content={renderHelpCalloutContent()}
         />
       ) : null}
-      <Link url={LEARN_MORE_URL} style={styles.learnMore}>
-        <Text style={styles.learnMoreText}>{messages.learnMore}</Text>
-        <IconArrow fill={secondary} width={16} height={16} />
-      </Link>
+      <TouchableOpacity style={styles.learnMore} onPress={onLearnMorePress}>
+        <Text weight='bold' color='neutralLight4' fontSize='large'>
+          {messages.learnMore}
+        </Text>
+        <IconExternalLink
+          style={styles.learnMoreIcon}
+          width={20}
+          height={20}
+          fill={neutralLight4}
+        />
+      </TouchableOpacity>
       {selected && (
         <TouchableOpacity
           onPress={handlePickACollection}
diff --git a/packages/mobile/src/screens/edit-track-screen/types.ts b/packages/mobile/src/screens/edit-track-screen/types.ts
index c0ec3a7ea1a..cf6cf750d54 100644
--- a/packages/mobile/src/screens/edit-track-screen/types.ts
+++ b/packages/mobile/src/screens/edit-track-screen/types.ts
@@ -16,11 +16,13 @@ export type EditTrackScreenProps = {
   onSubmit: (values: ExtendedTrackMetadata) => void
   initialValues: ExtendedTrackMetadata & { trackArtwork?: string }
   doneText?: string
+  isUpload?: boolean
 } & Partial<ScreenProps>
 
 export type EditTrackFormProps = FormikProps<FormValues> &
   Partial<ScreenProps> & {
     doneText?: string
+    isUpload?: boolean
   }
 
 export type RemixOfField = Nullable<{ tracks: { parent_track_id }[] }>
diff --git a/packages/mobile/src/screens/upload-screen/screens/CompleteTrackScreen.tsx b/packages/mobile/src/screens/upload-screen/screens/CompleteTrackScreen.tsx
index c6cd7292a01..4ed606183d7 100644
--- a/packages/mobile/src/screens/upload-screen/screens/CompleteTrackScreen.tsx
+++ b/packages/mobile/src/screens/upload-screen/screens/CompleteTrackScreen.tsx
@@ -36,6 +36,7 @@ export const CompleteTrackScreen = () => {
       title={messages.title}
       url='/complete-track'
       doneText={messages.done}
+      isUpload
     />
   )
 }
diff --git a/packages/mobile/src/store/drawers/slice.ts b/packages/mobile/src/store/drawers/slice.ts
index 314d50b7af2..db3595bd821 100644
--- a/packages/mobile/src/store/drawers/slice.ts
+++ b/packages/mobile/src/store/drawers/slice.ts
@@ -21,6 +21,7 @@ export type Drawer =
   | 'UnfavoriteDownloadedCollection'
   | 'RateCallToAction'
   | 'LockedContent'
+  | 'GatedContentUploadPrompt'
   | 'ChatActions'
   | 'ProfileActions'
   | 'BlockMessages'
@@ -48,6 +49,7 @@ export type DrawerData = {
     collectionId: ID
   }
   LockedContent: undefined
+  GatedContentUploadPrompt: undefined
   ChatActions: { userId: number }
   ProfileActions: undefined
   BlockMessages: { userId: number }
@@ -74,6 +76,7 @@ const initialState: DrawersState = {
   UnfavoriteDownloadedCollection: false,
   RateCallToAction: false,
   LockedContent: false,
+  GatedContentUploadPrompt: false,
   ChatActions: false,
   ProfileActions: false,
   BlockMessages: false,
diff --git a/packages/web/src/components/data-entry/FormTile.js b/packages/web/src/components/data-entry/FormTile.js
index 36c217362fe..d0b283d4b95 100644
--- a/packages/web/src/components/data-entry/FormTile.js
+++ b/packages/web/src/components/data-entry/FormTile.js
@@ -19,6 +19,7 @@ import Input from 'components/data-entry/Input'
 import LabeledInput from 'components/data-entry/LabeledInput'
 import TagInput from 'components/data-entry/TagInput'
 import TextArea from 'components/data-entry/TextArea'
+import { GatedContentUploadPromptModal } from 'components/gated-content-upload-prompt-modal/GatedContentUploadPromptModal'
 import LabeledButton from 'components/labeled-button/LabeledButton'
 import Dropdown from 'components/navigation/Dropdown'
 import ConnectedRemixSettingsModal from 'components/remix-settings-modal/ConnectedRemixSettingsModal'
@@ -529,6 +530,15 @@ const AdvancedForm = (props) => {
 
   return (
     <>
+      {/*
+        Render the gated content upload prompt component which is responsible
+        for whether or its content will modal will be displayed.
+      */}
+      {props.type === 'track' && props.isUpload ? (
+        <GatedContentUploadPromptModal
+          onSubmit={() => setIsAvailabilityModalOpen(true)}
+        />
+      ) : null}
       {showAvailability && (
         <TrackAvailabilityModalContainer
           showHideTrackSectionInModal={props.showHideTrackSectionInModal}
diff --git a/packages/web/src/components/gated-content-upload-prompt-modal/GatedContentUploadPromptModal.module.css b/packages/web/src/components/gated-content-upload-prompt-modal/GatedContentUploadPromptModal.module.css
new file mode 100644
index 00000000000..852ccddd581
--- /dev/null
+++ b/packages/web/src/components/gated-content-upload-prompt-modal/GatedContentUploadPromptModal.module.css
@@ -0,0 +1,55 @@
+.modalHeader h2 {
+  font-weight: var(--font-heavy);
+  color: var(--neutral-light-2);
+}
+
+.modalHeaderDismissButton {
+  color: var(--neutral-light-2);
+}
+
+.modalTitleIcon path,
+.modalBody .learnMoreIcon path {
+  fill: var(--neutral-light-2);
+}
+
+.modalBody {
+  max-width: 480px;
+}
+
+.subtitle {
+  margin-bottom: var(--unit-6);
+  font-weight: var(--font-bold);
+  font-size: var(--font-l);
+}
+
+.subtitle {
+  margin-bottom: var(--unit-6);
+  font-weight: var(--font-bold);
+  font-size: var(--font-l);
+}
+
+.description {
+  margin-bottom: var(--unit-6);
+  font-weight: var(--font-medium);
+  font-size: var(--font-l);
+  line-height: 150%;
+}
+
+.learnMoreButton {
+  margin-bottom: var(--unit-6);
+  padding: 0;
+  color: var(--neutral-light-2);
+}
+
+.buttonsContainer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.buttonsContainer .button {
+  width: 212px;
+}
+
+.buttonsContainer .buttonText {
+  font-size: var(--font-l);
+}
diff --git a/packages/web/src/components/gated-content-upload-prompt-modal/GatedContentUploadPromptModal.tsx b/packages/web/src/components/gated-content-upload-prompt-modal/GatedContentUploadPromptModal.tsx
new file mode 100644
index 00000000000..a6c2865985c
--- /dev/null
+++ b/packages/web/src/components/gated-content-upload-prompt-modal/GatedContentUploadPromptModal.tsx
@@ -0,0 +1,117 @@
+import { useCallback, useEffect, useState } from 'react'
+
+import { FeatureFlags } from '@audius/common'
+import {
+  Button,
+  ButtonType,
+  IconArrow,
+  IconRocket,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalTitle
+} from '@audius/stems'
+import { useAsync } from 'react-use'
+
+import { ReactComponent as IconExternalLink } from 'assets/img/iconExternalLink.svg'
+import { useFlag } from 'hooks/useRemoteConfig'
+import { localStorage } from 'services/local-storage'
+
+import styles from './GatedContentUploadPromptModal.module.css'
+
+const messages = {
+  title: 'NEW UPDATE!',
+  subtitle: 'Control who has access to your tracks!',
+  description:
+    'Availability settings allow you to limit access to specific groups of users or offer exclusive content to your most dedicated fans.',
+  learnMore: 'Learn More',
+  gotIt: 'Got It',
+  checkItOut: 'Check It Out'
+}
+
+const GATED_CONTENT_UPLOAD_PROMPT_MODAL_SEEN_KEY =
+  'gated_content_upload_prompt_modal_seen'
+
+const LEARN_MORE_URL =
+  'https://blog.audius.co/guide-to-audius-availability-settings'
+
+type GatedContentUploadPromptModalProps = {
+  onSubmit: () => void
+}
+
+export const GatedContentUploadPromptModal = ({
+  onSubmit
+}: GatedContentUploadPromptModalProps) => {
+  const { isEnabled: isGatedContentEnabled } = useFlag(
+    FeatureFlags.GATED_CONTENT_ENABLED
+  )
+  const { isEnabled: isSpecialAccessEnabled } = useFlag(
+    FeatureFlags.SPECIAL_ACCESS_ENABLED
+  )
+
+  const [isOpen, setIsOpen] = useState(false)
+  const { value: seen } = useAsync(() =>
+    localStorage.getItem(GATED_CONTENT_UPLOAD_PROMPT_MODAL_SEEN_KEY)
+  )
+
+  useEffect(() => {
+    const shouldOpen =
+      isGatedContentEnabled && isSpecialAccessEnabled && seen === null
+    if (shouldOpen) {
+      setIsOpen(true)
+      localStorage.setItem(GATED_CONTENT_UPLOAD_PROMPT_MODAL_SEEN_KEY, 'true')
+    }
+  }, [isGatedContentEnabled, isSpecialAccessEnabled, seen, setIsOpen])
+
+  const handleSubmit = useCallback(() => {
+    onSubmit()
+    setIsOpen(false)
+  }, [onSubmit, setIsOpen])
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      bodyClassName={styles.modalBody}
+    >
+      <ModalHeader
+        onClose={() => setIsOpen(false)}
+        className={styles.modalHeader}
+        dismissButtonClassName={styles.modalHeaderDismissButton}
+      >
+        <ModalTitle
+          title={messages.title}
+          icon={<IconRocket className={styles.modalTitleIcon} />}
+        />
+      </ModalHeader>
+      <ModalContent>
+        <p className={styles.subtitle}>{messages.subtitle}</p>
+        <p className={styles.description}>{messages.description}</p>
+        <Button
+          type={ButtonType.TEXT}
+          className={styles.learnMoreButton}
+          text={messages.learnMore}
+          onClick={() => window.open(LEARN_MORE_URL, '_blank')}
+          iconClassName={styles.learnMoreIcon}
+          rightIcon={<IconExternalLink />}
+        />
+        <div className={styles.buttonsContainer}>
+          <Button
+            type={ButtonType.COMMON_ALT}
+            className={styles.button}
+            textClassName={styles.buttonText}
+            text={messages.gotIt}
+            onClick={() => setIsOpen(false)}
+          />
+          <Button
+            type={ButtonType.PRIMARY}
+            className={styles.button}
+            text={messages.checkItOut}
+            onClick={handleSubmit}
+            rightIcon={<IconArrow />}
+          />
+        </div>
+      </ModalContent>
+    </Modal>
+  )
+}
diff --git a/packages/web/src/components/track-availability-modal/TrackAvailabilityModal.module.css b/packages/web/src/components/track-availability-modal/TrackAvailabilityModal.module.css
index dbc5bb5bd45..6b871f845b0 100644
--- a/packages/web/src/components/track-availability-modal/TrackAvailabilityModal.module.css
+++ b/packages/web/src/components/track-availability-modal/TrackAvailabilityModal.module.css
@@ -16,7 +16,8 @@
   color: var(--neutral-light-2);
 }
 
-.modalTitleIcon path {
+.modalTitleIcon path,
+.modalBody .learnMoreArrow path {
   fill: var(--neutral-light-2);
 }
 
@@ -33,17 +34,10 @@
   font-size: var(--font-l);
 }
 
-.learnMore {
-  display: flex;
-  align-items: center;
-  width: fit-content;
-  color: var(--secondary);
-  font-weight: var(--font-bold);
-  font-size: var(--font-s);
-}
-
-.learnMore:hover {
-  color: var(--secondary-dark-2);
+.learnMoreButton {
+  align-self: flex-start;
+  padding: 0;
+  color: var(--neutral-light-2);
 }
 
 .learnMoreArrow {
diff --git a/packages/web/src/components/track-availability-modal/TrackAvailabilityModal.tsx b/packages/web/src/components/track-availability-modal/TrackAvailabilityModal.tsx
index 69347ec078c..b044b221698 100644
--- a/packages/web/src/components/track-availability-modal/TrackAvailabilityModal.tsx
+++ b/packages/web/src/components/track-availability-modal/TrackAvailabilityModal.tsx
@@ -20,12 +20,12 @@ import {
   RadioButtonGroup,
   IconSpecialAccess,
   IconVisibilityPublic,
-  IconCollectible,
-  IconArrow
+  IconCollectible
 } from '@audius/stems'
 import cn from 'classnames'
 import { useSelector } from 'react-redux'
 
+import { ReactComponent as IconExternalLink } from 'assets/img/iconExternalLink.svg'
 import { HelpCallout } from 'components/help-callout/HelpCallout'
 import { ModalRadioItem } from 'components/modal-radio/ModalRadioItem'
 import { useFlag } from 'hooks/useRemoteConfig'
@@ -105,15 +105,14 @@ const CollectibleGatedDescription = ({
       {!hasCollectibles && isUpload ? (
         <HelpCallout content={renderContent()} />
       ) : null}
-      <a
-        className={styles.learnMore}
-        href={LEARN_MORE_URL}
-        target='_blank'
-        rel='noreferrer'
-      >
-        <span>{messages.learnMore}</span>
-        <IconArrow className={styles.learnMoreArrow} />
-      </a>
+      <Button
+        type={ButtonType.TEXT}
+        className={styles.learnMoreButton}
+        text={messages.learnMore}
+        onClick={() => window.open(LEARN_MORE_URL, '_blank')}
+        iconClassName={styles.learnMoreArrow}
+        rightIcon={<IconExternalLink />}
+      />
     </div>
   )
 }