diff --git a/packages/atlas/src/components/NumberFormat/NumberFormat.tsx b/packages/atlas/src/components/NumberFormat/NumberFormat.tsx
index 475102d177..83fcab6c86 100644
--- a/packages/atlas/src/components/NumberFormat/NumberFormat.tsx
+++ b/packages/atlas/src/components/NumberFormat/NumberFormat.tsx
@@ -106,7 +106,7 @@ export const NumberFormat = forwardRef<HTMLHeadingElement, NumberFormatProps>(
           ref={mergeRefs([ref, textRef])}
         >
           {displayedValue ? <span>{displayedValue}</span> : <span>{formattedValue}</span>}
-            {withToken ? ` ${customTicker}` ?? ` ${atlasConfig.joystream.tokenTicker}` : null}
+            {withToken ? (customTicker ? ` ${customTicker}` : ` ${atlasConfig.joystream.tokenTicker}`) : null}
         </StyledText>
         {withDenomination === 'after' && (
           <Text
diff --git a/packages/atlas/src/components/_crt/BuySaleTokenModal/BuySaleTokenModal.stories.tsx b/packages/atlas/src/components/_crt/BuySaleTokenModal/BuySaleTokenModal.stories.tsx
new file mode 100644
index 0000000000..0b87758bfe
--- /dev/null
+++ b/packages/atlas/src/components/_crt/BuySaleTokenModal/BuySaleTokenModal.stories.tsx
@@ -0,0 +1,23 @@
+import { Meta, StoryFn } from '@storybook/react'
+
+import { BuySaleTokenModal, BuySaleTokenModalProps } from '@/components/_crt/BuySaleTokenModal/BuySaleTokenModal'
+import { JoystreamProvider } from '@/providers/joystream/joystream.provider'
+import { OverlayManagerProvider } from '@/providers/overlayManager'
+
+export default {
+  title: 'crt/BuySaleTokenModal',
+  component: BuySaleTokenModal,
+  decorators: [
+    (Story) => (
+      <JoystreamProvider>
+        <OverlayManagerProvider>
+          <Story />
+        </OverlayManagerProvider>
+      </JoystreamProvider>
+    ),
+  ],
+} as Meta<BuySaleTokenModalProps>
+
+const Template: StoryFn<BuySaleTokenModalProps> = (args) => <BuySaleTokenModal {...args} />
+
+export const Default = Template.bind({})
diff --git a/packages/atlas/src/components/_crt/BuySaleTokenModal/BuySaleTokenModal.tsx b/packages/atlas/src/components/_crt/BuySaleTokenModal/BuySaleTokenModal.tsx
new file mode 100644
index 0000000000..4c32293f8b
--- /dev/null
+++ b/packages/atlas/src/components/_crt/BuySaleTokenModal/BuySaleTokenModal.tsx
@@ -0,0 +1,82 @@
+import { useMemo, useState } from 'react'
+
+import { BuySaleTokenForm } from '@/components/_crt/BuySaleTokenModal/steps/BuySaleTokenForm'
+import { BuySaleTokenSuccess } from '@/components/_crt/BuySaleTokenModal/steps/BuySaleTokenSuccess'
+import { BuySaleTokenTerms, getTokenDetails } from '@/components/_crt/BuySaleTokenModal/steps/BuySaleTokenTerms'
+import { DialogProps } from '@/components/_overlays/Dialog'
+import { DialogModal } from '@/components/_overlays/DialogModal'
+import { useMediaMatch } from '@/hooks/useMediaMatch'
+
+export type BuySaleTokenModalProps = {
+  tokenId: string
+  onClose: () => void
+}
+
+enum BUY_SALE_TOKEN_STEPS {
+  form,
+  terms,
+  success,
+}
+
+export const BuySaleTokenModal = ({ tokenId, onClose }: BuySaleTokenModalProps) => {
+  const { title } = getTokenDetails(tokenId)
+  const userTokenAmount = 1000
+
+  const [activeStep, setActiveStep] = useState(BUY_SALE_TOKEN_STEPS.form)
+  const [primaryButtonProps, setPrimaryButtonProps] = useState<DialogProps['primaryButton']>()
+  const smMatch = useMediaMatch('sm')
+
+  const secondaryButton = useMemo(() => {
+    switch (activeStep) {
+      case BUY_SALE_TOKEN_STEPS.terms:
+        return {
+          text: 'Back',
+          onClick: () => {
+            setActiveStep(BUY_SALE_TOKEN_STEPS.form)
+          },
+        }
+      case BUY_SALE_TOKEN_STEPS.form:
+        return {
+          text: 'Cancel',
+        }
+      default:
+        return undefined
+    }
+  }, [activeStep])
+
+  const commonProps = {
+    setPrimaryButtonProps,
+  }
+
+  return (
+    <DialogModal
+      title={activeStep !== BUY_SALE_TOKEN_STEPS.success ? `Buy $${title}` : undefined}
+      onExitClick={activeStep !== BUY_SALE_TOKEN_STEPS.success ? onClose : undefined}
+      dividers={activeStep === BUY_SALE_TOKEN_STEPS.terms}
+      show
+      primaryButton={primaryButtonProps}
+      secondaryButton={secondaryButton}
+      noContentPadding={activeStep === BUY_SALE_TOKEN_STEPS.terms}
+      confetti={activeStep === BUY_SALE_TOKEN_STEPS.success && smMatch}
+    >
+      {activeStep === BUY_SALE_TOKEN_STEPS.form && (
+        <BuySaleTokenForm
+          {...commonProps}
+          onSubmit={() => setActiveStep(BUY_SALE_TOKEN_STEPS.terms)}
+          tokenId={tokenId}
+        />
+      )}
+      {activeStep === BUY_SALE_TOKEN_STEPS.terms && (
+        <BuySaleTokenTerms
+          {...commonProps}
+          onSubmit={() => setActiveStep(BUY_SALE_TOKEN_STEPS.success)}
+          tokenId={tokenId}
+          tokenAmount={userTokenAmount}
+        />
+      )}
+      {activeStep === BUY_SALE_TOKEN_STEPS.success && (
+        <BuySaleTokenSuccess {...commonProps} onClose={onClose} tokenName="JBC" />
+      )}
+    </DialogModal>
+  )
+}
diff --git a/packages/atlas/src/components/_crt/BuySaleTokenModal/index.ts b/packages/atlas/src/components/_crt/BuySaleTokenModal/index.ts
new file mode 100644
index 0000000000..b840a522aa
--- /dev/null
+++ b/packages/atlas/src/components/_crt/BuySaleTokenModal/index.ts
@@ -0,0 +1 @@
+export * from './BuySaleTokenModal'
diff --git a/packages/atlas/src/components/_crt/BuySaleTokenModal/steps/BuySaleTokenForm.tsx b/packages/atlas/src/components/_crt/BuySaleTokenModal/steps/BuySaleTokenForm.tsx
new file mode 100644
index 0000000000..3cea7669d7
--- /dev/null
+++ b/packages/atlas/src/components/_crt/BuySaleTokenModal/steps/BuySaleTokenForm.tsx
@@ -0,0 +1,143 @@
+import { useMemo, useState } from 'react'
+
+import { FlexBox } from '@/components/FlexBox/FlexBox'
+import { Information } from '@/components/Information'
+import { JoyTokenIcon } from '@/components/JoyTokenIcon'
+import { NumberFormat } from '@/components/NumberFormat'
+import { Text } from '@/components/Text'
+import { TextButton } from '@/components/_buttons/Button'
+import { CommonProps } from '@/components/_crt/BuySaleTokenModal/steps/types'
+import { FormField } from '@/components/_inputs/FormField'
+import { TokenInput } from '@/components/_inputs/TokenInput'
+import { DetailsContent } from '@/components/_nft/NftTile'
+import { atlasConfig } from '@/config'
+import { useMediaMatch } from '@/hooks/useMediaMatch'
+import { useMountEffect } from '@/hooks/useMountEffect'
+
+const getTokenDetails = (_: string) => ({
+  title: 'JBC',
+  pricePerUnit: 1000,
+  tokensOnSale: 67773,
+  userBalance: 100000,
+})
+
+type BuySaleTokenFormProps = {
+  tokenId: string
+  onSubmit: () => void
+} & CommonProps
+
+const currentJoyRate = 0.15
+
+export const BuySaleTokenForm = ({ tokenId, setPrimaryButtonProps, onSubmit }: BuySaleTokenFormProps) => {
+  const { pricePerUnit, tokensOnSale, userBalance, title } = getTokenDetails(tokenId)
+
+  const [tokens, setTokens] = useState<number | null>(null)
+  const tokenInUsd = (tokens || 0) * pricePerUnit * currentJoyRate
+  const smMatch = useMediaMatch('sm')
+
+  const details = useMemo(
+    () => [
+      {
+        title: 'Tokens on sale',
+        content: (
+          <NumberFormat
+            value={tokensOnSale}
+            as="p"
+            variant="t200"
+            withDenomination="before"
+            withToken
+            customTicker={`$${title}`}
+          />
+        ),
+        tooltipText: 'Lorem ipsum',
+      },
+      {
+        title: 'You will get',
+        content: (
+          <NumberFormat
+            value={tokens || 0}
+            format={(tokens || 0) > 1_000_000 ? 'short' : 'full'}
+            as="p"
+            variant="t200"
+            withDenomination="before"
+            withToken
+            customTicker={`$${title}`}
+          />
+        ),
+        tooltipText: 'Lorem ipsum',
+      },
+      {
+        title: 'Fee',
+        content: <NumberFormat value={tokensOnSale} as="p" variant="t200" withDenomination="before" withToken />,
+        tooltipText: 'Lorem ipsum',
+      },
+      {
+        title: 'You will spend',
+        content: <NumberFormat value={tokensOnSale} as="p" variant="t200" withDenomination="before" withToken />,
+        tooltipText: 'Lorem ipsum',
+      },
+    ],
+    [title, tokens, tokensOnSale]
+  )
+
+  useMountEffect(() => {
+    setPrimaryButtonProps({
+      text: 'Continue',
+      onClick: () => onSubmit(),
+    })
+  })
+
+  return (
+    <>
+      <FlexBox flow="column" gap={8}>
+        <FlexBox gap={6} equalChildren>
+          <DetailsContent
+            avoidIconStyling
+            tileSize={smMatch ? 'big' : 'bigSmall'}
+            caption="PRICE PER UNIT"
+            content={pricePerUnit}
+            icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
+            withDenomination
+          />
+          <DetailsContent
+            avoidIconStyling
+            tileSize={smMatch ? 'big' : 'bigSmall'}
+            caption={`YOUR ${atlasConfig.joystream.tokenTicker} BALANCE`}
+            content={userBalance}
+            icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
+            withDenomination
+          />
+        </FlexBox>
+        <FormField label="Tokens to spend">
+          <TokenInput
+            value={tokens}
+            onChange={setTokens}
+            placeholder="0"
+            nodeEnd={
+              <FlexBox gap={2} alignItems="baseline">
+                <Text variant="t300" as="p" color="colorTextMuted">
+                  ${tokenInUsd}
+                </Text>
+                <TextButton onClick={() => setTokens(Math.floor(userBalance / pricePerUnit))}>Max</TextButton>
+              </FlexBox>
+            }
+          />
+        </FormField>
+
+        <FlexBox flow="column" gap={2}>
+          {details.map((row, i) => (
+            <FlexBox key={row.title} alignItems="center" justifyContent="space-between">
+              <FlexBox width="fit-content" alignItems="center">
+                <Text variant={i + 1 === details.length ? 't200-strong' : 't200'} as="p" color="colorText">
+                  {row.title}
+                </Text>
+                <Information text={row.tooltipText} />
+              </FlexBox>
+              {row.content}
+            </FlexBox>
+          ))}
+        </FlexBox>
+      </FlexBox>
+    </>
+  )
+}
diff --git a/packages/atlas/src/components/_crt/BuySaleTokenModal/steps/BuySaleTokenSuccess.tsx b/packages/atlas/src/components/_crt/BuySaleTokenModal/steps/BuySaleTokenSuccess.tsx
new file mode 100644
index 0000000000..b4d7478215
--- /dev/null
+++ b/packages/atlas/src/components/_crt/BuySaleTokenModal/steps/BuySaleTokenSuccess.tsx
@@ -0,0 +1,59 @@
+import { FC } from 'react'
+
+import confettiAnimation from '@/assets/animations/confetti.json'
+import { AppKV } from '@/components/AppKV'
+import { LottiePlayer } from '@/components/LottiePlayer'
+import { Text } from '@/components/Text'
+import {
+  ContentWrapper,
+  IllustrationWrapper,
+  LottieContainer,
+} from '@/components/_auth/SignUpModal/SignUpSteps/SignUpSuccessStep/SignUpSuccessStep.styles'
+import { useMediaMatch } from '@/hooks/useMediaMatch'
+import { useMountEffect } from '@/hooks/useMountEffect'
+
+import { CommonProps } from './types'
+
+type SignUpSuccessStepProps = {
+  tokenName?: string
+  coinImageUrl?: string
+  onClose: () => void
+} & CommonProps
+
+export const BuySaleTokenSuccess: FC<SignUpSuccessStepProps> = ({ tokenName, setPrimaryButtonProps, onClose }) => {
+  const smMatch = useMediaMatch('sm')
+
+  useMountEffect(() => {
+    setPrimaryButtonProps({
+      text: 'Continue',
+      onClick: () => onClose(),
+    })
+  })
+  return (
+    <>
+      <IllustrationWrapper>
+        <AppKV />
+        {!smMatch && (
+          <LottieContainer>
+            <LottiePlayer
+              size={{
+                height: 320,
+                width: 320,
+              }}
+              data={confettiAnimation}
+            />
+          </LottieContainer>
+        )}
+      </IllustrationWrapper>
+      <ContentWrapper>
+        <Text variant="h500" as="h2" margin={{ bottom: 2 }}>
+          Congratulations on your purchase
+        </Text>
+        <Text variant="t200" as="p" color="colorText">
+          You are now an {tokenName} holder - you can buy, sell, transfer your token. You can also stake when creator
+          opens revenue share to claim your part of it.
+        </Text>
+      </ContentWrapper>
+    </>
+  )
+}
diff --git a/packages/atlas/src/components/_crt/BuySaleTokenModal/steps/BuySaleTokenTerms.tsx b/packages/atlas/src/components/_crt/BuySaleTokenModal/steps/BuySaleTokenTerms.tsx
new file mode 100644
index 0000000000..0d427040c5
--- /dev/null
+++ b/packages/atlas/src/components/_crt/BuySaleTokenModal/steps/BuySaleTokenTerms.tsx
@@ -0,0 +1,224 @@
+import styled from '@emotion/styled'
+import { useEffect, useMemo, useState } from 'react'
+
+import { FlexBox } from '@/components/FlexBox/FlexBox'
+import { Information } from '@/components/Information'
+import { NumberFormat } from '@/components/NumberFormat'
+import { Text } from '@/components/Text'
+import { LineChart } from '@/components/_charts/LineChart'
+import { CommonProps } from '@/components/_crt/BuySaleTokenModal/steps/types'
+import { generateChartData } from '@/components/_crt/CreateTokenDrawer/steps/TokenIssuanceStep/TokenIssuanceStep.utils'
+import { TooltipBox } from '@/components/_crt/CreateTokenDrawer/steps/styles'
+import { Checkbox } from '@/components/_inputs/Checkbox'
+import { cVar, media, sizes } from '@/styles'
+import { formatNumber } from '@/utils/number'
+import { formatDate } from '@/utils/time'
+
+export const getTokenDetails = (_: string) => ({
+  title: 'JBC',
+  pricePerUnit: 1000,
+  tokensOnSale: 67773,
+  userBalance: 100000,
+  cliffTime: 1,
+  vestingTime: 6,
+  firstPayout: 25,
+})
+
+type BuySaleTokenTermsProps = {
+  tokenId: string
+  tokenAmount: number
+  onSubmit: () => void
+} & CommonProps
+
+export const BuySaleTokenTerms = ({
+  tokenId,
+  setPrimaryButtonProps,
+  onSubmit,
+  tokenAmount,
+}: BuySaleTokenTermsProps) => {
+  const { title, cliffTime, vestingTime, firstPayout } = getTokenDetails(tokenId)
+  const [isChecked, setIsChecked] = useState(false)
+  const [checkboxError, setCheckboxError] = useState('')
+
+  const details = useMemo(() => {
+    const currentDate = new Date()
+    return [
+      {
+        title: 'Your cliff',
+        content: (
+          <Text variant="h300" as="h1">
+            {cliffTime} month{cliffTime > 1 ? 's' : ''}
+          </Text>
+        ),
+        date: new Date(),
+        tooltipText: 'Lorem ipsum',
+      },
+      {
+        title: 'First payout',
+        content: (
+          <NumberFormat
+            value={(tokenAmount * firstPayout) / 100}
+            as="p"
+            variant="t200"
+            withDenomination="before"
+            withToken
+            customTicker={`$${title}`}
+          />
+        ),
+        date: new Date(new Date(currentDate.setMonth(currentDate.getMonth() + cliffTime))),
+
+        tooltipText: 'Lorem ipsum',
+      },
+      {
+        title: 'Your vesting',
+        content: (
+          <Text variant="h300" as="h1">
+            {vestingTime} month{vestingTime > 1 ? 's' : ''}
+          </Text>
+        ),
+        date: new Date(new Date(currentDate.setMonth(currentDate.getMonth() + cliffTime + vestingTime))),
+
+        tooltipText: 'Lorem ipsum',
+      },
+    ]
+  }, [cliffTime, firstPayout, title, tokenAmount, vestingTime])
+
+  useEffect(() => {
+    setPrimaryButtonProps({
+      text: 'Buy tokens',
+      onClick: () => {
+        if (isChecked) {
+          onSubmit()
+        } else {
+          setCheckboxError('Terms & Conditions have to be accepted to continue')
+        }
+      },
+    })
+  }, [isChecked, onSubmit, setPrimaryButtonProps])
+
+  const chartData = useMemo(() => {
+    return generateChartData(cliffTime, vestingTime, firstPayout)
+  }, [cliffTime, firstPayout, vestingTime])
+
+  return (
+    <Container>
+      <FlexBox flow="column" gap={0}>
+        <Text variant="h400" as="h4">
+          Holders terms
+        </Text>
+        <FlexBox flow="column" gap={4}>
+          <ChartBox>
+            <LineChart
+              enablePointLabel
+              tooltip={(point) => {
+                const currentDate = new Date()
+                const timeInMonths = point.data.x === 'Now' ? 0 : +(point.data.x as string).split('M')[0]
+                return (
+                  <TooltipBox>
+                    <Text variant="t300" as="p">
+                      {formatNumber(((tokenAmount ?? 0) * (point.data.y as number)) / 100)} ${title}
+                    </Text>
+                    <Text variant="t100" as="p" color="colorTextMuted">
+                      {point.data.x !== 'Now'
+                        ? formatDate(new Date(currentDate.setMonth(currentDate.getMonth() + timeInMonths)))
+                        : 'Now'}
+                    </Text>
+                  </TooltipBox>
+                )
+              }}
+              yScale={{
+                type: 'linear',
+                min: 0,
+                max: 'auto',
+                stacked: false,
+                reverse: false,
+              }}
+              axisLeft={{
+                tickSize: 5,
+                tickPadding: 5,
+                tickValues: [0, 25, 50, 75, 100],
+                format: (tick) => `${tick}%`,
+              }}
+              gridYValues={[0, 25, 50, 75, 100]}
+              data={[
+                {
+                  id: 1,
+                  color: cVar('colorTextPrimary'),
+                  data: chartData,
+                },
+              ]}
+              enableCrosshair={false}
+            />
+          </ChartBox>
+
+          <FlexBox flow="column" gap={2}>
+            {details.map((row) => (
+              <FlexBox key={row.title} justifyContent="space-between" equalChildren>
+                <FlexBox width="fit-content" alignItems="center">
+                  <Text variant="h300" as="p" color="colorText">
+                    {row.title}
+                  </Text>
+                  <Information text={row.tooltipText} />
+                </FlexBox>
+                <FlexBox flow="column" alignItems="end">
+                  {row.content}
+                  <Text variant="t100" as="p" color="colorText">
+                    {formatDate(row.date)}
+                  </Text>
+                </FlexBox>
+              </FlexBox>
+            ))}
+          </FlexBox>
+        </FlexBox>
+      </FlexBox>
+      <CheckboxWrapper isAccepted={isChecked}>
+        <Checkbox
+          onChange={(val) => {
+            setIsChecked(val)
+            setCheckboxError('')
+          }}
+          caption={checkboxError}
+          error={!!checkboxError}
+          value={isChecked}
+          label="I have saved my wallet seed phrase safely"
+        />
+      </CheckboxWrapper>
+    </Container>
+  )
+}
+
+const ChartBox = styled.div`
+  width: calc(100% + 125px);
+  height: 300px;
+  margin-left: -25px;
+
+  ${media.sm} {
+    width: calc(100% + 125px);
+  }
+`
+
+export const CheckboxWrapper = styled.div<{ isAccepted: boolean }>`
+  position: fixed;
+  bottom: 80px;
+  left: 0;
+  right: 1px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  background-color: ${({ isAccepted }) => (isAccepted ? cVar('colorBackground') : cVar('colorBackgroundElevated'))};
+  padding: ${sizes(4)} var(--local-size-dialog-padding);
+
+  ${media.sm} {
+    bottom: 87px;
+  }
+`
+
+const Container = styled.div`
+  display: flex;
+  max-height: calc(100% - 55px);
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: var(--local-size-dialog-padding);
+  padding-bottom: 0;
+  margin-bottom: 55px;
+`
diff --git a/packages/atlas/src/components/_crt/BuySaleTokenModal/steps/types.ts b/packages/atlas/src/components/_crt/BuySaleTokenModal/steps/types.ts
new file mode 100644
index 0000000000..e14cfe3688
--- /dev/null
+++ b/packages/atlas/src/components/_crt/BuySaleTokenModal/steps/types.ts
@@ -0,0 +1,5 @@
+import { DialogProps } from '@/components/_overlays/Dialog'
+
+export type CommonProps = {
+  setPrimaryButtonProps: (props: DialogProps['primaryButton']) => void
+}