diff --git a/CHANGELOG.md b/CHANGELOG.md
index 684656a122..4e391ffdd7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,23 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [5.3.0] - 2024-06-04
+
+### Added
+
+- Optimistic video updates
+
+### Fixed
+
+- Portfolio table actions
+- Show correct potential revenue share on portfolio
+- Small UI fixes
+
+### Changed
+
+- Make rewards drawers initially collapsed
+- Seperate marketplace into 2 pages
+
 ## [5.2.3] - 2024-05-24
 
 ### Added
diff --git a/packages/atlas/package.json b/packages/atlas/package.json
index e73eae04cc..c2b1a3020b 100644
--- a/packages/atlas/package.json
+++ b/packages/atlas/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@joystream/atlas",
   "description": "UI for consuming Joystream - a user governed video platform",
-  "version": "5.2.3",
+  "version": "5.3.0",
   "license": "GPL-3.0",
   "scripts": {
     "start": "vite",
diff --git a/packages/atlas/src/api/client/cache.ts b/packages/atlas/src/api/client/cache.ts
index d9bd730a2e..b4d65ba2aa 100644
--- a/packages/atlas/src/api/client/cache.ts
+++ b/packages/atlas/src/api/client/cache.ts
@@ -4,6 +4,7 @@ import { FieldPolicy, FieldReadFunction } from '@apollo/client/cache/inmemory/po
 import { offsetLimitPagination, relayStylePagination } from '@apollo/client/utilities'
 import { parseISO } from 'date-fns'
 
+import { QueryCommentReactionsConnectionArgs } from '../../../../atlas-meta-server/src/api/__generated__/sdk'
 import {
   Query,
   QueryChannelsConnectionArgs,
@@ -119,7 +120,19 @@ const getCommentKeyArgs = (
   const parentCommentId = args?.where?.parentComment?.id_eq
   const videoId = args?.where?.video?.id_eq ?? ctx.variables?.videoId
   const orderBy = args?.orderBy || []
-  return `${parentCommentId}:${videoId}:${orderBy}`
+  return `parentId-${parentCommentId}-:id-${videoId}-:${orderBy}`
+}
+
+const getCommentReactionsKeyArgs = (
+  args: Partial<QueryCommentReactionsConnectionArgs> | null,
+  ctx: {
+    variables?: Record<string, unknown>
+  }
+) => {
+  const memberId = args?.where?.member?.id_eq
+  const videoId = args?.where?.video?.id_eq ?? ctx.variables?.videoId
+  const orderBy = args?.orderBy || []
+  return `memberId-${memberId}-:videoId-${videoId}-:${orderBy}`
 }
 
 const createDateHandler = () => ({
@@ -216,6 +229,9 @@ const queryCacheFields: CachePolicyFields<keyof Query> = {
       return existing?.slice(offset, offset + limit)
     },
   },
+  commentReactions: {
+    ...offsetLimitPagination(getCommentReactionsKeyArgs),
+  },
   commentsConnection: relayStylePagination(getCommentKeyArgs),
   channelById: (existing, { toReference, args }) => {
     return (
diff --git a/packages/atlas/src/api/client/index.ts b/packages/atlas/src/api/client/index.ts
index 276fad64f1..f8e236cd6e 100644
--- a/packages/atlas/src/api/client/index.ts
+++ b/packages/atlas/src/api/client/index.ts
@@ -3,12 +3,20 @@ import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
 import { getMainDefinition } from '@apollo/client/utilities'
 import { createClient } from 'graphql-ws'
 
-import { ORION_GRAPHQL_URL, QUERY_NODE_GRAPHQL_SUBSCRIPTION_URL } from '@/config/env'
+import {
+  FAUCET_URL,
+  ORION_AUTH_URL,
+  ORION_GRAPHQL_URL,
+  QUERY_NODE_GRAPHQL_SUBSCRIPTION_URL,
+  YPP_FAUCET_URL,
+} from '@/config/env'
 import { useUserLocationStore } from '@/providers/userLocation'
 import { UserEventsLogger } from '@/utils/logs'
 
 import { cache } from './cache'
 
+const followedRequests = [YPP_FAUCET_URL, ORION_GRAPHQL_URL, ORION_AUTH_URL, FAUCET_URL]
+
 const initializePerformanceObserver = () => {
   try {
     const observer = new PerformanceObserver((list) => {
@@ -17,6 +25,12 @@ const initializePerformanceObserver = () => {
           const queryString = entry.name.split('?')?.[1]
           const params = new URLSearchParams(queryString)
           const queryType = params.get('queryName')
+
+          // Only follow requests to Atlas infra
+          if (!queryType && !followedRequests.some((allowedUrl) => entry.name.includes(allowedUrl))) {
+            return
+          }
+
           UserEventsLogger.logUserEvent('request-response-time', {
             requestName: queryType ?? entry.name,
             timeToComplete: entry.duration,
diff --git a/packages/atlas/src/api/hooks/comments.ts b/packages/atlas/src/api/hooks/comments.ts
index 34167fb789..d1babea9f3 100644
--- a/packages/atlas/src/api/hooks/comments.ts
+++ b/packages/atlas/src/api/hooks/comments.ts
@@ -30,7 +30,7 @@ export const useComment = (
   }
 }
 
-export type UserCommentReactions = Record<string, number[]>
+export type UserCommentReactions = Record<string, { reactionId: number; reactionServerId: string }[]>
 export const useUserCommentsReactions = (videoId?: string | null, memberId?: string | null) => {
   const { data } = useGetUserCommentsReactionsQuery({
     variables: {
@@ -42,9 +42,15 @@ export const useUserCommentsReactions = (videoId?: string | null, memberId?: str
 
   return useMemo(
     () => ({
-      userReactions: data?.commentReactions.reduce<Record<string, number[]>>((acc, item) => {
+      userReactions: data?.commentReactions.reduce<UserCommentReactions>((acc, item) => {
         if (item) {
-          acc[item.comment.id] = [...(acc[item.comment.id] ? acc[item.comment.id] : []), item.reactionId]
+          acc[item.comment.id] = [
+            ...(acc[item.comment.id] ? acc[item.comment.id] : []),
+            {
+              reactionId: item.reactionId,
+              reactionServerId: item.id,
+            },
+          ]
         }
         return acc
       }, {}),
diff --git a/packages/atlas/src/api/hooks/useCommentSectionComments.ts b/packages/atlas/src/api/hooks/useCommentSectionComments.ts
new file mode 100644
index 0000000000..da5375529a
--- /dev/null
+++ b/packages/atlas/src/api/hooks/useCommentSectionComments.ts
@@ -0,0 +1,38 @@
+import { QueryHookOptions } from '@apollo/client'
+
+import { UNCONFIRMED } from '@/hooks/useOptimisticActions'
+import { createLookup } from '@/utils/data'
+
+import {
+  GetUserCommentsAndVideoCommentsConnectionQuery,
+  GetUserCommentsAndVideoCommentsConnectionQueryVariables,
+  useGetUserCommentsAndVideoCommentsConnectionQuery,
+} from '../queries/__generated__/comments.generated'
+
+export const useCommentSectionComments = (
+  variables?: GetUserCommentsAndVideoCommentsConnectionQueryVariables,
+  opts?: QueryHookOptions<
+    GetUserCommentsAndVideoCommentsConnectionQuery,
+    GetUserCommentsAndVideoCommentsConnectionQueryVariables
+  >
+) => {
+  const { data, loading, ...rest } = useGetUserCommentsAndVideoCommentsConnectionQuery({ ...opts, variables })
+  const userComments = data?.userComments
+  const userCommentLookup = data?.userComments && createLookup(data?.userComments)
+  const unconfirmedComments = data?.videoCommentsConnection.edges
+    .map((edge) => edge.node)
+    .filter((node) => node.id.includes(UNCONFIRMED))
+  const unconfirmedCommentLookup = unconfirmedComments && createLookup(unconfirmedComments)
+
+  const videoComments = data?.videoCommentsConnection?.edges
+    .map((edge) => edge.node)
+    .filter((comment) => userCommentLookup && !userCommentLookup[comment.id] && !unconfirmedCommentLookup?.[comment.id])
+
+  return {
+    userComments,
+    comments: data ? [...(unconfirmedComments || []), ...(userComments || []), ...(videoComments || [])] : undefined,
+    loading: loading,
+    pageInfo: data?.videoCommentsConnection?.pageInfo,
+    ...rest,
+  }
+}
diff --git a/packages/atlas/src/api/queries/__generated__/comments.generated.tsx b/packages/atlas/src/api/queries/__generated__/comments.generated.tsx
index a96d8d784c..750487f1c2 100644
--- a/packages/atlas/src/api/queries/__generated__/comments.generated.tsx
+++ b/packages/atlas/src/api/queries/__generated__/comments.generated.tsx
@@ -257,6 +257,7 @@ export type GetUserCommentsReactionsQuery = {
   __typename?: 'Query'
   commentReactions: Array<{
     __typename?: 'CommentReaction'
+    id: string
     reactionId: number
     comment: { __typename?: 'Comment'; id: string }
   }>
@@ -528,6 +529,7 @@ export type GetUserCommentsAndVideoCommentsConnectionQueryResult = Apollo.QueryR
 export const GetUserCommentsReactionsDocument = gql`
   query GetUserCommentsReactions($memberId: String!, $videoId: String!) {
     commentReactions(where: { member: { id_eq: $memberId }, video: { id_eq: $videoId } }, limit: 1000) {
+      id
       reactionId
       comment {
         id
diff --git a/packages/atlas/src/api/queries/comments.graphql b/packages/atlas/src/api/queries/comments.graphql
index 45780bd7c4..432b93f60a 100644
--- a/packages/atlas/src/api/queries/comments.graphql
+++ b/packages/atlas/src/api/queries/comments.graphql
@@ -84,6 +84,7 @@ query GetUserCommentsAndVideoCommentsConnection(
 # CHANGE: ID is now `String`
 query GetUserCommentsReactions($memberId: String!, $videoId: String!) {
   commentReactions(where: { member: { id_eq: $memberId }, video: { id_eq: $videoId } }, limit: 1000) {
+    id
     reactionId
     comment {
       # CHANGE: `commentId` no longer exists, use `comment.id`
diff --git a/packages/atlas/src/components/_comments/Comment/Comment.styles.ts b/packages/atlas/src/components/_comments/Comment/Comment.styles.ts
index 37ab738543..34361dddf9 100644
--- a/packages/atlas/src/components/_comments/Comment/Comment.styles.ts
+++ b/packages/atlas/src/components/_comments/Comment/Comment.styles.ts
@@ -17,10 +17,11 @@ export const KebabMenuIconButton = styled(Button)<{ isActive: boolean }>`
   }
 `
 
-export const CommentWrapper = styled.div<{ shouldShowKebabButton: boolean }>`
+export const CommentWrapper = styled.div<{ shouldShowKebabButton: boolean; isUnconfirmed?: boolean }>`
   display: grid;
   gap: ${sizes(3)};
   align-items: start;
+  opacity: ${(props) => (props.isUnconfirmed ? '0.8' : 'unset')};
 
   /* comment content, kebab button */
   grid-template-columns: 1fr auto;
diff --git a/packages/atlas/src/components/_comments/Comment/Comment.tsx b/packages/atlas/src/components/_comments/Comment/Comment.tsx
index 6cef356b96..ba8af6c02a 100644
--- a/packages/atlas/src/components/_comments/Comment/Comment.tsx
+++ b/packages/atlas/src/components/_comments/Comment/Comment.tsx
@@ -1,7 +1,7 @@
 import BN from 'bn.js'
 import { Dispatch, FC, SetStateAction, memo, useCallback, useRef, useState } from 'react'
 
-import { useComment } from '@/api/hooks/comments'
+import { UserCommentReactions, useComment } from '@/api/hooks/comments'
 import { CommentStatus } from '@/api/queries/__generated__/baseTypes.generated'
 import { CommentFieldsFragment, FullVideoFieldsFragment } from '@/api/queries/__generated__/fragments.generated'
 import { DialogModal } from '@/components/_overlays/DialogModal'
@@ -25,7 +25,7 @@ import { CommentRowProps } from '../CommentRow'
 export type CommentProps = {
   commentId?: string
   video?: FullVideoFieldsFragment | null
-  userReactions?: number[]
+  userReactions?: UserCommentReactions[string]
   isReplyable?: boolean
   setHighlightedCommentId?: Dispatch<SetStateAction<string | null>>
   setRepliesOpen?: Dispatch<SetStateAction<boolean>>
@@ -102,8 +102,10 @@ export const Comment: FC<CommentProps> = memo(
             closeModal()
             isChannelOwner
               ? await moderateComment(comment.id, video?.channel.id, comment.author.handle, video?.id)
-              : await deleteComment(comment.id, video?.title || '', video?.id)
-            setIsCommentProcessing(false)
+              : await deleteComment(comment.id, video?.title || '', video?.id, {
+                  onUnconfirmed: () => setIsCommentProcessing(false),
+                  onTxSign: () => setIsCommentProcessing(false),
+                })
           },
         },
         secondaryButton: {
@@ -155,27 +157,25 @@ export const Comment: FC<CommentProps> = memo(
       }
 
       setEditCommentInputIsProcessing(true)
-      const success = await updateComment({
+      await updateComment({
         videoId: video.id,
         commentBody: editCommentInputText ?? '',
         commentId: comment.id,
         videoTitle: video.title,
+        optimisticOpts: {
+          onTxSign: () => {
+            setEditCommentInputIsProcessing(false)
+            setEditCommentInputText('')
+            setHighlightedCommentId?.(comment?.id ?? null)
+            setIsEditingComment(false)
+          },
+          onUnconfirmed: () => {
+            setEditCommentInputIsProcessing(false)
+            setEditCommentInputText('')
+            setIsEditingComment(false)
+          },
+        },
       })
-      setEditCommentInputIsProcessing(false)
-
-      if (success) {
-        setEditCommentInputText('')
-        setHighlightedCommentId?.(comment?.id ?? null)
-        setIsEditingComment(false)
-      }
-    }
-    const handleCommentReaction = async (commentId: string, reactionId: CommentReaction) => {
-      setProcessingReactionsIds((previous) => [...previous, reactionId])
-      const fee =
-        reactionFee ||
-        (await getReactToVideoCommentFee(memberId && comment?.id ? [memberId, comment.id, reactionId] : undefined))
-      await reactToComment(commentId, video?.id || '', reactionId, comment?.author.handle || '', fee)
-      setProcessingReactionsIds((previous) => previous.filter((r) => r !== reactionId))
     }
 
     const handleOnBoardingPopoverOpen = async (reactionId: number) => {
@@ -190,19 +190,23 @@ export const Comment: FC<CommentProps> = memo(
       }
 
       setReplyCommentInputIsProcessing(true)
-      const newCommentId = await addComment({
+      await addComment({
         videoId: video.id,
         commentBody: replyCommentInputText,
         parentCommentId: comment.id,
         videoTitle: video.title,
         commentAuthorHandle: comment.author.handle,
+        optimisticOpts: {
+          onTxSign: (newCommentId) => {
+            setReplyCommentInputIsProcessing(false)
+            setReplyCommentInputText('')
+            setHighlightedCommentId?.(newCommentId || null)
+            onReplyPosted?.(newCommentId || '')
+            setRepliesOpen?.(true)
+            setReplyInputOpen(false)
+          },
+        },
       })
-      setReplyCommentInputIsProcessing(false)
-      setReplyCommentInputText('')
-      setHighlightedCommentId?.(newCommentId || null)
-      onReplyPosted?.(newCommentId || '')
-      setRepliesOpen?.(true)
-      setReplyInputOpen(false)
     }
 
     const handleReplyClick = () => {
@@ -250,13 +254,28 @@ export const Comment: FC<CommentProps> = memo(
     const reactions =
       (comment &&
         getCommentReactions({
-          userReactionsIds: userReactions,
+          userReactionsIds: userReactions?.map((uR) => uR.reactionId),
           reactionsCount: comment.reactionsCountByReactionId || [],
           processingReactionsIds,
           deleted: commentType === 'deleted',
         })) ||
       undefined
 
+    const handleCommentReaction = async (commentId: string, reactionId: CommentReaction) => {
+      setProcessingReactionsIds((previous) => [...previous, reactionId])
+      const fee =
+        reactionFee ||
+        (await getReactToVideoCommentFee(memberId && comment?.id ? [memberId, comment.id, reactionId] : undefined))
+      await reactToComment(commentId, video?.id || '', reactionId, comment?.author.handle || '', fee, {
+        prevReactionServerId:
+          userReactions?.find((reaction) => reaction.reactionId === reactionId)?.reactionServerId ?? '',
+        videoId: video?.id ?? '',
+        onUnconfirmedComment: () => setProcessingReactionsIds((previous) => previous.filter((r) => r !== reactionId)),
+        onTxSign: () => setProcessingReactionsIds((previous) => previous.filter((r) => r !== reactionId)),
+      })
+      setProcessingReactionsIds((previous) => previous.filter((r) => r !== reactionId))
+    }
+
     if (isEditingComment) {
       return (
         <CommentInput
diff --git a/packages/atlas/src/components/_comments/Comment/InternalComment.tsx b/packages/atlas/src/components/_comments/Comment/InternalComment.tsx
index 6190120259..cec6e9e9fa 100644
--- a/packages/atlas/src/components/_comments/Comment/InternalComment.tsx
+++ b/packages/atlas/src/components/_comments/Comment/InternalComment.tsx
@@ -16,6 +16,7 @@ import { PopoverImperativeHandle } from '@/components/_overlays/Popover'
 import { ReactionsOnboardingPopover } from '@/components/_video/ReactionsOnboardingPopover'
 import { atlasConfig } from '@/config'
 import { absoluteRoutes } from '@/config/routes'
+import { UNCONFIRMED } from '@/hooks/useOptimisticActions'
 import { useTouchDevice } from '@/hooks/useTouchDevice'
 import { CommentReaction } from '@/joystream-lib/types'
 import { getMemberAvatar } from '@/providers/assets/assets.helpers'
@@ -113,6 +114,7 @@ export const InternalComment: FC<InternalCommentProps> = ({
   const [tempReactionId, setTempReactionId] = useState<CommentReaction | null>(null)
   const isDeleted = type === 'deleted'
   const isProcessing = type === 'processing'
+  const isUnconfirmed = commentId?.includes(UNCONFIRMED)
   const shouldShowKebabButton = type === 'options' && !loading && !isDeleted
 
   const popoverRef = useRef<PopoverImperativeHandle>(null)
@@ -191,7 +193,7 @@ export const InternalComment: FC<InternalCommentProps> = ({
       onMouseEnter={() => setCommentHover(true)}
       onMouseLeave={() => setCommentHover(false)}
     >
-      <CommentWrapper shouldShowKebabButton={shouldShowKebabButton} ref={domRef}>
+      <CommentWrapper isUnconfirmed={isUnconfirmed} shouldShowKebabButton={shouldShowKebabButton} ref={domRef}>
         <SwitchTransition>
           <CSSTransition
             timeout={parseInt(cVar('animationTimingFast', true))}
@@ -266,7 +268,7 @@ export const InternalComment: FC<InternalCommentProps> = ({
                     onDecline={handleOnboardingPopoverHide}
                     trigger={
                       <ReactionsWrapper>
-                        {hasReactionsAndCommentIsNotDeleted && (
+                        {!isUnconfirmed && hasReactionsAndCommentIsNotDeleted && (
                           <ProtectedActionWrapper
                             title="You want to react to this comment?"
                             description="Sign in to let others know what you think"
@@ -312,18 +314,22 @@ export const InternalComment: FC<InternalCommentProps> = ({
                               {repliesOpen ? 'Hide' : 'Show'} {repliesCount} {repliesCount === 1 ? 'reply' : 'replies'}
                             </TextButton>
                           )}
-                          {onReplyClick && !isDeleted && !isProcessing && (commentHover || isTouchDevice) && (
-                            <ReplyButtonWrapper>
-                              <ProtectedActionWrapper
-                                title="You want to reply to this comment?"
-                                description="Sign in to let others know what you think"
-                              >
-                                <ReplyButton onClick={onReplyClick} variant="tertiary" size="small" _textOnly>
-                                  Reply
-                                </ReplyButton>
-                              </ProtectedActionWrapper>
-                            </ReplyButtonWrapper>
-                          )}
+                          {onReplyClick &&
+                            !isUnconfirmed &&
+                            !isDeleted &&
+                            !isProcessing &&
+                            (commentHover || isTouchDevice) && (
+                              <ReplyButtonWrapper>
+                                <ProtectedActionWrapper
+                                  title="You want to reply to this comment?"
+                                  description="Sign in to let others know what you think"
+                                >
+                                  <ReplyButton onClick={onReplyClick} variant="tertiary" size="small" _textOnly>
+                                    Reply
+                                  </ReplyButton>
+                                </ProtectedActionWrapper>
+                              </ReplyButtonWrapper>
+                            )}
                         </RepliesWrapper>
                       </ReactionsWrapper>
                     }
@@ -333,19 +339,21 @@ export const InternalComment: FC<InternalCommentProps> = ({
             </CommentArticle>
           </CSSTransition>
         </SwitchTransition>
-        <ContextMenu
-          placement="bottom-end"
-          disabled={loading || !shouldShowKebabButton}
-          items={contexMenuItems}
-          trigger={
-            <KebabMenuIconButton
-              icon={<SvgActionMore />}
-              variant="tertiary"
-              size="small"
-              isActive={shouldShowKebabButton}
-            />
-          }
-        />
+        {!isUnconfirmed ? (
+          <ContextMenu
+            placement="bottom-end"
+            disabled={loading || !shouldShowKebabButton}
+            items={contexMenuItems}
+            trigger={
+              <KebabMenuIconButton
+                icon={<SvgActionMore />}
+                variant="tertiary"
+                size="small"
+                isActive={shouldShowKebabButton}
+              />
+            }
+          />
+        ) : null}
       </CommentWrapper>
     </CommentRow>
   )
diff --git a/packages/atlas/src/components/_crt/AmmTransactionsTable/AmmTransactionsTable.tsx b/packages/atlas/src/components/_crt/AmmTransactionsTable/AmmTransactionsTable.tsx
index c5ef42b179..878129a6df 100644
--- a/packages/atlas/src/components/_crt/AmmTransactionsTable/AmmTransactionsTable.tsx
+++ b/packages/atlas/src/components/_crt/AmmTransactionsTable/AmmTransactionsTable.tsx
@@ -49,9 +49,10 @@ const tableEmptyState = {
 type AmmTransactionsTableProps = {
   data: FullAmmCurveFragment['transactions']
   loading: boolean
+  symbol: string
 }
 
-export const AmmTransactionsTable = ({ data, loading }: AmmTransactionsTableProps) => {
+export const AmmTransactionsTable = ({ data, loading, symbol }: AmmTransactionsTableProps) => {
   const mappedData = useMemo(
     () =>
       data.map((row) => ({
@@ -64,10 +65,12 @@ export const AmmTransactionsTable = ({ data, loading }: AmmTransactionsTableProp
           />
         ),
         pricePerUnit: <TokenAmount tokenAmount={new BN(row.pricePerUnit)} />,
-        quantity: <NumberFormat value={+row.quantity} as="p" withToken customTicker="$JBC" variant="t100-strong" />,
+        quantity: (
+          <NumberFormat value={+row.quantity} as="p" withToken customTicker={`$${symbol}`} variant="t100-strong" />
+        ),
         amount: <TokenAmount tokenAmount={new BN(row.pricePaid)} />,
       })),
-    [data]
+    [data, symbol]
   )
 
   return (
diff --git a/packages/atlas/src/components/_crt/CrtPortfolioTable/CrtPortfolioTable.tsx b/packages/atlas/src/components/_crt/CrtPortfolioTable/CrtPortfolioTable.tsx
index a0b572ad5f..4e8be4f796 100644
--- a/packages/atlas/src/components/_crt/CrtPortfolioTable/CrtPortfolioTable.tsx
+++ b/packages/atlas/src/components/_crt/CrtPortfolioTable/CrtPortfolioTable.tsx
@@ -209,7 +209,12 @@ export const TokenPortfolioUtils = ({
   const [ref, setRef] = useState<HTMLButtonElement | null>(null)
 
   return (
-    <RightAlignedCell>
+    <RightAlignedCell
+      onClick={(e) => {
+        e.stopPropagation()
+        e.preventDefault()
+      }}
+    >
       <Button ref={setRef} icon={<SvgActionMore />} variant="tertiary" size="small" />
       <ContextMenu
         appendTo={document.body}
diff --git a/packages/atlas/src/components/_crt/RevenueShareWidget/RevenueShareWidget.tsx b/packages/atlas/src/components/_crt/RevenueShareWidget/RevenueShareWidget.tsx
index cafea0f578..56ca34d924 100644
--- a/packages/atlas/src/components/_crt/RevenueShareWidget/RevenueShareWidget.tsx
+++ b/packages/atlas/src/components/_crt/RevenueShareWidget/RevenueShareWidget.tsx
@@ -5,6 +5,7 @@ import {
   GetTokenRevenueSharesQuery,
   useGetCreatorTokenHoldersQuery,
   useGetFullCreatorTokenQuery,
+  useGetRevenueShareDividendQuery,
 } from '@/api/queries/__generated__/creatorTokens.generated'
 import { SvgActionCalendar, SvgActionLock, SvgJoyTokenMonochrome16 } from '@/assets/icons'
 import { Avatar } from '@/components/Avatar'
@@ -45,6 +46,13 @@ export const RevenueShareWidget = ({ tokenName, tokenId, revenueShare, memberId
       },
     },
   })
+  const { data: dividendData, loading: loadingDividendData } = useGetRevenueShareDividendQuery({
+    variables: {
+      tokenId: tokenId,
+      stakingAmount: +(holderData?.tokenAccounts[0]?.totalAmount ?? 0),
+    },
+    skip: !holderData?.tokenAccounts[0] || !tokenId,
+  })
   const status = getRevenueShareStatusForMember({
     currentBlock,
     endingAt: revenueShare.endsAt,
@@ -119,13 +127,17 @@ export const RevenueShareWidget = ({ tokenName, tokenId, revenueShare, memberId
           </Detail>
 
           <Detail title="YOUR SHARE">
-            <NumberFormat
-              value={new BN(memberStake?.earnings ?? 0)}
-              as="p"
-              variant="t300"
-              withDenomination="after"
-              icon={<SvgJoyTokenMonochrome16 />}
-            />
+            {loadingDividendData ? (
+              <SkeletonLoader height={30} width={60} />
+            ) : (
+              <NumberFormat
+                value={new BN(dividendData?.getShareDividend.dividendJoyAmount ?? memberStake?.earnings ?? 0)}
+                as="p"
+                variant="t300"
+                withDenomination="after"
+                icon={<SvgJoyTokenMonochrome16 />}
+              />
+            )}
           </Detail>
 
           <Detail title="YOUR TOKENS">
diff --git a/packages/atlas/src/components/_navigation/SidenavViewer/SidenavViewer.tsx b/packages/atlas/src/components/_navigation/SidenavViewer/SidenavViewer.tsx
index f25aa3a13e..622a12a407 100644
--- a/packages/atlas/src/components/_navigation/SidenavViewer/SidenavViewer.tsx
+++ b/packages/atlas/src/components/_navigation/SidenavViewer/SidenavViewer.tsx
@@ -7,8 +7,9 @@ import {
   SvgActionMoney,
   SvgActionNewTab,
   SvgSidebarHome,
-  SvgSidebarMarketplace,
+  SvgSidebarNft,
   SvgSidebarReferrals,
+  SvgSidebarToken,
 } from '@/assets/icons'
 import { AppLogo } from '@/components/AppLogo'
 import { Button } from '@/components/_buttons/Button'
@@ -35,10 +36,17 @@ export const viewerNavItems = [
     bottomNav: true,
   },
   {
-    icon: <SvgSidebarMarketplace />,
-    expandedName: 'Marketplace',
-    name: 'Market',
-    to: absoluteRoutes.viewer.marketplace(),
+    icon: <SvgSidebarToken />,
+    expandedName: 'Tokens',
+    name: 'Tokens',
+    to: absoluteRoutes.viewer.crtMarketplace(),
+    bottomNav: true,
+  },
+  {
+    icon: <SvgSidebarNft />,
+    expandedName: 'NFTs',
+    name: 'NFTs',
+    to: absoluteRoutes.viewer.nftMarketplace(),
     bottomNav: true,
   },
   ...(atlasConfig.features.ypp.googleConsoleClientId
diff --git a/packages/atlas/src/components/_notifications/NotificationTile/NotificationTile.hooks.tsx b/packages/atlas/src/components/_notifications/NotificationTile/NotificationTile.hooks.tsx
index b91789262a..8fed07555e 100644
--- a/packages/atlas/src/components/_notifications/NotificationTile/NotificationTile.hooks.tsx
+++ b/packages/atlas/src/components/_notifications/NotificationTile/NotificationTile.hooks.tsx
@@ -649,7 +649,7 @@ const getLink = (type: LinkType, params: string[] = []): string => {
       return absoluteRoutes.viewer.category(params[0])
 
     case 'marketplace-page':
-      return absoluteRoutes.viewer.marketplace()
+      return absoluteRoutes.viewer.nftMarketplace()
 
     case 'payments-page':
       return absoluteRoutes.studio.payments()
diff --git a/packages/atlas/src/config/routes.ts b/packages/atlas/src/config/routes.ts
index d5d4de3cc8..eb987d401f 100644
--- a/packages/atlas/src/config/routes.ts
+++ b/packages/atlas/src/config/routes.ts
@@ -48,7 +48,8 @@ export const relativeRoutes = {
     memberById: (id = ':id', query?: { [QUERY_PARAMS.TAB]?: MemberTabs }) =>
       withQueryParameters(`member/id/${id}`, query),
     memberNotifications: () => 'notifications/member',
-    marketplace: () => 'marketplace',
+    nftMarketplace: () => 'nft-marketplace',
+    crtMarketplace: () => 'crt-marketplace',
     ypp: (query?: { [QUERY_PARAMS.REFERRER_ID]?: string }) => withQueryParameters('ypp', query),
     yppTest: () => 'ypp/rewards',
     yppDashboard: () => 'ypp-dashboard',
diff --git a/packages/atlas/src/hooks/useOptimisticActions.ts b/packages/atlas/src/hooks/useOptimisticActions.ts
new file mode 100644
index 0000000000..efaffe3045
--- /dev/null
+++ b/packages/atlas/src/hooks/useOptimisticActions.ts
@@ -0,0 +1,400 @@
+import { ApolloCache, gql, useApolloClient } from '@apollo/client'
+import { useCallback } from 'react'
+
+import { VideoReaction } from '@/joystream-lib/types'
+
+type AddReactionActionParams = {
+  memberId: string
+  type: VideoReaction
+  videoId: string
+}
+
+type RemoveReactionActionParams = {
+  reactionId: string
+  videoId: string
+}
+
+type AddCommentActionParams = {
+  memberId: string
+  videoId: string
+  parentCommentId: string
+  text: string
+}
+
+type AtlasCacheType = ApolloCache<{
+  'ROOT_QUERY': Record<string, unknown>
+}>
+
+const findCommentCacheKey = (cache: AtlasCacheType, videoId: string) => {
+  const cacheKeys = Object.keys(cache.extract()['ROOT_QUERY'])
+  return cacheKeys.find((key) => key.includes('comments') && key.includes(`id-${videoId}-`))
+}
+
+const findParentCacheKey = (cache: AtlasCacheType, parentId: string) => {
+  const cacheKeys = Object.keys(cache.extract()['ROOT_QUERY'])
+  return cacheKeys.find((key) => key.includes('comments') && key.includes(`parentId-${parentId}-`))
+}
+
+const findCommentReactionQuery = (cache: AtlasCacheType, videoId: string) => {
+  const cacheKeys = Object.keys(cache.extract()['ROOT_QUERY'])
+  return cacheKeys.find((key) => key.includes('commentReactions') && key.includes(`videoId-${videoId}-`))
+}
+
+export const UNCONFIRMED = 'UNCONFIRMED'
+export const UNCOFIRMED_COMMENT = `${UNCONFIRMED}-COMMENT`
+export const UNCOFIRMED_REPLY = `${UNCONFIRMED}-REPLY`
+export const UNCOFIRMED_REACTION = `${UNCONFIRMED}-REACTION`
+
+const commentFragment = gql`
+  fragment CommentFields on Comment {
+    id
+    isExcluded
+    author {
+      __ref
+    }
+    createdAt
+    isEdited
+    reactionsCountByReactionId {
+      __ref
+    }
+    parentComment {
+      __ref
+    }
+    repliesCount
+    text
+    status
+  }
+`
+
+const reactionFragment = gql`
+  fragment CommentReactionFields on CommentReaction {
+    id
+    reactionId
+    comment {
+      __ref
+    }
+  }
+`
+
+export const useOptimisticActions = () => {
+  const client = useApolloClient()
+
+  const increaseVideoCommentReaction = useCallback(
+    ({ commentId, reactionId, videoId }: { commentId: string; reactionId: number; videoId: string }) => {
+      client.cache.modify({
+        id: `Comment:${commentId}`,
+        fields: {
+          reactionsCountByReactionId: (_prev) => {
+            const prev = _prev ?? []
+            const reactionPosition = prev.findIndex(
+              (reactionEntry: { reactionId: number; count: number }) => reactionEntry.reactionId === reactionId
+            )
+            const reaction =
+              reactionPosition === -1
+                ? { __typename: 'CommentReactionsCountByReactionId', reactionId, count: 0 }
+                : prev[reactionPosition]
+            const newPrev = [...prev]
+            newPrev[reactionPosition === -1 ? prev.length : reactionPosition] = {
+              ...reaction,
+              count: 1 + (reaction?.count ?? 0),
+            }
+
+            return newPrev
+          },
+        },
+      })
+
+      const recordId = `${commentId}-${videoId}-${UNCOFIRMED_REACTION}-${Date.now()}`
+
+      client.cache.writeFragment({
+        id: `CommentReaction:${recordId}`,
+        fragment: reactionFragment,
+        data: {
+          __typename: 'CommentReaction',
+          id: recordId,
+          comment: {
+            __ref: `Comment:${commentId}`,
+          },
+          reactionId,
+        },
+      })
+
+      const videoReactionQueryKey = findCommentReactionQuery(client.cache as AtlasCacheType, videoId)
+      if (videoReactionQueryKey) {
+        client.cache.modify({
+          optimistic: true,
+          id: 'ROOT_QUERY',
+          fields: {
+            [videoReactionQueryKey]: (existingResults = []) => {
+              return [...(existingResults as []), { __ref: `CommentReaction:${recordId}` }]
+            },
+          },
+        })
+      }
+    },
+    [client.cache]
+  )
+
+  const decreaseVideoCommentReaction = useCallback(
+    ({
+      commentId,
+      reactionId,
+      reactionDbId,
+      videoId,
+    }: {
+      commentId: string
+      reactionId: number
+      reactionDbId: string
+      videoId: string
+    }) => {
+      client.cache.modify({
+        id: `Comment:${commentId}`,
+        fields: {
+          reactionsCountByReactionId: (prev) => {
+            const reactionPosition = prev.findIndex(
+              (reactionEntry: { reactionId: number; count: number }) => reactionEntry.reactionId === reactionId
+            )
+            const reaction = prev[reactionPosition]
+            const newPrev = [...prev]
+            newPrev[reactionPosition] = {
+              ...reaction,
+              count: reaction?.count ? reaction.count - 1 : 0,
+            }
+            return newPrev
+          },
+        },
+      })
+
+      client.cache.evict({
+        id: `CommentReaction:${reactionDbId}`,
+      })
+
+      const videoReactionQueryKey = findCommentReactionQuery(client.cache as AtlasCacheType, videoId)
+      if (videoReactionQueryKey) {
+        client.cache.modify({
+          optimistic: true,
+          id: 'ROOT_QUERY',
+          fields: {
+            [videoReactionQueryKey]: (existingResults = []) => {
+              const index = (existingResults as { __ref: string }[]).findIndex(
+                (res) => res.__ref === `CommentReaction:${reactionDbId}`
+              )
+              const newRes = [...(existingResults as [])]
+              if (index) newRes[index] = { __ref: 'empty' } as never
+              return newRes as unknown
+            },
+          },
+        })
+      }
+    },
+    [client.cache]
+  )
+
+  const deleteVideoComment = useCallback(
+    ({ commentId }: { commentId: string }) => {
+      client.cache.modify({
+        id: `Comment:${commentId}`,
+        fields: {
+          status: () => 'DELETED',
+        },
+      })
+    },
+    [client.cache]
+  )
+
+  const editVideoComment = useCallback(
+    ({ commentId, text }: { commentId: string; text: string }) => {
+      client.cache.modify({
+        id: `Comment:${commentId}`,
+        fields: {
+          text: () => text,
+          isEdited: () => true,
+        },
+      })
+    },
+    [client.cache]
+  )
+
+  const addVideoReplyComment = useCallback(
+    ({ memberId, videoId, text, parentCommentId }: AddCommentActionParams) => {
+      const commentId = Date.now()
+      const recordId = `${commentId}-${videoId}-${UNCOFIRMED_REPLY}`
+      client.cache.writeFragment({
+        id: `Comment:${recordId}`,
+        fragment: commentFragment,
+        data: {
+          __typename: 'Comment',
+          id: recordId,
+          isExcluded: false,
+          author: {
+            __ref: `Membership:${memberId}`,
+          },
+          createdAt: new Date().toISOString(),
+          isEdited: false,
+          reactionsCountByReactionId: null,
+          repliesCount: 0,
+          text: text,
+          status: 'VISIBLE',
+          parentComment: { __ref: `Comment:${parentCommentId}` },
+        },
+      })
+      const parentQuery = findParentCacheKey(client.cache as AtlasCacheType, parentCommentId)
+      if (parentQuery) {
+        client.cache.modify({
+          optimistic: true,
+          id: 'ROOT_QUERY',
+          fields: {
+            [parentQuery]: (existingCommentsConnection = {}) => {
+              const newEdge = {
+                __typename: 'CommentEdge',
+                cursor: '0',
+                node: {
+                  __ref: `Comment:${recordId}`,
+                },
+              }
+              return {
+                ...(existingCommentsConnection as {
+                  /* */
+                }),
+                edges: [...((existingCommentsConnection as { edges: unknown[] }).edges ?? []), newEdge],
+              }
+            },
+          },
+        })
+
+        client.cache.modify({
+          optimistic: true,
+          id: `Comment:${parentCommentId}`,
+          fields: {
+            repliesCount: (prev) => prev + 1,
+          },
+        })
+      }
+      return recordId
+    },
+    [client.cache]
+  )
+
+  const addVideoComment = useCallback(
+    ({ memberId, videoId, text }: Omit<AddCommentActionParams, 'parentCommentId'>) => {
+      const commentId = Date.now()
+      const recordId = `${commentId}-${videoId}-${UNCOFIRMED_COMMENT}`
+      client.cache.writeFragment({
+        id: `Comment:${recordId}`,
+        fragment: commentFragment,
+        data: {
+          __typename: 'Comment',
+          id: recordId,
+          isExcluded: false,
+          author: {
+            __ref: `Membership:${memberId}`,
+          },
+          createdAt: new Date().toISOString(),
+          isEdited: false,
+          reactionsCountByReactionId: null,
+          parentComment: null,
+          repliesCount: 0,
+          text: text,
+          status: 'VISIBLE',
+        },
+      })
+
+      const queryKey = findCommentCacheKey(client.cache as AtlasCacheType, videoId)
+      if (queryKey) {
+        client.cache.modify({
+          optimistic: true,
+          id: 'ROOT_QUERY',
+          fields: {
+            [queryKey]: (existingCommentsConnection = { edges: [] }) => {
+              const newEdge = {
+                __typename: 'CommentEdge',
+                cursor: '0', // Generate or use an appropriate cursor value
+                node: {
+                  __ref: `Comment:${recordId}`,
+                },
+              }
+              return {
+                ...(existingCommentsConnection as {
+                  /* */
+                }),
+                edges: [...((existingCommentsConnection as { edges: unknown[] }).edges ?? []), newEdge],
+              }
+            },
+          },
+        })
+      }
+
+      return recordId
+    },
+    [client.cache]
+  )
+
+  const addVideoReaction = useCallback(
+    ({ memberId, type, videoId }: AddReactionActionParams) => {
+      const reactionId = Date.now()
+      const recordId = `${reactionId}-${videoId}`
+      client.cache.writeFragment({
+        id: `VideoReaction:${recordId}`,
+        fragment: gql`
+          fragment VideoReaction on VideoReaction {
+            id
+            createdAt
+            reaction
+            member {
+              __ref
+            }
+          }
+        `,
+        data: {
+          __typename: 'VideoReaction',
+          id: recordId,
+          createdAt: new Date().toISOString(),
+          reaction: type === 'like' ? 'LIKE' : 'UNLIKE',
+          member: {
+            __ref: `Membership:${memberId}`,
+          },
+        },
+      })
+      client.cache.modify({
+        id: client.cache.identify({
+          __typename: 'Video',
+          id: videoId,
+        }),
+        fields: {
+          reactionsCount: (prev) => prev + 1,
+          reactions: (prev) => [...prev, { __ref: `VideoReaction:${recordId}` }],
+        },
+      })
+    },
+    [client.cache]
+  )
+
+  const removeVideoReaction = useCallback(
+    ({ reactionId, videoId }: RemoveReactionActionParams) => {
+      client.cache.evict({ id: `VideoReaction:${reactionId}` })
+      client.cache.modify({
+        id: client.cache.identify({
+          __typename: 'Video',
+          id: videoId,
+        }),
+        fields: {
+          reactionsCount: (prev) => prev - 1,
+          reactions: (prev) =>
+            (prev ?? []).filter((record: { __ref: string }) => record.__ref !== `VideoReaction:${reactionId}`),
+        },
+      })
+    },
+    [client.cache]
+  )
+
+  return {
+    addVideoReaction,
+    removeVideoReaction,
+    addVideoComment,
+    addVideoReplyComment,
+    editVideoComment,
+    deleteVideoComment,
+    increaseVideoCommentReaction,
+    decreaseVideoCommentReaction,
+  }
+}
diff --git a/packages/atlas/src/hooks/useReactionTransactions.ts b/packages/atlas/src/hooks/useReactionTransactions.ts
index fe090ed912..6d33994afa 100644
--- a/packages/atlas/src/hooks/useReactionTransactions.ts
+++ b/packages/atlas/src/hooks/useReactionTransactions.ts
@@ -6,17 +6,31 @@ import { absoluteRoutes } from '@/config/routes'
 import { CommentReaction, VideoReaction } from '@/joystream-lib/types'
 import { useJoystream } from '@/providers/joystream'
 import { useNetworkUtils } from '@/providers/networkUtils/networkUtils.hooks'
+import { useSnackbar } from '@/providers/snackbars'
 import { useTransaction } from '@/providers/transactions/transactions.hooks'
 import { useUser } from '@/providers/user/user.hooks'
 import { ConsoleLogger, SentryLogger } from '@/utils/logs'
 
+import { UNCONFIRMED, useOptimisticActions } from './useOptimisticActions'
+
 export const useReactionTransactions = () => {
   const { memberId } = useUser()
   const { joystream, proxyCallback } = useJoystream()
   const { refetchReactions, refetchComment, refetchCommentsSection, refetchReplies, refetchVideo, refetchEdits } =
     useNetworkUtils()
   const handleTransaction = useTransaction()
+  const {
+    addVideoReaction,
+    deleteVideoComment,
+    removeVideoReaction,
+    addVideoComment,
+    addVideoReplyComment,
+    editVideoComment,
+    increaseVideoCommentReaction,
+    decreaseVideoCommentReaction,
+  } = useOptimisticActions()
   const navigate = useNavigate()
+  const { displaySnackbar } = useSnackbar()
 
   const addComment = useCallback(
     async ({
@@ -25,12 +39,14 @@ export const useReactionTransactions = () => {
       commentBody,
       videoTitle,
       commentAuthorHandle,
+      optimisticOpts,
     }: {
       parentCommentId?: string
       videoId: string
       commentBody: string
       videoTitle?: string | null
       commentAuthorHandle?: string
+      optimisticOpts?: { onTxSign: (newCommentId: string) => void }
     }) => {
       if (!joystream || !memberId) {
         ConsoleLogger.error('no joystream or active member')
@@ -44,6 +60,25 @@ export const useReactionTransactions = () => {
           (
             await joystream.extrinsics
           ).createVideoComment(memberId, videoId, commentBody, parentCommentId || null, proxyCallback(updateStatus)),
+        onTxSign: () => {
+          if (!optimisticOpts) return
+
+          if (parentCommentId) {
+            newCommentId = addVideoReplyComment({
+              memberId,
+              text: commentBody,
+              videoId,
+              parentCommentId,
+            })
+          } else {
+            newCommentId = addVideoComment({
+              memberId,
+              text: commentBody,
+              videoId,
+            })
+          }
+          optimisticOpts.onTxSign(newCommentId)
+        },
         onTxSync: async (_, metaStatus) => {
           if (
             !metaStatus?.__typename ||
@@ -76,24 +111,48 @@ export const useReactionTransactions = () => {
       return newCommentId
     },
     [
+      joystream,
       memberId,
       handleTransaction,
-      joystream,
       proxyCallback,
+      addVideoReplyComment,
+      addVideoComment,
       refetchComment,
-      refetchCommentsSection,
       refetchReplies,
       refetchVideo,
+      refetchCommentsSection,
     ]
   )
 
   const reactToComment = useCallback(
-    async (commentId: string, videoId: string, reactionId: CommentReaction, commentAuthorHandle: string, fee?: BN) => {
+    async (
+      commentId: string,
+      videoId: string,
+      reactionId: CommentReaction,
+      commentAuthorHandle: string,
+      fee?: BN,
+      optimisticOpts?: {
+        prevReactionServerId?: string
+        videoId: string
+        onTxSign: () => void
+        onUnconfirmedComment: () => void
+      }
+    ) => {
       if (!joystream || !memberId) {
         ConsoleLogger.error('No joystream instance')
         return
       }
 
+      if (commentId.includes(UNCONFIRMED)) {
+        displaySnackbar({
+          iconType: 'error',
+          title: 'Ups, something went wrong',
+          description:
+            'Looks like this comment is not yet confirmed by a server. Retry shortly, if the problem persists refresh the page.',
+        })
+        return
+      }
+
       return handleTransaction({
         fee,
         txFactory: async (updateStatus) =>
@@ -103,16 +162,38 @@ export const useReactionTransactions = () => {
             reactionId,
             proxyCallback(updateStatus)
           ),
+        onTxSign: () => {
+          if (!optimisticOpts) return
+          optimisticOpts.onTxSign?.()
+          if (optimisticOpts.prevReactionServerId) {
+            decreaseVideoCommentReaction({
+              commentId,
+              reactionId,
+              reactionDbId: optimisticOpts.prevReactionServerId,
+              videoId: optimisticOpts.videoId,
+            })
+          } else {
+            increaseVideoCommentReaction({ commentId, reactionId, videoId: optimisticOpts.videoId })
+          }
+        },
         minimized: {
           errorMessage: `Your reaction to the comment from "${commentAuthorHandle}" has not been posted.`,
         },
         allowMultiple: true,
-        onTxSync: async () => Promise.all([refetchComment(commentId), refetchReactions(videoId)]),
         onError: async () => refetchReactions(videoId),
         unsignedMessage: 'To add your reaction',
       })
     },
-    [memberId, handleTransaction, joystream, proxyCallback, refetchComment, refetchReactions]
+    [
+      joystream,
+      memberId,
+      handleTransaction,
+      displaySnackbar,
+      proxyCallback,
+      decreaseVideoCommentReaction,
+      increaseVideoCommentReaction,
+      refetchReactions,
+    ]
   )
 
   const updateComment = useCallback(
@@ -121,20 +202,37 @@ export const useReactionTransactions = () => {
       videoId,
       commentBody,
       videoTitle,
+      optimisticOpts,
     }: {
       commentId: string
       videoId: string
       commentBody: string
       videoTitle?: string | null
+      optimisticOpts?: { onTxSign: () => void; onUnconfirmed: () => void }
     }) => {
       if (!joystream || !memberId || !videoId) {
         ConsoleLogger.error('no joystream or active member')
         return false
       }
 
+      if (commentId.includes(UNCONFIRMED)) {
+        displaySnackbar({
+          title: "Couldn't edit your comment",
+          description: 'Looks like you comment was not yet confirmed by server. Please retry shortly.',
+        })
+        optimisticOpts?.onUnconfirmed()
+        return
+      }
+
       return await handleTransaction({
         txFactory: async (updateStatus) =>
           (await joystream.extrinsics).editVideoComment(memberId, commentId, commentBody, proxyCallback(updateStatus)),
+        onTxSign: () => {
+          if (!optimisticOpts) return
+
+          editVideoComment({ commentId, text: commentBody })
+          optimisticOpts.onTxSign()
+        },
         onTxSync: async () => refetchEdits(commentId),
         minimized: {
           errorMessage: `Your comment to the video "${videoTitle}" has not been edited.`,
@@ -143,18 +241,45 @@ export const useReactionTransactions = () => {
         allowMultiple: true,
       })
     },
-    [memberId, handleTransaction, joystream, proxyCallback, refetchEdits]
+    [joystream, memberId, handleTransaction, displaySnackbar, proxyCallback, editVideoComment, refetchEdits]
   )
+
   const deleteComment = useCallback(
-    async (commentId: string, videoTitle?: string, videoId?: string) => {
+    async (
+      commentId: string,
+      videoTitle?: string,
+      videoId?: string,
+      optimisticOpts?: {
+        onUnconfirmed: () => void
+        onTxSign: () => void
+      }
+    ) => {
       if (!joystream || !memberId) {
         ConsoleLogger.error('no joystream or active member')
         return
       }
 
+      if (commentId.includes(UNCONFIRMED)) {
+        displaySnackbar({
+          title: "Couldn't delete your comment",
+          description: 'Looks like you comment was not yet confirmed by server. Please retry shortly.',
+        })
+        optimisticOpts?.onUnconfirmed()
+        return
+      }
+
       return handleTransaction({
         txFactory: async (updateStatus) =>
           (await joystream.extrinsics).deleteVideoComment(memberId, commentId, proxyCallback(updateStatus)),
+        onTxSign: () => {
+          if (!optimisticOpts) return
+
+          deleteVideoComment({ commentId })
+          optimisticOpts.onTxSign()
+        },
+        onTxSync: async () => {
+          refetchComment(commentId)
+        },
         snackbarSuccessMessage: {
           title: 'Comment deleted',
           description: 'Your comment has been deleted.',
@@ -168,7 +293,16 @@ export const useReactionTransactions = () => {
         allowMultiple: true,
       })
     },
-    [memberId, handleTransaction, joystream, navigate, proxyCallback]
+    [
+      joystream,
+      memberId,
+      handleTransaction,
+      displaySnackbar,
+      proxyCallback,
+      deleteVideoComment,
+      refetchComment,
+      navigate,
+    ]
   )
 
   const moderateComment = useCallback(
@@ -198,7 +332,13 @@ export const useReactionTransactions = () => {
   )
 
   const likeOrDislikeVideo = useCallback(
-    (videoId: string, reaction: VideoReaction, videoTitle?: string | null, fee?: BN) => {
+    (
+      videoId: string,
+      reaction: VideoReaction,
+      videoTitle?: string | null,
+      fee?: BN,
+      optimisticOpts?: { prevReactionId?: string; onTxSign: () => void; isRemovingReaction: boolean }
+    ) => {
       if (!joystream || !memberId) {
         ConsoleLogger.error('No joystream instance')
         return Promise.reject(false)
@@ -211,14 +351,22 @@ export const useReactionTransactions = () => {
         minimized: {
           errorMessage: `Reaction to the video "${videoTitle || ''}" was not posted.`,
         },
-        onTxSync: async () => {
-          await refetchVideo(videoId)
+        onTxSign: () => {
+          if (!optimisticOpts) return
+
+          optimisticOpts.onTxSign()
+          if (optimisticOpts.prevReactionId) {
+            removeVideoReaction({ reactionId: optimisticOpts.prevReactionId, videoId })
+          }
+          if (!optimisticOpts.isRemovingReaction) {
+            addVideoReaction({ memberId, type: reaction, videoId })
+          }
         },
         unsignedMessage: 'To add your reaction',
         allowMultiple: true,
       })
     },
-    [memberId, handleTransaction, joystream, proxyCallback, refetchVideo]
+    [joystream, memberId, handleTransaction, proxyCallback, addVideoReaction, removeVideoReaction]
   )
 
   return {
diff --git a/packages/atlas/src/providers/networkUtils/networkUtils.provider.tsx b/packages/atlas/src/providers/networkUtils/networkUtils.provider.tsx
index 8e96a06145..ddbfa32f47 100644
--- a/packages/atlas/src/providers/networkUtils/networkUtils.provider.tsx
+++ b/packages/atlas/src/providers/networkUtils/networkUtils.provider.tsx
@@ -41,6 +41,7 @@ import {
   GetFullVideoQuery,
   GetFullVideoQueryVariables,
 } from '@/api/queries/__generated__/videos.generated'
+import { UNCOFIRMED_COMMENT, UNCOFIRMED_REACTION, UNCOFIRMED_REPLY } from '@/hooks/useOptimisticActions'
 import { NetworkUtilsContextValue } from '@/providers/networkUtils/networkUtils.type'
 import { useUser } from '@/providers/user/user.hooks'
 
@@ -51,6 +52,17 @@ export const NetworkUtilsProvider = ({ children }: { children: ReactNode }) => {
   const client = useApolloClient()
   const { memberId: activeMemberId } = useUser()
 
+  const evictUnconfirmedCache = useCallback(
+    (keyPart: string) => {
+      Object.keys(client.cache.extract()).forEach((key) => {
+        if (key.includes(keyPart)) {
+          client.cache.evict({ id: key })
+        }
+      })
+    },
+    [client.cache]
+  )
+
   /*      Channel        */
 
   const refetchChannel = useCallback(
@@ -83,6 +95,7 @@ export const NetworkUtilsProvider = ({ children }: { children: ReactNode }) => {
 
   const refetchComment = useCallback(
     (id: string) => {
+      evictUnconfirmedCache(UNCOFIRMED_COMMENT)
       return client.query<GetCommentQuery, GetCommentQueryVariables>({
         query: GetCommentDocument,
         variables: {
@@ -91,7 +104,7 @@ export const NetworkUtilsProvider = ({ children }: { children: ReactNode }) => {
         fetchPolicy: 'network-only',
       })
     },
-    [client]
+    [client, evictUnconfirmedCache]
   )
 
   const refetchEdits = useCallback(
@@ -109,6 +122,7 @@ export const NetworkUtilsProvider = ({ children }: { children: ReactNode }) => {
 
   const refetchReactions = useCallback(
     (videoId: string, memberId?: string) => {
+      evictUnconfirmedCache(UNCOFIRMED_REACTION)
       return client.query<GetUserCommentsReactionsQuery, GetUserCommentsReactionsQueryVariables>({
         query: GetUserCommentsReactionsDocument,
         variables: {
@@ -118,11 +132,12 @@ export const NetworkUtilsProvider = ({ children }: { children: ReactNode }) => {
         fetchPolicy: 'network-only',
       })
     },
-    [activeMemberId, client]
+    [activeMemberId, client, evictUnconfirmedCache]
   )
 
   const refetchReplies = useCallback(
     (parentCommentId: string) => {
+      evictUnconfirmedCache(UNCOFIRMED_REPLY)
       return client.query<GetCommentRepliesConnectionQuery, GetCommentRepliesConnectionQueryVariables>({
         query: GetCommentRepliesConnectionDocument,
         variables: {
@@ -131,11 +146,13 @@ export const NetworkUtilsProvider = ({ children }: { children: ReactNode }) => {
         fetchPolicy: 'network-only',
       })
     },
-    [client]
+    [client, evictUnconfirmedCache]
   )
 
   const refetchCommentsSection = useCallback(
     (videoId: string, memberId?: string) => {
+      evictUnconfirmedCache(UNCOFIRMED_COMMENT)
+
       return client.query<
         GetUserCommentsAndVideoCommentsConnectionQuery,
         GetUserCommentsAndVideoCommentsConnectionQueryVariables
@@ -148,7 +165,7 @@ export const NetworkUtilsProvider = ({ children }: { children: ReactNode }) => {
         fetchPolicy: 'network-only',
       })
     },
-    [activeMemberId, client]
+    [activeMemberId, client, evictUnconfirmedCache]
   )
 
   const refetchAllCommentsSections = useCallback(async () => {
diff --git a/packages/atlas/src/views/global/NftPurchaseBottomDrawer/NftPurchaseBottomDrawer.tsx b/packages/atlas/src/views/global/NftPurchaseBottomDrawer/NftPurchaseBottomDrawer.tsx
index 0af7e2c802..b4a5fb1748 100644
--- a/packages/atlas/src/views/global/NftPurchaseBottomDrawer/NftPurchaseBottomDrawer.tsx
+++ b/packages/atlas/src/views/global/NftPurchaseBottomDrawer/NftPurchaseBottomDrawer.tsx
@@ -64,9 +64,8 @@ export const NftPurchaseBottomDrawer: FC = () => {
   const { userBid, canChangeBid, userBidUnlockDate } = useNftState(nft)
   const thumbnailUrls = nft?.video.thumbnailPhoto?.resolvedUrls
   const creatorAvatarUrls = nft?.video.channel.avatarPhoto?.resolvedUrls
-  const { urls: ownerMemberAvatarUrls } = getMemberAvatar(
-    nft?.owner.__typename === 'NftOwnerMember' ? nft.owner.member : null
-  )
+  const { urls: ownerMemberAvatarUrls } =
+    nft?.owner.__typename === 'NftOwnerMember' ? getMemberAvatar(nft.owner.member) : { urls: creatorAvatarUrls }
   const mdMatch = useMediaMatch('md')
   const { accountBalance } = useSubscribeAccountBalance()
   const timestamp = useMsTimestamp({ shouldStop: !currentAction })
diff --git a/packages/atlas/src/views/global/YppLandingView/YppLandingViewOld.tsx b/packages/atlas/src/views/global/YppLandingView/YppLandingViewOld.tsx
deleted file mode 100644
index 2e7a20bd2a..0000000000
--- a/packages/atlas/src/views/global/YppLandingView/YppLandingViewOld.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import AOS from 'aos'
-import 'aos/dist/aos.css'
-import { FC, useCallback, useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { ParallaxProvider } from 'react-scroll-parallax'
-
-import { YppReferralBanner } from '@/components/_ypp/YppReferralBanner'
-import { absoluteRoutes } from '@/config/routes'
-import { useHeadTags } from '@/hooks/useHeadTags'
-import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
-import { useUser } from '@/providers/user/user.hooks'
-import { useYppStore } from '@/providers/ypp/ypp.store'
-
-import { YppAuthorizationModal } from './YppAuthorizationModal'
-import { Wrapper } from './YppLandingView.styles'
-import { YppCardsSections } from './oldSections/YppCardsSections'
-import { YppConnectionDetails } from './oldSections/YppConnectionDetails'
-import { YppFooter } from './oldSections/YppFooter'
-import { YppHero } from './oldSections/YppHero'
-import { YppRewardSection } from './oldSections/YppRewardSection'
-import { YppSignupVideo } from './oldSections/YppSignupVideo'
-import { useGetYppSyncedChannels } from './useGetYppSyncedChannels'
-
-export const YppLandingViewOld: FC = () => {
-  const headTags = useHeadTags('YouTube Partner Program')
-  const yppModalOpenName = useYppStore((state) => state.yppModalOpenName)
-  const setYppModalOpen = useYppStore((state) => state.actions.setYppModalOpenName)
-  const { activeMembership, channelId } = useUser()
-  const { setSelectedChannelId, setShouldContinueYppFlowAfterCreatingChannel } = useYppStore((store) => store.actions)
-  const navigate = useNavigate()
-  const { trackYppSignInButtonClick } = useSegmentAnalytics()
-  const selectedChannelTitle = activeMembership?.channels.find((channel) => channel.id === channelId)?.title
-
-  const [wasSignInTriggered, setWasSignInTriggered] = useState(false)
-  const shouldContinueYppFlowAfterCreatingChannel = useYppStore(
-    (store) => store.shouldContinueYppFlowAfterCreatingChannel
-  )
-
-  const { unsyncedChannels, isLoading, currentChannel } = useGetYppSyncedChannels()
-  const isYppSigned = !!currentChannel
-  const hasAnotherUnsyncedChannel = isYppSigned && !!unsyncedChannels?.length
-
-  useEffect(() => {
-    AOS.init({
-      duration: 750,
-      once: true,
-    })
-  }, [])
-
-  const handleYppSignUpClick = useCallback(async () => {
-    if (isYppSigned) {
-      navigate(absoluteRoutes.studio.yppDashboard())
-      return
-    }
-
-    if (!yppModalOpenName) {
-      trackYppSignInButtonClick()
-      setYppModalOpen('ypp-requirements')
-      return
-    }
-  }, [isYppSigned, yppModalOpenName, navigate, trackYppSignInButtonClick, setYppModalOpen])
-
-  useEffect(() => {
-    // rerun handleYppSignUpClick after sign in flow
-    if (wasSignInTriggered) {
-      handleYppSignUpClick()
-      setWasSignInTriggered(false)
-    }
-  }, [handleYppSignUpClick, wasSignInTriggered])
-
-  useEffect(() => {
-    if (shouldContinueYppFlowAfterCreatingChannel) {
-      setSelectedChannelId(channelId)
-      setShouldContinueYppFlowAfterCreatingChannel(false)
-      setYppModalOpen('ypp-requirements')
-    }
-  }, [
-    channelId,
-    handleYppSignUpClick,
-    setSelectedChannelId,
-    setShouldContinueYppFlowAfterCreatingChannel,
-    setYppModalOpen,
-    shouldContinueYppFlowAfterCreatingChannel,
-  ])
-
-  const getYppAtlasStatus = () => {
-    if (isLoading) {
-      return null
-    }
-
-    if (!activeMembership?.channels.length) {
-      return 'no-channel'
-    }
-    if (isYppSigned) {
-      return 'ypp-signed'
-    }
-    return 'have-channel'
-  }
-
-  return (
-    <Wrapper>
-      {headTags}
-      <YppAuthorizationModal unSyncedChannels={unsyncedChannels} />
-      <ParallaxProvider>
-        <YppReferralBanner />
-        <YppHero
-          onSelectChannel={() => setYppModalOpen('ypp-select-channel')}
-          onSignUpClick={handleYppSignUpClick}
-          yppAtlasStatus={getYppAtlasStatus()}
-          hasAnotherUnsyncedChannel={hasAnotherUnsyncedChannel}
-          selectedChannelTitle={selectedChannelTitle}
-        />
-        <YppRewardSection />
-        <YppSignupVideo />
-        <YppConnectionDetails />
-        <YppCardsSections />
-        <YppFooter onSignUpClick={handleYppSignUpClick} />
-      </ParallaxProvider>
-    </Wrapper>
-  )
-}
diff --git a/packages/atlas/src/views/global/YppLandingView/oldSections/YppCardsSection.styles.ts b/packages/atlas/src/views/global/YppLandingView/oldSections/YppCardsSection.styles.ts
deleted file mode 100644
index b70db2d842..0000000000
--- a/packages/atlas/src/views/global/YppLandingView/oldSections/YppCardsSection.styles.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import styled from '@emotion/styled'
-
-import { LayoutGrid } from '@/components/LayoutGrid'
-import { media, sizes } from '@/styles'
-
-import { imageShadow } from '../YppLandingView.styles'
-
-export const CardsWithImagesContainer = styled.div`
-  display: grid;
-  gap: ${sizes(16)};
-  ${media.md} {
-    gap: ${sizes(24)};
-  }
-`
-
-export const CardImageRow = styled(LayoutGrid)`
-  grid-gap: ${sizes(6)};
-  ${media.sm} {
-    align-items: center;
-    justify-items: center;
-  }
-`
-
-type ImageContainerProps = {
-  positionOnMobile?: 'center' | 'unset' | 'flex-end'
-  /* will prevent overflowing when parallax is applied */
-  hiddenOverflow?: boolean
-}
-
-export const ImageContainer = styled.div<ImageContainerProps>`
-  position: relative;
-  display: flex;
-  justify-content: ${({ positionOnMobile = 'unset' }) => positionOnMobile};
-  ${media.sm} {
-    overflow: ${({ hiddenOverflow }) => (hiddenOverflow ? 'hidden' : 'unset')};
-    justify-content: unset;
-  }
-`
-
-export const CardImage = styled.img<{ absolute?: boolean; dropShadow?: boolean }>`
-  width: 100%;
-  height: auto;
-  position: ${({ absolute }) => (absolute ? 'absolute' : 'relative')};
-  z-index: ${({ absolute }) => (absolute ? 0 : 1)};
-
-  ${({ dropShadow }) => dropShadow && imageShadow};
-`
diff --git a/packages/atlas/src/views/global/YppLandingView/oldSections/YppCardsSections.tsx b/packages/atlas/src/views/global/YppLandingView/oldSections/YppCardsSections.tsx
deleted file mode 100644
index 8b2f6b6dd1..0000000000
--- a/packages/atlas/src/views/global/YppLandingView/oldSections/YppCardsSections.tsx
+++ /dev/null
@@ -1,331 +0,0 @@
-import { FC } from 'react'
-import { useParallax } from 'react-scroll-parallax'
-import { ParallaxProps } from 'react-scroll-parallax/dist/components/Parallax/types'
-
-import crt1 from '@/assets/images/illustration-crt-l1.webp'
-import crt2 from '@/assets/images/illustration-crt-l2.webp'
-import gated1 from '@/assets/images/illustration-gated-l1.webp'
-import gated2 from '@/assets/images/illustration-gated-l2.webp'
-import tip1 from '@/assets/images/illustration-tip-l1.webp'
-import tip2 from '@/assets/images/illustration-tip-l2.webp'
-import tip3 from '@/assets/images/illustration-tip-l3.webp'
-import videoNfts1 from '@/assets/images/illustration-video-nfts-l1.webp'
-import videoNfts2 from '@/assets/images/illustration-video-nfts-l2.webp'
-import videoNfts3 from '@/assets/images/illustration-video-nfts-l3.webp'
-import videoNfts4 from '@/assets/images/illustration-video-nfts-l4.webp'
-import { GridItem } from '@/components/LayoutGrid'
-import { Text } from '@/components/Text'
-import { ContentCard } from '@/components/_ypp/ContentCard'
-import { atlasConfig } from '@/config'
-import { useMediaMatch } from '@/hooks/useMediaMatch'
-import { useSectionTextVariants } from '@/views/global/YppLandingView/sections/useSectionTextVariants'
-
-import { CardImage, CardImageRow, CardsWithImagesContainer, ImageContainer } from './YppCardsSection.styles'
-
-import {
-  BackgroundContainer,
-  CenteredLayoutGrid,
-  HeaderGridItem,
-  StyledLimitedWidthContainer,
-} from '../YppLandingView.styles'
-
-export const YppCardsSections: FC = () => {
-  const smMatch = useMediaMatch('sm')
-  const endScroll = smMatch ? window.innerHeight / 3 : window.innerHeight
-  const [titleVariant, subtitleVariant] = useSectionTextVariants()
-
-  const commonParallaxOpts: ParallaxProps = {
-    disabled: !smMatch,
-    endScroll,
-    speed: 0.2,
-  }
-
-  const appName = atlasConfig.general.appName
-
-  return (
-    <>
-      <BackgroundContainer noBackground>
-        <StyledLimitedWidthContainer as="section">
-          <CardsWithImagesContainer>
-            <CenteredLayoutGrid gap={4}>
-              <HeaderGridItem
-                as="header"
-                colSpan={{ base: 12, sm: 10, md: 12, lg: 8 }}
-                colStart={{ sm: 2, md: 1, lg: 3 }}
-                data-aos="fade-up"
-                data-aos-delay="350"
-                data-aos-offset="80"
-                data-aos-easing="atlas-easing"
-              >
-                <Text variant={titleVariant} as="h2">
-                  Monetize your ${appName} channel
-                </Text>
-              </HeaderGridItem>
-              <GridItem colSpan={{ base: 12, sm: 10, md: 8, lg: 6 }} colStart={{ sm: 2, md: 3, lg: 4 }}>
-                <Text
-                  variant={subtitleVariant}
-                  as="p"
-                  color="colorText"
-                  data-aos="fade-up"
-                  data-aos-delay="250"
-                  data-aos-offset="40"
-                  data-aos-easing="atlas-easing"
-                >
-                  Build a foundation for your {appName} channel with syncing YouTube content and tap into the future of
-                  content monetization.
-                </Text>
-              </GridItem>
-            </CenteredLayoutGrid>
-
-            <CardImageRow as="article">
-              <GridItem
-                colStart={{ sm: 2, md: 1, lg: 2 }}
-                colSpan={{ base: 12, sm: 10, md: 7, lg: 6 }}
-                data-aos="fade-up"
-                data-aos-delay="250"
-                data-aos-offset="80"
-                data-aos-easing="atlas-easing"
-              >
-                <ImageContainer positionOnMobile="center">
-                  <CardImage absolute src={videoNfts1} alt="Nft tiles" width="640" height="413" />
-                  <CardImageWithParallaxEffect
-                    dropShadow
-                    absolute
-                    src={videoNfts2}
-                    parallaxProps={{
-                      ...commonParallaxOpts,
-                      speed: 5,
-                    }}
-                    alt="Single nft tile"
-                    width="640"
-                    height="413"
-                  />
-                  <CardImageWithParallaxEffect
-                    dropShadow
-                    absolute
-                    src={videoNfts3}
-                    parallaxProps={{
-                      ...commonParallaxOpts,
-                      speed: 10,
-                      translateX: [13, 13],
-                    }}
-                    alt="Context menu of nft tile"
-                    width="640"
-                    height="413"
-                  />
-                  <CardImageWithParallaxEffect
-                    src={videoNfts4}
-                    parallaxProps={{
-                      ...commonParallaxOpts,
-                      speed: 15,
-                    }}
-                    alt="Cursor"
-                    width="640"
-                    height="413"
-                  />
-                </ImageContainer>
-              </GridItem>
-              <GridItem
-                colStart={{ sm: 3, md: 8 }}
-                colSpan={{ base: 12, sm: 8, md: 5, lg: 4 }}
-                data-aos="fade-up"
-                data-aos-delay="350"
-                data-aos-offset="80"
-                data-aos-easing="atlas-easing"
-              >
-                <ContentCard
-                  title="Mint and sell video NFTs on the Marketplace"
-                  subtitle="Video NFTs"
-                  body="Turn your videos into NFTs and put them up for sale. Choose between fixed price, open auction, and timed auction. Define royalties to get a cut every time your NFT gets sold again."
-                />
-              </GridItem>
-            </CardImageRow>
-
-            <CardImageRow as="article">
-              <GridItem
-                colStart={{ sm: 2, md: 6, lg: 6 }}
-                colSpan={{ base: 12, sm: 10, md: 7, lg: 6 }}
-                data-aos="fade-up"
-                data-aos-delay="350"
-                data-aos-offset="100"
-                data-aos-easing="atlas-easing"
-              >
-                <ImageContainer hiddenOverflow>
-                  <CardImage dropShadow absolute src={crt1} alt="Creator token dashboard" width="640" height="460" />
-                  <CardImageWithParallaxEffect
-                    dropShadow
-                    src={crt2}
-                    parallaxProps={{
-                      ...commonParallaxOpts,
-                      speed: 5,
-                    }}
-                    alt="Creator token holders"
-                    width="640"
-                    height="460"
-                  />
-                </ImageContainer>
-              </GridItem>
-              {/*<GridItem*/}
-              {/*  colStart={{ sm: 2, md: 6, lg: 6 }}*/}
-              {/*  colSpan={{ base: 12, sm: 10, md: 7, lg: 6 }}*/}
-              {/*  data-aos="fade-up"*/}
-              {/*  data-aos-delay="250"*/}
-              {/*  data-aos-offset="80"*/}
-              {/*  data-aos-easing="atlas-easing"*/}
-              {/*>*/}
-              {/*  <ImageContainer positionOnMobile="flex-end">*/}
-              {/*    <CardImage absolute dropShadow src={myVideosBack} alt="My videos" width="640" height="360" />*/}
-              {/*    <CardImageWithParallaxEffect*/}
-              {/*      dropShadow*/}
-              {/*      src={myVideosFront}*/}
-              {/*      parallaxProps={{*/}
-              {/*        ...commonParallaxOpts,*/}
-              {/*        speed: 5,*/}
-              {/*      }}*/}
-              {/*      alt="Button"*/}
-              {/*      width="640"*/}
-              {/*      height="360"*/}
-              {/*    />*/}
-              {/*  </ImageContainer>*/}
-              {/*</GridItem>*/}
-              <GridItem
-                colStart={{ sm: 3, md: 1, lg: 2 }}
-                rowStart={{ md: 1 }}
-                colSpan={{ base: 12, sm: 8, md: 5, lg: 4 }}
-                data-aos="fade-up"
-                data-aos-delay="350"
-                data-aos-offset="80"
-                data-aos-easing="atlas-easing"
-              >
-                <ContentCard
-                  pill={{ label: 'Coming early 2024' }}
-                  title="Issue Channel Tokens"
-                  subtitle="Creator tokens"
-                  body="Turn viewers into evangelists by letting them hold a share in your channel when they buy your own channel token."
-                />
-              </GridItem>
-            </CardImageRow>
-
-            <CardImageRow as="article">
-              <GridItem
-                colStart={{ sm: 2, md: 1, lg: 2 }}
-                colSpan={{ base: 12, sm: 10, md: 7, lg: 6 }}
-                data-aos="fade-up"
-                data-aos-delay="250"
-                data-aos-offset="80"
-                data-aos-easing="atlas-easing"
-              >
-                <ImageContainer positionOnMobile="center">
-                  <CardImage absolute src={tip1} alt="Tip tile" width="640" height="386" />
-                  <CardImageWithParallaxEffect
-                    src={tip2}
-                    parallaxProps={{
-                      ...commonParallaxOpts,
-                      speed: 5,
-                    }}
-                    alt="Tip button"
-                    width="640"
-                    height="412"
-                  />
-                  <CardImage absolute src={tip3} alt="Tip cursor" width="640" height="386" />
-                </ImageContainer>
-              </GridItem>
-              <GridItem
-                colStart={{ sm: 3, md: 8 }}
-                colSpan={{ base: 12, sm: 8, md: 5, lg: 4 }}
-                data-aos="fade-up"
-                data-aos-delay="350"
-                data-aos-offset="80"
-                data-aos-easing="atlas-easing"
-              >
-                <ContentCard
-                  pill={{ label: 'Coming late 2024' }}
-                  title="Get recognized and supported with tips"
-                  subtitle="Tips"
-                  body="Receive tips from your viewers who appreciate your work and want you to know about it."
-                />
-              </GridItem>
-            </CardImageRow>
-
-            <CardImageRow as="article">
-              <GridItem
-                colStart={{ sm: 2, md: 6, lg: 6 }}
-                colSpan={{ base: 12, sm: 10, md: 7, lg: 6 }}
-                data-aos="fade-up"
-                data-aos-delay="350"
-                data-aos-offset="100"
-                data-aos-easing="atlas-easing"
-              >
-                <ImageContainer hiddenOverflow>
-                  <CardImage dropShadow absolute src={gated1} alt="Creator token dashboard" width="640" height="460" />
-                  <CardImageWithParallaxEffect
-                    dropShadow
-                    src={gated2}
-                    parallaxProps={{
-                      ...commonParallaxOpts,
-                      speed: 5,
-                    }}
-                    alt="Creator token holders"
-                    width="640"
-                    height="460"
-                  />
-                </ImageContainer>
-              </GridItem>
-              <GridItem
-                colStart={{ sm: 3, md: 1, lg: 2 }}
-                rowStart={{ md: 1 }}
-                colSpan={{ base: 12, sm: 8, md: 5, lg: 4 }}
-                data-aos="fade-up"
-                data-aos-delay="350"
-                data-aos-offset="80"
-                data-aos-easing="atlas-easing"
-              >
-                <ContentCard
-                  pill={{ label: 'Coming late 2024' }}
-                  title="Create videos which only your supporters can access"
-                  subtitle="Gated content"
-                  body="Offer exclusive content to the selected members who purchased your tokens and NFTs."
-                />
-              </GridItem>
-            </CardImageRow>
-          </CardsWithImagesContainer>
-        </StyledLimitedWidthContainer>
-      </BackgroundContainer>
-    </>
-  )
-}
-
-type CardImageWithParallaxEffectProps = {
-  src: string
-  alt: string
-  dropShadow?: boolean
-  absolute?: boolean
-  parallaxProps: ParallaxProps
-  width?: string
-  height?: string
-}
-
-const CardImageWithParallaxEffect: FC<CardImageWithParallaxEffectProps> = ({
-  src,
-  alt,
-  dropShadow,
-  parallaxProps,
-  absolute,
-  ...rest
-}) => {
-  const { ref: imageRef, controller } = useParallax<HTMLImageElement>(parallaxProps)
-
-  // updates cached values after image dimensions have loaded
-  const handleLoad = () => controller?.update()
-  return (
-    <CardImage
-      absolute={absolute}
-      dropShadow={dropShadow}
-      src={src}
-      ref={imageRef}
-      alt={alt}
-      onLoad={handleLoad}
-      {...rest}
-    />
-  )
-}
diff --git a/packages/atlas/src/views/global/YppLandingView/oldSections/YppConnectionDetails.tsx b/packages/atlas/src/views/global/YppLandingView/oldSections/YppConnectionDetails.tsx
deleted file mode 100644
index 918ff4918d..0000000000
--- a/packages/atlas/src/views/global/YppLandingView/oldSections/YppConnectionDetails.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import styled from '@emotion/styled'
-
-import { SvgActionCheck } from '@/assets/icons'
-import { FlexBox } from '@/components/FlexBox'
-import { FlexGridItem } from '@/components/LayoutGrid'
-import { Text } from '@/components/Text'
-import { useMediaMatch } from '@/hooks/useMediaMatch'
-import { cVar, media, sizes, square } from '@/styles'
-import {
-  BackgroundContainer,
-  CenteredLayoutGrid,
-  HeaderGridItem,
-  StyledLimitedWidthContainer,
-} from '@/views/global/YppLandingView/YppLandingView.styles'
-import { useSectionTextVariants } from '@/views/global/YppLandingView/sections/useSectionTextVariants'
-
-export const YppConnectionDetails = () => {
-  const mdMatch = useMediaMatch('md')
-  const smMatch = useMediaMatch('sm')
-  const [titleVariant, subtitleVariant] = useSectionTextVariants()
-
-  return (
-    <BackgroundContainer>
-      <StyledLimitedWidthContainer centerText>
-        <CenteredLayoutGrid>
-          <HeaderGridItem
-            as="header"
-            colStart={{ sm: 2 }}
-            colSpan={{ base: 12, sm: 10 }}
-            data-aos="fade-up"
-            data-aos-delay="350"
-            data-aos-offset="80"
-            data-aos-easing="atlas-easing"
-          >
-            <CheckBox square={smMatch ? 56 : 40}>
-              <SvgActionCheck />
-            </CheckBox>
-            <Text variant={titleVariant} as="span">
-              Connecting is{' '}
-              <Text variant={titleVariant} as="span" color="colorTextSuccess">
-                Safe
-              </Text>
-            </Text>
-            <Text
-              variant={mdMatch ? 't500' : subtitleVariant}
-              as="p"
-              color="colorText"
-              data-aos="fade-up"
-              data-aos-delay="250"
-              data-aos-offset="40"
-              data-aos-easing="atlas-easing"
-              margin={{ top: 4, bottom: mdMatch ? 10 : 6 }}
-            >
-              We are verified by the YouTube Safety Team. We can only read specific types of data through the official
-              API. We cannot publish or change anything on your YouTube channel.
-            </Text>
-          </HeaderGridItem>
-          <AllowanceBox
-            flow="column"
-            gap={6}
-            colSpan={{ base: 12, sm: 10, md: 8, lg: 6 }}
-            colStart={{ sm: 2, md: 3, lg: 4 }}
-          >
-            <Text variant={smMatch ? 'h500' : 'h400'} as="h5">
-              We can read
-            </Text>
-            <FlexBox flow="column" gap={mdMatch ? 6 : 4}>
-              {[
-                'Channel title, avater, image, sub count, date.',
-                'Video titles, views and date.',
-                'Account profile.',
-              ].map((scope, idx) => (
-                <FlexBox key={idx} alignItems="center" gap={2}>
-                  <SmallCheckBox>
-                    <SvgActionCheck />
-                  </SmallCheckBox>
-                  <Text variant={smMatch ? 'h400' : 'h300'} as="p" color="colorText" align="left">
-                    {scope}
-                  </Text>
-                </FlexBox>
-              ))}
-            </FlexBox>
-          </AllowanceBox>
-        </CenteredLayoutGrid>
-      </StyledLimitedWidthContainer>
-    </BackgroundContainer>
-  )
-}
-
-export const CheckBox = styled.div<{ square: number }>`
-  background: ${cVar('colorBackgroundSuccess')};
-  display: grid;
-  place-items: center;
-  padding: ${sizes(2)};
-  border-radius: 50%;
-  width: fit-content;
-  margin: 0 auto;
-  ${(props) => square(props.square)};
-
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-`
-
-const SmallCheckBox = styled.div`
-  background: ${cVar('colorBackgroundMutedAlpha')};
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  ${square(32)};
-
-  svg {
-    ${square(20)};
-  }
-
-  path {
-    fill: ${cVar('colorTextSuccess')};
-  }
-`
-
-const AllowanceBox = styled(FlexGridItem)`
-  background: ${cVar('colorBackgroundMutedAlpha')};
-  border: 1px solid ${cVar('colorBorderMutedAlpha')};
-  border-radius: ${cVar('radiusMedium')};
-  padding: ${sizes(6)};
-  margin: 0 auto;
-
-  ${media.sm} {
-    padding: ${sizes(8)};
-  }
-`
diff --git a/packages/atlas/src/views/global/YppLandingView/oldSections/YppFooter.styles.ts b/packages/atlas/src/views/global/YppLandingView/oldSections/YppFooter.styles.ts
deleted file mode 100644
index 3e20ec69c7..0000000000
--- a/packages/atlas/src/views/global/YppLandingView/oldSections/YppFooter.styles.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import styled from '@emotion/styled'
-
-import bottomLeftPattern from '@/assets/images/ypp-background-pattern.svg'
-import topLeftBannerPattern from '@/assets/images/ypp-banner-pattern.svg'
-import { GoogleButton } from '@/components/_buttons/GoogleButton'
-import { cVar, media, sizes } from '@/styles'
-
-export const CtaBanner = styled.div`
-  padding: ${sizes(6)};
-  background: ${cVar('colorBackgroundPrimary')};
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: ${sizes(16)} 0;
-  border-radius: ${cVar('radiusLarge')};
-
-  ${media.xs} {
-    padding: ${sizes(8)};
-  }
-
-  ${media.sm} {
-    background-image: url(${bottomLeftPattern}), url(${topLeftBannerPattern});
-    background-position: bottom left, top right;
-    background-repeat: no-repeat, no-repeat;
-    padding: ${sizes(16)} ${sizes(12)};
-  }
-
-  ${media.md} {
-    margin: ${sizes(24)} 0;
-  }
-`
-
-export const StyledButton = styled(GoogleButton)`
-  margin-top: ${sizes(8)};
-`
diff --git a/packages/atlas/src/views/global/YppLandingView/oldSections/YppFooter.tsx b/packages/atlas/src/views/global/YppLandingView/oldSections/YppFooter.tsx
deleted file mode 100644
index 1edcdb006f..0000000000
--- a/packages/atlas/src/views/global/YppLandingView/oldSections/YppFooter.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { FC, ReactElement } from 'react'
-
-import { SvgActionInfo, SvgActionSpeech, SvgActionTokensStack } from '@/assets/icons'
-import { GridItem, LayoutGrid } from '@/components/LayoutGrid'
-import { Text } from '@/components/Text'
-import { CallToActionButton, CallToActionWrapper } from '@/components/_buttons/CallToActionButton'
-import { atlasConfig } from '@/config'
-import { YppWidgetIcons } from '@/config/configSchema'
-import { useSectionTextVariants } from '@/views/global/YppLandingView/sections/useSectionTextVariants'
-
-import { CtaBanner, StyledButton } from './YppFooter.styles'
-
-import { StyledLimitedWidthContainer } from '../YppLandingView.styles'
-
-export const configYppIconMapper: Record<YppWidgetIcons, ReactElement> = {
-  info: <SvgActionInfo />,
-  message: <SvgActionSpeech />,
-  tokenStack: <SvgActionTokensStack />,
-}
-
-type YppFooterSectionProps = {
-  onSignUpClick: () => void
-}
-
-export const YppFooter: FC<YppFooterSectionProps> = ({ onSignUpClick }) => {
-  const [titleVariant] = useSectionTextVariants()
-
-  return (
-    <>
-      <StyledLimitedWidthContainer
-        centerText
-        data-aos="fade-up"
-        data-aos-delay="250"
-        data-aos-offset="80"
-        data-aos-easing="atlas-easing"
-      >
-        <LayoutGrid>
-          <GridItem colStart={{ lg: 2 }} colSpan={{ base: 12, lg: 10 }}>
-            <CtaBanner>
-              <Text variant="h100" as="p" color="colorText">
-                Get started now
-              </Text>
-              <Text variant={titleVariant} as="h2" color="colorCoreBaseWhite" margin={{ top: 1 }}>
-                Pave the way to Web3 with your YouTube channel right away.
-              </Text>
-
-              <StyledButton onClick={onSignUpClick}>Authorize with YouTube</StyledButton>
-            </CtaBanner>
-          </GridItem>
-        </LayoutGrid>
-      </StyledLimitedWidthContainer>
-      {atlasConfig.features.ypp.widgets && (
-        <CallToActionWrapper itemsCount={atlasConfig.features.ypp.widgets.length}>
-          {atlasConfig.features.ypp.widgets.map((widget) => (
-            <CallToActionButton
-              icon={widget.icon && configYppIconMapper[widget.icon]}
-              key={widget.title}
-              external
-              colorVariant="lightBlue"
-              label={widget.title}
-              to={widget.link}
-            />
-          ))}
-        </CallToActionWrapper>
-      )}
-    </>
-  )
-}
diff --git a/packages/atlas/src/views/global/YppLandingView/oldSections/YppHero.styles.ts b/packages/atlas/src/views/global/YppLandingView/oldSections/YppHero.styles.ts
deleted file mode 100644
index 8f29f25b97..0000000000
--- a/packages/atlas/src/views/global/YppLandingView/oldSections/YppHero.styles.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import styled from '@emotion/styled'
-
-import { InfiniteCarousel } from '@/components/InfiniteCarousel/InfiniteCarousel'
-import { cVar, media, sizes } from '@/styles'
-
-import { imageShadow } from '../YppLandingView.styles'
-
-export const HeroImageWrapper = styled.div`
-  position: relative;
-  margin: ${sizes(16)} auto 0 auto;
-
-  ${media.lg} {
-    max-width: 1082px;
-  }
-`
-
-export const ButtonWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-`
-
-export const LogosContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: ${sizes(10)};
-  margin-bottom: ${sizes(6)};
-`
-
-export const SelectDifferentChannelButton = styled.button`
-  white-space: normal;
-  border: none;
-  background: none;
-  color: ${cVar('colorTextPrimary')};
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-
-  :hover,
-  :focus-visible {
-    text-decoration: underline;
-  }
-`
-
-export const FrontImage = styled.img`
-  width: 100%;
-  max-width: 100%;
-  height: auto;
-  display: block;
-  border-radius: ${cVar('radiusMedium')};
-  margin-top: 10%;
-  ${imageShadow}
-`
-
-export const BackImage = styled.img`
-  position: absolute;
-  width: 80%;
-  max-width: 100%;
-  height: auto;
-  display: block;
-  left: 10%;
-  top: -10%;
-  border-radius: ${cVar('radiusMedium')};
-`
-
-export const StyledInfiniteCarousel = styled(InfiniteCarousel)`
-  margin-top: ${sizes(16)};
-  ${media.md} {
-    margin-top: ${sizes(24)};
-  }
-`
diff --git a/packages/atlas/src/views/global/YppLandingView/oldSections/YppHero.tsx b/packages/atlas/src/views/global/YppLandingView/oldSections/YppHero.tsx
deleted file mode 100644
index 6a064b4b53..0000000000
--- a/packages/atlas/src/views/global/YppLandingView/oldSections/YppHero.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import { FC } from 'react'
-import { useParallax } from 'react-scroll-parallax'
-import { CSSTransition, SwitchTransition } from 'react-transition-group'
-import useResizeObserver from 'use-resize-observer'
-
-import { useMostPaidChannels } from '@/api/hooks/channel'
-import { SvgActionChevronR, SvgLogoGoogleWhiteFull, SvgLogoYoutubeWhiteFull } from '@/assets/icons'
-import hero from '@/assets/images/ypp-hero/hero.webp'
-import yt from '@/assets/images/ypp-hero/yt.webp'
-import { AppLogo } from '@/components/AppLogo'
-import { GridItem, LayoutGrid } from '@/components/LayoutGrid'
-import { Text } from '@/components/Text'
-import { Button } from '@/components/_buttons/Button'
-import { GoogleButton } from '@/components/_buttons/GoogleButton'
-import { PaidChannelCard } from '@/components/_channel/ChannelCard'
-import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
-import { atlasConfig } from '@/config'
-import { useMediaMatch } from '@/hooks/useMediaMatch'
-import { cVar, transitions } from '@/styles'
-import { useSectionTextVariants } from '@/views/global/YppLandingView/sections/useSectionTextVariants'
-
-import {
-  BackImage,
-  ButtonWrapper,
-  FrontImage,
-  HeroImageWrapper,
-  LogosContainer,
-  SelectDifferentChannelButton,
-  StyledInfiniteCarousel,
-} from './YppHero.styles'
-
-import {
-  GlowBox,
-  GlowContainer,
-  HeroBackgroundContainer,
-  StyledLimitedWidthContainerHero,
-} from '../YppLandingView.styles'
-
-export type YppAtlasStatus = 'have-channel' | 'no-channel' | 'ypp-signed' | 'connect-wallet' | null
-
-type YppHeroProps = {
-  onSignUpClick: () => void
-  onSelectChannel: () => void
-  yppAtlasStatus: YppAtlasStatus
-  hasAnotherUnsyncedChannel?: boolean
-  selectedChannelTitle?: string | null
-}
-
-export const YppHero: FC<YppHeroProps> = ({
-  onSignUpClick,
-  onSelectChannel,
-  yppAtlasStatus,
-  hasAnotherUnsyncedChannel,
-  selectedChannelTitle,
-}) => {
-  const smMatch = useMediaMatch('sm')
-  const { ref, width, height } = useResizeObserver({ box: 'border-box' })
-  const [, subtitleVariant, titleVariant] = useSectionTextVariants()
-  const endScroll = smMatch ? window.innerHeight / 3 : window.innerHeight
-  const { ref: heroImageRef } = useParallax<HTMLImageElement>({
-    startScroll: 0,
-    endScroll,
-    translateY: [0, -15],
-  })
-
-  const { channels, loading } = useMostPaidChannels()
-  const items = !loading
-    ? channels?.map((channel) => <PaidChannelCard key={channel.id} channel={channel} />)
-    : Array.from({ length: 30 }).map((_, idx) => <PaidChannelCard key={idx} loading />)
-
-  return (
-    <HeroBackgroundContainer noBackground>
-      <StyledLimitedWidthContainerHero ref={ref} centerText>
-        <GlowContainer>
-          <GlowBox walkHeight={height ?? 0} walkWidth={width ?? 0} />
-        </GlowContainer>
-        <LayoutGrid as="header">
-          <GridItem colSpan={{ base: 12, sm: 10, md: 12, lg: 10 }} colStart={{ sm: 2, md: 1, lg: 2 }}>
-            <LogosContainer>
-              <AppLogo
-                variant="full"
-                height={32}
-                width={undefined}
-                data-aos="fade-up"
-                data-aos-delay="150"
-                data-aos-offset="120"
-                data-aos-easing="atlas-easing"
-              />
-            </LogosContainer>
-            <Text
-              as="h1"
-              variant={titleVariant}
-              data-aos="fade-up"
-              data-aos-delay="250"
-              data-aos-offset="80"
-              data-aos-easing="atlas-easing"
-            >
-              Connect your YouTube channel & get paid
-            </Text>
-          </GridItem>
-          <GridItem colSpan={{ base: 12, sm: 10, md: 8, lg: 6 }} colStart={{ sm: 2, md: 3, lg: 4 }}>
-            <Text
-              as="p"
-              variant={subtitleVariant}
-              color="colorText"
-              margin={{ top: 4, bottom: 12 }}
-              data-aos="fade-up"
-              data-aos-delay="350"
-              data-aos-offset="40"
-              data-aos-easing="atlas-easing"
-            >
-              YouTube videos get automatically synced to your {atlasConfig.general.appName} channel, without any
-              additional effort.
-            </Text>
-          </GridItem>
-
-          <GridItem colSpan={{ base: 12, sm: 8 }} colStart={{ sm: 3 }}>
-            <LogosContainer data-aos="fade-up" data-aos-delay="350" data-aos-offset="40" data-aos-easing="atlas-easing">
-              <SvgLogoYoutubeWhiteFull />
-              <SvgLogoGoogleWhiteFull />
-            </LogosContainer>
-            <ButtonWrapper data-aos="fade-up" data-aos-delay="450" data-aos-offset="40" data-aos-easing="atlas-easing">
-              <SwitchTransition>
-                <CSSTransition
-                  timeout={parseInt(cVar('animationTimingFast', true))}
-                  key={yppAtlasStatus ? 'status-set' : 'loading'}
-                  classNames={transitions.names.fade}
-                >
-                  {yppAtlasStatus ? (
-                    yppAtlasStatus === 'ypp-signed' ? (
-                      <Button
-                        size="large"
-                        variant="secondary"
-                        icon={<SvgActionChevronR />}
-                        iconPlacement="right"
-                        onClick={onSignUpClick}
-                      >
-                        Go to dashboard
-                      </Button>
-                    ) : (
-                      <GoogleButton id="rewards-sync-button" onClick={onSignUpClick} />
-                    )
-                  ) : (
-                    <SkeletonLoader width={190} height={48} />
-                  )}
-                </CSSTransition>
-              </SwitchTransition>
-            </ButtonWrapper>
-          </GridItem>
-        </LayoutGrid>
-        <LayoutGrid data-aos="fade-up" data-aos-delay="450" data-aos-offset="40" data-aos-easing="atlas-easing">
-          <GridItem colStart={{ base: 1, sm: 3, md: 4, lg: 5 }} colSpan={{ base: 12, sm: 8, md: 6, lg: 4 }}>
-            <Text
-              as="p"
-              variant="t100"
-              color="colorTextMuted"
-              margin={{ top: hasAnotherUnsyncedChannel && selectedChannelTitle ? 4 : 2 }}
-            >
-              {hasAnotherUnsyncedChannel && selectedChannelTitle && (
-                <>
-                  Your channel "{selectedChannelTitle}" is already part of the YouTube Partner Program.{' '}
-                  <SelectDifferentChannelButton onClick={onSelectChannel} color="colorTextPrimary">
-                    Select a different channel
-                  </SelectDifferentChannelButton>{' '}
-                  to apply again.
-                </>
-              )}
-              {yppAtlasStatus !== 'ypp-signed' && 'It takes under 1 minute and is 100% free.'}
-            </Text>
-          </GridItem>
-        </LayoutGrid>
-        <HeroImageWrapper data-aos="fade-up" data-aos-delay="550" data-aos-offset="80" data-aos-easing="atlas-easing">
-          <BackImage src={yt} alt="Hero back" width="1152" height="824" />
-          <FrontImage ref={heroImageRef} src={hero} alt="Hero front" width="1152" height="824" />
-        </HeroImageWrapper>
-      </StyledLimitedWidthContainerHero>
-      {items && items.length >= 7 && (
-        <StyledInfiniteCarousel
-          headerGridItemProps={{ colStart: { base: 1, lg: 2 }, colSpan: { base: 12, lg: 10 } }}
-          carouselHorizonthalOffset={-32}
-          title="Signed up channels"
-          itemWidth={260}
-          items={items}
-          subTitle="What is a verified channel?"
-          informationProps={{
-            multiline: true,
-            placement: 'top-end',
-            text: `These ${atlasConfig.general.appName} channels applied to the YouTube Partner Program and got through the verification process successfully.`,
-          }}
-        />
-      )}
-    </HeroBackgroundContainer>
-  )
-}
diff --git a/packages/atlas/src/views/global/YppLandingView/oldSections/YppRewardSection.styles.ts b/packages/atlas/src/views/global/YppLandingView/oldSections/YppRewardSection.styles.ts
deleted file mode 100644
index 4f74261f00..0000000000
--- a/packages/atlas/src/views/global/YppLandingView/oldSections/YppRewardSection.styles.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import styled from '@emotion/styled'
-
-import { GridItem } from '@/components/LayoutGrid'
-import { Button } from '@/components/_buttons/Button'
-import { cVar, media, sizes } from '@/styles'
-import { Anchor } from '@/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.styles'
-
-export const BenefitsCardButton = styled(Button)`
-  border-radius: 999px;
-`
-
-export const BenefitsCardsButtonsGroup = styled.div`
-  text-align: center;
-  display: grid;
-  overflow-x: auto;
-  white-space: nowrap;
-  margin: ${sizes(16)} 0 ${sizes(8)} 0;
-
-  ::-webkit-scrollbar {
-    display: none;
-  }
-
-  gap: ${sizes(2)};
-
-  ${media.sm} {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  ${media.md} {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  ${media.lg} {
-    grid-template-columns: repeat(6, 1fr);
-  }
-`
-
-export const BenefitsCardsContainerGridItem = styled(GridItem)`
-  display: grid;
-  gap: ${sizes(2)};
-`
-
-export const ColorAnchor = styled(Anchor)`
-  color: ${cVar('colorTextPrimary')};
-`
-
-export const RewardsSubtitleGridItem = styled(GridItem)`
-  display: grid;
-  gap: ${sizes(4)};
-  margin-top: ${sizes(8)};
-`
-
-export const RewardsSubtitleWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-`
diff --git a/packages/atlas/src/views/global/YppLandingView/oldSections/YppRewardSection.tsx b/packages/atlas/src/views/global/YppLandingView/oldSections/YppRewardSection.tsx
deleted file mode 100644
index b1b2907e96..0000000000
--- a/packages/atlas/src/views/global/YppLandingView/oldSections/YppRewardSection.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { FC, useRef } from 'react'
-
-import { Information } from '@/components/Information'
-import { FlexGridItem, GridItem, LayoutGrid } from '@/components/LayoutGrid'
-import { Text } from '@/components/Text'
-import { TooltipText } from '@/components/Tooltip/Tooltip.styles'
-import { TierCard } from '@/components/_ypp/TierCard'
-import { atlasConfig } from '@/config'
-import { useMediaMatch } from '@/hooks/useMediaMatch'
-import { getTierRewards } from '@/utils/ypp'
-import { useSectionTextVariants } from '@/views/global/YppLandingView/sections/useSectionTextVariants'
-
-import { ColorAnchor } from './YppRewardSection.styles'
-
-import {
-  BackgroundContainer,
-  CenteredLayoutGrid,
-  RewardsSubText,
-  StyledLimitedWidthContainer,
-  TierCardWrapper,
-} from '../YppLandingView.styles'
-
-export const calculateReward = (
-  amount: number | number[] | { min: number | null; max: number } | null,
-  multiplier: number | number[],
-  tier: number
-) => {
-  if (amount === null) {
-    return null
-  } else if (typeof amount === 'number') {
-    return {
-      type: 'number' as const,
-      amount: amount * (typeof multiplier === 'number' ? multiplier : multiplier[tier]),
-    }
-  } else if (Array.isArray(amount)) {
-    return {
-      type: 'number' as const,
-      amount: amount[tier],
-    }
-  } else {
-    return { type: 'range' as const, min: amount.min, max: amount.max }
-  }
-}
-
-export const YppRewardSection: FC = () => {
-  const mdMatch = useMediaMatch('md')
-  const tiers = atlasConfig.features.ypp.tiersDefinition
-  const [titleVariant, subtitleVariant] = useSectionTextVariants()
-  const ref = useRef<HTMLDivElement>(null)
-
-  if (!tiers?.length) {
-    return null
-  }
-
-  return (
-    <BackgroundContainer noBackground>
-      <StyledLimitedWidthContainer as="section">
-        <CenteredLayoutGrid>
-          <GridItem colSpan={{ base: 12, sm: 10, md: 12, lg: 8 }} colStart={{ sm: 2, md: 1, lg: 3 }}>
-            <Text
-              variant={titleVariant}
-              as="h2"
-              data-aos="fade-up"
-              data-aos-delay="0"
-              data-aos-offset="80"
-              data-aos-easing="atlas-easing"
-            >
-              Rewards based on quality and popularity
-            </Text>
-          </GridItem>
-          <FlexGridItem colSpan={{ base: 12, sm: 10, md: 8, lg: 6 }} colStart={{ sm: 2, md: 3, lg: 4 }}>
-            <Text
-              variant={subtitleVariant}
-              as="p"
-              margin={{ top: 4, bottom: mdMatch ? 16 : 12 }}
-              color="colorText"
-              data-aos="fade-up"
-              data-aos-delay="100"
-              data-aos-offset="40"
-              data-aos-easing="atlas-easing"
-            >
-              Each participating channel is reviewed by the verification team and assigned to one of the reward tiers
-              below
-            </Text>
-          </FlexGridItem>
-        </CenteredLayoutGrid>
-        <LayoutGrid>
-          <TierCardWrapper colSpan={{ base: 12, sm: 10, md: 12, lg: 10 }} colStart={{ sm: 2, md: 1, lg: 2 }}>
-            {tiers.map((tier) => {
-              const signupMultiplier = tier.tier === 'bronze' ? 1 : atlasConfig.features.ypp.tierBoostMultiplier || 1
-              const referralMultiplier = atlasConfig.features.ypp.tierBoostMultiplier || 1
-              const modifiedRewards = [
-                tier.rewards[0] * signupMultiplier,
-                tier.rewards[1],
-                (getTierRewards('diamond')?.referral || 0) * referralMultiplier,
-              ]
-              return <TierCard key={tier.tier} {...tier} rewards={modifiedRewards} />
-            })}
-            <RewardsSubText variant="t200" as="p" color="colorTextMuted">
-              *Referral rewards depend on the tier of the invited channel.
-            </RewardsSubText>
-          </TierCardWrapper>
-          <FlexGridItem
-            colSpan={{ base: 12, sm: 10, md: 12, lg: 10 }}
-            colStart={{ sm: 2, md: 1, lg: 2 }}
-            alignItems="center"
-            marginTop={mdMatch ? -2 : 0}
-            justifyContent="end"
-          >
-            <Text variant="t200" as="p" color="colorText">
-              Payments are made in {atlasConfig.joystream.tokenTicker} tokens
-            </Text>
-            <Information
-              interactive
-              customContent={
-                <TooltipText as="span" variant="t100">
-                  {atlasConfig.joystream.tokenTicker} token is a native crypto asset of Joystream blockchain which
-                  powers {atlasConfig.general.appName}. It is used for trading Creator Tokens, NFTs and covering
-                  blockchain processing fees. It is also used for voting on proposals and partaking in council
-                  elections.{' '}
-                  <ColorAnchor href="https://www.joystream.org/token/" target="_blank">
-                    Purchase {atlasConfig.joystream.tokenTicker}
-                  </ColorAnchor>
-                </TooltipText>
-              }
-              multiline
-              reference={ref.current}
-            />
-          </FlexGridItem>
-        </LayoutGrid>
-      </StyledLimitedWidthContainer>
-    </BackgroundContainer>
-  )
-}
diff --git a/packages/atlas/src/views/global/YppLandingView/oldSections/YppSignupVideo.tsx b/packages/atlas/src/views/global/YppLandingView/oldSections/YppSignupVideo.tsx
deleted file mode 100644
index d43a96c59f..0000000000
--- a/packages/atlas/src/views/global/YppLandingView/oldSections/YppSignupVideo.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import styled from '@emotion/styled'
-
-import { GridItem } from '@/components/LayoutGrid'
-import { Text } from '@/components/Text'
-import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
-import { useMediaMatch } from '@/hooks/useMediaMatch'
-import {
-  BackgroundContainer,
-  CenteredLayoutGrid,
-  StyledLimitedWidthContainerVideo,
-} from '@/views/global/YppLandingView/YppLandingView.styles'
-import { useSectionTextVariants } from '@/views/global/YppLandingView/sections/useSectionTextVariants'
-
-export const YppSignupVideo = () => {
-  const mdMatch = useMediaMatch('md')
-  const [titleVariant, subtitleVariant] = useSectionTextVariants()
-
-  return (
-    <BackgroundContainer noBackground>
-      <StyledLimitedWidthContainerVideo noBottomPadding>
-        <CenteredLayoutGrid data-aos="fade-up" data-aos-delay="0" data-aos-offset="80" data-aos-easing="atlas-easing">
-          <GridItem colSpan={{ base: 12, sm: 10, md: 8, lg: 6 }} colStart={{ sm: 2, md: 3, lg: 4 }}>
-            <Text variant={titleVariant} as="h1">
-              Sign up in 60 seconds
-            </Text>
-            <Text
-              variant={subtitleVariant}
-              as="p"
-              color="colorText"
-              align="center"
-              margin={{ top: 4, bottom: mdMatch ? 16 : 12 }}
-            >
-              Watch the sign up demo by one of Joystream members.
-            </Text>
-          </GridItem>
-          <GridItem colSpan={{ base: 12, sm: 10, md: 8, lg: 6 }} colStart={{ sm: 2, md: 3, lg: 4 }}>
-            <PlayerContainer
-              data-aos="fade-up"
-              data-aos-delay="100"
-              data-aos-offset="40"
-              data-aos-easing="atlas-easing"
-            >
-              <IframeVideo
-                src="https://player.vimeo.com/video/875953807?badge=0&amp;autopause=0&amp;quality_selector=1&amp;progress_bar=1&amp;player_id=0&amp;app_id=58479"
-                allow="autoplay; fullscreen; picture-in-picture"
-                title="YPP"
-              />
-            </PlayerContainer>
-          </GridItem>
-        </CenteredLayoutGrid>
-      </StyledLimitedWidthContainerVideo>
-    </BackgroundContainer>
-  )
-}
-
-const PlayerContainer = styled.div`
-  width: 100%;
-  position: relative;
-  aspect-ratio: 16/9;
-`
-
-export const PlayerSkeletonLoader = styled(SkeletonLoader)`
-  position: absolute;
-  top: 0;
-`
-
-const IframeVideo = styled.iframe`
-  border: none;
-  width: 640px;
-  height: 364px;
-  max-width: 100%;
-  max-height: 55vw;
-`
diff --git a/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx b/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx
index 5b89c27aa4..98758fbc1d 100644
--- a/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx
+++ b/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx
@@ -158,6 +158,7 @@ export const YppHero: FC<YppHeroProps> = ({ onSignUpClick, yppAtlasStatus, onVie
                             fullWidth={!xsMatch}
                             size={xxsMatch && !xsMatch ? 'large' : smMatch ? 'large' : 'medium'}
                             variant="secondary"
+                            id="rewards-new-channel-button"
                           >
                             Create New Channel
                           </Button>
diff --git a/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtMarketTab.tsx b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtMarketTab.tsx
index 9b1e35dc04..dc45cf9830 100644
--- a/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtMarketTab.tsx
+++ b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtMarketTab.tsx
@@ -100,7 +100,11 @@ export const CrtMarketTab = ({ token }: CrtMarketTabProps) => {
           }}
         />
       </FlexBox>
-      <AmmTransactionsTable loading={loading} data={data?.ammCurves[0].transactions ?? []} />
+      <AmmTransactionsTable
+        symbol={token.symbol ?? 'N/A'}
+        loading={loading}
+        data={data?.ammCurves[0].transactions ?? []}
+      />
     </>
   )
 }
diff --git a/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardMainTab.tsx b/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardMainTab.tsx
index f1f4d57979..abe6917fd0 100644
--- a/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardMainTab.tsx
+++ b/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardMainTab.tsx
@@ -53,7 +53,7 @@ const benefitsMetadata = {
   },
   twitterPost: {
     title: 'Post on X',
-    description: `Follow JoystreamDAO on X and post about why you signed up to ${atlasConfig.general.appName} using hashtag #${atlasConfig.general.appName}Web3Creators mentioning @JoystreamDAO to get a chance of weekly reward.`,
+    description: `Follow JoystreamDAO on X and post about why you signed up to ${atlasConfig.general.appName} using hashtag #${atlasConfig.general.appName}Web3Creators mentioning @JoystreamDAO and your ${atlasConfig.general.appName} Channel Name to get a chance of weekly reward.`,
     reward: '10 USD',
     actionLink: 'https://twitter.com/joystreamdao?lang=en',
     tooltipLink:
@@ -491,7 +491,7 @@ export const YppDashboardMainTab: FC = () => {
             rewardNode={benefitsMetadata.shareNft.reward}
             description={
               <>
-                Drop the link of your post to{' '}
+                Share NFT from Gleev on social media of your choice and drop the link of your post to{' '}
                 <TextButton to={atlasConfig.general.joystreamDiscordUrl}>#shared-NFTs</TextButton> on Discord to
                 participate in rewards.
               </>
@@ -518,7 +518,7 @@ export const YppDashboardMainTab: FC = () => {
             rewardNode={benefitsMetadata.shareToken.reward}
             description={
               <>
-                Drop the link of your post to{' '}
+                Share your CRT page from Gleev on social media of your choice and drop the link of your post to{' '}
                 <TextButton to={atlasConfig.general.joystreamDiscordUrl}>#shared-CRTs</TextButton> on Discord to
                 participate in rewards.
               </>
@@ -595,7 +595,7 @@ const SilverTierWrapper = styled(TierWrapper)`
 
 export const BenefitsContainer = ({ children, title }: { children: ReactNode[] | ReactNode; title: string }) => {
   const drawer = useRef<HTMLDivElement>(null)
-  const [isDrawerActive, setDrawerActive] = useState(true)
+  const [isDrawerActive, setDrawerActive] = useState(false)
 
   return (
     <StyledGridItem colSpan={{ xxs: 12 }}>
diff --git a/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx b/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx
index 73b10e6035..401cbbfddd 100644
--- a/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx
+++ b/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx
@@ -7,6 +7,7 @@ import { useParams, useSearchParams } from 'react-router-dom'
 import { useChannelNftCollectors, useFullChannel } from '@/api/hooks/channel'
 import { useVideoCount } from '@/api/hooks/video'
 import { OwnedNftOrderByInput, VideoOrderByInput } from '@/api/queries/__generated__/baseTypes.generated'
+import { useGetFullCreatorTokenQuery } from '@/api/queries/__generated__/creatorTokens.generated'
 import { useGetNftsCountQuery } from '@/api/queries/__generated__/nfts.generated'
 import { SvgActionCheck, SvgActionFilters, SvgActionFlag, SvgActionMore, SvgActionPlus } from '@/assets/icons'
 import { ChannelTitle } from '@/components/ChannelTitle'
@@ -24,6 +25,7 @@ import { CollectorsBox } from '@/components/_channel/CollectorsBox'
 import { ContextMenu } from '@/components/_overlays/ContextMenu'
 import { ReportModal } from '@/components/_overlays/ReportModal'
 import { atlasConfig } from '@/config'
+import { getPublicCryptoVideoFilter } from '@/config/contentFilter'
 import { absoluteRoutes } from '@/config/routes'
 import { NFT_SORT_OPTIONS, VIDEO_SORT_OPTIONS } from '@/config/sorting'
 import { useGetAssetUrl } from '@/hooks/useGetAssetUrl'
@@ -91,21 +93,17 @@ export const ChannelView: FC = () => {
   const filteredTabs = TABS.filter((tab) =>
     tab === 'Token' ? !!tab && (isChannelOwner || !!channel?.creatorToken?.token.id) : !!tab
   )
+  const { data: tokenData } = useGetFullCreatorTokenQuery({
+    variables: { id: channel?.creatorToken?.token.id ?? '' },
+    skip: !channel?.creatorToken?.token.id,
+  })
   const { videoCount } = useVideoCount({
-    where: {
+    where: getPublicCryptoVideoFilter({
       channel: {
         id_eq: id,
       },
-      isPublic_eq: true,
       createdAt_lt: USER_TIMESTAMP,
-      isCensored_eq: false,
-      thumbnailPhoto: {
-        isAccepted_eq: true,
-      },
-      media: {
-        isAccepted_eq: true,
-      },
-    },
+    }),
   })
   const { data: nftCountData } = useGetNftsCountQuery({
     variables: {
@@ -220,7 +218,14 @@ export const ChannelView: FC = () => {
 
   const mappedTabs = filteredTabs.map((tab) => ({
     name: tab,
-    pillText: tab === 'Videos' ? videoCount : tab === 'NFTs' ? nftCountData?.ownedNftsConnection.totalCount : undefined,
+    pillText:
+      tab === 'Videos'
+        ? videoCount
+        : tab === 'NFTs'
+        ? nftCountData?.ownedNftsConnection.totalCount
+        : tab === 'Token'
+        ? tokenData?.creatorTokenById?.symbol ?? undefined
+        : undefined,
   }))
 
   const getChannelContent = (tab: (typeof TABS)[number]) => {
diff --git a/packages/atlas/src/views/viewer/ChannelView/ChannelViewTabs/ChannelVideos.tsx b/packages/atlas/src/views/viewer/ChannelView/ChannelViewTabs/ChannelVideos.tsx
index f3d82771b7..6472716bb6 100644
--- a/packages/atlas/src/views/viewer/ChannelView/ChannelViewTabs/ChannelVideos.tsx
+++ b/packages/atlas/src/views/viewer/ChannelView/ChannelViewTabs/ChannelVideos.tsx
@@ -7,6 +7,7 @@ import { EmptyFallback } from '@/components/EmptyFallback'
 import { Grid } from '@/components/Grid'
 import { ViewErrorFallback } from '@/components/ViewErrorFallback'
 import { VideoTileViewer } from '@/components/_video/VideoTileViewer'
+import { getPublicCryptoVideoFilter } from '@/config/contentFilter'
 import { transitions } from '@/styles'
 import { createPlaceholderData } from '@/utils/data'
 import { SentryLogger } from '@/utils/logs'
@@ -49,21 +50,12 @@ export const ChannelVideos: FC<ChannelVideosProps> = ({
       orderBy: sortVideosBy,
       limit: tilesPerPage,
       offset: currentPage * tilesPerPage,
-      where: {
+      where: getPublicCryptoVideoFilter({
         channel: {
           id_eq: channelId,
         },
-        isPublic_eq: true,
         createdAt_lt: USER_TIMESTAMP,
-        isCensored_eq: false,
-        isShort_eq: false,
-        thumbnailPhoto: {
-          isAccepted_eq: true,
-        },
-        media: {
-          isAccepted_eq: true,
-        },
-      },
+      }),
     },
   })
 
diff --git a/packages/atlas/src/views/viewer/MarketplaceView/tabs/MarketplaceCrtTab.tsx b/packages/atlas/src/views/viewer/CrtMarketplaceView/CrtMarketplaceView.tsx
similarity index 78%
rename from packages/atlas/src/views/viewer/MarketplaceView/tabs/MarketplaceCrtTab.tsx
rename to packages/atlas/src/views/viewer/CrtMarketplaceView/CrtMarketplaceView.tsx
index 76714134c1..f11c726d1a 100644
--- a/packages/atlas/src/views/viewer/MarketplaceView/tabs/MarketplaceCrtTab.tsx
+++ b/packages/atlas/src/views/viewer/CrtMarketplaceView/CrtMarketplaceView.tsx
@@ -9,13 +9,15 @@ import { Section } from '@/components/Section/Section'
 import { TopEarningChannels } from '@/components/TopEarningChannels'
 import { AllTokensSection } from '@/components/_crt/AllTokensSection'
 import { CrtCard, CrtSaleTypes } from '@/components/_crt/CrtCard/CrtCard'
+import { useHeadTags } from '@/hooks/useHeadTags'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
 import { hapiBnToTokenNumber } from '@/joystream-lib/utils'
-import { TableFullWitdhtWrapper } from '@/views/viewer/MarketplaceView/MarketplaceView.styles'
+import { cVar, media, sizes } from '@/styles'
 
-import { responsive } from '../FeaturedNftsSection/FeaturedNftsSection'
+import { responsive } from '../NftMarketplaceView/FeaturedNftsSection/FeaturedNftsSection'
 
-export const MarketplaceCrtTab = () => {
+export const CrtMarketplaceView = () => {
+  const headTags = useHeadTags('CRT - Marketplace')
   const mdMatch = useMediaMatch('md')
   const { data, loading } = useGetBasicCreatorTokensQuery({
     variables: {
@@ -66,7 +68,8 @@ export const MarketplaceCrtTab = () => {
     ) ?? []
 
   return (
-    <>
+    <MarketplaceWrapper>
+      {headTags}
       <MarketplaceCarousel type="crt" crts={filteredTokens ?? []} isLoading={loading} />
 
       {featuredCrts.length > 4 && (
@@ -91,10 +94,31 @@ export const MarketplaceCrtTab = () => {
         </LimitedWidthContainer>
       </TableFullWitdhtWrapper>
       <AllTokensSection />
-    </>
+    </MarketplaceWrapper>
   )
 }
 
 const StyledCrtCard = styled(CrtCard)`
   min-height: 100%;
 `
+
+const MarketplaceWrapper = styled.div`
+  padding: ${sizes(4)} 0;
+  display: grid;
+  gap: ${sizes(8)};
+  ${media.md} {
+    padding: ${sizes(8)} 0;
+    gap: ${sizes(16)};
+  }
+`
+
+const TableFullWitdhtWrapper = styled.div`
+  width: calc(100% + var(--size-global-horizontal-padding) * 2);
+  margin-left: calc(var(--size-global-horizontal-padding) * -1);
+  background-color: ${cVar('colorBackgroundMuted')};
+  padding: ${sizes(8)} var(--size-global-horizontal-padding);
+
+  ${media.md} {
+    padding: ${sizes(16)} var(--size-global-horizontal-padding);
+  }
+`
diff --git a/packages/atlas/src/views/viewer/CrtMarketplaceView/index.ts b/packages/atlas/src/views/viewer/CrtMarketplaceView/index.ts
new file mode 100644
index 0000000000..d0764ec3cd
--- /dev/null
+++ b/packages/atlas/src/views/viewer/CrtMarketplaceView/index.ts
@@ -0,0 +1 @@
+export * from './CrtMarketplaceView'
diff --git a/packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.styles.ts b/packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.styles.ts
deleted file mode 100644
index cba5c97eb8..0000000000
--- a/packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.styles.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import styled from '@emotion/styled'
-
-import { cVar, media, sizes } from '@/styles'
-
-export const MarketplaceWrapper = styled.div`
-  padding: ${sizes(4)} 0;
-  display: grid;
-  gap: ${sizes(8)};
-  ${media.md} {
-    padding: ${sizes(8)} 0;
-    gap: ${sizes(16)};
-  }
-`
-
-export const TableFullWitdhtWrapper = styled.div`
-  width: calc(100% + var(--size-global-horizontal-padding) * 2);
-  margin-left: calc(var(--size-global-horizontal-padding) * -1);
-  background-color: ${cVar('colorBackgroundMuted')};
-  padding: ${sizes(8)} var(--size-global-horizontal-padding);
-
-  ${media.md} {
-    padding: ${sizes(16)} var(--size-global-horizontal-padding);
-  }
-`
diff --git a/packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.tsx b/packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.tsx
deleted file mode 100644
index 1c65cea9ad..0000000000
--- a/packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { FC, useCallback } from 'react'
-import { useSearchParams } from 'react-router-dom'
-
-import { SvgActionCreatorToken, SvgActionPlay } from '@/assets/icons'
-import { useMediaMatch } from '@/hooks/useMediaMatch'
-import { useMountEffect } from '@/hooks/useMountEffect'
-import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
-import { StyledPageTabs } from '@/views/viewer/PortfolioView'
-
-import { MarketplaceWrapper } from './MarketplaceView.styles'
-import { MarketplaceCrtTab } from './tabs/MarketplaceCrtTab'
-import { MarketplaceNftTab } from './tabs/MarketplaceNftTab'
-
-const TABS = [
-  {
-    name: 'Creator Tokens',
-    description: 'Discover channels you can invest in',
-    icon: <SvgActionCreatorToken />,
-  },
-  {
-    name: 'Video NFTs',
-    description: 'Explore offers of non-fungible tokens for popular videos',
-    icon: <SvgActionPlay />,
-  },
-] as const
-type TabsNames = (typeof TABS)[number]['name']
-
-const getTabIndex = (tabName: TabsNames, allTabs: typeof TABS): number =>
-  allTabs.findIndex((tab) => tab.name === tabName)
-
-export const MarketplaceView: FC = () => {
-  const smMatch = useMediaMatch('sm')
-  const [searchParams, setSearchParams] = useSearchParams()
-  const { trackPageView } = useSegmentAnalytics()
-  const currentTabName = searchParams.get('tab') as (typeof TABS)[number]['name'] | null
-  const currentTab = currentTabName ? getTabIndex(currentTabName, TABS) : 0
-
-  useMountEffect(() => {
-    if (currentTab === -1) {
-      setSearchParams({ 'tab': '0' }, { replace: true })
-    } else {
-      trackPageView(`${TABS[currentTab].name} Marketplace`)
-    }
-  })
-
-  const handleChangeTab = useCallback(
-    (idx: number) => {
-      trackPageView(`${TABS[idx].name} Marketplace`)
-      setSearchParams({ tab: TABS[idx].name })
-    },
-    [setSearchParams, trackPageView]
-  )
-
-  return (
-    <>
-      <StyledPageTabs
-        isBig
-        tabs={TABS.map((tab) => (smMatch ? tab : { ...tab, description: '' }))}
-        onSelectTab={handleChangeTab}
-        selected={currentTab}
-      />
-
-      <MarketplaceWrapper>
-        {currentTab === 0 && <MarketplaceCrtTab />}
-        {currentTab === 1 && <MarketplaceNftTab />}
-      </MarketplaceWrapper>
-    </>
-  )
-}
diff --git a/packages/atlas/src/views/viewer/MarketplaceView/index.ts b/packages/atlas/src/views/viewer/MarketplaceView/index.ts
deleted file mode 100644
index 532bfd5251..0000000000
--- a/packages/atlas/src/views/viewer/MarketplaceView/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './MarketplaceView'
diff --git a/packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeatureNftModal.tsx b/packages/atlas/src/views/viewer/NftMarketplaceView/FeaturedNftsSection/FeatureNftModal.tsx
similarity index 100%
rename from packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeatureNftModal.tsx
rename to packages/atlas/src/views/viewer/NftMarketplaceView/FeaturedNftsSection/FeatureNftModal.tsx
diff --git a/packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeaturedNftsSection.styles.ts b/packages/atlas/src/views/viewer/NftMarketplaceView/FeaturedNftsSection/FeaturedNftsSection.styles.ts
similarity index 100%
rename from packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeaturedNftsSection.styles.ts
rename to packages/atlas/src/views/viewer/NftMarketplaceView/FeaturedNftsSection/FeaturedNftsSection.styles.ts
diff --git a/packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeaturedNftsSection.tsx b/packages/atlas/src/views/viewer/NftMarketplaceView/FeaturedNftsSection/FeaturedNftsSection.tsx
similarity index 100%
rename from packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeaturedNftsSection.tsx
rename to packages/atlas/src/views/viewer/NftMarketplaceView/FeaturedNftsSection/FeaturedNftsSection.tsx
diff --git a/packages/atlas/src/views/viewer/MarketplaceView/tabs/MarketplaceNftTab.tsx b/packages/atlas/src/views/viewer/NftMarketplaceView/NftMarketplaceView.tsx
similarity index 54%
rename from packages/atlas/src/views/viewer/MarketplaceView/tabs/MarketplaceNftTab.tsx
rename to packages/atlas/src/views/viewer/NftMarketplaceView/NftMarketplaceView.tsx
index 740b743539..2c9c6b9297 100644
--- a/packages/atlas/src/views/viewer/MarketplaceView/tabs/MarketplaceNftTab.tsx
+++ b/packages/atlas/src/views/viewer/NftMarketplaceView/NftMarketplaceView.tsx
@@ -1,19 +1,22 @@
+import styled from '@emotion/styled'
+
 import { useFeaturedNftsVideos } from '@/api/hooks/nfts'
 import { AllNftSection } from '@/components/AllNftSection'
 import { LimitedWidthContainer } from '@/components/LimitedWidthContainer'
 import { MarketplaceCarousel } from '@/components/NftCarousel/MarketplaceCarousel'
 import { TopSellingChannelsTable } from '@/components/TopSellingChannelsTable'
 import { useHeadTags } from '@/hooks/useHeadTags'
-import { FeaturedNftsSection } from '@/views/viewer/MarketplaceView/FeaturedNftsSection/FeaturedNftsSection'
-import { TableFullWitdhtWrapper } from '@/views/viewer/MarketplaceView/MarketplaceView.styles'
+import { cVar, media, sizes } from '@/styles'
+
+import { FeaturedNftsSection } from './FeaturedNftsSection/FeaturedNftsSection'
 
-export const MarketplaceNftTab = () => {
+export const NftMarketplaceView = () => {
   const headTags = useHeadTags('NFT - Marketplace')
 
   const { nfts, loading } = useFeaturedNftsVideos()
 
   return (
-    <>
+    <MarketplaceWrapper>
       {headTags}
       <MarketplaceCarousel type="nft" nfts={nfts ?? []} isLoading={loading} />
       <FeaturedNftsSection />
@@ -25,6 +28,27 @@ export const MarketplaceNftTab = () => {
       <LimitedWidthContainer big noBottomPadding fullWidth>
         <AllNftSection />
       </LimitedWidthContainer>
-    </>
+    </MarketplaceWrapper>
   )
 }
+
+const MarketplaceWrapper = styled.div`
+  padding: ${sizes(4)} 0;
+  display: grid;
+  gap: ${sizes(8)};
+  ${media.md} {
+    padding: ${sizes(8)} 0;
+    gap: ${sizes(16)};
+  }
+`
+
+const TableFullWitdhtWrapper = styled.div`
+  width: calc(100% + var(--size-global-horizontal-padding) * 2);
+  margin-left: calc(var(--size-global-horizontal-padding) * -1);
+  background-color: ${cVar('colorBackgroundMuted')};
+  padding: ${sizes(8)} var(--size-global-horizontal-padding);
+
+  ${media.md} {
+    padding: ${sizes(16)} var(--size-global-horizontal-padding);
+  }
+`
diff --git a/packages/atlas/src/views/viewer/NftMarketplaceView/index.ts b/packages/atlas/src/views/viewer/NftMarketplaceView/index.ts
new file mode 100644
index 0000000000..36e729502b
--- /dev/null
+++ b/packages/atlas/src/views/viewer/NftMarketplaceView/index.ts
@@ -0,0 +1 @@
+export * from './NftMarketplaceView'
diff --git a/packages/atlas/src/views/viewer/PortfolioView/tabs/PortfolioNftTab.tsx b/packages/atlas/src/views/viewer/PortfolioView/tabs/PortfolioNftTab.tsx
index 40df727aa4..ff27b5fb23 100644
--- a/packages/atlas/src/views/viewer/PortfolioView/tabs/PortfolioNftTab.tsx
+++ b/packages/atlas/src/views/viewer/PortfolioView/tabs/PortfolioNftTab.tsx
@@ -60,7 +60,7 @@ export const PortfolioNftTab = () => {
             title="You don’t own any NFTs yet"
             subtitle="When you buy any NFTs you will be able to manage them and view from this page."
             button={
-              <Button size="large" variant="secondary" to={absoluteRoutes.viewer.marketplace()}>
+              <Button size="large" variant="secondary" to={absoluteRoutes.viewer.nftMarketplace()}>
                 Explore NFTs
               </Button>
             }
diff --git a/packages/atlas/src/views/viewer/VideoView/CommentThread.tsx b/packages/atlas/src/views/viewer/VideoView/CommentThread.tsx
index 324634dd69..96840a16d0 100644
--- a/packages/atlas/src/views/viewer/VideoView/CommentThread.tsx
+++ b/packages/atlas/src/views/viewer/VideoView/CommentThread.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled'
 import { FC, memo, useState } from 'react'
 
-import { UserCommentReactions, useComment, useCommentRepliesConnection } from '@/api/hooks/comments'
+import { UserCommentReactions, useCommentRepliesConnection } from '@/api/hooks/comments'
 import { SvgActionChevronB } from '@/assets/icons'
 import { TextButton } from '@/components/_buttons/Button'
 import { Comment, CommentProps } from '@/components/_comments/Comment'
@@ -31,21 +31,16 @@ const _CommentThread: FC<CommentThreadProps> = ({
   ...commentProps
 }) => {
   const [repliesOpen, setRepliesOpen] = useState(false)
-  const [newReplyId, setNewReplyId] = useState<string | null>(null)
 
   const { replies, loading, fetchMore, pageInfo } = useCommentRepliesConnection({
-    skip: !commentId || !video?.id || !repliesOpen || !hasAnyReplies,
+    skip: !commentId || !video?.id,
     variables: {
       first: INITIAL_REPLIES_COUNT,
       parentCommentId: commentId || '',
     },
-    notifyOnNetworkStatusChange: true,
+    notifyOnNetworkStatusChange: false,
   })
 
-  const { comment: newReply } = useComment({ commentId: newReplyId || '' }, { skip: !newReplyId })
-
-  const allRepliesContainNewReply = !!replies.find((r) => r.id === newReplyId)
-
   const placeholderItems = loading ? createPlaceholderData(LOAD_MORE_REPLIES_COUNT) : []
 
   const handleLoadMore = () => {
@@ -69,7 +64,6 @@ const _CommentThread: FC<CommentThreadProps> = ({
         userReactions={userReactionsLookup && commentId ? userReactionsLookup[commentId] : undefined}
         {...commentProps}
         isReplyable={true}
-        onReplyPosted={setNewReplyId}
       />
       {linkedReplyId && !repliesOpen && (
         <Comment
@@ -110,22 +104,6 @@ const _CommentThread: FC<CommentThreadProps> = ({
               Load more replies
             </LoadMoreRepliesButton>
           ) : null}
-          {newReplyId && !allRepliesContainNewReply ? (
-            newReply ? (
-              <Comment
-                key={newReply?.id}
-                highlighted={newReply.id === highlightedCommentId}
-                commentId={newReply.id}
-                video={video}
-                indented
-                setHighlightedCommentId={setHighlightedCommentId}
-                userReactions={userReactionsLookup ? userReactionsLookup[newReply.id] : undefined}
-                isReplyable={false}
-              />
-            ) : (
-              <Comment indented /> // new reply is loading, display an empty skeleton Comment
-            )
-          ) : null}
         </>
       )}
     </>
diff --git a/packages/atlas/src/views/viewer/VideoView/CommentsSection.tsx b/packages/atlas/src/views/viewer/VideoView/CommentsSection.tsx
index ec8ae53604..6cd6df3944 100644
--- a/packages/atlas/src/views/viewer/VideoView/CommentsSection.tsx
+++ b/packages/atlas/src/views/viewer/VideoView/CommentsSection.tsx
@@ -1,14 +1,13 @@
 import { NetworkStatus } from '@apollo/client'
-import { debounce } from 'lodash-es'
-import { FC, useEffect, useMemo, useRef, useState } from 'react'
+import { FC, ReactElement, useEffect, useMemo, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
-import { useComment, useCommentSectionComments, useUserCommentsReactions } from '@/api/hooks/comments'
+import { useComment, useUserCommentsReactions } from '@/api/hooks/comments'
+import { useCommentSectionComments } from '@/api/hooks/useCommentSectionComments'
 import { CommentOrderByInput } from '@/api/queries/__generated__/baseTypes.generated'
 import { FullVideoFieldsFragment } from '@/api/queries/__generated__/fragments.generated'
 import { EmptyFallback } from '@/components/EmptyFallback'
 import { Text } from '@/components/Text'
-import { LoadMoreButton } from '@/components/_buttons/LoadMoreButton'
 import { Comment } from '@/components/_comments/Comment'
 import { CommentInput } from '@/components/_comments/CommentInput'
 import { Select } from '@/components/_inputs/Select'
@@ -22,14 +21,10 @@ import { getMemberAvatar } from '@/providers/assets/assets.helpers'
 import { useFee } from '@/providers/joystream'
 import { useUser } from '@/providers/user/user.hooks'
 import { createPlaceholderData } from '@/utils/data'
+import { InfiniteLoadingOffsets } from '@/utils/loading.contants'
 
 import { CommentThread } from './CommentThread'
-import {
-  CommentWrapper,
-  CommentsSectionHeader,
-  CommentsSectionWrapper,
-  LoadMoreCommentsWrapper,
-} from './VideoView.styles'
+import { CommentsSectionHeader, CommentsSectionWrapper, CommentsStyledSection } from './VideoView.styles'
 
 type CommentsSectionProps = {
   disabled?: boolean
@@ -47,10 +42,10 @@ export const CommentsSection: FC<CommentsSectionProps> = ({ disabled, video, vid
   const [commentInputIsProcessing, setCommentInputIsProcessing] = useState(false)
   const [highlightedCommentId, setHighlightedCommentId] = useState<string | null>(null)
   const [sortCommentsBy, setSortCommentsBy] = useState(COMMENTS_SORT_OPTIONS[0].value)
-  const [commentsOpen, setCommentsOpen] = useState(false)
   const [commentInputActive, setCommentInputActive] = useState(false)
   const commentIdQueryParam = useRouterQuery(QUERY_PARAMS.COMMENT_ID)
   const mdMatch = useMediaMatch('md')
+  const isConsideredMobile = !mdMatch
   const { id: videoId } = useParams()
   const { memberId, activeMembership, isLoggedIn } = useUser()
   const { isLoadingAsset: isMemberAvatarLoading, urls: memberAvatarUrls } = getMemberAvatar(activeMembership)
@@ -71,14 +66,11 @@ export const CommentsSection: FC<CommentsSectionProps> = ({ disabled, video, vid
   )
   const commentsSectionHeaderRef = useRef<HTMLDivElement>(null)
   const commentSectionWrapperRef = useRef<HTMLDivElement>(null)
-  const mobileCommentsOpen = commentsOpen || mdMatch
-  const [numberOfComments, setNumberOfComments] = useState(mobileCommentsOpen ? INITIAL_COMMENTS : 1)
   const { comments, loading, fetchMore, pageInfo, networkStatus } = useCommentSectionComments(
-    { ...queryVariables, first: mobileCommentsOpen ? INITIAL_COMMENTS : 1 },
-    { skip: disabled || !videoId, notifyOnNetworkStatusChange: true }
+    { ...queryVariables, first: isConsideredMobile ? INITIAL_COMMENTS : 1 },
+    { skip: disabled || !videoId, notifyOnNetworkStatusChange: false }
   )
   const { userReactions } = useUserCommentsReactions(videoId, memberId)
-
   const { addComment } = useReactionTransactions()
 
   const { comment: commentFromUrl, loading: commentFromUrlLoading } = useComment(
@@ -107,61 +99,26 @@ export const CommentsSection: FC<CommentsSectionProps> = ({ disabled, video, vid
     }
   }
 
-  const setMoreComments = () => setNumberOfComments((prevState) => prevState + INITIAL_COMMENTS)
-
-  // increase number of comments when user scrolls to the end of page
-  useEffect(() => {
-    if (!mobileCommentsOpen) {
-      return
-    }
-    const scrollHandler = debounce(() => {
-      if (!commentSectionWrapperRef.current) return
-      const scrolledToBottom = document.documentElement.scrollTop >= commentSectionWrapperRef.current.scrollHeight
-      if (scrolledToBottom && pageInfo?.hasNextPage && !commentsLoading) {
-        setMoreComments()
-      }
-    }, 100)
-    window.addEventListener('scroll', scrollHandler)
-
-    return () => {
-      window.removeEventListener('scroll', scrollHandler)
-    }
-  }, [commentsLoading, mobileCommentsOpen, pageInfo?.hasNextPage])
-
-  // fetch more results when user scrolls to end of page
-  useEffect(() => {
-    if (pageInfo && numberOfComments !== INITIAL_COMMENTS && comments?.length !== numberOfComments) {
-      fetchMore({ variables: { ...queryVariables, first: numberOfComments } })
-    }
-  }, [fetchMore, numberOfComments, pageInfo, queryVariables, comments?.length])
-
   const handleComment = async (parentCommentId?: string) => {
     if (!videoId || !commentInputText) {
       return
     }
     setCommentInputIsProcessing(true)
-    const newCommentId = await addComment({
+    await addComment({
       videoId,
       commentBody: commentInputText,
       parentCommentId,
       videoTitle: video?.title,
+      optimisticOpts: {
+        onTxSign: (newCommentId) => {
+          setCommentInputIsProcessing(false)
+          setCommentInputText('')
+          setHighlightedCommentId(newCommentId || null)
+        },
+      },
     })
-    setCommentInputIsProcessing(false)
 
     trackCommentAdded(commentInputText, video?.id ?? 'no data')
-
-    if (newCommentId) {
-      setCommentInputText('')
-      setHighlightedCommentId(newCommentId || null)
-    }
-  }
-
-  const handleLoadMoreClick = () => {
-    if (!comments || !comments.length) {
-      return
-    }
-    setCommentsOpen(true)
-    setMoreComments()
   }
 
   const placeholderItems = commentsLoading ? createPlaceholderData(4) : []
@@ -208,6 +165,7 @@ export const CommentsSection: FC<CommentsSectionProps> = ({ disabled, video, vid
       </CommentsSectionWrapper>
     )
   }
+
   return (
     <CommentsSectionWrapper>
       <CommentsSectionHeader ref={commentsSectionHeaderRef}>
@@ -243,41 +201,74 @@ export const CommentsSection: FC<CommentsSectionProps> = ({ disabled, video, vid
       {comments && !comments.length && !commentsLoading && (
         <EmptyFallback title="Be the first to comment" subtitle="Nobody has left a comment under this video yet." />
       )}
-      <CommentWrapper ref={commentSectionWrapperRef}>
-        {displayedCommentFromUrl && (
-          <CommentThread
-            commentId={displayedCommentFromUrl.id}
-            video={video}
-            hasAnyReplies={displayedCommentFromUrl.repliesCount > 0}
-            userReactionsLookup={userReactions}
-            highlightedCommentId={highlightedCommentId}
-            setHighlightedCommentId={setHighlightedCommentId}
-            linkedReplyId={parentCommentFromUrl ? commentFromUrl?.id : null}
-            repliesCount={displayedCommentFromUrl.repliesCount}
-          />
-        )}
-        {commentsLoading && !isFetchingMore
-          ? mappedPlaceholders
-          : filteredComments
-              ?.map((comment) => (
-                <CommentThread
-                  key={comment.id}
-                  commentId={comment.id}
-                  video={video}
-                  hasAnyReplies={comment.repliesCount > 0}
-                  repliesCount={comment.repliesCount}
-                  userReactionsLookup={userReactions}
-                  highlightedCommentId={highlightedCommentId}
-                  setHighlightedCommentId={setHighlightedCommentId}
-                />
-              ))
-              .concat(isFetchingMore && commentsLoading ? mappedPlaceholders : [])}
-      </CommentWrapper>
-      {!mobileCommentsOpen && !commentsLoading && comments && !!comments.length && pageInfo?.hasNextPage && (
-        <LoadMoreCommentsWrapper>
-          <LoadMoreButton label="Show more comments" onClick={handleLoadMoreClick} />
-        </LoadMoreCommentsWrapper>
-      )}
+      {comments?.length ? (
+        <CommentsStyledSection
+          contentProps={{
+            type: 'grid',
+            grid: {
+              xxs: {
+                columns: 1,
+              },
+            },
+            children: (
+              <>
+                {displayedCommentFromUrl && (
+                  <CommentThread
+                    commentId={displayedCommentFromUrl.id}
+                    video={video}
+                    hasAnyReplies={displayedCommentFromUrl.repliesCount > 0}
+                    userReactionsLookup={userReactions}
+                    highlightedCommentId={highlightedCommentId}
+                    setHighlightedCommentId={setHighlightedCommentId}
+                    linkedReplyId={parentCommentFromUrl ? commentFromUrl?.id : null}
+                    repliesCount={displayedCommentFromUrl.repliesCount}
+                  />
+                )}
+                {commentsLoading && !isFetchingMore
+                  ? mappedPlaceholders
+                  : filteredComments
+                      ?.map((comment) => (
+                        <CommentThread
+                          key={comment.id}
+                          commentId={comment.id}
+                          video={video}
+                          hasAnyReplies={comment.repliesCount > 0}
+                          repliesCount={comment.repliesCount}
+                          userReactionsLookup={userReactions}
+                          highlightedCommentId={highlightedCommentId}
+                          setHighlightedCommentId={setHighlightedCommentId}
+                        />
+                      ))
+                      .concat(isFetchingMore && commentsLoading ? mappedPlaceholders : [])}
+              </>
+            ) as unknown as ReactElement[],
+          }}
+          footerProps={
+            isConsideredMobile
+              ? {
+                  label: 'Load more comments',
+                  handleLoadMore: async () => {
+                    if (!loading) {
+                      await fetchMore({ variables: { ...queryVariables, first: (comments?.length ?? 0) + 10 } })
+                    }
+                    return
+                  },
+                  type: 'link',
+                }
+              : {
+                  reachedEnd: !pageInfo?.hasNextPage,
+                  fetchMore: async () => {
+                    if (!loading) {
+                      await fetchMore({ variables: { ...queryVariables, first: (comments?.length ?? 0) + 10 } })
+                    }
+                    return
+                  },
+                  type: 'infinite',
+                  loadingTriggerOffset: InfiniteLoadingOffsets.VideoTile,
+                }
+          }
+        />
+      ) : null}
     </CommentsSectionWrapper>
   )
 }
diff --git a/packages/atlas/src/views/viewer/VideoView/VideoView.styles.ts b/packages/atlas/src/views/viewer/VideoView/VideoView.styles.ts
index ee8fb5548e..ebd3950d73 100644
--- a/packages/atlas/src/views/viewer/VideoView/VideoView.styles.ts
+++ b/packages/atlas/src/views/viewer/VideoView/VideoView.styles.ts
@@ -3,6 +3,7 @@ import styled from '@emotion/styled'
 
 import { GridItem, LayoutGrid } from '@/components/LayoutGrid'
 import { LimitedWidthContainer } from '@/components/LimitedWidthContainer'
+import { Section } from '@/components/Section/Section'
 import { Text } from '@/components/Text'
 import { Button } from '@/components/_buttons/Button'
 import { CallToActionWrapper } from '@/components/_buttons/CallToActionButton'
@@ -208,6 +209,17 @@ export const CommentWrapper = styled.div`
   }
 `
 
+export const CommentsStyledSection = styled(Section)`
+  display: grid;
+  margin-top: ${sizes(8)};
+  gap: ${sizes(8)};
+  margin-bottom: ${sizes(6)};
+
+  ${media.md} {
+    margin-bottom: 0;
+  }
+`
+
 export const LoadMoreCommentsWrapper = styled.div`
   margin-bottom: ${sizes(8)};
   padding-bottom: ${sizes(8)};
diff --git a/packages/atlas/src/views/viewer/VideoView/VideoView.tsx b/packages/atlas/src/views/viewer/VideoView/VideoView.tsx
index 73e96335fe..52b0689122 100644
--- a/packages/atlas/src/views/viewer/VideoView/VideoView.tsx
+++ b/packages/atlas/src/views/viewer/VideoView/VideoView.tsx
@@ -419,24 +419,29 @@ const DetailsItems = ({
       if (video?.id) {
         setVideoReactionProcessing(true)
         const fee = reactionFee || (await getReactionFee([memberId || '', video?.id, reaction]))
-        const reacted = await likeOrDislikeVideo(video.id, reaction, video.title, fee)
+        const prevReaction = video.reactions.find((reaction) => reaction.member.id === memberId)
+        likeOrDislikeVideo(video.id, reaction, video.title, fee, {
+          prevReactionId: prevReaction?.id,
+          onTxSign: () => setVideoReactionProcessing(false),
+          isRemovingReaction: prevReaction?.reaction === reaction.toUpperCase(),
+        })
         reaction === 'like'
           ? trackLikeAdded(video.id, memberId ?? 'no data')
           : trackDislikeAdded(video.id, memberId ?? 'no data')
-        setVideoReactionProcessing(false)
-        return reacted
+        return true
       }
       return false
     },
     [
+      video?.id,
+      video?.reactions,
+      video?.title,
+      reactionFee,
       getReactionFee,
-      likeOrDislikeVideo,
       memberId,
-      reactionFee,
+      likeOrDislikeVideo,
       trackLikeAdded,
       trackDislikeAdded,
-      video?.id,
-      video?.title,
     ]
   )
 
diff --git a/packages/atlas/src/views/viewer/ViewerLayout.tsx b/packages/atlas/src/views/viewer/ViewerLayout.tsx
index 1d2bee806b..2069d02a3b 100644
--- a/packages/atlas/src/views/viewer/ViewerLayout.tsx
+++ b/packages/atlas/src/views/viewer/ViewerLayout.tsx
@@ -22,12 +22,8 @@ import { useUser } from '@/providers/user/user.hooks'
 import { media, transitions } from '@/styles'
 import { RoutingState } from '@/types/routing'
 
-// Currently the newest version is at main file and the old one was moved to new file
-const YppLandingViewTest = lazy(() =>
-  import('@/views/global/YppLandingView').then((module) => ({ default: module.YppLandingView }))
-)
 const YppLandingView = lazy(() =>
-  import('@/views/global/YppLandingView/YppLandingViewOld').then((module) => ({ default: module.YppLandingViewOld }))
+  import('@/views/global/YppLandingView').then((module) => ({ default: module.YppLandingView }))
 )
 const MemberNotificationsView = lazy(() =>
   import('@/views/notifications').then((module) => ({ default: module.MemberNotificationsView }))
@@ -36,7 +32,12 @@ const CategoryView = lazy(() => import('./CategoryView').then((module) => ({ def
 const ChannelView = lazy(() => import('./ChannelView').then((module) => ({ default: module.ChannelView })))
 const ChannelsView = lazy(() => import('./ChannelsView').then((module) => ({ default: module.ChannelsView })))
 const HomeView = lazy(() => import('./HomeView').then((module) => ({ default: module.HomeView })))
-const MarketplaceView = lazy(() => import('./MarketplaceView').then((module) => ({ default: module.MarketplaceView })))
+const NftMarketplaceView = lazy(() =>
+  import('./NftMarketplaceView').then((module) => ({ default: module.NftMarketplaceView }))
+)
+const CrtMarketplaceView = lazy(() =>
+  import('./CrtMarketplaceView').then((module) => ({ default: module.CrtMarketplaceView }))
+)
 const MemberView = lazy(() => import('./MemberView').then((module) => ({ default: module.MemberView })))
 const MembershipSettingsView = lazy(() =>
   import('./MembershipSettingsView').then((module) => ({ default: module.MembershipSettingsView }))
@@ -62,12 +63,10 @@ const viewerRoutes = [
   { path: relativeRoutes.viewer.category(), element: <CategoryView /> },
   { path: relativeRoutes.viewer.memberById(), element: <MemberView /> },
   { path: relativeRoutes.viewer.member(), element: <MemberView /> },
-  { path: relativeRoutes.viewer.marketplace(), element: <MarketplaceView /> },
+  { path: relativeRoutes.viewer.crtMarketplace(), element: <CrtMarketplaceView /> },
+  { path: relativeRoutes.viewer.nftMarketplace(), element: <NftMarketplaceView /> },
   ...(atlasConfig.features.ypp.googleConsoleClientId
-    ? [
-        { path: relativeRoutes.viewer.ypp(), element: <YppLandingView /> },
-        { path: relativeRoutes.viewer.yppTest(), element: <YppLandingViewTest /> },
-      ]
+    ? [{ path: relativeRoutes.viewer.ypp(), element: <YppLandingView /> }]
     : []),
   { path: relativeRoutes.viewer.referrals(), element: <ReferralsView /> },
 ]