diff --git a/.env b/.env
new file mode 100644
index 0000000..53d2fa0
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+VITE_API_KEY=I0FJ8VwuqLSVxfW586ICMpgzdT1m7miU
\ No newline at end of file
diff --git a/lib/components/common/tutorial.tsx b/lib/components/common/tutorial.tsx
index ec76c07..28de804 100644
--- a/lib/components/common/tutorial.tsx
+++ b/lib/components/common/tutorial.tsx
@@ -112,6 +112,7 @@ export const tutorial: TutorialType = {
             title: 'Most suitable mapping',
             content: 'Based on previous mappings, the first suggestion is the one that is the most suitable mapping. Browse other suggestions if you don’t think this is the most suitable.',
             target: '.suggestion-details',
+            placement: 'bottom'
         },
         {
             target: '.suggestions__expand-btn',
@@ -172,21 +173,21 @@ export const tutorial: TutorialType = {
             content: 'Dealing with possibly hundreds of column headers, simply search the name of a column header or mapped CDEs here.',
             target: '.mapping__search-input'
         },
-        {
-            target: '.mapping__filter-btn',
-            title: 'Click to open filter options',
-            content: 'Filter through column headers and only showing those that are relevant to you.',
-            spotlightClicks: true,
-            hideFooter: true,
-            placement: 'bottom-end'
-        },
-        {
-            content: 'Filter through column headers and only showing those that are relevant to you.',
-            title: 'Filter',
-            target: '.mapping__filter-popover',
-            placement: 'right',
-            hideBackButton: true
-        },
+        // {
+        //     target: '.mapping__filter-btn',
+        //     title: 'Click to open filter options',
+        //     content: 'Filter through column headers and only showing those that are relevant to you.',
+        //     spotlightClicks: true,
+        //     hideFooter: true,
+        //     placement: 'bottom-end'
+        // },
+        // {
+        //     content: 'Filter through column headers and only showing those that are relevant to you.',
+        //     title: 'Filter',
+        //     target: '.mapping__filter-popover',
+        //     placement: 'right',
+        //     hideBackButton: true
+        // },
         {
             title: 'Sort by Unmapped or Mapped first',
             content: <Box display="flex" flexDirection="column">
diff --git a/lib/components/steps/mapping/CollectionsTab.tsx b/lib/components/steps/mapping/CollectionsTab.tsx
index 07af81f..02c68c0 100644
--- a/lib/components/steps/mapping/CollectionsTab.tsx
+++ b/lib/components/steps/mapping/CollectionsTab.tsx
@@ -60,7 +60,7 @@ function CollectionsTab({ changeToNextTab, setDefaultCollection }: CollectionsPr
                                 This can be changed at any time during the process.
                             </Typography>
                         </Stack>
-                        <Stack direction="row" spacing={1.5}>
+                        <Stack direction="row" spacing={1.5} className='repository-cards'>
                             {collectionKeys.map(key => (
                                 <StyledCard
                                     key={key}
diff --git a/lib/components/steps/mapping/MappingSearch.tsx b/lib/components/steps/mapping/MappingSearch.tsx
index 4b616eb..cbff551 100644
--- a/lib/components/steps/mapping/MappingSearch.tsx
+++ b/lib/components/steps/mapping/MappingSearch.tsx
@@ -6,9 +6,10 @@ import Filters from "../../common/Filters.tsx";
 
 interface MappingSearchProps {
     onChange: () => void;
+    handleTourNextStepClick?: () => void;
 }
 
-export default function MappingSearch({onChange}: MappingSearchProps) {
+export default function MappingSearch({onChange, handleTourNextStepClick}: MappingSearchProps) {
 
     const [searchString, setSearchString] = useState('');
 
@@ -20,9 +21,10 @@ export default function MappingSearch({onChange}: MappingSearchProps) {
         onChange()
     };
 
-    const handleFiltersClose = () => {
-        setAnchorEl(null);
+    const handleFiltersClose = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
         onChange()
+        handleTourNextStepClick?.()
     };
     const open = Boolean(anchorEl);
     const id = open ? 'filter-popover' : undefined;
@@ -33,6 +35,7 @@ export default function MappingSearch({onChange}: MappingSearchProps) {
             fullWidth
             variant="outlined"
             placeholder="Search column headers or mapped CDEs..."
+            className="mapping__search-input"
             InputProps={{
                 startAdornment: <InputAdornment position="start"><SearchIcon/></InputAdornment>
             }}
@@ -42,6 +45,7 @@ export default function MappingSearch({onChange}: MappingSearchProps) {
         <Button
             variant="outlined"
             onClick={handleFiltersClose}
+            className="mapping__filter-btn"
         >
             <FilterIcon/>
             Filter
diff --git a/lib/components/steps/mapping/MappingStep.tsx b/lib/components/steps/mapping/MappingStep.tsx
index 1c198cf..917fee4 100644
--- a/lib/components/steps/mapping/MappingStep.tsx
+++ b/lib/components/steps/mapping/MappingStep.tsx
@@ -27,7 +27,8 @@ const tabsArr = [
     {
         label: 'Suggestions',
         heading: 'Accept or decline suggestions',
-        description: 'suggestions are based on what was previously mapped before.'
+        description: 'suggestions are based on what was previously mapped before.',
+        className: 'suggestions-tab'
     },
     {
         label: 'Map the rest of the dataset',
@@ -129,10 +130,10 @@ function MappingStep() {
 
                 <Box display='flex' gap='0.625rem' alignItems='center'>
                     {tabIndex === TabsEnum.Suggestions ? (
-                        <Button variant='text' onClick={() => setTabIndex(TabsEnum.Mapping)}>
+                        <Button variant='text' onClick={() => setTabIndex(TabsEnum.Mapping)} className='suggestions__cancel-btn'>
                             Continue without suggestions
                         </Button>) : tabIndex === TabsEnum.Mapping && (<>
-                        <Typography sx={{
+                        <Typography className='mapping-header__indicator' sx={{
                             color: gray500,
                             fontSize: '0.75rem',
                             fontWeight: 500,
diff --git a/lib/components/steps/mapping/MappingTab.tsx b/lib/components/steps/mapping/MappingTab.tsx
index bb596ce..c729115 100644
--- a/lib/components/steps/mapping/MappingTab.tsx
+++ b/lib/components/steps/mapping/MappingTab.tsx
@@ -23,6 +23,8 @@ import {PairingTooltip} from "./PairingTooltip.tsx";
 import {PairingSuggestion} from "./PairingSuggestion.tsx";
 import {EntityType, Option, SelectableCollection} from "../../../models.ts";
 import {getId, getType} from "../../../helpers/getters.ts";
+import Tour from "../../common/Tour.tsx";
+import { tutorial, TourSteps } from "../../common/tutorial.tsx";
 
 const styles = {
     root: {
@@ -92,10 +94,12 @@ interface MappingProps {
 
 const MappingTab = ({defaultCollection}: MappingProps) => {
 
-    const {datasetMapping, headerIndexes, collections, handleUpdateDatasetMappingRow} = useCdeContext();
+    const {datasetMapping, headerIndexes, collections, handleUpdateDatasetMappingRow, isTourOpen} = useCdeContext();
     const [visibleRows, setVisibleRows] = useState([]);
     const [selectableCollections, setSelectableCollections] = useState<SelectableCollection[]>([]);
     const [searchResultsDictionary, setSearchResultsDictionary] = useState<{ [id: string]: Option }>({});
+    const [stepIndex, setStepIndex] = useState(0);
+    const [togglePreview, setTogglePreview] = useState(false);
 
 
     useEffect(() => {
@@ -109,6 +113,11 @@ const MappingTab = ({defaultCollection}: MappingProps) => {
         setSelectableCollections(initialSelectedCollections);
     }, [collections, defaultCollection]);
 
+    const handleTourNextStepClick = () => {
+        if(isTourOpen){
+            setStepIndex((prevStepIndex) => prevStepIndex + 1)
+        }
+    };
 
     const handleCollectionSelect = (selectedCollection: SelectableCollection) => {
         setSelectableCollections(prevCollections =>
@@ -218,15 +227,15 @@ const MappingTab = ({defaultCollection}: MappingProps) => {
     const searchText = "Search in " + (selectableCollections.length === 1 ? `${selectableCollections[0].name} collection` : 'multiple collections');
 
     return (
-        <>
+        <Box className='mapping-step'>
             <ModalHeightWrapper pb={10} height='15rem'>
-                <MappingSearch onChange={handleFiltering}/>
+                <MappingSearch onChange={handleFiltering} handleTourNextStepClick={handleTourNextStepClick}/>
 
                 <Box px={1.5}>
                     <Box sx={styles.root}>
                         <Box sx={styles.head}>
                             <Box sx={styles.col}>
-                                <SortIcon/>
+                                <SortIcon className="mapping__sort-icon"/>
                             </Box>
                             <Box sx={styles.col}>
                                 <Typography>Column headers from dataset</Typography>
@@ -241,10 +250,10 @@ const MappingTab = ({defaultCollection}: MappingProps) => {
                         <Box sx={styles.wrap}>
                             {Object.keys(datasetMapping).map((variableName, index) => (
                                 <Box key={index} sx={styles.row}>
-                                    <Box sx={styles.col}>
+                                    <Box sx={styles.col} className="mapping-chip">
                                         {getChipComponent(variableName)}
                                     </Box>
-                                    <Box sx={styles.col}>
+                                    <Box sx={styles.col} className="mapping__column-header">
                                         <TextField
                                             disabled
                                             fullWidth
@@ -254,9 +263,10 @@ const MappingTab = ({defaultCollection}: MappingProps) => {
                                     <Box sx={styles.col}>
                                         <ArrowIcon/>
                                     </Box>
-                                    <Box sx={styles.col}>
+                                    <Box sx={styles.col} className="cde-fields__item-first">
                                         <CustomEntitiesDropdown
                                             placeholder={"Choose CDE or Data Dictionary fields... "}
+                                            handleTourNextStepClick={handleTourNextStepClick}
                                             options={{
                                                 searchPlaceholder: searchText,
                                                 noResultReason: "We couldn’t find any results.",
@@ -306,8 +316,15 @@ const MappingTab = ({defaultCollection}: MappingProps) => {
                 </Box>
             </ModalHeightWrapper>
 
-            <PreviewBox/>
-        </>
+            <PreviewBox togglePreview={togglePreview} setTogglePreview={setTogglePreview} handleTourNextStepClick={handleTourNextStepClick}/>
+            <Tour
+                steps={tutorial[TourSteps.Mapping]}
+                stepIndex={stepIndex}
+                setStepIndex={setStepIndex}
+                // isSpotlightOpen={togglePreview}
+                // handleSpotlightClose={() => setTogglePreview(false)}
+            />
+        </Box>
     )
 }
 
diff --git a/lib/components/steps/suggestions/SuggestionDetailUI.tsx b/lib/components/steps/suggestions/SuggestionDetailUI.tsx
index 390fddb..fd0c035 100644
--- a/lib/components/steps/suggestions/SuggestionDetailUI.tsx
+++ b/lib/components/steps/suggestions/SuggestionDetailUI.tsx
@@ -28,7 +28,7 @@ function SuggestionDetailUI({row, header, headerIndexes}: SuggestionDetailUIProp
     }));
 
     return (
-        <Box gap='1.5rem' display='flex' alignItems='start'>
+        <Box gap='1.5rem' display='flex' alignItems='start' className='suggestion-details'>
             <Box height='2.625rem' display='flex' alignItems='center' sx={{"& .MuiRadio-root": {
                                 padding: 0,
                                 color: gray300