diff --git a/.changeset/three-rice-repair.md b/.changeset/three-rice-repair.md
new file mode 100644
index 00000000000..19d1f4cdc35
--- /dev/null
+++ b/.changeset/three-rice-repair.md
@@ -0,0 +1,5 @@
+---
+'@razorpay/blade': minor
+---
+
+feat(blade): added SpotlightPopoverTour web implementation
diff --git a/packages/blade/src/components/SpotlightPopoverTour/Tour.native.tsx b/packages/blade/src/components/SpotlightPopoverTour/Tour.native.tsx
new file mode 100644
index 00000000000..8a46c88aff1
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/Tour.native.tsx
@@ -0,0 +1,14 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import type { SpotlightPopoverTourProps } from './types';
+import { throwBladeError } from '~utils/logger';
+
+const Tour = (_props: SpotlightPopoverTourProps): React.ReactElement => {
+  throwBladeError({
+    message: 'Tour is not yet implemented for native',
+    moduleName: 'Tour',
+  });
+
+  return <></>;
+};
+
+export { Tour };
diff --git a/packages/blade/src/components/SpotlightPopoverTour/Tour.stories.tsx b/packages/blade/src/components/SpotlightPopoverTour/Tour.stories.tsx
new file mode 100644
index 00000000000..9dbe4785d49
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/Tour.stories.tsx
@@ -0,0 +1,947 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import type { Meta, ComponentStory } from '@storybook/react';
+import React from 'react';
+import { Title } from '@storybook/addon-docs';
+import isChromatic from 'chromatic';
+import type {
+  SpotlightPopoverStepRenderProps,
+  SpotlightPopoverTourProps,
+  SpotlightPopoverTourSteps,
+} from './types';
+import { SpotlightPopoverTourStep } from './TourStep';
+import { SpotlightPopoverTourFooter } from './TourFooter';
+import { SpotlightPopoverTour } from '.';
+import { Button } from '~components/Button';
+import { Box } from '~components/Box';
+import { Code, Text } from '~components/Typography';
+import { InfoIcon } from '~components/Icons';
+import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
+import { Sandbox } from '~utils/storybook/Sandbox';
+import { Card, CardBody } from '~components/Card';
+import { Amount } from '~components/Amount';
+import { Link } from '~components/Link';
+
+const Page = (): React.ReactElement => {
+  return (
+    <StoryPageWrapper
+      componentName="Tour"
+      componentDescription="The Tour component is used to provide context as well as enable users to take certain actions on it. These are used to highlight a new feature or provide a guided tour to a new user."
+      figmaURL={{
+        paymentTheme:
+          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=63871%3A13263&mode=dev',
+        bankingTheme:
+          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=63871%3A13263&mode=dev',
+      }}
+    >
+      <Title>Usage</Title>
+      <Sandbox>
+        {`
+        import React from 'react';
+        import { Tour, TourStep, TourFooter, Box, Text, Button } from '@razorpay/blade/components';
+        
+        function App(): React.ReactElement {
+          const [activeStep, setActiveStep] = React.useState(0);
+          const [isOpen, setIsOpen] = React.useState(false);
+        
+          return (
+            <Box>
+              <Button
+                marginBottom="spacing.9"
+                onClick={() => {
+                  setIsOpen((prev) => !prev);
+                }}
+              >
+                {isOpen ? 'Tour In Progress' : 'Start Tour'}
+              </Button>
+              <Tour
+                steps={steps}
+                isOpen={isOpen}
+                activeStep={activeStep}
+                onFinish={() => {
+                  console.log('finished');
+                  setActiveStep(0);
+                  setIsOpen(false);
+                }}
+                onOpenChange={({ isOpen }) => {
+                  console.log('open change', isOpen);
+                  setIsOpen(isOpen);
+                }}
+                onStepChange={(step) => {
+                  console.log('step change', step);
+                  setActiveStep(step);
+                }}
+              >
+                <Box width="100%" display="flex" gap="spacing.4">
+                  <TourStep name="step-1">
+                    <Box padding="spacing.4" backgroundColor="brand.gray.400.lowContrast">
+                      <Text>Step 1 </Text>
+                    </Box>
+                  </TourStep>
+                  <TourStep name="step-2">
+                    <Box padding="spacing.4" backgroundColor="brand.gray.400.lowContrast">
+                      <Text>Step 2 </Text>
+                    </Box>
+                  </TourStep>
+                </Box>
+              </Tour>
+            </Box>
+          );
+        }
+
+        export default App;
+      `}
+      </Sandbox>
+    </StoryPageWrapper>
+  );
+};
+
+const propsCategory = {
+  TOUR: 'Tour Props',
+  TOUR_STEPS: 'Single Tour Step Props',
+};
+
+type StoryControlProps = SpotlightPopoverTourProps & {
+  tourStepsTitle: SpotlightPopoverTourSteps[number]['title'];
+  tourStepsContent: SpotlightPopoverTourSteps[number]['content'];
+  tourStepsPlacement: SpotlightPopoverTourSteps[number]['placement'];
+  tourStepsFooter: SpotlightPopoverTourSteps[number]['footer'];
+  tourStepsTitleLeading: SpotlightPopoverTourSteps[number]['titleLeading'];
+  tourStepsName: SpotlightPopoverTourSteps[number]['name'];
+};
+
+export default {
+  title: 'Components/SpotlightPopoverTour',
+  component: SpotlightPopoverTour,
+  argTypes: {
+    tourStepsTitle: {
+      name: 'steps[0].title',
+      type: 'string',
+      defaultValue: 'Overview of Refunds',
+      table: { category: propsCategory.TOUR_STEPS },
+    },
+    tourStepsContent: {
+      name: 'steps[0].content',
+      type: 'string',
+      defaultValue:
+        'You can  issue refunds for various reasons, like when a customer returns a product or cancels a service.',
+      table: { category: propsCategory.TOUR_STEPS },
+    },
+    tourStepsPlacement: {
+      name: 'steps[0].placement',
+      defaultValue: 'bottom',
+      control: {
+        type: 'select',
+        options: [
+          'bottom',
+          'top',
+          'left',
+          'right',
+          'bottom-start',
+          'bottom-end',
+          'top-start',
+          'top-end',
+          'left-start',
+          'left-end',
+          'right-start',
+          'right-end',
+        ],
+      },
+      table: { category: propsCategory.TOUR_STEPS },
+    },
+    tourStepsName: {
+      name: 'steps[0].name',
+      type: 'string',
+      defaultValue: 'step-1',
+      control: {
+        disable: true,
+      },
+      table: { category: propsCategory.TOUR_STEPS },
+    },
+    tourStepsTitleLeading: {
+      name: 'steps[0].titleLeading',
+      control: {
+        disable: true,
+      },
+      table: { category: propsCategory.TOUR_STEPS },
+    },
+    tourStepsFooter: {
+      name: 'steps[0].footer',
+      control: {
+        disable: true,
+      },
+      table: { category: propsCategory.TOUR_STEPS },
+    },
+    children: {
+      control: {
+        disable: true,
+      },
+      table: { category: propsCategory.TOUR },
+    },
+    onFinish: {
+      control: {
+        disable: true,
+      },
+      table: { category: propsCategory.TOUR },
+    },
+    onOpenChange: {
+      control: {
+        disable: true,
+      },
+      table: { category: propsCategory.TOUR },
+    },
+    onStepChange: {
+      control: {
+        disable: true,
+      },
+      table: { category: propsCategory.TOUR },
+    },
+    steps: {
+      control: {
+        disable: true,
+      },
+      table: { category: propsCategory.TOUR },
+    },
+    isOpen: {
+      control: {
+        disable: true,
+      },
+      table: { category: propsCategory.TOUR },
+    },
+    activeStep: {
+      control: {
+        disable: true,
+      },
+      table: { category: propsCategory.TOUR },
+    },
+  },
+  parameters: {
+    docs: {
+      page: Page,
+    },
+  },
+} as Meta<StoryControlProps>;
+
+const Center = ({ children }: { children: React.ReactNode }): React.ReactElement => {
+  return (
+    <Box width="100%" height="70vh" display="flex" alignItems="center" justifyContent="center">
+      {children}
+    </Box>
+  );
+};
+
+const CustomTourFooter = ({
+  activeStep,
+  totalSteps,
+  goToNext,
+  goToPrevious,
+  stopTour,
+}: SpotlightPopoverStepRenderProps) => {
+  const isLast = activeStep === totalSteps - 1;
+  const isFirst = activeStep === 0;
+  return (
+    <SpotlightPopoverTourFooter
+      activeStep={activeStep}
+      totalSteps={totalSteps}
+      actions={{
+        primary: isLast
+          ? {
+              text: 'Done',
+              onClick: stopTour,
+            }
+          : {
+              text: 'Next',
+              onClick: goToNext,
+            },
+        secondary: isFirst
+          ? undefined
+          : {
+              text: 'Prev',
+              onClick: goToPrevious,
+            },
+      }}
+    />
+  );
+};
+
+const TourTemplate: ComponentStory<(props: StoryControlProps) => React.ReactElement> = (args) => {
+  const [activeStep, setActiveStep] = React.useState(0);
+  const [isOpen, setIsOpen] = React.useState(!!isChromatic());
+
+  const steps = React.useMemo<SpotlightPopoverTourSteps>(
+    () => [
+      {
+        name: 'step-1',
+        title: args.tourStepsTitle,
+        content: () => {
+          return (
+            <Box>
+              <Text>{args.tourStepsContent}</Text>
+              <Text marginTop="spacing.2">
+                You can also issue partial refunds - for example, if a customer purchased multiple
+                items.
+              </Text>
+            </Box>
+          );
+        },
+        placement: args.tourStepsPlacement,
+        footer: CustomTourFooter,
+      },
+      {
+        name: 'step-2',
+        title: 'Overview of Disputes',
+        content: () => {
+          return (
+            <Box>
+              <Text>
+                Disputes are raised by customers when they have a problem with a transaction.
+              </Text>
+            </Box>
+          );
+        },
+        placement: 'bottom',
+        footer: CustomTourFooter,
+      },
+      {
+        name: 'step-3',
+        title: 'Dispute Statuses',
+        content: () => {
+          return (
+            <Text>
+              Disputes which are open or under review will be shown here. You can also review them
+              by clicking on the button.
+            </Text>
+          );
+        },
+        placement: 'bottom',
+        footer: CustomTourFooter,
+      },
+    ],
+    [args.tourStepsContent, args.tourStepsPlacement, args.tourStepsTitle],
+  );
+
+  return (
+    <Box>
+      <Button
+        marginBottom="spacing.9"
+        onClick={() => {
+          setIsOpen((prev) => !prev);
+        }}
+      >
+        {isOpen ? 'Tour In Progress' : 'Start Tour'}
+      </Button>
+      <SpotlightPopoverTour
+        steps={steps}
+        isOpen={isOpen}
+        activeStep={activeStep}
+        onFinish={() => {
+          console.log('finished');
+          setActiveStep(0);
+          setIsOpen(false);
+        }}
+        onOpenChange={({ isOpen }) => {
+          console.log('open change', isOpen);
+          setIsOpen(isOpen);
+        }}
+        onStepChange={(step) => {
+          console.log('step change', step);
+          setActiveStep(step);
+        }}
+      >
+        <Box
+          display="flex"
+          flexDirection={{ base: 'column', m: 'row' }}
+          gap="spacing.4"
+          alignItems="stretch"
+        >
+          <SpotlightPopoverTourStep name="step-1">
+            <Box width="100%">
+              <Card width="100%" height="100%">
+                <CardBody>
+                  <Box display="flex" flexDirection="column" gap="spacing.3">
+                    <Box display="flex" alignItems="center" gap="spacing.3">
+                      <Text>Refunds</Text>
+                      <InfoIcon color="surface.text.subdued.lowContrast" />
+                    </Box>
+                    <Amount value={40000} size="title-small" />
+                    <Text type="subdued">3 Processed</Text>
+                  </Box>
+                </CardBody>
+              </Card>
+            </Box>
+          </SpotlightPopoverTourStep>
+          <SpotlightPopoverTourStep name="step-2">
+            <Box width="100%">
+              <Card width="100%" height="100%">
+                <CardBody>
+                  <Box display="flex" flexDirection="column" gap="spacing.3">
+                    <Box display="flex" alignItems="center" gap="spacing.3">
+                      <Text>Disputes</Text>
+                      <InfoIcon color="surface.text.subdued.lowContrast" />
+                    </Box>
+                    <Amount value={0} size="title-small" />
+                    <SpotlightPopoverTourStep name="step-3">
+                      <Box
+                        display="flex"
+                        justifyContent="space-between"
+                        alignItems="center"
+                        gap="spacing.3"
+                      >
+                        <Text type="subdued">0 Open | 0 Under review</Text>
+                        <Button size="small" variant="tertiary">
+                          Review
+                        </Button>
+                      </Box>
+                    </SpotlightPopoverTourStep>
+                  </Box>
+                </CardBody>
+              </Card>
+            </Box>
+          </SpotlightPopoverTourStep>
+        </Box>
+      </SpotlightPopoverTour>
+    </Box>
+  );
+};
+
+export const Default = TourTemplate.bind({});
+Default.storyName = 'Default';
+
+export const CustomPlacement = () => {
+  const [activeStep, setActiveStep] = React.useState(0);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const steps = React.useMemo<SpotlightPopoverTourSteps>(
+    () => [
+      {
+        name: 'top',
+        title: 'Top',
+        content: () => {
+          return (
+            <Box>
+              <Text>Top</Text>
+            </Box>
+          );
+        },
+        placement: 'top',
+        footer: CustomTourFooter,
+      },
+      {
+        name: 'bottom',
+        content: () => {
+          return (
+            <Box>
+              <Text>Bottom</Text>
+            </Box>
+          );
+        },
+        placement: 'bottom',
+        footer: CustomTourFooter,
+      },
+      {
+        name: 'left',
+        content: () => {
+          return (
+            <Box>
+              <Text>Left</Text>
+            </Box>
+          );
+        },
+        placement: 'left',
+        footer: CustomTourFooter,
+      },
+      {
+        name: 'right',
+        content: () => {
+          return (
+            <Box>
+              <Text>Right</Text>
+            </Box>
+          );
+        },
+        placement: 'right',
+        footer: CustomTourFooter,
+      },
+    ],
+    [],
+  );
+
+  return (
+    <Box>
+      <Button
+        marginBottom="spacing.5"
+        onClick={() => {
+          setIsOpen((prev) => !prev);
+        }}
+      >
+        {isOpen ? 'Tour In Progress' : 'Start Tour'}
+      </Button>
+      <SpotlightPopoverTour
+        steps={steps}
+        isOpen={isOpen}
+        activeStep={activeStep}
+        onFinish={() => {
+          console.log('finished');
+          setActiveStep(0);
+          setIsOpen(false);
+        }}
+        onOpenChange={({ isOpen }) => {
+          console.log('open change', isOpen);
+          setIsOpen(isOpen);
+        }}
+        onStepChange={(step) => {
+          console.log('step change', step);
+          setActiveStep(step);
+        }}
+      >
+        <Text>
+          You can pass individual placement values to each step in the popover. It supports same
+          placement values as Popover (top, bottom, left, right, top-start, top-end, bottom-start,
+          bottom-end, left-start, left-end, right-start, right-end)
+        </Text>
+        <Center>
+          <Box display="flex" gap="spacing.4" alignItems="stretch">
+            <SpotlightPopoverTourStep name="top">
+              <Box padding="spacing.4" backgroundColor="surface.background.level2.lowContrast">
+                top
+              </Box>
+            </SpotlightPopoverTourStep>
+            <SpotlightPopoverTourStep name="bottom">
+              <Box padding="spacing.4" backgroundColor="surface.background.level2.lowContrast">
+                bottom
+              </Box>
+            </SpotlightPopoverTourStep>
+            <SpotlightPopoverTourStep name="left">
+              <Box padding="spacing.4" backgroundColor="surface.background.level2.lowContrast">
+                left
+              </Box>
+            </SpotlightPopoverTourStep>
+            <SpotlightPopoverTourStep name="right">
+              <Box padding="spacing.4" backgroundColor="surface.background.level2.lowContrast">
+                right
+              </Box>
+            </SpotlightPopoverTourStep>
+          </Box>
+        </Center>
+      </SpotlightPopoverTour>
+    </Box>
+  );
+};
+CustomPlacement.storyName = 'Custom Placement';
+
+export const WithScrollablePage = () => {
+  const [activeStep, setActiveStep] = React.useState(0);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const steps = React.useMemo<SpotlightPopoverTourSteps>(
+    () => [
+      {
+        name: 'razorpay-dashboard',
+        title: 'Powerful Dashboard',
+        content: () => {
+          return (
+            <Box>
+              <Text>
+                Razorpay provides a Powerful Dashboard for you to get reports and detailed
+                statistics on payments, settlements, refunds and much more for you to take better
+                business decisions.
+              </Text>
+            </Box>
+          );
+        },
+        placement: 'bottom',
+        footer: CustomTourFooter,
+      },
+      {
+        name: 'amazon-aws',
+        title: 'Infrastructure At Scale',
+        content: () => {
+          return (
+            <Box>
+              <Text>
+                With Amazon AWS, we are built for scale. To ensure that products built with Razorpay
+                are always available, we have a highly scalable and reliable infrastructure.
+              </Text>
+            </Box>
+          );
+        },
+        placement: 'bottom',
+        footer: CustomTourFooter,
+      },
+      {
+        name: 'razorpay-docs',
+        title: 'Developer Friendly APIs',
+        content: () => {
+          return (
+            <Box>
+              <Text>
+                With SDKs and documentation for all major languages and platforms, Razorpay is built
+                for developers.
+              </Text>
+            </Box>
+          );
+        },
+        placement: 'left',
+        footer: CustomTourFooter,
+      },
+    ],
+    [],
+  );
+
+  return (
+    <Box>
+      <Button
+        marginBottom="spacing.5"
+        onClick={() => {
+          setIsOpen((prev) => !prev);
+        }}
+      >
+        {isOpen ? 'Tour In Progress' : 'Start Tour'}
+      </Button>
+      <SpotlightPopoverTour
+        steps={steps}
+        isOpen={isOpen}
+        activeStep={activeStep}
+        onFinish={() => {
+          console.log('finished');
+          setActiveStep(0);
+          setIsOpen(false);
+        }}
+        onOpenChange={({ isOpen }) => {
+          console.log('open change', isOpen);
+          setIsOpen(isOpen);
+        }}
+        onStepChange={(step) => {
+          console.log('step change', step);
+          setActiveStep(step);
+        }}
+      >
+        <Text>
+          You can pass individual placement values to each step in the popover. It supports same
+          placement values as Popover (top, bottom, left, right, top-start, top-end, bottom-start,
+          bottom-end, left-start, left-end, right-start, right-end)
+        </Text>
+        <Box>
+          <Text marginY="spacing.9">
+            A{' '}
+            <SpotlightPopoverTourStep name="razorpay-dashboard">
+              <Link href="https://dashboard.razorpay.com">Powerful Dashboard</Link>
+            </SpotlightPopoverTourStep>{' '}
+            for you to get reports and detailed statistics on payments, settlements, refunds and
+            much more for you to take better business decisions.
+          </Text>
+          <Box>
+            <Text>
+              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+              has been the industry's standard dummy text ever since the 1500s, when an unknown
+              printer took a galley of type and scrambled it to make a type specimen book. It has
+              survived not only five centuries, but also the leap into electronic typesetting,
+              remaining essentially unchanged. It was popularised in the 1960s with the release of
+              Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+              publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+            </Text>
+            <Text>
+              The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet,
+              consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+              ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+              voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+              cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+              laborum." Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45
+              BC "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+              doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
+              et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
+              voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
+              qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
+              quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
+              tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad
+              minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
+              aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
+              voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum
+              fugiat quo voluptas nulla pariatur?" 1914 translation by H. Rackham "But I must
+              explain to you how all this mistaken idea of denouncing pleasure and praising pain was
+              born and I will give you a complete account of the system, and expound the actual
+              teachings of the great explorer of the truth, the master-builder of human happiness.
+              No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but
+              because those who do not know how to pursue pleasure rationally encounter consequences
+              that are extremely painful. Nor again is there anyone who loves or pursues or desires
+              to obtain pain of itself, because it is pain, but because occasionally circumstances
+              occur in which toil and pain can procure him some great pleasure. To take a trivial
+              example, which of us ever undertakes laborious physical exercise, except to obtain
+              some advantage from it? But who has any right to find fault with a man who chooses to
+              enjoy a pleasure that has no annoying consequences, or one who avoids a pain that
+              produces no resultant pleasure?" Section 1.10.33 of "de Finibus Bonorum et Malorum",
+              written by Cicero in 45 BC "At vero eos et accusamus et iusto odio dignissimos ducimus
+              qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
+              molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+              qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
+              rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
+              eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
+              omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et
+              aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates
+              repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a
+              sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut
+              perferendis doloribus asperiores repellat."
+            </Text>
+            <Text>
+              1914 translation by H. Rackham "On the other hand, we denounce with righteous
+              indignation and dislike men who are so beguiled and demoralized by the charms of
+              pleasure of the moment, so blinded by desire, that they cannot foresee the pain and
+              trouble that are bound to ensue; and equal blame belongs to those who fail in their
+              duty through weakness of will, which is the same as saying through shrinking from toil
+              and pain. These cases are perfectly simple and easy to distinguish. In a free hour,
+              when our power of choice is untrammelled and when nothing prevents our being able to
+              do what we like best, every pleasure is to be welcomed and every pain avoided. But in
+              certain circumstances and owing to the claims of duty or the obligations of business
+              it will frequently occur that pleasures have to be repudiated and annoyances accepted.
+              The wise man therefore always holds in these matters to this principle of selection:
+              he rejects pleasures to secure other greater pleasures, or else he endures pains to
+              avoid worse pains."
+            </Text>
+          </Box>
+          <Text marginY="spacing.9">
+            Over the last couple of years, we have worked hard with our banking partners so you
+            don’t have to. Razorpay's servers are completely hosted on
+            <SpotlightPopoverTourStep name="amazon-aws">
+              <Link href="https://aws.amazon.com/">&nbsp;Amazon AWS</Link>
+            </SpotlightPopoverTourStep>{' '}
+            with auto-scaling systems that scale up to handle any traffic that you throw at it today
+            or in the future.
+          </Text>
+          <Text marginY="spacing.9">
+            Built for Developers: Robust, clean,{' '}
+            <SpotlightPopoverTourStep name="razorpay-docs">
+              <Link href="https://razorpay.com/docs/api/">developer friendly APIs</Link>
+            </SpotlightPopoverTourStep>{' '}
+            , plugins and libraries for all major languages and platforms that let you focus on
+            building great products.
+          </Text>
+          <Text>
+            Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC "At vero
+            eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+            deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi,
+            id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita
+            distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
+            quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis
+            dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
+            necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
+            recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+            voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
+          </Text>
+        </Box>
+      </SpotlightPopoverTour>
+    </Box>
+  );
+};
+WithScrollablePage.storyName = 'With Scrollable Page';
+
+const InterruptibleTourFooter = ({
+  activeStep,
+  goToNext,
+  goToStep,
+  stopTour,
+  goToPrevious,
+  totalSteps,
+  setIsTourSkipped,
+}: SpotlightPopoverStepRenderProps & {
+  setIsTourSkipped: React.Dispatch<React.SetStateAction<boolean>>;
+}): React.ReactElement => {
+  const isLast = activeStep === totalSteps - 1;
+  const isFirst = activeStep === 0;
+  return (
+    <Box display="flex" justifyContent="space-between" alignItems="center" gap="spacing.7">
+      <Text size="small" weight="bold">
+        {activeStep + 1} / {totalSteps}
+      </Text>
+      <Box display="flex" gap="spacing.4">
+        <Button
+          size="small"
+          variant="tertiary"
+          onClick={() => {
+            setIsTourSkipped(true);
+            goToStep(totalSteps - 1);
+          }}
+        >
+          Skip Tour
+        </Button>
+        {!isFirst ? (
+          <Button
+            size="small"
+            variant="secondary"
+            onClick={() => {
+              goToPrevious();
+            }}
+          >
+            Prev
+          </Button>
+        ) : null}
+        {isLast ? (
+          <Button
+            size="small"
+            onClick={() => {
+              // done
+              stopTour();
+            }}
+          >
+            Done
+          </Button>
+        ) : (
+          <Button
+            size="small"
+            onClick={() => {
+              goToNext();
+            }}
+          >
+            Next
+          </Button>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+export const InterruptibleTour = () => {
+  const [activeStep, setActiveStep] = React.useState(0);
+  const [isTourSkipped, setIsTourSkipped] = React.useState(false);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const steps = React.useMemo<SpotlightPopoverTourSteps>(
+    () => [
+      {
+        name: 'step-1',
+        title: 'Step 1',
+        content: () => {
+          return (
+            <Box>
+              <Text>This is step 1, press skip</Text>
+            </Box>
+          );
+        },
+        placement: 'top',
+        footer: (props) => (
+          <InterruptibleTourFooter {...props} setIsTourSkipped={setIsTourSkipped} />
+        ),
+      },
+      {
+        name: 'step-2',
+        title: 'Step 2',
+        content: () => {
+          return (
+            <Box>
+              <Text>This is step 2</Text>
+            </Box>
+          );
+        },
+        placement: 'bottom',
+        footer: (props) => (
+          <InterruptibleTourFooter {...props} setIsTourSkipped={setIsTourSkipped} />
+        ),
+      },
+      isTourSkipped
+        ? {
+            name: 'start-tour',
+            title: 'Tour Incomplete!',
+            content: () => {
+              return (
+                <Text>
+                  We reccommend that you complete the tour to make the most of the new features. You
+                  can find it here when you want to take it.
+                </Text>
+              );
+            },
+            footer: ({ stopTour }) => {
+              return (
+                <Button
+                  size="small"
+                  onClick={() => {
+                    stopTour();
+                  }}
+                >
+                  Got it
+                </Button>
+              );
+            },
+          }
+        : {
+            name: 'start-tour',
+            title: 'Tour Complete!',
+            content: () => {
+              return (
+                <Text>
+                  You have completed the tour. You can find it here when you want to take it.
+                </Text>
+              );
+            },
+            footer: ({ stopTour }) => {
+              return (
+                <Button
+                  size="small"
+                  onClick={() => {
+                    stopTour();
+                  }}
+                >
+                  Thanks.
+                </Button>
+              );
+            },
+          },
+    ],
+    [isTourSkipped],
+  );
+
+  return (
+    <Box>
+      <SpotlightPopoverTour
+        steps={steps}
+        isOpen={isOpen}
+        activeStep={activeStep}
+        onFinish={() => {
+          console.log('finished');
+          setIsOpen(false);
+          setIsTourSkipped(false);
+          setActiveStep(0);
+        }}
+        onOpenChange={({ isOpen }) => {
+          console.log('open change', isOpen);
+          setIsOpen(isOpen);
+        }}
+        onStepChange={(step) => {
+          console.log('step change', step);
+          setActiveStep(step);
+        }}
+      >
+        <SpotlightPopoverTourStep name="start-tour">
+          <Button
+            marginBottom="spacing.5"
+            onClick={() => {
+              setIsOpen((prev) => !prev);
+            }}
+          >
+            {isOpen ? 'Tour In Progress' : 'Start Tour'}
+          </Button>
+        </SpotlightPopoverTourStep>
+        <Text>
+          You can create complex flows like interruptible tours by dynamically modifying the steps
+          array, and changing it's contents.
+        </Text>
+        <Text>
+          Compose and make use of methods provided by the tour component like{' '}
+          <Code size="medium">stopTour</Code>, <Code size="medium">goToStep</Code>,{' '}
+          <Code size="medium">goToNext</Code> etc to control the behaviour of the current tour step
+        </Text>
+        <Center>
+          <Box display="flex" gap="spacing.4" alignItems="stretch">
+            <SpotlightPopoverTourStep name="step-1">
+              <Box padding="spacing.4" backgroundColor="surface.background.level2.lowContrast">
+                Step 1
+              </Box>
+            </SpotlightPopoverTourStep>
+            <SpotlightPopoverTourStep name="step-2">
+              <Box padding="spacing.4" backgroundColor="surface.background.level2.lowContrast">
+                Step 2
+              </Box>
+            </SpotlightPopoverTourStep>
+          </Box>
+        </Center>
+      </SpotlightPopoverTour>
+    </Box>
+  );
+};
+InterruptibleTour.storyName = 'Product Usecase: Interruptible Tour';
diff --git a/packages/blade/src/components/SpotlightPopoverTour/Tour.web.tsx b/packages/blade/src/components/SpotlightPopoverTour/Tour.web.tsx
new file mode 100644
index 00000000000..90bfd794977
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/Tour.web.tsx
@@ -0,0 +1,226 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+/* eslint-disable consistent-return */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import React, { useState, useCallback, useMemo } from 'react';
+import { FloatingPortal } from '@floating-ui/react';
+import { TourContext } from './TourContext';
+import { TourPopover } from './TourPopover';
+import {
+  smoothScroll,
+  useDelayedState,
+  useIntersectionObserver,
+  useIsTransitioningBetweenSteps,
+  useLockBodyScroll,
+} from './utils';
+import type { SpotlightPopoverTourMaskRect, SpotlightPopoverTourProps } from './types';
+import { SpotlightPopoverTourMask } from './TourMask';
+import { transitionDelay } from './tourTokens';
+import { useTheme } from '~utils';
+import { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';
+
+const SpotlightPopoverTour = ({
+  steps,
+  activeStep,
+  isOpen,
+  onFinish,
+  onOpenChange,
+  onStepChange,
+  children,
+}: SpotlightPopoverTourProps): React.ReactElement => {
+  const { theme } = useTheme();
+  const [refIdMap, setRefIdMap] = useState(new Map<string, React.RefObject<HTMLElement>>());
+  const [size, setSize] = useState<SpotlightPopoverTourMaskRect>({
+    x: 0,
+    y: 0,
+    height: 0,
+    width: 0,
+  });
+
+  // delayed state is used to let the transition finish before reacting to the state changes
+  const delayedActiveStep = useDelayedState(activeStep, transitionDelay);
+  const delayedSize = useDelayedState(size, transitionDelay);
+  // keep track of when we are transitioning between steps
+  const isTransitioning = useIsTransitioningBetweenSteps(activeStep, transitionDelay);
+
+  const currentStepRef = refIdMap.get(steps[activeStep]?.name);
+  const intersection = useIntersectionObserver(currentStepRef!, {
+    threshold: 0.5,
+  });
+
+  // main step logic
+  const totalSteps = steps.length;
+  const currentStepData = useMemo(() => {
+    return steps[activeStep];
+  }, [activeStep, steps]);
+
+  const goToStep = useCallback(
+    (step: number) => {
+      if (step < 0 || step >= steps.length) return;
+      onStepChange?.(step);
+    },
+    [onStepChange, steps.length],
+  );
+
+  const goToNext = useCallback(() => {
+    let nextState = activeStep + 1;
+    if (nextState >= steps.length) {
+      nextState = steps.length - 1;
+    }
+    onStepChange?.(nextState);
+  }, [activeStep, onStepChange, steps.length]);
+
+  const goToPrevious = useCallback(() => {
+    let nextState = activeStep - 1;
+    if (nextState < 0) {
+      nextState = 0;
+    }
+    onStepChange?.(nextState);
+  }, [activeStep, onStepChange]);
+
+  const stopTour = useCallback(() => {
+    onFinish?.();
+  }, [onFinish]);
+
+  const attachStep = useCallback((id: string, ref: React.RefObject<HTMLElement>) => {
+    if (!ref) return;
+    setRefIdMap((prev) => {
+      return new Map(prev).set(id, ref);
+    });
+  }, []);
+
+  const removeStep = useCallback((id: string) => {
+    setRefIdMap((prev) => {
+      const newMap = new Map(prev);
+      newMap.delete(id);
+      return newMap;
+    });
+  }, []);
+
+  const updateMaskSize = useCallback(() => {
+    const ref = refIdMap.get(steps[activeStep]?.name);
+    if (!ref?.current) return;
+
+    const rect = ref.current.getBoundingClientRect();
+    setSize({
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+    });
+  }, [activeStep, refIdMap, steps]);
+
+  const scrollToStep = useCallback(() => {
+    const ref = refIdMap.get(steps[delayedActiveStep]?.name);
+    if (!ref?.current) return;
+
+    // If the element is already in view, don't scroll
+    if (intersection?.isIntersecting) return;
+
+    smoothScroll(ref.current, {
+      behavior: 'smooth',
+      block: 'center',
+      inline: 'center',
+    })
+      .then(() => {
+        updateMaskSize();
+      })
+      .finally(() => {
+        // do nothing
+      });
+  }, [delayedActiveStep, refIdMap, steps, updateMaskSize, intersection?.isIntersecting]);
+
+  // Update the size of the mask when the active step changes
+  useIsomorphicLayoutEffect(() => {
+    updateMaskSize();
+  }, [isOpen, activeStep, refIdMap, steps, updateMaskSize]);
+
+  // Scroll into view when the active step changes
+  useIsomorphicLayoutEffect(() => {
+    setTimeout(() => {
+      if (!isOpen) return;
+      if (isTransitioning) return;
+      scrollToStep();
+    }, transitionDelay);
+  }, [isOpen, scrollToStep, isTransitioning]);
+
+  useLockBodyScroll(isOpen);
+
+  // reset the mask size when the tour is closed
+  React.useEffect(() => {
+    if (isOpen) {
+      updateMaskSize();
+      onOpenChange?.({ isOpen });
+    }
+    if (!isOpen) {
+      setSize({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  const contextValue = useMemo(() => {
+    return { attachStep, removeStep };
+  }, [attachStep, removeStep]);
+
+  return (
+    <TourContext.Provider value={contextValue}>
+      <FloatingPortal>
+        {isOpen ? (
+          <SpotlightPopoverTourMask
+            isTransitioning={isTransitioning}
+            padding={theme.spacing[4]}
+            size={delayedSize}
+          />
+        ) : null}
+      </FloatingPortal>
+
+      {steps.map((step) => {
+        const isStepActive = currentStepData.name === step.name;
+        const attachTo = isStepActive ? currentStepRef : undefined;
+        // 1. only show popover if the tour is opened
+        // 2. only show the popover if the step is active
+        // 3. do not show the popover if we are transitioning between steps
+        //    this ensures popover suddenly doesn't jump to the next step,
+        //    instead it waits for the transition to finish
+        const isPopoverVisible = isOpen && isStepActive && !isTransitioning;
+
+        return (
+          <TourPopover
+            key={step.name}
+            isTransitioning={delayedActiveStep !== activeStep}
+            placement={step.placement}
+            isOpen={isPopoverVisible}
+            onOpenChange={onOpenChange}
+            title={step.title}
+            titleLeading={step.titleLeading}
+            content={step?.content?.({
+              activeStep: delayedActiveStep,
+              goToPrevious,
+              goToNext,
+              goToStep,
+              totalSteps,
+              stopTour,
+            })}
+            footer={step?.footer?.({
+              activeStep: delayedActiveStep,
+              goToPrevious,
+              goToNext,
+              goToStep,
+              totalSteps,
+              stopTour,
+            })}
+            attachTo={attachTo}
+          />
+        );
+      })}
+
+      {children}
+    </TourContext.Provider>
+  );
+};
+
+export { SpotlightPopoverTour };
diff --git a/packages/blade/src/components/SpotlightPopoverTour/TourContext.tsx b/packages/blade/src/components/SpotlightPopoverTour/TourContext.tsx
new file mode 100644
index 00000000000..a10279cf122
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/TourContext.tsx
@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from 'react';
+import { throwBladeError } from '~utils/logger';
+
+type TourContextProps = {
+  attachStep: (id: string, ref: React.RefObject<HTMLElement>) => void;
+  removeStep: (id: string) => void;
+} | null;
+
+const TourContext = React.createContext<TourContextProps>(null);
+
+const useTourContext = (): NonNullable<TourContextProps> => {
+  const context = React.useContext(TourContext);
+
+  if (!context) {
+    throwBladeError({
+      moduleName: 'Tour',
+      message: 'useTourContext must be used within Tour',
+    });
+  }
+
+  return context!;
+};
+
+export { useTourContext, TourContext };
diff --git a/packages/blade/src/components/SpotlightPopoverTour/TourFooter.native.tsx b/packages/blade/src/components/SpotlightPopoverTour/TourFooter.native.tsx
new file mode 100644
index 00000000000..3eda320ec19
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/TourFooter.native.tsx
@@ -0,0 +1,14 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
+import { throwBladeError } from '~utils/logger';
+
+const SpotlightPopoverTourFooter = (): React.ReactElement => {
+  throwBladeError({
+    message: 'Tour is not yet implemented for native',
+    moduleName: 'Tour',
+  });
+
+  return <></>;
+};
+
+export { SpotlightPopoverTourFooter };
diff --git a/packages/blade/src/components/SpotlightPopoverTour/TourFooter.web.tsx b/packages/blade/src/components/SpotlightPopoverTour/TourFooter.web.tsx
new file mode 100644
index 00000000000..20a4ab4a1d0
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/TourFooter.web.tsx
@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
+import type { SpotlightPopoverStepRenderProps } from './types';
+import type { ButtonProps } from '~components/Button';
+import { Button } from '~components/Button';
+import { Box } from '~components/Box';
+import { Text } from '~components/Typography';
+
+type SpotlightPopoverFooterAction = {
+  text?: string;
+} & Pick<ButtonProps, 'variant' | 'icon' | 'iconPosition' | 'isDisabled' | 'isLoading' | 'onClick'>;
+
+type SpotlightPopoverTourFooterProps = {
+  actions: {
+    primary?: SpotlightPopoverFooterAction;
+    secondary?: SpotlightPopoverFooterAction;
+  };
+};
+
+const SpotlightPopoverTourFooter = ({
+  activeStep,
+  totalSteps,
+  actions,
+}: SpotlightPopoverTourFooterProps &
+  Pick<SpotlightPopoverStepRenderProps, 'activeStep' | 'totalSteps'>): React.ReactElement => {
+  const hasPrimaryAction = Boolean(actions?.primary);
+  const hasSecondaryAction = Boolean(actions?.secondary);
+
+  let isBothIcon = false;
+  if (hasPrimaryAction && hasSecondaryAction) {
+    const primaryHasIcon = Boolean(actions?.primary?.icon);
+    const secondaryHasIcon = Boolean(actions?.secondary?.icon);
+    isBothIcon = primaryHasIcon && secondaryHasIcon;
+  }
+
+  return (
+    <Box display="flex" justifyContent="space-between" alignItems="center" gap="spacing.7">
+      <Text size="small" weight="bold">
+        {activeStep + 1} / {totalSteps}
+      </Text>
+      <Box display="flex" gap={isBothIcon ? 'spacing.3' : 'spacing.4'}>
+        {hasSecondaryAction ? (
+          <Button size="small" variant="secondary" {...actions.secondary}>
+            {actions?.secondary!.text!}
+          </Button>
+        ) : null}
+        {hasPrimaryAction ? (
+          <Button size="small" variant="primary" {...actions.primary}>
+            {actions?.primary!.text!}
+          </Button>
+        ) : null}
+      </Box>
+    </Box>
+  );
+};
+
+export { SpotlightPopoverTourFooter };
diff --git a/packages/blade/src/components/SpotlightPopoverTour/TourMask.native.tsx b/packages/blade/src/components/SpotlightPopoverTour/TourMask.native.tsx
new file mode 100644
index 00000000000..15f5aa2c0bd
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/TourMask.native.tsx
@@ -0,0 +1,14 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { throwBladeError } from '~utils/logger';
+
+const SpotlightPopoverTourMask = (_: any): React.ReactElement => {
+  throwBladeError({
+    message: 'Tour is not yet implemented for native',
+    moduleName: 'Tour',
+  });
+
+  return <></>;
+};
+
+export { SpotlightPopoverTourMask };
diff --git a/packages/blade/src/components/SpotlightPopoverTour/TourMask.web.tsx b/packages/blade/src/components/SpotlightPopoverTour/TourMask.web.tsx
new file mode 100644
index 00000000000..a69dedd6661
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/TourMask.web.tsx
@@ -0,0 +1,190 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import React from 'react';
+import type { FlattenSimpleInterpolation } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
+import usePresence from 'use-presence';
+import type { SpotlightPopoverTourMaskRect } from './types';
+import { tourMaskZIndex } from './tourTokens';
+import { useWindowSize } from '~utils/useWindowSize';
+import { makeSpace, useTheme } from '~utils';
+import { makeMotionTime } from '~utils/makeMotionTime';
+import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
+import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
+
+const scaleIn = keyframes`
+  from {
+    fill-opacity: 0;
+  }
+  to {
+    fill-opacity: 1;
+  }
+`;
+const fadeOut = keyframes`
+  from {
+    fill-opacity: 1;
+  }
+  to {
+    fill-opacity: 0;
+  }
+`;
+
+const pulsingAnimation = keyframes`
+  0% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+
+const AnimatedFade = styled.rect<{ animationType: FlattenSimpleInterpolation | null }>(
+  ({ animationType }) =>
+    animationType === null
+      ? ''
+      : css`
+          ${animationType}
+        `,
+);
+
+const StyledPlusing = styled.rect<{ animationType: FlattenSimpleInterpolation | null }>(
+  ({ animationType }) => {
+    return animationType === null
+      ? ''
+      : css`
+          ${animationType}
+        `;
+  },
+);
+
+type FadeRectProps = React.ComponentProps<'rect'> & {
+  show: boolean;
+};
+const FadeRect = React.memo(
+  ({ show, children, ...rest }: FadeRectProps): React.ReactElement => {
+    const { theme } = useTheme();
+
+    const duration = theme.motion.duration.gentle;
+    const enter = css`
+      animation: ${scaleIn} ${makeMotionTime(duration)}
+        ${(theme.motion.easing.entrance.effective as unknown) as string};
+      animation-fill-mode: forwards;
+    `;
+
+    const exit = css`
+      animation: ${fadeOut} ${makeMotionTime(duration)}
+        ${(theme.motion.easing.exit.effective as unknown) as string};
+      animation-fill-mode: forwards;
+    `;
+
+    const { isVisible } = usePresence(Boolean(show), {
+      transitionDuration: duration,
+      initialEnter: false,
+    });
+
+    return (
+      // @ts-expect-error styled compoennt types are different from react types
+      <AnimatedFade animationType={isVisible ? enter : exit} {...rest}>
+        {children}
+      </AnimatedFade>
+    );
+  },
+);
+
+const PulsingRect = React.memo(
+  (props: React.ComponentProps<'rect'>): React.ReactElement => {
+    const pulsing = css`
+      animation: ${pulsingAnimation} 2s;
+      animation-iteration-count: infinite;
+      animation-direction: alternate;
+    `;
+
+    return (
+      // @ts-expect-error styled compoennt types are different from react types
+      <StyledPlusing animationType={pulsing} {...props} />
+    );
+  },
+);
+
+type SpotlightPopoverTourMaskProps = {
+  padding: number;
+  size: SpotlightPopoverTourMaskRect;
+  isTransitioning: boolean;
+};
+
+const absoluteFill = {
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  zIndex: tourMaskZIndex,
+} as const;
+
+const _SpotlightPopoverTourMask = ({
+  padding,
+  size,
+  isTransitioning,
+}: SpotlightPopoverTourMaskProps): React.ReactElement => {
+  const { theme } = useTheme();
+  const { width: windowWidth, height: windowHeight } = useWindowSize();
+
+  const width = size.width + padding;
+  const height = size.height + padding;
+  const x = size.x - (width - size.width) / 2;
+  const y = size.y - (height - size.height) / 2;
+
+  const borderWidth = theme.spacing[1];
+  const borderRadius = theme.spacing[2];
+
+  const isSizeZero = size.width === 0 || size.height === 0;
+
+  return (
+    <svg
+      style={absoluteFill}
+      viewBox={`0 0 ${windowWidth} ${windowHeight}`}
+      fill="none"
+      stroke="none"
+      {...metaAttribute({ name: MetaConstants.TourMask })}
+    >
+      <PulsingRect
+        x={x + borderWidth / 2}
+        y={y + borderWidth / 2}
+        width={width - borderWidth}
+        height={height - borderWidth}
+        stroke={theme.colors.brand.primary[500]}
+        strokeWidth={makeSpace(borderWidth)}
+        rx={borderRadius - 1}
+        ry={borderRadius - 1}
+        fill="transparent"
+        opacity={isSizeZero ? 0 : 1}
+      />
+
+      <mask id="tour-mask" x={0} y={0} height="100%" width="100%" stroke="none">
+        <rect height="100%" width="100%" fill="#fff" />
+        {!isSizeZero && (
+          <FadeRect
+            show={!isTransitioning}
+            x={x}
+            y={y}
+            width={width}
+            height={height}
+            rx={borderRadius}
+            ry={borderRadius}
+            fill="#000"
+          />
+        )}
+      </mask>
+      <rect
+        height="100%"
+        width="100%"
+        mask="url(#tour-mask)"
+        fill={theme.colors.surface.overlay.background[800]}
+      />
+    </svg>
+  );
+};
+
+const SpotlightPopoverTourMask = assignWithoutSideEffects(React.memo(_SpotlightPopoverTourMask), {
+  displayName: 'TourMask',
+});
+export { SpotlightPopoverTourMask };
diff --git a/packages/blade/src/components/SpotlightPopoverTour/TourPopover.native.tsx b/packages/blade/src/components/SpotlightPopoverTour/TourPopover.native.tsx
new file mode 100644
index 00000000000..0a4efa88d86
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/TourPopover.native.tsx
@@ -0,0 +1,14 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { throwBladeError } from '~utils/logger';
+
+const TourPopover = (_: any): React.ReactElement => {
+  throwBladeError({
+    message: 'Tour is not yet implemented for native',
+    moduleName: 'Tour',
+  });
+
+  return <></>;
+};
+
+export { TourPopover };
diff --git a/packages/blade/src/components/SpotlightPopoverTour/TourPopover.web.tsx b/packages/blade/src/components/SpotlightPopoverTour/TourPopover.web.tsx
new file mode 100644
index 00000000000..8059261eef3
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/TourPopover.web.tsx
@@ -0,0 +1,182 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+/* eslint-disable @typescript-eslint/restrict-plus-operands */
+import {
+  shift,
+  FloatingPortal,
+  arrow,
+  flip,
+  offset,
+  useFloating,
+  useInteractions,
+  useRole,
+  useTransitionStyles,
+  autoUpdate,
+  useClick,
+  useDismiss,
+  FloatingFocusManager,
+} from '@floating-ui/react';
+import React from 'react';
+import { PopoverContent } from '../Popover/PopoverContent';
+import { ARROW_HEIGHT, ARROW_WIDTH, popoverZIndex } from '../Popover/constants';
+import { PopoverContext } from '../Popover/PopoverContext';
+import { transitionDelay } from './tourTokens';
+import { useTheme } from '~components/BladeProvider';
+import BaseBox from '~components/Box/BaseBox';
+import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
+import { size } from '~tokens/global';
+import { useControllableState } from '~utils/useControllable';
+import { PopupArrow } from '~components/PopupArrow';
+import { makeAccessible } from '~utils/makeAccessible';
+import { useId } from '~utils/useId';
+import { getFloatingPlacementParts } from '~utils/getFloatingPlacementParts';
+import type { PopoverProps } from '~components/Popover';
+
+type TourPopoverProps = Omit<PopoverProps, 'children' | 'initialFocusRef'> & {
+  attachTo: React.RefObject<HTMLElement> | undefined;
+  isTransitioning: boolean;
+};
+
+// TODO: Refactor out Popover/FloatingUI logic to a reusable hook/component later on
+const TourPopover = ({
+  attachTo,
+  content,
+  title,
+  titleLeading,
+  footer,
+  placement = 'top',
+  onOpenChange,
+  zIndex = popoverZIndex,
+  isOpen,
+  defaultIsOpen,
+  isTransitioning,
+}: TourPopoverProps): React.ReactElement => {
+  const { theme } = useTheme();
+  const defaultInitialFocusRef = React.useRef<HTMLButtonElement>(null);
+  const arrowRef = React.useRef<SVGSVGElement>(null);
+  const titleId = useId('popover-title');
+
+  const GAP = theme.spacing[4];
+  const [side] = getFloatingPlacementParts(placement);
+  const isHorizontal = side === 'left' || side === 'right';
+  const isOppositeAxis = side === 'right' || side === 'bottom';
+
+  const [controllableIsOpen, controllableSetIsOpen] = useControllableState({
+    value: isOpen,
+    defaultValue: defaultIsOpen,
+    onChange: (isOpen) => onOpenChange?.({ isOpen }),
+  });
+
+  const { refs, floatingStyles, context, placement: computedPlacement } = useFloating({
+    open: controllableIsOpen,
+    onOpenChange: (isOpen) => controllableSetIsOpen(() => isOpen),
+    placement,
+    strategy: 'fixed',
+    middleware: [
+      shift({ crossAxis: false, padding: GAP }),
+      flip({ padding: GAP, fallbackAxisSideDirection: 'end' }),
+      offset(GAP + ARROW_HEIGHT),
+      arrow({
+        element: arrowRef,
+        padding: isHorizontal ? GAP + ARROW_HEIGHT : ARROW_WIDTH,
+      }),
+    ],
+    transform: true,
+    whileElementsMounted: autoUpdate,
+  });
+
+  const close = React.useCallback(() => {
+    controllableSetIsOpen(() => false);
+  }, [controllableSetIsOpen]);
+
+  // we need to animate from the offset of the computed placement
+  // because placement can change dynamically based on available space
+  const [computedSide] = getFloatingPlacementParts(computedPlacement);
+  const computedIsHorizontal = computedSide === 'left' || computedSide === 'right';
+  const animationOffset = isOppositeAxis ? -size[4] : size[4];
+
+  const { isMounted, styles } = useTransitionStyles(context, {
+    duration: {
+      open: transitionDelay,
+      close: theme.motion.duration.xquick,
+    },
+    initial: {
+      opacity: 0,
+      transform: `translate${computedIsHorizontal ? 'X' : 'Y'}(${animationOffset}px)`,
+    },
+  });
+
+  // remove click handler if popover is controlled
+  const isControlled = isOpen !== undefined;
+  const click = useClick(context, { enabled: !isControlled });
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+
+  const { getFloatingProps } = useInteractions([click, dismiss, role]);
+
+  const contextValue = React.useMemo(() => {
+    return {
+      close,
+      defaultInitialFocusRef,
+      titleId,
+    };
+  }, [close, titleId]);
+
+  // https://github.com/floating-ui/floating-ui/discussions/2352#discussioncomment-6044834
+  React.useLayoutEffect(() => {
+    window.setTimeout(() => {
+      if (!attachTo) return;
+      refs.setReference(attachTo.current);
+      refs.setPositionReference(attachTo.current);
+    });
+  }, [attachTo, refs, isOpen]);
+
+  return (
+    <PopoverContext.Provider value={contextValue}>
+      <FloatingPortal>
+        <FloatingFocusManager
+          // TODO: check if isTransitioning is enough since scrolling can take longer
+          disabled={isOpen === false || !isMounted || isTransitioning}
+          initialFocus={defaultInitialFocusRef}
+          context={context}
+          modal={true}
+          guards={true}
+        >
+          {isMounted ? (
+            <BaseBox
+              ref={refs.setFloating}
+              style={{ ...floatingStyles, pointerEvents: isMounted ? 'auto' : 'none' }}
+              // TODO: Tokenize zIndex values
+              zIndex={zIndex}
+              {...getFloatingProps()}
+              {...metaAttribute({ name: MetaConstants.TourPopover })}
+              {...makeAccessible({ labelledBy: titleId })}
+            >
+              <PopoverContent
+                title={title}
+                titleLeading={titleLeading}
+                footer={footer}
+                style={styles}
+                arrow={
+                  <PopupArrow
+                    ref={arrowRef}
+                    context={context}
+                    width={ARROW_WIDTH}
+                    height={ARROW_HEIGHT}
+                    fillColor={theme.colors.surface.popup.background}
+                    strokeColor={theme.colors.brand.gray[400].lowContrast}
+                  />
+                }
+              >
+                {content}
+              </PopoverContent>
+            </BaseBox>
+          ) : (
+            <></>
+          )}
+        </FloatingFocusManager>
+      </FloatingPortal>
+    </PopoverContext.Provider>
+  );
+};
+
+export { TourPopover };
diff --git a/packages/blade/src/components/SpotlightPopoverTour/TourStep.native.tsx b/packages/blade/src/components/SpotlightPopoverTour/TourStep.native.tsx
new file mode 100644
index 00000000000..8c775b3cc9e
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/TourStep.native.tsx
@@ -0,0 +1,14 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import type { SpotlightPopoverTourStepProps } from './types';
+import { throwBladeError } from '~utils/logger';
+
+const SpotlightPopoverTourStep = (_props: SpotlightPopoverTourStepProps): React.ReactElement => {
+  throwBladeError({
+    message: 'TourStep is not yet implemented for native',
+    moduleName: 'TourStep',
+  });
+
+  return <></>;
+};
+
+export { SpotlightPopoverTourStep };
diff --git a/packages/blade/src/components/SpotlightPopoverTour/TourStep.web.tsx b/packages/blade/src/components/SpotlightPopoverTour/TourStep.web.tsx
new file mode 100644
index 00000000000..d270525bf18
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/TourStep.web.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable consistent-return */
+import React from 'react';
+import { useTourContext } from './TourContext';
+import type { SpotlightPopoverTourStepProps } from './types';
+import { mergeRefs } from '~utils/useMergeRefs';
+import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
+
+const _SpotlightPopoverTourStep = ({
+  name,
+  children,
+}: SpotlightPopoverTourStepProps): React.ReactElement => {
+  const ref = React.useRef<HTMLElement>(null);
+  const { attachStep, removeStep } = useTourContext();
+
+  React.useLayoutEffect(() => {
+    if (!ref) return;
+    attachStep(name, ref);
+
+    return () => {
+      removeStep(name);
+    };
+  }, [ref, attachStep, name, removeStep]);
+
+  const child = children as React.ReactElement;
+  return React.cloneElement(child, {
+    ...child.props,
+    ref: mergeRefs(ref, (child as any)?.ref),
+  });
+};
+
+const SpotlightPopoverTourStep = assignWithoutSideEffects(React.memo(_SpotlightPopoverTourStep), {
+  displayName: 'TourStep',
+});
+
+export { SpotlightPopoverTourStep };
diff --git a/packages/blade/src/components/SpotlightPopoverTour/_KitchenSink.Tour.stories.tsx b/packages/blade/src/components/SpotlightPopoverTour/_KitchenSink.Tour.stories.tsx
new file mode 100644
index 00000000000..dba644d354a
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/_KitchenSink.Tour.stories.tsx
@@ -0,0 +1,31 @@
+import { composeStories } from '@storybook/react';
+import * as tourStories from './Tour.stories';
+import { Box } from '~components/Box';
+import { Heading } from '~components/Typography';
+
+const allStories = Object.values(composeStories(tourStories));
+
+export const Tour = (): JSX.Element => {
+  return (
+    <Box display="flex" flexDirection="column" gap="spacing.4">
+      {allStories.map((Story) => {
+        return (
+          <>
+            <Heading>{Story.storyName}</Heading>
+            <Story />
+          </>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default {
+  title: 'Components/KitchenSink/Tour',
+  component: Tour,
+  parameters: {
+    // enable Chromatic's snapshotting only for kitchensink
+    chromatic: { disableSnapshot: false },
+    options: { showPanel: false },
+  },
+};
diff --git a/packages/blade/src/components/SpotlightPopoverTour/__tests__/Tour.ssr.test.tsx b/packages/blade/src/components/SpotlightPopoverTour/__tests__/Tour.ssr.test.tsx
new file mode 100644
index 00000000000..5f2147f04ad
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/__tests__/Tour.ssr.test.tsx
@@ -0,0 +1,117 @@
+/* eslint-disable blade/no-cross-platform-imports */
+/* eslint-disable @typescript-eslint/require-await */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import React from 'react';
+import { SpotlightPopoverTour } from '../Tour.web';
+import { SpotlightPopoverTourStep } from '../TourStep.web';
+import type { SpotlightPopoverStepRenderProps, SpotlightPopoverTourSteps } from '../types';
+import { SpotlightPopoverTourFooter } from '../TourFooter.web';
+import { Button } from '~components/Button';
+import renderWithSSR from '~utils/testing/renderWithSSR.web';
+import { Box } from '~components/Box';
+import { Text } from '~components/Typography';
+
+const nextButtonText = 'Next';
+const prevButtonText = 'Prev';
+const doneButtonText = 'Done';
+
+const CustomFooter = ({
+  activeStep,
+  totalSteps,
+  goToNext,
+  goToPrevious,
+  stopTour,
+}: SpotlightPopoverStepRenderProps) => {
+  const isLast = activeStep === totalSteps - 1;
+  const isFirst = activeStep === 0;
+  return (
+    <SpotlightPopoverTourFooter
+      activeStep={activeStep}
+      totalSteps={totalSteps}
+      actions={{
+        primary: isLast
+          ? {
+              text: doneButtonText,
+              onClick: stopTour,
+            }
+          : {
+              text: nextButtonText,
+              onClick: goToNext,
+            },
+        secondary: isFirst
+          ? undefined
+          : {
+              text: prevButtonText,
+              onClick: goToPrevious,
+            },
+      }}
+    />
+  );
+};
+
+const openTourButtonText = 'Open Tour';
+const steps: SpotlightPopoverTourSteps = [
+  {
+    name: 'step-1',
+    content: () => <Text>Step 1</Text>,
+    placement: 'bottom',
+    footer: CustomFooter,
+  },
+  {
+    name: 'step-2',
+    content: () => <Text>Step 2</Text>,
+    placement: 'bottom',
+    footer: CustomFooter,
+  },
+];
+const BasicTourExample = () => {
+  const [activeStep, setActiveStep] = React.useState(0);
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <Box>
+      <Button
+        marginBottom="spacing.9"
+        onClick={() => {
+          setIsOpen((prev) => !prev);
+        }}
+      >
+        {openTourButtonText}
+      </Button>
+      <SpotlightPopoverTour
+        steps={steps}
+        isOpen={isOpen}
+        activeStep={activeStep}
+        onFinish={() => {
+          setActiveStep(0);
+          setIsOpen(false);
+        }}
+        onOpenChange={({ isOpen }) => {
+          setIsOpen(isOpen);
+        }}
+        onStepChange={(step) => {
+          setActiveStep(step);
+        }}
+      >
+        <Box>Some other content inside</Box>
+        <SpotlightPopoverTourStep name="step-1">
+          <Box>
+            <Text>Trigger 1</Text>
+          </Box>
+        </SpotlightPopoverTourStep>
+        <SpotlightPopoverTourStep name="step-2">
+          <Box>
+            <Text>Trigger 2</Text>
+          </Box>
+        </SpotlightPopoverTourStep>
+      </SpotlightPopoverTour>
+    </Box>
+  );
+};
+
+describe('<Tour />', () => {
+  it('should render Tour ssr', () => {
+    const { baseElement } = renderWithSSR(<BasicTourExample />);
+    expect(baseElement).toMatchSnapshot();
+  });
+});
diff --git a/packages/blade/src/components/SpotlightPopoverTour/__tests__/Tour.web.test.tsx b/packages/blade/src/components/SpotlightPopoverTour/__tests__/Tour.web.test.tsx
new file mode 100644
index 00000000000..b142dd2aba7
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/__tests__/Tour.web.test.tsx
@@ -0,0 +1,272 @@
+/* eslint-disable @typescript-eslint/require-await */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { act, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { SpotlightPopoverTour } from '../Tour.web';
+import { SpotlightPopoverTourStep } from '../TourStep.web';
+import type { SpotlightPopoverStepRenderProps, SpotlightPopoverTourSteps } from '../types';
+import { SpotlightPopoverTourFooter } from '../TourFooter.web';
+import { Button } from '~components/Button';
+import { paymentTheme } from '~tokens/theme';
+import renderWithTheme from '~utils/testing/renderWithTheme.web';
+import { Box } from '~components/Box';
+import { Text } from '~components/Typography';
+import assertAccessible from '~utils/testing/assertAccessible.web';
+
+const animationDuration = paymentTheme.motion.duration.gentle;
+const nextButtonText = 'Next';
+const prevButtonText = 'Prev';
+const doneButtonText = 'Done';
+const onStepChangeFn = jest.fn();
+const onOpenChangeFn = jest.fn();
+const onFinishFn = jest.fn();
+
+beforeAll(() => {
+  window.HTMLElement.prototype.scrollIntoView = jest.fn();
+});
+beforeEach(() => {
+  onStepChangeFn.mockReset();
+  onOpenChangeFn.mockReset();
+  onFinishFn.mockReset();
+});
+
+const CustomFooter = ({
+  activeStep,
+  totalSteps,
+  goToNext,
+  goToPrevious,
+  stopTour,
+}: SpotlightPopoverStepRenderProps) => {
+  const isLast = activeStep === totalSteps - 1;
+  const isFirst = activeStep === 0;
+  return (
+    <SpotlightPopoverTourFooter
+      activeStep={activeStep}
+      totalSteps={totalSteps}
+      actions={{
+        primary: isLast
+          ? {
+              text: doneButtonText,
+              onClick: stopTour,
+            }
+          : {
+              text: nextButtonText,
+              onClick: goToNext,
+            },
+        secondary: isFirst
+          ? undefined
+          : {
+              text: prevButtonText,
+              onClick: goToPrevious,
+            },
+      }}
+    />
+  );
+};
+
+const openTourButtonText = 'Open Tour';
+const steps: SpotlightPopoverTourSteps = [
+  {
+    name: 'step-1',
+    content: () => <Text>Step 1</Text>,
+    placement: 'bottom',
+    footer: CustomFooter,
+  },
+  {
+    name: 'step-2',
+    content: () => <Text>Step 2</Text>,
+    placement: 'bottom',
+    footer: CustomFooter,
+  },
+];
+const BasicTourExample = () => {
+  const [activeStep, setActiveStep] = React.useState(0);
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <Box>
+      <Button
+        marginBottom="spacing.9"
+        onClick={() => {
+          setIsOpen((prev) => !prev);
+        }}
+      >
+        {openTourButtonText}
+      </Button>
+      <SpotlightPopoverTour
+        steps={steps}
+        isOpen={isOpen}
+        activeStep={activeStep}
+        onFinish={() => {
+          setActiveStep(0);
+          setIsOpen(false);
+          onFinishFn();
+        }}
+        onOpenChange={({ isOpen }) => {
+          setIsOpen(isOpen);
+          onOpenChangeFn(isOpen);
+        }}
+        onStepChange={(step) => {
+          setActiveStep(step);
+          onStepChangeFn(step);
+        }}
+      >
+        <SpotlightPopoverTourStep name="step-1">
+          <Box>
+            <Text>Trigger 1</Text>
+          </Box>
+        </SpotlightPopoverTourStep>
+        <SpotlightPopoverTourStep name="step-2">
+          <Box>
+            <Text>Trigger 2</Text>
+          </Box>
+        </SpotlightPopoverTourStep>
+      </SpotlightPopoverTour>
+    </Box>
+  );
+};
+
+describe('<Tour />', () => {
+  jest.useFakeTimers();
+
+  it('should render', async () => {
+    const { baseElement, getByRole, queryByRole, queryByText } = renderWithTheme(
+      <BasicTourExample />,
+    );
+
+    expect(queryByText('Step 1')).not.toBeInTheDocument();
+
+    // snapshot while on opened
+    fireEvent.click(getByRole('button', { name: openTourButtonText }));
+    await act(async () => {
+      jest.advanceTimersByTime(animationDuration);
+    });
+
+    expect(queryByRole('dialog')).toBeInTheDocument();
+    expect(queryByText('Step 1')).toBeInTheDocument();
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('should go to next/prev step', async () => {
+    const { getByRole, queryByRole, queryByText } = renderWithTheme(<BasicTourExample />);
+
+    expect(queryByRole('dialog')).not.toBeInTheDocument();
+    expect(queryByText('Step 1')).not.toBeInTheDocument();
+
+    // snapshot while on opened
+    fireEvent.click(getByRole('button', { name: openTourButtonText }));
+    await act(async () => {
+      jest.advanceTimersByTime(animationDuration);
+    });
+
+    expect(queryByRole('dialog')).toBeInTheDocument();
+    expect(queryByText('Step 1')).toBeInTheDocument();
+    expect(onStepChangeFn).not.toHaveBeenCalled();
+
+    // go to next step
+    fireEvent.click(getByRole('button', { name: nextButtonText }));
+
+    await act(async () => {
+      jest.advanceTimersByTime(animationDuration);
+    });
+
+    expect(queryByText('Step 1')).not.toBeInTheDocument();
+    expect(queryByText('Step 2')).toBeInTheDocument();
+    expect(onStepChangeFn).toHaveBeenCalledWith(1);
+
+    // We are at the end of the tour step, expect done button to be visible
+    expect(getByRole('button', { name: doneButtonText })).toBeInTheDocument();
+
+    // got to previous step
+    fireEvent.click(getByRole('button', { name: prevButtonText }));
+
+    await act(async () => {
+      jest.advanceTimersByTime(animationDuration);
+    });
+
+    expect(queryByText('Step 1')).toBeInTheDocument();
+    expect(queryByText('Step 2')).not.toBeInTheDocument();
+    expect(onStepChangeFn).toHaveBeenCalledWith(0);
+  });
+
+  it('should close on clicking the close button', async () => {
+    const { getByRole, queryByRole, queryByText } = renderWithTheme(<BasicTourExample />);
+
+    expect(queryByText('Step 1')).not.toBeInTheDocument();
+    expect(onOpenChangeFn).not.toHaveBeenCalled();
+
+    // click on open tour button
+    fireEvent.click(getByRole('button', { name: openTourButtonText }));
+    await act(async () => {
+      jest.advanceTimersByTime(animationDuration);
+    });
+
+    expect(queryByRole('dialog')).toBeInTheDocument();
+    expect(queryByText('Step 1')).toBeInTheDocument();
+    expect(onOpenChangeFn).toHaveBeenCalledWith(true);
+
+    // close the tour
+    fireEvent.click(getByRole('button', { name: 'Close' }));
+
+    await act(async () => {
+      jest.advanceTimersByTime(animationDuration);
+    });
+
+    expect(queryByRole('dialog')).not.toBeInTheDocument();
+    expect(queryByText('Step 1')).not.toBeInTheDocument();
+    expect(onOpenChangeFn).toHaveBeenCalledWith(false);
+  });
+
+  it('should call onFinish when calling stopTour method', async () => {
+    const { getByRole, queryByRole, queryByText } = renderWithTheme(<BasicTourExample />);
+
+    expect(queryByText('Step 1')).not.toBeInTheDocument();
+    expect(onOpenChangeFn).not.toHaveBeenCalled();
+    expect(onFinishFn).not.toHaveBeenCalled();
+
+    // click on open tour button
+    fireEvent.click(getByRole('button', { name: openTourButtonText }));
+    await act(async () => {
+      jest.advanceTimersByTime(animationDuration);
+    });
+
+    expect(queryByRole('dialog')).toBeInTheDocument();
+    expect(queryByText('Step 1')).toBeInTheDocument();
+    expect(onOpenChangeFn).toHaveBeenCalledWith(true);
+    expect(onFinishFn).not.toHaveBeenCalled();
+
+    // Go to last step
+    fireEvent.click(getByRole('button', { name: nextButtonText }));
+    await act(async () => {
+      jest.advanceTimersByTime(animationDuration);
+    });
+
+    expect(queryByText('Step 2')).toBeInTheDocument();
+    expect(getByRole('button', { name: doneButtonText })).toBeInTheDocument();
+    expect(onFinishFn).not.toHaveBeenCalled();
+
+    // stop tour
+    fireEvent.click(getByRole('button', { name: doneButtonText }));
+
+    await act(async () => {
+      jest.advanceTimersByTime(animationDuration);
+    });
+
+    expect(queryByText('Step 2')).not.toBeInTheDocument();
+    expect(queryByRole('dialog')).not.toBeInTheDocument();
+    expect(onFinishFn).toHaveBeenCalled();
+  });
+
+  it('should not have a11y violations', async () => {
+    const { baseElement, getByRole } = renderWithTheme(<BasicTourExample />);
+
+    // snapshot while on opened
+    fireEvent.click(getByRole('button', { name: openTourButtonText }));
+    await act(async () => {
+      jest.advanceTimersByTime(animationDuration);
+    });
+
+    // check for a11y violations
+    assertAccessible(baseElement);
+  });
+});
diff --git a/packages/blade/src/components/SpotlightPopoverTour/__tests__/__snapshots__/Tour.ssr.test.tsx.snap b/packages/blade/src/components/SpotlightPopoverTour/__tests__/__snapshots__/Tour.ssr.test.tsx.snap
new file mode 100644
index 00000000000..851a71c8054
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/__tests__/__snapshots__/Tour.ssr.test.tsx.snap
@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Tour /> should render Tour ssr 1`] = `"<div id="root"><div data-blade-component="box" class="BaseBox-bmPWx"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 hFLHOD"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA"><div class="StyledBaseText-dVBfTO brGLEM" data-blade-component="base-text">Open Tour</div></div></button><div data-blade-component="box" class="BaseBox-bmPWx">Some other content inside</div><div data-blade-component="box" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">Trigger 1</p></div><div data-blade-component="box" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">Trigger 2</p></div></div></div>"`;
+
+exports[`<Tour /> should render Tour ssr 2`] = `
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c3 {
+  color: hsla(0,0%,100%,1);
+  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-size: 0.875rem;
+  font-weight: 700;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+
+.c4 {
+  color: hsla(217,56%,17%,1);
+  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-size: 0.875rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  margin: 0;
+  padding: 0;
+}
+
+.c0 {
+  min-height: 36px;
+  width: auto;
+  cursor: pointer;
+  background-color: hsla(218,89%,51%,1);
+  border-color: hsla(218,89%,51%,1);
+  border-width: 1px;
+  border-radius: 2px;
+  border-style: solid;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-left: 20px;
+  padding-right: 20px;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-transition-property: background-color,border-color,box-shadow;
+  transition-property: background-color,border-color,box-shadow;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  -webkit-transition-duration: 150ms;
+  transition-duration: 150ms;
+  position: relative;
+  margin-bottom: 40px;
+}
+
+.c0:hover {
+  background-color: hsla(223,95%,48%,1);
+  border-color: hsla(223,95%,48%,1);
+}
+
+.c0:active {
+  background-color: hsla(230,100%,42%,1);
+  border-color: hsla(230,100%,42%,1);
+}
+
+.c0:focus-visible {
+  background-color: hsla(227,100%,45%,1);
+  border-color: hsla(227,100%,45%,1);
+  outline: 1px solid hsla(220,30%,96%,1);
+  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+}
+
+.c0 * {
+  -webkit-transition-property: color,fill;
+  transition-property: color,fill;
+  -webkit-transition-duration: 150ms;
+  transition-duration: 150ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+}
+
+.c2 {
+  opacity: 1;
+}
+
+<div
+  id="root"
+>
+  <div
+    class=""
+    data-blade-component="box"
+  >
+    <button
+      class="c0"
+      data-blade-component="button"
+      role="button"
+      type="button"
+    >
+      <div
+        class="c1 c2"
+        data-blade-component="base-box"
+      >
+        <div
+          class="c3"
+          data-blade-component="base-text"
+        >
+          Open Tour
+        </div>
+      </div>
+    </button>
+    <div
+      class=""
+      data-blade-component="box"
+    >
+      Some other content inside
+    </div>
+    <div
+      class=""
+      data-blade-component="box"
+    >
+      <p
+        class="c4"
+        data-blade-component="text"
+      >
+        Trigger 1
+      </p>
+    </div>
+    <div
+      class=""
+      data-blade-component="box"
+    >
+      <p
+        class="c4"
+        data-blade-component="text"
+      >
+        Trigger 2
+      </p>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/blade/src/components/SpotlightPopoverTour/__tests__/__snapshots__/Tour.web.test.tsx.snap b/packages/blade/src/components/SpotlightPopoverTour/__tests__/__snapshots__/Tour.web.test.tsx.snap
new file mode 100644
index 00000000000..262e5251851
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/__tests__/__snapshots__/Tour.web.test.tsx.snap
@@ -0,0 +1,583 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Tour /> should render 1`] = `
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c6 {
+  z-index: 1100;
+}
+
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  padding: 12px;
+  gap: 12px;
+}
+
+.c9 {
+  position: absolute;
+  z-index: 1;
+  padding: 4px;
+  top: 4px;
+  right: 4px;
+  border-radius: 9999px;
+}
+
+.c11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.c13 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 12px;
+}
+
+.c7 {
+  width: 100%;
+  max-width: 328px;
+  position: relative;
+  background-color: hsla(0,0%,100%,1);
+  border-width: 1px;
+  border-radius: 8px;
+  border-color: hsla(216,19%,89%,1);
+  border-style: solid;
+  box-shadow: 0 12px 16px -4px hsla(217,56%,17%,0.08),0 4px 6px -2px hsla(217,56%,17%,0.03);
+  opacity: 0;
+  -webkit-transform: translateY(-4px);
+  -ms-transform: translateY(-4px);
+  transform: translateY(-4px);
+}
+
+.c10 {
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  border-radius: 2px;
+  background: transparent;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  color: hsla(214,18%,69%,1);
+  -webkit-transition-property: color,box-shadow;
+  transition-property: color,box-shadow;
+  -webkit-transition-duration: 150ms;
+  transition-duration: 150ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+}
+
+.c10:hover {
+  color: hsla(217,18%,45%,1);
+}
+
+.c10:focus-visible {
+  outline: none;
+  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  color: hsla(217,18%,45%,1);
+}
+
+.c10:active {
+  color: hsla(217,18%,45%,1);
+}
+
+.c3 {
+  color: hsla(0,0%,100%,1);
+  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-size: 0.875rem;
+  font-weight: 700;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+
+.c4 {
+  color: hsla(217,56%,17%,1);
+  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-size: 0.875rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  margin: 0;
+  padding: 0;
+}
+
+.c12 {
+  color: hsla(217,56%,17%,1);
+  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-size: 0.75rem;
+  font-weight: 700;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1rem;
+  margin: 0;
+  padding: 0;
+}
+
+.c15 {
+  color: hsla(0,0%,100%,1);
+  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-size: 0.75rem;
+  font-weight: 700;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1rem;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+
+.c5 {
+  -webkit-animation: iNqBts 2s;
+  animation: iNqBts 2s;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
+}
+
+.c0 {
+  min-height: 36px;
+  width: auto;
+  cursor: pointer;
+  background-color: hsla(218,89%,51%,1);
+  border-color: hsla(218,89%,51%,1);
+  border-width: 1px;
+  border-radius: 2px;
+  border-style: solid;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-left: 20px;
+  padding-right: 20px;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-transition-property: background-color,border-color,box-shadow;
+  transition-property: background-color,border-color,box-shadow;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  -webkit-transition-duration: 150ms;
+  transition-duration: 150ms;
+  position: relative;
+  margin-bottom: 40px;
+}
+
+.c0:hover {
+  background-color: hsla(223,95%,48%,1);
+  border-color: hsla(223,95%,48%,1);
+}
+
+.c0:active {
+  background-color: hsla(230,100%,42%,1);
+  border-color: hsla(230,100%,42%,1);
+}
+
+.c0:focus-visible {
+  background-color: hsla(227,100%,45%,1);
+  border-color: hsla(227,100%,45%,1);
+  outline: 1px solid hsla(220,30%,96%,1);
+  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+}
+
+.c0 * {
+  -webkit-transition-property: color,fill;
+  transition-property: color,fill;
+  -webkit-transition-duration: 150ms;
+  transition-duration: 150ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+}
+
+.c14 {
+  min-height: 32px;
+  width: auto;
+  cursor: pointer;
+  background-color: hsla(218,89%,51%,1);
+  border-color: hsla(218,89%,51%,1);
+  border-width: 1px;
+  border-radius: 2px;
+  border-style: solid;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-left: 12px;
+  padding-right: 12px;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-transition-property: background-color,border-color,box-shadow;
+  transition-property: background-color,border-color,box-shadow;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  -webkit-transition-duration: 150ms;
+  transition-duration: 150ms;
+  position: relative;
+}
+
+.c14:hover {
+  background-color: hsla(223,95%,48%,1);
+  border-color: hsla(223,95%,48%,1);
+}
+
+.c14:active {
+  background-color: hsla(230,100%,42%,1);
+  border-color: hsla(230,100%,42%,1);
+}
+
+.c14:focus-visible {
+  background-color: hsla(227,100%,45%,1);
+  border-color: hsla(227,100%,45%,1);
+  outline: 1px solid hsla(220,30%,96%,1);
+  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+}
+
+.c14 * {
+  -webkit-transition-property: color,fill;
+  transition-property: color,fill;
+  -webkit-transition-duration: 150ms;
+  transition-duration: 150ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+}
+
+.c2 {
+  opacity: 1;
+}
+
+<body
+  style="overflow: hidden;"
+>
+  <div
+    aria-hidden="true"
+    data-floating-ui-inert=""
+  >
+    <div
+      class=""
+      data-blade-component="box"
+    >
+      <button
+        class="c0"
+        data-blade-component="button"
+        role="button"
+        type="button"
+      >
+        <div
+          class="c1 c2"
+          data-blade-component="base-box"
+        >
+          <div
+            class="c3"
+            data-blade-component="base-text"
+          >
+            Open Tour
+          </div>
+        </div>
+      </button>
+      <div
+        class=""
+        data-blade-component="box"
+      >
+        <p
+          class="c4"
+          data-blade-component="text"
+        >
+          Trigger 1
+        </p>
+      </div>
+      <div
+        class=""
+        data-blade-component="box"
+      >
+        <p
+          class="c4"
+          data-blade-component="text"
+        >
+          Trigger 2
+        </p>
+      </div>
+    </div>
+  </div>
+  <div
+    aria-hidden="true"
+    data-floating-ui-inert=""
+    data-floating-ui-portal=""
+    id=":r0:"
+  >
+    <svg
+      data-blade-component="tour-mask"
+      fill="none"
+      stroke="none"
+      style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: 1100;"
+      viewBox="0 0 1024 768"
+    >
+      <rect
+        class="c5"
+        fill="transparent"
+        height="10"
+        opacity="0"
+        rx="3"
+        ry="3"
+        stroke="hsla(218, 89%, 51%, 1)"
+        stroke-width="2px"
+        width="10"
+        x="-5"
+        y="-5"
+      />
+      <mask
+        height="100%"
+        id="tour-mask"
+        stroke="none"
+        width="100%"
+        x="0"
+        y="0"
+      >
+        <rect
+          fill="#fff"
+          height="100%"
+          width="100%"
+        />
+      </mask>
+      <rect
+        fill="hsla(214, 15%, 18%, 0.64)"
+        height="100%"
+        mask="url(#tour-mask)"
+        width="100%"
+      />
+    </svg>
+  </div>
+  <div
+    data-floating-ui-portal=""
+    id=":r3:"
+  >
+    <span
+      aria-hidden="true"
+      data-floating-ui-focus-guard=""
+      data-floating-ui-inert=""
+      data-type="inside"
+      role="button"
+      style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+      tabindex="0"
+    />
+    <div
+      aria-labelledby="popover-title-1"
+      class="c6"
+      data-blade-component="tour-popover"
+      id=":r1:"
+      role="dialog"
+      style="position: fixed; left: 0px; top: 0px; pointer-events: auto; transform: translate(12px, 19px);"
+      tabindex="-1"
+    >
+      <div
+        class=" c7"
+        data-blade-component="base-box"
+      >
+        <div
+          class="c8"
+          data-blade-component="base-box"
+        >
+          <div
+            class="c9"
+            data-blade-component="base-box"
+          >
+            <button
+              aria-label="Close"
+              class="c10"
+              data-blade-component="icon-button"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="Svgweb__StyledSvg-vcmjs8-0"
+                data-blade-component="icon"
+                fill="none"
+                height="20px"
+                viewBox="0 0 24 24"
+                width="20px"
+              >
+                <path
+                  d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
+                  data-blade-component="svg-path"
+                  fill="currentColor"
+                />
+              </svg>
+            </button>
+          </div>
+          <div
+            class=""
+            data-blade-component="base-box"
+          >
+            <p
+              class="c4"
+              data-blade-component="text"
+            >
+              Step 1
+            </p>
+          </div>
+          <div
+            class=""
+            data-blade-component="base-box"
+          >
+            <div
+              class="c11"
+              data-blade-component="box"
+            >
+              <p
+                class="c12"
+                data-blade-component="text"
+              >
+                1
+                 / 
+                2
+              </p>
+              <div
+                class="c13"
+                data-blade-component="box"
+              >
+                <button
+                  class="c14"
+                  data-blade-component="button"
+                  role="button"
+                  type="button"
+                >
+                  <div
+                    class="c1 c2"
+                    data-blade-component="base-box"
+                  >
+                    <div
+                      class="c15"
+                      data-blade-component="base-text"
+                    >
+                      Next
+                    </div>
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <svg
+          aria-hidden="true"
+          fill="hsla(0, 0%, 100%, 1)"
+          height="14"
+          style="position: absolute; pointer-events: none; bottom: 100%; transform: rotate(180deg); left: -1px;"
+          viewBox="0 0 14 14"
+          width="16"
+        >
+          <path
+            clip-path="url(#:r7:)"
+            d="M0,0 H14 L7,7 Q7,7 7,7 Z"
+            fill="none"
+            stroke="hsla(216, 19%, 89%, 1)"
+            stroke-width="3"
+          />
+          <path
+            d="M0,0 H14 L7,7 Q7,7 7,7 Z"
+            stroke="hsla(0, 0%, 100%, 1)"
+          />
+          <clippath
+            id=":r7:"
+          >
+            <rect
+              height="14"
+              width="16"
+              x="-1"
+              y="1"
+            />
+          </clippath>
+        </svg>
+      </div>
+    </div>
+    <span
+      aria-hidden="true"
+      data-floating-ui-focus-guard=""
+      data-floating-ui-inert=""
+      data-type="inside"
+      role="button"
+      style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+      tabindex="0"
+    />
+  </div>
+  <div
+    aria-hidden="true"
+    data-floating-ui-inert=""
+    data-floating-ui-portal=""
+    id=":r6:"
+  />
+</body>
+`;
diff --git a/packages/blade/src/components/Tour/_decisions/assets/tour-motion.mov b/packages/blade/src/components/SpotlightPopoverTour/_decisions/assets/tour-motion.mov
similarity index 100%
rename from packages/blade/src/components/Tour/_decisions/assets/tour-motion.mov
rename to packages/blade/src/components/SpotlightPopoverTour/_decisions/assets/tour-motion.mov
diff --git a/packages/blade/src/components/Tour/_decisions/assets/tour-thumbnail.png b/packages/blade/src/components/SpotlightPopoverTour/_decisions/assets/tour-thumbnail.png
similarity index 100%
rename from packages/blade/src/components/Tour/_decisions/assets/tour-thumbnail.png
rename to packages/blade/src/components/SpotlightPopoverTour/_decisions/assets/tour-thumbnail.png
diff --git a/packages/blade/src/components/Tour/_decisions/decisions.md b/packages/blade/src/components/SpotlightPopoverTour/_decisions/decisions.md
similarity index 69%
rename from packages/blade/src/components/Tour/_decisions/decisions.md
rename to packages/blade/src/components/SpotlightPopoverTour/_decisions/decisions.md
index cc51a82db4e..52dd75ed2e1 100644
--- a/packages/blade/src/components/Tour/_decisions/decisions.md
+++ b/packages/blade/src/components/SpotlightPopoverTour/_decisions/decisions.md
@@ -1,6 +1,6 @@
-# Tour API Decisions <!-- omit in toc -->
+# SpotlightPopover API Decisions <!-- omit in toc -->
 
-The Tour component is used to provide context as well as enable users to take certain actions on it. These are used to highlight a new feature or provide a guided tour to a new user.
+The SpotlightPopover component is used to provide context as well as enable users to take certain actions on it. These are used to highlight a new feature or provide a guided tour to a new user.
 
 <img src="./assets/tour-thumbnail.png" width="380" alt="Tooltip Thumbnail" />
 
@@ -9,16 +9,16 @@ The Tour component is used to provide context as well as enable users to take ce
 - [Components](#components)
 - [Basic Usage Structure](#basic-usage-structure)
 - [API](#api)
-  - [`Tour` API](#tour-api)
-  - [`TourStep` API](#tourstep-api)
-  - [`TourFooter` API](#tourfooter-api)
+  - [`SpotlightPopover` API](#tour-api)
+  - [`SpotlightPopoverStep` API](#tourstep-api)
+  - [`SpotlightPopoverFooter` API](#tourfooter-api)
 - [Usage](#usage)
 - [Motion](#motion)
 - [Open Questions And Technical Challenges](#open-questions-and-technical-challenges)
 - [React Native Specifics](#react-native-specifics)
-- [Multiple Tour Flows](#multiple-tour-flows)
+- [Multiple SpotlightPopover Flows](#multiple-tour-flows)
   - [Approach-1: Prefix `id` to avoid conflicts](#approach-1-prefix-id-to-avoid-conflicts)
-  - [Approach-2: Use `TourStep` to avoid conflicts](#approach-2-use-tourstep-to-avoid-conflicts)
+  - [Approach-2: Use `SpotlightPopoverStep` to avoid conflicts](#approach-2-use-tourstep-to-avoid-conflicts)
   - [Technical Challenge in React Native](#technical-challenge-in-react-native)
 - [API Design Challenges](#api-design-challenges)
   - [Approach: Let Consumer Compose `Popover`](#approach-let-consumer-compose-popover)
@@ -32,24 +32,24 @@ The Tour component is used to provide context as well as enable users to take ce
 
 ## Design
 
-[Figma Link](https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=63871%3A13263&mode=dev) to all variants of the Tour component
+[Figma Link](https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=63871%3A13263&mode=dev) to all variants of the SpotlightPopover component
 
 ## Features
 
-- [x] **Tour:** A guided tour with multiple steps
+- [x] **SpotlightPopover:** A guided tour with multiple steps
 - [x] **Masking:** Mask the rest of the page except the highlighted element.
 
 ## Components
 
-- **Tour:** A guided tour with multiple steps
-- **TourStep:** An enhancer component which is used to wrap the element that needs to be highlighted with an unique identifier.
-- **TourFooter:** An opt in component which you can use to compose footer which has predefined button placements with consistent spacing as defined in figma.
+- **SpotlightPopover:** A guided tour with multiple steps
+- **SpotlightPopoverStep:** An enhancer component which is used to wrap the element that needs to be highlighted with an unique identifier.
+- **SpotlightPopoverFooter:** An opt in component which you can use to compose footer which has predefined button placements with consistent spacing as defined in figma.
 
 ## Basic Usage Structure
 
-With Tour component, you can specify an array of steps with a `name` prop for each step, and then use the `TourStep` component to wrap the element that needs to be highlighted with the same `name` prop.
+With SpotlightPopover component, you can specify an array of steps with a `name` prop for each step, and then use the `SpotlightPopoverStep` component to wrap the element that needs to be highlighted with the same `name` prop.
 
-The Tour component internally handles everything for your
+The SpotlightPopover component internally handles everything for your
 
 - Masking of the highlighted component
 - Internal state management of `activeStep`
@@ -63,30 +63,30 @@ const steps = [
     name: 'step-1',
     title: 'Step 1',
     content: () => <Text>Some content for step 1</Text>,
-    footer: (props) => <TourFooter {...props} actions={{}} />
+    footer: (props) => <SpotlightPopoverFooter {...props} actions={{}} />
   },
   // ...more steps
 ];
 
-<Tour steps={steps}>
+<SpotlightPopover steps={steps}>
   // ... more jsx
-  <TourStep name="step-1">
+  <SpotlightPopoverStep name="step-1">
     <Box>I'll be highlighted</Box>
-  </TourStep>
-</Tour>;
+  </SpotlightPopoverStep>
+</SpotlightPopover>;
 ```
 
 ## API
 
-### `Tour` API
+### `SpotlightPopover` API
 
-The `Tour` component is used to render a guided tour with multiple steps.
+The `SpotlightPopover` component is used to render a guided tour with multiple steps.
 Each tour `step` will have a subset of props from the `Popover` component, with extra props for the tour related logic.
 
 > Check the Popover API Decisions [here](https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Popover/_decisions/decisions.md)
 
 ```jsx
-// Step will have similar props as the Popover component, With extra Tour related props.
+// Step will have similar props as the Popover component, With extra SpotlightPopover related props.
 type Step = {
   /**
    * Unique identifier for the tour step
@@ -117,7 +117,7 @@ type Step = {
   placement?: UseFloatingOptions['placement'];
 }
 
-type TourProps = {
+type SpotlightPopoverProps = {
   /**
    * Array of steps to be rendered
    *
@@ -147,9 +147,9 @@ type TourProps = {
 }
 ```
 
-### `TourStep` API
+### `SpotlightPopoverStep` API
 
-TourStep is an enhancer component which is used to wrap the element that needs to be highlighted with a specific unique identifier.
+SpotlightPopoverStep is an enhancer component which is used to wrap the element that needs to be highlighted with a specific unique identifier.
 
 This component is needed because:
 
@@ -158,14 +158,14 @@ This component is needed because:
 
 But to keep the API consistent between web & native, we will also expose this component for web.
 
-> Note: on web, this component doesn't attach an `id` to the DOM element, instead it uses `ref` to collect the DOM element and save it to the state inside the `Tour` component, See below [discussions](#react-native-specifics) to know more about this approach.
+> Note: on web, this component doesn't attach an `id` to the DOM element, instead it uses `ref` to collect the DOM element and save it to the state inside the `SpotlightPopover` component, See below [discussions](#react-native-specifics) to know more about this approach.
 
 ```jsx
-type TourStepProps = {
+type SpotlightPopoverStepProps = {
   /**
    * Unique identifier/name for the tour step
    *
-   * This should be the same as the `name` prop of the element inside the `steps` array of the `Tour` component
+   * This should be the same as the `name` prop of the element inside the `steps` array of the `SpotlightPopover` component
    */
   name: string
   /**
@@ -175,18 +175,18 @@ type TourStepProps = {
 };
 ```
 
-Note that, in order for TourStep to work properly it needs access to it's children ref, so the children should expose a ref.
+Note that, in order for SpotlightPopoverStep to work properly it needs access to it's children ref, so the children should expose a ref.
 
-### `TourFooter` API
+### `SpotlightPopoverFooter` API
 
-TourFooter is an opt in component which you can use to compose footer which has predefined button placements with consistent spacing as defined in figma. 
+SpotlightPopoverFooter is an opt in component which you can use to compose footer which has predefined button placements with consistent spacing as defined in figma. 
 
 You can either use this (recommended) or compose your own footer component as per your product usecase.
 
 It'll have similar API like Alert's `actions`, and will have subset of props from the `Button` component.
 
 ```jsx
-type TourFooterAction = {
+type SpotlightPopoverFooterAction = {
   text?: string;
   variant?: 'primary' | 'secondary' | 'tertiary';
   icon?: IconComponent;
@@ -196,12 +196,12 @@ type TourFooterAction = {
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 };
 
-type TourFooterProps = {
+type SpotlightPopoverFooterProps = {
   activeStep: number;
   totalSteps: number;
   actions: {
-    primary?: TourFooterAction;
-    secondary?: TourFooterAction;
+    primary?: SpotlightPopoverFooterAction;
+    secondary?: SpotlightPopoverFooterAction;
   };
 };
 ```
@@ -209,14 +209,14 @@ type TourFooterProps = {
 ## Usage
 
 ```jsx
-import { Tour, TourFooter } from '@razorpay/blade/components';
-import type { TourSteps } from '@razorpay/blade/components';
+import { SpotlightPopover, SpotlightPopoverFooter } from '@razorpay/blade/components';
+import type { SpotlightPopoverSteps } from '@razorpay/blade/components';
 
 const Footer = ({ activeStep, totalSteps, goToNext, goToPrevious, stopTour }) => {
   const isLast = activeStep === totalSteps - 1;
   const isFirst = activeStep === 0;
   return (
-    <TourFooter
+    <SpotlightPopoverFooter
       activeStep={activeStep}
       totalSteps={totalSteps}
       actions={{
@@ -231,7 +231,7 @@ const Footer = ({ activeStep, totalSteps, goToNext, goToPrevious, stopTour }) =>
   );
 };
 
-const steps: TourSteps = [
+const steps: SpotlightPopoverSteps = [
   {
     name: 'step-1',
     title: 'Step 1',
@@ -287,8 +287,8 @@ const App = () => {
 
   return (
     <Box>
-      <Button onClick={() => setIsOpen(true)}>Show Tour</Button>
-      <Tour
+      <Button onClick={() => setIsOpen(true)}>Show SpotlightPopover</Button>
+      <SpotlightPopover
         steps={steps}
         isOpen={isOpen}
         onOpenChange={handleOpenChange}
@@ -297,7 +297,7 @@ const App = () => {
         activeStep={activeStep}
       >
         <DashboardPage />
-      </Tour>
+      </SpotlightPopover>
     </Box>
   );
 };
@@ -306,25 +306,25 @@ const App = () => {
 const DashboardPage = () => {
   return (
     <Box>
-      <TourStep name="step-1">
+      <SpotlightPopoverStep name="step-1">
         <Button>Click me</Button>
-      </TourStep>
+      </SpotlightPopoverStep>
 
       <Box>
-        <TourStep name="step-2">
+        <SpotlightPopoverStep name="step-2">
           <Text>Some content</Text>
-        </TourStep>
+        </SpotlightPopoverStep>
       </Box>
 
       <Card>
         <CardBody>
-          <TourStep name="step-3">
+          <SpotlightPopoverStep name="step-3">
             <Box>
               <Text>Some content</Text>
               <Text>Some content</Text>
               <Text>Some content</Text>
             </Box>
-          </TourStep>
+          </SpotlightPopoverStep>
         </CardBody>
       </Card>
     </Box>
@@ -334,7 +334,7 @@ const DashboardPage = () => {
 
 ## Motion
 
-Check/Provide feedback for the motion for Tour component [here](https://razorpay.slack.com/archives/C0274H7QRC1/p1697520879941439)
+Check/Provide feedback for the motion for SpotlightPopover component [here](https://razorpay.slack.com/archives/C0274H7QRC1/p1697520879941439)
 
 https://github.com/razorpay/blade/assets/35374649/5830c059-fbd6-461e-915c-e3a98e930735
 
@@ -342,7 +342,7 @@ https://github.com/razorpay/blade/assets/35374649/5830c059-fbd6-461e-915c-e3a98e
 
 ---
 
-> NOTE: The below sections are discussions, decisions & challenges we faced while designing the API for the `Tour` component.
+> NOTE: The below sections are discussions, decisions & challenges we faced while designing the API for the `SpotlightPopover` component.
 > If you are interested in diving deeper into the rabbit hole, you can read the below sections, or else you can skip them.
 
 ## Open Questions And Technical Challenges
@@ -351,44 +351,44 @@ https://github.com/razorpay/blade/assets/35374649/5830c059-fbd6-461e-915c-e3a98e
 
 On react-native there is 2 differences in the API compared to web:
 
-1. `TourStep` component is needed.
-2. `Tour` component needs to wrap the whole app
+1. `SpotlightPopoverStep` component is needed.
+2. `SpotlightPopover` component needs to wrap the whole app
 
-**1. `TourStep` Component is needed:**
+**1. `SpotlightPopoverStep` Component is needed:**
 
-As highlighted earlier in the [API](#api) section, the `TourStep` component is a `react-native` only enhancer component, which is used to wrap the element that needs to be highlighted with a specific unique identifier.
+As highlighted earlier in the [API](#api) section, the `SpotlightPopoverStep` component is a `react-native` only enhancer component, which is used to wrap the element that needs to be highlighted with a specific unique identifier.
 
-Another thing to note is that, the wrapped component needs to expose it's `ref` so that the `TourStep` component can collect the `ref` and save it to the state inside the `Tour` component.
+Another thing to note is that, the wrapped component needs to expose it's `ref` so that the `SpotlightPopoverStep` component can collect the `ref` and save it to the state inside the `SpotlightPopover` component.
 
 The usage example will look something like this:
 
 ```jsx
-// ... Tour related components (their API stay mostly the same)
+// ... SpotlightPopover related components (their API stay mostly the same)
 
 // In some other file: DashboardPage.tsx
 const DashboardPage = () => {
   return (
     <Box>
-      <TourStep id="step-1">
+      <SpotlightPopoverStep id="step-1">
         <Button>Click me</Button>
-      </TourStep>
+      </SpotlightPopoverStep>
       <Box>
-        <TourStep id="step-2">
+        <SpotlightPopoverStep id="step-2">
           <Box padding="spacing.5">
             <Text>Some content</Text>
           </Box>
-        </TourStep>
+        </SpotlightPopoverStep>
       </Box>
 
       <Card>
         <CardBody>
-          <TourStep id="step-3">
+          <SpotlightPopoverStep id="step-3">
             <Box id="step-3">
               <Text>Some content</Text>
               <Text>Some content</Text>
               <Text>Some content</Text>
             </Box>
-          </TourStep>
+          </SpotlightPopoverStep>
         </CardBody>
       </Card>
     </Box>
@@ -410,20 +410,20 @@ Now the open question is:
 The `web` implementation will look like this:
 
 ```jsx
-const TourStep = ({ id, children }) => {
+const SpotlightPopoverStep = ({ id, children }) => {
   return React.cloneElement(child, { id });
 };
 ```
 
 There's also a downside to this approach on web:
 
-- Imagine if consumer wraps the `TourStep` with an `id` to a component which doesn't even accept the `id` prop, consumer won't get any type errors and `id` won't get passed to the DOM.
+- Imagine if consumer wraps the `SpotlightPopoverStep` with an `id` to a component which doesn't even accept the `id` prop, consumer won't get any type errors and `id` won't get passed to the DOM.
 
 ```jsx
 // No type error :( this is a footgun for consumers
-<TourStep id="step-1">
+<SpotlightPopoverStep id="step-1">
   <ThisComponentDoesntAccceptIdProp />
-</TourStep>
+</SpotlightPopoverStep>
 
 // Proper type error :)
 <ThisComponentDoesntAccceptIdProp id="step-1" />
@@ -438,23 +438,23 @@ Kamlesh suggested few ways to directly use the `ref` and letting consumer attach
 
 And on the web, there was a problem that even though simply adding `id` could work, not all our components had `id` prop. That means consumers will have to wrap everything with a `Box`.
 
-- We decided **not** to go with the `id` approach on web, and instead go with the same implementation as the [react-native POC](https://github.com/razorpay/blade/compare/master...anu/tour-rn-poc#diff-4fe985a90d9ce955346ffc61e152a98272f4d02e044111d30241eb63c8fcf1b1R168-R183), where we keep track of refs of the elements via the `TourStep` component.
+- We decided **not** to go with the `id` approach on web, and instead go with the same implementation as the [react-native POC](https://github.com/razorpay/blade/compare/master...anu/tour-rn-poc#diff-4fe985a90d9ce955346ffc61e152a98272f4d02e044111d30241eb63c8fcf1b1R168-R183), where we keep track of refs of the elements via the `SpotlightPopoverStep` component.
   - Pros:
     - API is now same on both RN & Web
-    - No need to wrap everything with Box, consumers can use the TourStep enhancer component.
+    - No need to wrap everything with Box, consumers can use the SpotlightPopoverStep enhancer component.
     - Simplified implementation, since now we don't need to maintain two types of implementation 1 for native (with refs) 1 for web (with ids).
 
-**2. Tour needs to wrap the whole app:**
+**2. SpotlightPopover needs to wrap the whole app:**
 
-The `Tour` component needs to wrap the whole app, because the `TourStep` needs to collect the `ref` of the element that needs to be highlighted and save it to the state inside the `Tour` component.
+The `SpotlightPopover` component needs to wrap the whole app, because the `SpotlightPopoverStep` needs to collect the `ref` of the element that needs to be highlighted and save it to the state inside the `SpotlightPopover` component.
 
 Check the POC implementation that we did for react-native [here](https://github.com/razorpay/blade/compare/master...anu/tour-rn-poc#diff-4fe985a90d9ce955346ffc61e152a98272f4d02e044111d30241eb63c8fcf1b1R168-R183)
 
 **Conclusion:**
 
-- Now that we decided to go with the `TourStep` approach on both web & native, we will have to wrap the whole app with the `Tour` component on both web & native.
+- Now that we decided to go with the `SpotlightPopoverStep` approach on both web & native, we will have to wrap the whole app with the `SpotlightPopover` component on both web & native.
 
-## Multiple Tour Flows
+## Multiple SpotlightPopover Flows
 
 In a given product, there can be multiple tour flows, for example:
 
@@ -473,10 +473,10 @@ It will look like this:
 
 ```jsx
 
-import { Tour } from '@razorpay/blade/components';
-import type { TourSteps } from '@razorpay/blade/components';
+import { SpotlightPopover } from '@razorpay/blade/components';
+import type { SpotlightPopoverSteps } from '@razorpay/blade/components';
 
-const globalSteps: TourSteps = [
+const globalSteps: SpotlightPopoverSteps = [
   {
     id: 'global-step-1',
     title: 'Step 1',
@@ -489,7 +489,7 @@ const globalSteps: TourSteps = [
   },
 ];
 
-const paymentLinkSteps: TourSteps = [
+const paymentLinkSteps: SpotlightPopoverSteps = [
   {
     id: 'paymentlink-step-1',
     title: 'Step 1',
@@ -505,10 +505,10 @@ const paymentLinkSteps: TourSteps = [
 const App = () => {
   return (
     <Box>
-      <Tour
+      <SpotlightPopover
         steps={globalSteps}
       />
-       <Tour
+       <SpotlightPopover
         steps={paymentLinksSteps}
       />
     </Box>
@@ -540,53 +540,53 @@ const PaymentLinksPage = () => {
 };
 ```
 
-### Approach-2: Use `TourStep` to avoid conflicts
+### Approach-2: Use `SpotlightPopoverStep` to avoid conflicts
 
-Now with this approach the `TourStep` component becomes a bit more useful on web too.
+Now with this approach the `SpotlightPopoverStep` component becomes a bit more useful on web too.
 
-What we can do is add a key prop to the `TourStep` component, and use that key to automatically prefix the `id` prop.
+What we can do is add a key prop to the `SpotlightPopoverStep` component, and use that key to automatically prefix the `id` prop.
 
 [rn-tourguide](https://github.com/xcarpentier/rn-tourguide?tab=readme-ov-file#using-multiple-tours) uses a similar approach.
 
 ```jsx
 // No need to prefix the ids manually in steps array.
 
-<Tour tourKey="global" steps={globalSteps} />;
-<Tour tourKey="paymentlinks" steps={paymentLinksSteps} />;
+<SpotlightPopover tourKey="global" steps={globalSteps} />;
+<SpotlightPopover tourKey="paymentlinks" steps={paymentLinksSteps} />;
 
 // file: DashboardPage.tsx
-<TourStep tourKey="global" id="step-1">
+<SpotlightPopoverStep tourKey="global" id="step-1">
   <Button>Click me</Button>
-</TourStep>;
+</SpotlightPopoverStep>;
 
 // file: PaymentLinks.tsx
-<TourStep tourKey="paymentlinks" id="step-1">
+<SpotlightPopoverStep tourKey="paymentlinks" id="step-1">
   <Button>Click me</Button>
-</TourStep>;
+</SpotlightPopoverStep>;
 ```
 
 ### Technical Challenge in React Native
 
-As mentioned earlier in the [React Native Specifics](#react-native-specifics) section, the `Tour` component needs to wrap the whole app. But this means that we can't have multiple `Tour` components in the same page because they will need to nest each other and the React.Context will only get the value from the nearest provider ([demo](https://codesandbox.io/s/multiple-react-context-nf7qjv?file=/src/App.tsx)).
+As mentioned earlier in the [React Native Specifics](#react-native-specifics) section, the `SpotlightPopover` component needs to wrap the whole app. But this means that we can't have multiple `SpotlightPopover` components in the same page because they will need to nest each other and the React.Context will only get the value from the nearest provider ([demo](https://codesandbox.io/s/multiple-react-context-nf7qjv?file=/src/App.tsx)).
 
 ```jsx
-<Tour tourKey="global">
-  <Tour tourKey="payments">
+<SpotlightPopover tourKey="global">
+  <SpotlightPopover tourKey="payments">
     <Example1 /> // this will get all the states from the `payments` tour
     <Example2 /> // this will also get all the states from the `payments` tour
-  </Tour>
-</Tour>
+  </SpotlightPopover>
+</SpotlightPopover>
 ```
 
 Trying to solve this will create a complexities, and will make the API more complex.
 
-[rn-tourguide](https://github.com/xcarpentier/rn-tourguide/blob/master/src/hooks/useTourGuideController.tsx) solves this by using custom event emitters and pushes events for each `tourKey` instead of relying solely on `React.Context`
+[rn-tourguide](https://github.com/xcarpentier/rn-tourguide/blob/master/src/hooks/useSpotlightPopoverGuideController.tsx) solves this by using custom event emitters and pushes events for each `tourKey` instead of relying solely on `React.Context`
 
 **Conclusion:**
 
 Given the complexity of solving this, we decided that:
 
-- Consumers can wrap the `<Tour />` component closer to the module they need the tour for, instead of wrapping the whole `App` in a single tour. And we will also document this on the storybook.
+- Consumers can wrap the `<SpotlightPopover />` component closer to the module they need the tour for, instead of wrapping the whole `App` in a single tour. And we will also document this on the storybook.
 - There may not be that many cases for multiple tour flows in the same page
 
 ## API Design Challenges
@@ -594,7 +594,7 @@ Given the complexity of solving this, we decided that:
 > You can skip this section if you are not interested in the API design challenges we faced.
 > This is just for the blade team's future reference.
 
-Initially we discussed if we can let consumers use the existing `Popover` to compose the own `Tour` component / flows.
+Initially we discussed if we can let consumers use the existing `Popover` to compose the own `SpotlightPopover` component / flows.
 
 ### Approach: Let Consumer Compose `Popover`
 
@@ -611,7 +611,7 @@ But, after thinking it through, We found it has a few major downsides:
 
 The tour flow & the popover's content for each flow will not always be in the same JSX tree nor will it be in the same file. This makes it hard to maintain and reason about the whole tour flow.
 
-For example, just taking an example of this [Tour flow in Dashboard](https://github.com/razorpay/dashboard/blob/44a954660b0d851cd5fedf48b44d85731e5c48ea/web/js/merchantLA/containers/MerchantTour/index.js):
+For example, just taking an example of this [SpotlightPopover flow in Dashboard](https://github.com/razorpay/dashboard/blob/44a954660b0d851cd5fedf48b44d85731e5c48ea/web/js/merchantLA/containers/MerchantSpotlightPopover/index.js):
 
 The content of the popover is in separate files:
 
@@ -629,14 +629,14 @@ Now imagine adding this much code in the middle of these files to make the tour
 
 ```jsx
 <Popover
-  title="Tour title"
+  title="SpotlightPopover title"
   placement="bottom"
   // this is the first step in the tour flow
   isOpen={activeStep == 0}
   onOpenChange={handleClose}
   content={<Text>Hello World</Text>}
   footer={
-    <TourFooter
+    <SpotlightPopoverFooter
       activeStep={activeStep}
       setActiveStep={setActiveStep}
       totalSteps={domNodes.current.length}
@@ -658,7 +658,7 @@ And not just adding the JSX, the consumer will also have to ensure that:
 
 - The `activeStep === 0` logic is properly set and manually maintain the "which step count is this jsx for?" logic in different different files.
 - The `domNodes` array is updated with the correct ref for each step, with the correct **index** (domNodes.current[0])
-- Consumers will have to manually maintain the `totalSteps` count for the tour flow, they will have no idea how many steps are there in the tour flow, they will have to manually count the steps and update the `totalSteps` prop in the `TourFooter` component.
+- Consumers will have to manually maintain the `totalSteps` count for the tour flow, they will have no idea how many steps are there in the tour flow, they will have to manually count the steps and update the `totalSteps` prop in the `SpotlightPopoverFooter` component.
 
 This is a lot of code to add in the middle of the existing codebase, and it will be extremely hard to maintain and reason about the whole tour flow.
 And this is not something a product engineer should be maintaining or worry about.
@@ -674,16 +674,16 @@ To have two different tours, the consumer will have to maintain states for `acti
 
 ```jsx
 // In AppRoot.tsx
-const [appTourActiveState, setAppTourActiveState] = useState(0);
-const [appTourDomNodes, setAppTourDomNodes] = useState([]);
-const [appTourTotalSteps, setAppTourTotalSteps] = useState(0);
-const [appTourMask, setAppTourMask] = useState({ x, y, w, h });
+const [appSpotlightPopoverActiveState, setAppSpotlightPopoverActiveState] = useState(0);
+const [appSpotlightPopoverDomNodes, setAppSpotlightPopoverDomNodes] = useState([]);
+const [appSpotlightPopoverTotalSteps, setAppSpotlightPopoverTotalSteps] = useState(0);
+const [appSpotlightPopoverMask, setAppSpotlightPopoverMask] = useState({ x, y, w, h });
 
 // In PaymentLinks.tsx
-const [paymentTourActiveState, setPaymentTourActiveState] = useState(0);
-const [paymentTourDomNodes, setPaymentTourDomNodes] = useState([]);
-const [paymentTourTotalSteps, setPaymentTourTotalSteps] = useState(0);
-const [paymentTourMask, setpaymentTourMask] = useState({ x, y, w, h });
+const [paymentSpotlightPopoverActiveState, setPaymentSpotlightPopoverActiveState] = useState(0);
+const [paymentSpotlightPopoverDomNodes, setPaymentSpotlightPopoverDomNodes] = useState([]);
+const [paymentSpotlightPopoverTotalSteps, setPaymentSpotlightPopoverTotalSteps] = useState(0);
+const [paymentSpotlightPopoverMask, setpaymentSpotlightPopoverMask] = useState({ x, y, w, h });
 ```
 
 This will get extremely messy and tedious to maintain.
@@ -709,13 +709,13 @@ We did a [POC for react-native](https://github.com/razorpay/blade/compare/master
 
 #### Conclusion
 
-Now with all the above points, We decided that it's better if we expose a `Tour` component which will maintain the state/logic/steps/flows for consumers with a clean and simple API.
+Now with all the above points, We decided that it's better if we expose a `SpotlightPopover` component which will maintain the state/logic/steps/flows for consumers with a clean and simple API.
 
 This will also mean we can maintain an optimal consistency between web & native API. Otherwise consumers will have vastly different abstraction for web & native.
 
 ## MoMs
 
-**Tour Component MoM**
+**SpotlightPopover Component MoM**
 **Participants:** @Anurag Hazra @kamlesh @chaitanya @Saurabh
 **Date:** 6th Nov, 2023
 
@@ -725,7 +725,7 @@ This will also mean we can maintain an optimal consistency between web & native
 2. API difference between web & native
 3. ReactNative Implementation challenges
 4. Challenges with supporting multiple tour flows
-5. Tour footer component flexibility discussion
+5. SpotlightPopover footer component flexibility discussion
 6. Discussed about scoping out few things
 
 **1. Letting consumers compose their own tour flows - Giving context to kamlesh**
@@ -735,7 +735,7 @@ Gave context to kamlesh on the discussion that me, abinash, chaitanya & saurabh
 **2. API difference between web & native**
 
 Discussed about the API differences between RN & Web (Check the API Doc for more info)
-On react-native we cannot have id so we approached a ref based solution which meant we needed to expose a react-native specific component TourStep to consumers so we can keep track of ids & refs.
+On react-native we cannot have id so we approached a ref based solution which meant we needed to expose a react-native specific component SpotlightPopoverStep to consumers so we can keep track of ids & refs.
 
 Kamlesh suggested few ways to directly use the ref and letting consumer attach the ref to the components, but that had few issues concerning complexity & overhead for consumers.
 
@@ -743,12 +743,12 @@ Even on the web, there was a problem that even though simply adding id could wor
 
 **Conclusion:**
 
-- We decided to not go with the id approach and instead go with the same implementation as the react-native POC, where we keep track of refs of the elements via the TourStep component.
+- We decided to not go with the id approach and instead go with the same implementation as the react-native POC, where we keep track of refs of the elements via the SpotlightPopoverStep component.
 
 **Pros:**
 
 - API is now same on both RN & Web
-- No need to wrap everything with Box, consumers can use the TourStep enhancer component.
+- No need to wrap everything with Box, consumers can use the SpotlightPopoverStep enhancer component.
 - Simplified implementation, since now we don't need to maintain two types of implementation 1 for native (with refs) 1 for web (with ids).
 
 **3. ReactNative Implementation challenges**
@@ -762,16 +762,16 @@ Discussed few ReactNative specific challenges:
 
 Discussed issues multiple tour flows:
 
-Gave some context on the issues with multiple tour flows, and now that even on web we are going ahead with TourStep component this will also be an issue on web also, so simply prefixing the id with some string wont work.
+Gave some context on the issues with multiple tour flows, and now that even on web we are going ahead with SpotlightPopoverStep component this will also be an issue on web also, so simply prefixing the id with some string wont work.
 
 Discussed the issues with React context API.
 
 **Conclusion:**
 
-- Consumers can wrap the `<Tour />` component closer to the module they need the tour for, instead of wrapping the whole App in a single tour. And we will also document this on the storybook.
+- Consumers can wrap the `<SpotlightPopover />` component closer to the module they need the tour for, instead of wrapping the whole App in a single tour. And we will also document this on the storybook.
 - There may not be that many cases for multiple tour flows in the same page
 
-**5. Tour footer component flexibility discussion**
+**5. SpotlightPopover footer component flexibility discussion**
 
 Discussed about if we should make the Footer a prop based more rigid API or keep it as JSX which will be more flexible.
 
@@ -794,12 +794,12 @@ Also discussed if we can cut scope for now, since I'm going OOO from 11th, it wo
 
 Our POCs:
 
-- [Tour Web POC](https://github.com/razorpay/blade/compare/master...anu/tour-poc#diff-4fe985a90d9ce955346ffc61e152a98272f4d02e044111d30241eb63c8fcf1b1R198)
-- [Tour RN POC](https://github.com/razorpay/blade/compare/master...anu/tour-rn-poc#diff-4fe985a90d9ce955346ffc61e152a98272f4d02e044111d30241eb63c8fcf1b1R203)
+- [SpotlightPopover Web POC](https://github.com/razorpay/blade/compare/master...anu/tour-poc#diff-4fe985a90d9ce955346ffc61e152a98272f4d02e044111d30241eb63c8fcf1b1R198)
+- [SpotlightPopover RN POC](https://github.com/razorpay/blade/compare/master...anu/tour-rn-poc#diff-4fe985a90d9ce955346ffc61e152a98272f4d02e044111d30241eb63c8fcf1b1R203)
 
 References:
 
-- Dashboard's [Tour](https://github.com/razorpay/dashboard/blob/44a954660b0d851cd5fedf48b44d85731e5c48ea/web/js/merchantLA/containers/MerchantTour/index.js) component
+- Dashboard's [SpotlightPopover](https://github.com/razorpay/dashboard/blob/44a954660b0d851cd5fedf48b44d85731e5c48ea/web/js/merchantLA/containers/MerchantSpotlightPopover/index.js) component
 - https://github.com/stackbuilders/react-native-spotlight-tour
 - https://github.com/elrumordelaluz/reactour
 - https://github.com/xcarpentier/rn-tourguide
diff --git a/packages/blade/src/components/SpotlightPopoverTour/index.ts b/packages/blade/src/components/SpotlightPopoverTour/index.ts
new file mode 100644
index 00000000000..fc5c4cae27a
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/index.ts
@@ -0,0 +1,8 @@
+export * from './Tour';
+export * from './TourFooter';
+export * from './TourStep';
+export type {
+  SpotlightPopoverTourProps,
+  SpotlightPopoverStepRenderProps,
+  SpotlightPopoverTourSteps,
+} from './types';
diff --git a/packages/blade/src/components/SpotlightPopoverTour/tourTokens.ts b/packages/blade/src/components/SpotlightPopoverTour/tourTokens.ts
new file mode 100644
index 00000000000..7d14a5f329b
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/tourTokens.ts
@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/restrict-plus-operands */
+import { modalHighestZIndex } from '~components/Modal/modalTokens';
+import { motion } from '~tokens/global';
+
+const transitionDelay = motion.duration.gentle;
+const tourMaskZIndex = modalHighestZIndex + 100;
+
+export { transitionDelay, tourMaskZIndex };
diff --git a/packages/blade/src/components/SpotlightPopoverTour/types.ts b/packages/blade/src/components/SpotlightPopoverTour/types.ts
new file mode 100644
index 00000000000..c2d8f1bfda6
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/types.ts
@@ -0,0 +1,114 @@
+import type { UseFloatingOptions } from '@floating-ui/react';
+
+type SpotlightPopoverStepRenderProps = {
+  /**
+   * Go to a specific step
+   */
+  goToStep: (step: number) => void;
+  /**
+   * Go to the next step
+   */
+  goToNext: () => void;
+  /**
+   * Go to the previous step
+   */
+  goToPrevious: () => void;
+  /**
+   * Stop the tour
+   *
+   * This will call the `onFinish` callback
+   */
+  stopTour: () => void;
+  /**
+   * Current active step (zero based index)
+   */
+  activeStep: number;
+  /**
+   * Total number of steps
+   */
+  totalSteps: number;
+};
+
+type Step = {
+  /**
+   * Unique identifier for the tour step
+   */
+  name: string;
+  /**
+   * Content of the Popover
+   */
+  content: (props: SpotlightPopoverStepRenderProps) => React.ReactElement;
+  /**
+   * Footer content
+   */
+  footer?: (props: SpotlightPopoverStepRenderProps) => React.ReactNode;
+  /**
+   * Popover title
+   */
+  title?: string;
+  /**
+   * Leading content placed before the title
+   *
+   * Can be any blade icon or asset.
+   */
+  titleLeading?: React.ReactNode;
+  /**
+   * Placement of Popover
+   * @default "top"
+   */
+  placement?: UseFloatingOptions['placement'];
+};
+
+// This will also be useful for consumers
+type SpotlightPopoverTourSteps = Step[];
+
+type SpotlightPopoverTourProps = {
+  /**
+   * Array of steps to be rendered
+   *
+   * The order of the steps will be the order in which they are rendered depending on the `activeStep` prop
+   */
+  steps: SpotlightPopoverTourSteps;
+  /**
+   * Whether the tour is visible or not
+   */
+  isOpen: boolean;
+  /**
+   * Callback when the tour is opened or closed
+   */
+  onOpenChange?: ({ isOpen }: { isOpen: boolean }) => void;
+  /**
+   * Callback which fires when the `stopTour` method is called from the `steps` array
+   */
+  onFinish?: () => void;
+  /**
+   * Callback when the active step changes
+   */
+  onStepChange?: (step: number) => void;
+  /**
+   * Active step to be rendered
+   */
+  activeStep: number;
+  children: React.ReactNode;
+};
+
+type SpotlightPopoverTourStepProps = {
+  name: string;
+  children: React.ReactNode;
+};
+
+type SpotlightPopoverTourMaskRect = {
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+};
+
+export type {
+  SpotlightPopoverTourProps,
+  Step,
+  SpotlightPopoverTourStepProps,
+  SpotlightPopoverTourMaskRect,
+  SpotlightPopoverStepRenderProps,
+  SpotlightPopoverTourSteps,
+};
diff --git a/packages/blade/src/components/SpotlightPopoverTour/utils.ts b/packages/blade/src/components/SpotlightPopoverTour/utils.ts
new file mode 100644
index 00000000000..f142446663b
--- /dev/null
+++ b/packages/blade/src/components/SpotlightPopoverTour/utils.ts
@@ -0,0 +1,148 @@
+/* eslint-disable consistent-return */
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+/* eslint-disable one-var */
+/* eslint-disable prefer-const */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import React from 'react';
+import { usePrevious } from '~utils';
+import { throwBladeError } from '~utils/logger';
+import { useScrollLock } from '~utils/useScrollLock';
+
+/**
+ * Hook to delay the state change
+ *
+ * This is used to delay the active step change to allow for transitions to finish
+ * This prevents the popover's footer from changing it's JSX while it's transitioning
+ */
+function useDelayedState<T>(initialState: T, delay: number): T {
+  const [delayedState, setDelayedState] = React.useState(initialState);
+  const timeoutRef = React.useRef<number | undefined>(undefined);
+
+  React.useEffect(() => {
+    timeoutRef.current = window.setTimeout(() => {
+      setDelayedState(initialState);
+    }, delay);
+
+    return () => {
+      window.clearTimeout(timeoutRef.current);
+    };
+  }, [delay, initialState]);
+
+  return delayedState;
+}
+
+/**
+ * Keep track of when we are transitioning between steps
+ *
+ * This is used to prevent the popover from jumping to the next step before animations are finished
+ */
+const useIsTransitioningBetweenSteps = (activeStep: number, transitionDelay: number) => {
+  const prevActiveStep = usePrevious(activeStep);
+  const [isTransitioning, setIsTransitioning] = React.useState(false);
+
+  // Keep track of when we are transitioning between steps
+  React.useEffect(() => {
+    if (prevActiveStep === undefined) return;
+    setIsTransitioning(true);
+    const timeout = setTimeout(() => {
+      setIsTransitioning(false);
+    }, transitionDelay);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [prevActiveStep, transitionDelay]);
+
+  return isTransitioning;
+};
+
+// https://stackoverflow.com/questions/46795955/how-to-know-scroll-to-element-is-done-in-javascript
+function smoothScroll(element: Element | null, options: ScrollIntoViewOptions) {
+  return new Promise((resolve) => {
+    if (__DEV__) {
+      if (!(element instanceof Element)) {
+        throwBladeError({
+          moduleName: 'smoothScroll',
+          message: 'argument "element" must be an instance of Element',
+        });
+      }
+    }
+
+    let same = 0;
+    let lastPos: undefined | null | number = null;
+    const scrollOptions = { behavior: 'smooth', ...options } as const;
+
+    element!.scrollIntoView(scrollOptions);
+    requestAnimationFrame(check);
+
+    // eslint-disable-next-line consistent-return
+    function check() {
+      const newPos = element?.getBoundingClientRect().top;
+      if (newPos === lastPos) {
+        if (same++ > 2) {
+          return resolve(null);
+        }
+      } else {
+        same = 0;
+        lastPos = newPos;
+      }
+      requestAnimationFrame(check);
+    }
+  });
+}
+
+function useIntersectionObserver(
+  elementRef: React.RefObject<Element>,
+  { threshold = 0, root = null, rootMargin = '0%' }: IntersectionObserverInit,
+): IntersectionObserverEntry | undefined {
+  const [entry, setEntry] = React.useState<IntersectionObserverEntry>();
+
+  const updateEntry = ([entry]: IntersectionObserverEntry[]): void => {
+    setEntry(entry);
+  };
+
+  React.useEffect(() => {
+    const node = elementRef?.current; // DOM Ref
+    const hasIOSupport = !!window.IntersectionObserver;
+
+    if (!hasIOSupport || !node) return;
+
+    const observerParams = { threshold, root, rootMargin };
+    const observer = new IntersectionObserver(updateEntry, observerParams);
+
+    observer.observe(node);
+
+    return () => observer.disconnect();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [elementRef?.current, JSON.stringify(threshold), root, rootMargin]);
+
+  return entry;
+}
+
+const useLockBodyScroll = (shouldLock: boolean) => {
+  const scrollLockRef = useScrollLock({
+    enabled: true,
+    reserveScrollBarGap: true,
+  });
+
+  React.useEffect(() => {
+    const lockRef = scrollLockRef.current;
+    if (shouldLock) {
+      lockRef.activate();
+    } else {
+      lockRef.deactivate();
+    }
+    return () => {
+      lockRef.deactivate();
+    };
+  }, [shouldLock, scrollLockRef]);
+};
+
+export {
+  useDelayedState,
+  useIsTransitioningBetweenSteps,
+  smoothScroll,
+  useIntersectionObserver,
+  useLockBodyScroll,
+};
diff --git a/packages/blade/src/components/index.ts b/packages/blade/src/components/index.ts
index 8fc994255cb..dc87d184dec 100644
--- a/packages/blade/src/components/index.ts
+++ b/packages/blade/src/components/index.ts
@@ -39,4 +39,5 @@ export * from './Accordion';
 export * from './Collapsible';
 export * from './Tooltip';
 export * from './Popover';
+export * from './SpotlightPopoverTour';
 export * from './types';
diff --git a/packages/blade/src/utils/metaAttribute/metaConstants.ts b/packages/blade/src/utils/metaAttribute/metaConstants.ts
index 38a575e4eb9..9a0aac7fa40 100644
--- a/packages/blade/src/utils/metaAttribute/metaConstants.ts
+++ b/packages/blade/src/utils/metaAttribute/metaConstants.ts
@@ -57,6 +57,8 @@ export const MetaConstants = {
   TabItem: 'tab-item',
   TabPanel: 'tab-panel',
   TabIndicator: 'tab-indicator',
+  TourPopover: 'tour-popover',
+  TourMask: 'tour-mask',
   Popover: 'popover',
   PopoverInteractiveWrapper: 'popover-interactive-wrapper',
   BottomSheet: 'bottom-sheet',
diff --git a/packages/blade/src/utils/useScrollLock.ts b/packages/blade/src/utils/useScrollLock.ts
index 2b3627dc76f..5302334d122 100644
--- a/packages/blade/src/utils/useScrollLock.ts
+++ b/packages/blade/src/utils/useScrollLock.ts
@@ -4,7 +4,7 @@ import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import React from 'react';
 
 type UseScrollLockProps = {
-  targetRef: React.RefObject<Element>;
+  targetRef?: React.RefObject<Element>;
   enabled: boolean;
   reserveScrollBarGap: boolean;
 };
@@ -53,7 +53,7 @@ export function useScrollLock({
       return;
     }
 
-    const target = targetRef.current;
+    const target = targetRef ? targetRef.current : document.body;
     active.current = false;
 
     ref.current = {