diff --git a/src/components/content-staking/SuperLike.tsx b/src/components/content-staking/SuperLike.tsx
index 0c033f0d8..1c82e787e 100644
--- a/src/components/content-staking/SuperLike.tsx
+++ b/src/components/content-staking/SuperLike.tsx
@@ -179,36 +179,22 @@ export default function SuperLike({
       }) => {
         if (superLikeCount <= 0 && !showWhenZero) return null
         const button = (
-          // To make the post reward stat not jumping when its liked, maybe its a mac issue
-          <div className='min-w-[3.25rem]'>
-            <button
-              onClick={() => {
-                sendEventWithRef(myAddress ?? '', (refId) => {
-                  sendEvent(
-                    'click_superlike',
-                    { eventSource: 'message', postId },
-                    { ref: refId }
-                  )
-                })
-                handleClick()
-              }}
-              disabled={isDisabled}
-              className={cx(
-                // identifier for toggle chat menu checker in ChatItemMenus
-                'superlike',
-                'flex cursor-pointer items-center gap-2 rounded-full border border-transparent bg-[#EFF4FA] px-2 py-0.5 text-text-muted transition dark:bg-background-lighter',
-                'enabled:hover:border-[#7779F3] enabled:focus-visible:border-[#7779F3]',
-                'disabled:!opacity-50',
-                isMyMessage &&
-                  'dark:disabled:!bg-black/20 dark:disabled:!text-white/50',
-                hasILiked &&
-                  '!bg-gradient-to-r from-[#8B55FD] to-[#7493FC] !text-white'
-              )}
-            >
-              <Image src={Thumbsup} alt='' className='h-4 w-auto' />
-              <span className='relative -top-px'>{superLikeCount}</span>
-            </button>
-          </div>
+          <SuperLikeButton
+            superLikeCount={superLikeCount}
+            isMyMessage={isMyMessage}
+            hasILiked={hasILiked}
+            onClick={() => {
+              sendEventWithRef(myAddress ?? '', (refId) => {
+                sendEvent(
+                  'click_superlike',
+                  { eventSource: 'message', postId },
+                  { ref: refId }
+                )
+              })
+              handleClick()
+            }}
+            disabled={isDisabled}
+          />
         )
         return (
           <div
@@ -255,3 +241,39 @@ function useClientValidationOfPostSuperLike(createdAtTime: number) {
     dayjs(serverTime).diff(dayjs(createdAtTime), 'day') > 7
   return { canBeLiked: !isPostMadeMoreThan1WeekAgo, isLoading }
 }
+
+export type SuperLikeButtonProps = ComponentProps<'button'> & {
+  superLikeCount: number
+  isMyMessage?: boolean
+  hasILiked?: boolean
+}
+export function SuperLikeButton({
+  superLikeCount,
+  isMyMessage,
+  hasILiked,
+  ...props
+}: SuperLikeButtonProps) {
+  return (
+    // To make the post reward stat not jumping when its liked, maybe its a mac issue
+    <div className='min-w-[3.25rem]'>
+      <button
+        {...props}
+        className={cx(
+          // identifier for toggle chat menu checker in ChatItemMenus
+          'superlike',
+          'flex cursor-pointer items-center gap-2 rounded-full border border-transparent bg-[#EFF4FA] px-2 py-0.5 text-text-muted transition dark:bg-background-lighter',
+          'enabled:hover:border-[#7779F3] enabled:focus-visible:border-[#7779F3]',
+          'disabled:!opacity-50',
+          isMyMessage &&
+            'dark:disabled:!bg-black/20 dark:disabled:!text-white/50',
+          hasILiked &&
+            '!bg-gradient-to-r from-[#8B55FD] to-[#7493FC] !text-white',
+          props.className
+        )}
+      >
+        <Image src={Thumbsup} alt='' className='h-4 w-auto' />
+        <span className='relative -top-px'>{superLikeCount}</span>
+      </button>
+    </div>
+  )
+}
diff --git a/src/components/extensions/common/CommonChatItem.tsx b/src/components/extensions/common/CommonChatItem.tsx
index f9b8ce7f5..601b52094 100644
--- a/src/components/extensions/common/CommonChatItem.tsx
+++ b/src/components/extensions/common/CommonChatItem.tsx
@@ -7,7 +7,9 @@ import MessageStatusIndicator from '@/components/chats/ChatItem/MessageStatusInd
 import RepliedMessagePreview from '@/components/chats/ChatItem/RepliedMessagePreview'
 import UnapprovedMemeCount from '@/components/chats/UnapprovedMemeCount'
 import { getRepliedMessageId } from '@/components/chats/utils'
-import SuperLike from '@/components/content-staking/SuperLike'
+import SuperLike, {
+  SuperLikeButton,
+} from '@/components/content-staking/SuperLike'
 import useAuthorizedForModeration from '@/hooks/useAuthorizedForModeration'
 import useIsMessageBlocked from '@/hooks/useIsMessageBlocked'
 import { getSuperLikeCountQuery } from '@/services/datahub/content-staking/query'
@@ -42,7 +44,7 @@ type CommonChatItemProps = ExtensionChatItemProps & {
   othersMessage?: OthersMessageConfig
   className?: string
   textColor?: string
-  bg?: 'background' | 'background-light'
+  bg?: 'background' | 'background-light' | 'background-lighter'
   showSuperLikeWhenZero?: boolean
   enableProfileModal?: boolean
 }
@@ -70,6 +72,7 @@ export default function CommonChatItem({
   hubId,
   bg = 'background',
   showApproveButton,
+  dummySuperLike,
 }: CommonChatItemProps) {
   const { inView, ref } = useInView()
   const myAddress = useMyMainAddress()
@@ -194,7 +197,9 @@ export default function CommonChatItem({
             ? 'bg-background-primary-light text-text dark:bg-background-primary/70 dark:text-text-on-primary'
             : bg === 'background'
             ? 'bg-background'
-            : 'bg-background-light',
+            : bg === 'background-light'
+            ? 'bg-background-light'
+            : 'bg-background-lighter',
           className
         )}
       >
@@ -328,7 +333,15 @@ export default function CommonChatItem({
           myMessageConfig.children === 'bottom' &&
           childrenElement}
 
-        {showApproveButton ? (
+        {dummySuperLike ? (
+          <SuperLikeButton
+            {...dummySuperLike}
+            className={cx(
+              'mb-1.5 ml-2.5 mt-1 self-start dark:bg-background-lightest',
+              dummySuperLike.className
+            )}
+          />
+        ) : showApproveButton ? (
           <div className='pt-1' />
         ) : message.struct.approvedInRootPost ? (
           <SuperLike
diff --git a/src/components/extensions/image/ImageChatItem.tsx b/src/components/extensions/image/ImageChatItem.tsx
index f8d438fb0..3200e175d 100644
--- a/src/components/extensions/image/ImageChatItem.tsx
+++ b/src/components/extensions/image/ImageChatItem.tsx
@@ -21,7 +21,7 @@ export default function ImageChatItem(props: ExtensionChatItemProps) {
       showSuperLikeWhenZero
       othersMessage={{ children: 'middle', checkMark: 'bottom' }}
       myMessageConfig={{ children: 'middle', checkMark: 'adaptive-inside' }}
-      className='max-w-xs'
+      className={cx('max-w-xs', props.className)}
     >
       {({ isMyMessage }) => (
         <div className={cx('flex flex-col', !isMyMessage && 'mt-1')}>
diff --git a/src/components/extensions/types.ts b/src/components/extensions/types.ts
index e08e2df20..cb8b1126d 100644
--- a/src/components/extensions/types.ts
+++ b/src/components/extensions/types.ts
@@ -1,5 +1,6 @@
 import { PostContent, PostData } from '@subsocial/api/types'
 import { ComponentType } from 'react'
+import { SuperLikeButtonProps } from '../content-staking/SuperLike'
 
 export type ExtensionChatItemProps = {
   message: PostData
@@ -8,8 +9,10 @@ export type ExtensionChatItemProps = {
   chatId: string
   hubId: string
   enableProfileModal?: boolean
-  bg?: 'background' | 'background-light'
+  bg?: 'background' | 'background-light' | 'background-lighter'
   showApproveButton?: boolean
+  className?: string
+  dummySuperLike?: SuperLikeButtonProps
 }
 
 export type RepliedMessagePreviewPartProps = {
diff --git a/src/components/modals/LikeIntroModal.tsx b/src/components/modals/LikeIntroModal.tsx
index 0bd306603..82cebe9b3 100644
--- a/src/components/modals/LikeIntroModal.tsx
+++ b/src/components/modals/LikeIntroModal.tsx
@@ -1,15 +1,105 @@
+import Diamond from '@/assets/emojis/diamond.png'
 import LikeButtonImage from '@/assets/graphics/like-button.png'
-import LikeDemoImage from '@/assets/graphics/like-message.png'
+import { getTokenomicsMetadataQuery } from '@/services/datahub/content-staking/query'
 import { useSendEvent } from '@/stores/analytics'
 import { LocalStorage } from '@/utils/storage'
+import { formatNumber } from '@/utils/strings'
+import { PostData } from '@subsocial/api/types'
+import dayjs from 'dayjs'
 import Image from 'next/image'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
+import SlotCounter from 'react-slot-counter'
 import Button from '../Button'
+import Card from '../Card'
+import ImageChatItem from '../extensions/image/ImageChatItem'
 import Modal from './Modal'
 
 const hasOpenedModal = new LocalStorage(() => 'has-opened-like-intro-modal')
+const DUMMY_MESSAGES: { message: PostData; superLikeCount: number }[] = [
+  {
+    message: {
+      id: '0x123',
+      struct: {
+        id: '0x123',
+        createdAtBlock: 0,
+        createdAtTime: dayjs().subtract(1, 'day').toDate().getTime(),
+        createdByAccount: '0x123',
+        downvotesCount: 0,
+        hidden: false,
+        isComment: true,
+        isRegularPost: true,
+        isSharedPost: false,
+        ownerId: '0x123',
+        rootPostId: '0x123',
+        upvotesCount: 0,
+      },
+      content: {
+        body: '',
+        canonical: '',
+        image: '',
+        isShowMore: false,
+        summary: '',
+        tags: [],
+        title: '',
+        extensions: [
+          {
+            id: 'subsocial-image',
+            properties: {
+              image:
+                'bafybeia2mhukwxqb4gifjs63sgtoc5flcskizemmamwwc3eq6q7ftihlo4',
+            },
+          },
+        ],
+      },
+    },
+    superLikeCount: 52,
+  },
+  {
+    message: {
+      id: '0x123',
+      struct: {
+        id: '0x123',
+        createdAtBlock: 0,
+        createdAtTime: dayjs().subtract(1, 'day').toDate().getTime(),
+        createdByAccount: '0x123',
+        downvotesCount: 0,
+        hidden: false,
+        isComment: true,
+        isRegularPost: true,
+        isSharedPost: false,
+        ownerId: '0x123',
+        rootPostId: '0x123',
+        upvotesCount: 0,
+      },
+      content: {
+        body: '',
+        canonical: '',
+        image: '',
+        isShowMore: false,
+        summary: '',
+        tags: [],
+        title: '',
+        extensions: [
+          {
+            id: 'subsocial-image',
+            properties: {
+              image:
+                'bafybeie3vdprrn4exypqyb36t3r3ua2jmv2fnh6oy5rh5knwcljij7q4h4',
+            },
+          },
+        ],
+      },
+    },
+    superLikeCount: 30,
+  },
+]
 
 export default function LikeIntroModal() {
+  const [step, setStep] = useState(0)
+  const [pointsEarned, setPointsEarned] = useState(0)
+  const [hasILiked, setHasILiked] = useState(false)
+  const { data: tokenomics } = getTokenomicsMetadataQuery.useQuery(null)
+
   const sendEvent = useSendEvent()
   const [isOpenModal, setIsOpenModal] = useState(false)
   useEffect(() => {
@@ -20,35 +110,108 @@ export default function LikeIntroModal() {
     }
   }, [sendEvent])
 
+  const splitted = useMemo(
+    () => formatNumber(pointsEarned).split(''),
+    [pointsEarned]
+  )
+  const current = DUMMY_MESSAGES[step]
+
+  const pointsPerLike = tokenomics
+    ? (tokenomics.likerRewardDistributionPercent / 100) *
+      Number(tokenomics.superLikeWeightPoints)
+    : 4000
+
+  const isFinished = !current
+
   return (
     <Modal
       isOpen={isOpenModal}
       closeModal={() => undefined}
-      title='Earn Points by liking memes!'
+      title={
+        isFinished ? 'Good job! Keep liking!' : 'Earn Points by liking memes!'
+      }
       description={
-        <span>
-          To get your Points for liking a meme, simply tap on{' '}
-          <Image
-            src={LikeButtonImage}
-            alt=''
-            className='inline-block h-[22px] w-auto'
-          />{' '}
-          below the meme.
-        </span>
+        isFinished ? null : (
+          <span>
+            To get your Points for liking a meme, simply tap on{' '}
+            <Image
+              src={LikeButtonImage}
+              alt=''
+              className='inline-block h-[22px] w-auto'
+            />{' '}
+            below the meme.
+          </span>
+        )
       }
     >
-      <Image src={LikeDemoImage} className='h-auto w-full' alt='' />
-      <Button
-        size='lg'
-        className='mt-2'
-        onClick={() => {
-          hasOpenedModal.set('true')
-          setIsOpenModal(false)
-          sendEvent('like_intro_modal_closed')
-        }}
-      >
-        Got it!
-      </Button>
+      {isFinished ? (
+        <div className='mt-2 flex flex-col gap-6'>
+          <Card className='flex flex-col items-center gap-2 text-center'>
+            <span className='font-medium text-text-muted'>
+              For liking 2 memes you earned:
+            </span>
+            <div className='flex items-center gap-2.5'>
+              <Image src={Diamond} alt='' className='h-11 w-11' />
+              <span className='flex items-center text-4xl font-bold'>
+                {formatNumber(pointsPerLike * DUMMY_MESSAGES.length)}
+              </span>
+            </div>
+          </Card>
+          <Button
+            className='w-full'
+            size='lg'
+            onClick={() => {
+              sendEvent('finish_like_intro_modal')
+              setIsOpenModal(false)
+            }}
+          >
+            See More Memes
+          </Button>
+        </div>
+      ) : (
+        <>
+          <ImageChatItem
+            message={current.message}
+            chatId='0x123'
+            hubId='0x123'
+            className='max-w-none'
+            bg='background-lighter'
+            dummySuperLike={{
+              className: 'outline-none',
+              disabled: !tokenomics,
+              hasILiked,
+              superLikeCount: current.superLikeCount + (hasILiked ? 1 : 0),
+              onClick: () => {
+                if (hasILiked) return
+
+                sendEvent('like_intro_modal_meme', { step: step + 1 })
+                setHasILiked(true)
+                setPointsEarned((prev) => prev + pointsPerLike)
+                setTimeout(() => {
+                  setStep((prev) => prev + 1)
+                  setHasILiked(false)
+                }, 1000)
+              },
+            }}
+          />
+          <div className='mt-6 flex flex-col items-center gap-2 text-center'>
+            <span className='font-medium text-text-muted'>Points earned</span>
+            <div className='flex items-center gap-2.5'>
+              <Image src={Diamond} alt='' className='h-11 w-11' />
+              <span className='flex items-center text-4xl font-bold'>
+                <SlotCounter
+                  containerClassName='relative -top-1.5'
+                  value={splitted}
+                  animateOnVisible={false}
+                  sequentialAnimationMode
+                  startValueOnce
+                  startValue={'0'}
+                />
+              </span>
+            </div>
+          </div>
+        </>
+      )}
     </Modal>
   )
 }
diff --git a/src/modules/points/PointsPreview.tsx b/src/modules/points/PointsPreview.tsx
index 792556d74..69e229531 100644
--- a/src/modules/points/PointsPreview.tsx
+++ b/src/modules/points/PointsPreview.tsx
@@ -33,6 +33,7 @@ function Points({
 
   if (!withPointsAnimation) return <span>{splitValues}</span>
 
+  // Slot counter needs to be inside a span with font-bold and text-xl or bigger to work properly, otherwise, it will always rerender
   return (
     <SlotCounter
       containerClassName='relative -top-0.5'