diff --git a/app/Root/components/Navbar/index.tsx b/app/Root/components/Navbar/index.tsx
index 477182a7..6df11376 100644
--- a/app/Root/components/Navbar/index.tsx
+++ b/app/Root/components/Navbar/index.tsx
@@ -82,12 +82,16 @@ function Navbar(props: Props) {
         <nav className={_cs(className, styles.navbar)}>
             <InlineLayout
                 className={styles.content}
+                withCenterAlign
                 start={(
-                    <img
-                        className={styles.logo}
-                        src={mapSwipeLogo}
-                        alt="MapSwipe"
-                    />
+                    <>
+                        <img
+                            className={styles.logo}
+                            src={mapSwipeLogo}
+                            alt="MapSwipe"
+                        />
+                        <div />
+                    </>
                 )}
                 end={user && (
                     <ListLayout>
@@ -148,8 +152,7 @@ function Navbar(props: Props) {
                         </Button>
                     </ListLayout>
                 )}
-                spacing="lg"
-                withPadding
+                spacing="md"
                 withWrap
             >
                 <ListLayout
@@ -158,43 +161,37 @@ function Navbar(props: Props) {
                 >
                     <SmartNavLink
                         route="home"
-                        className={styles.link}
-                        activeClassName={styles.active}
+                        withoutPadding
                     >
                         Home
                     </SmartNavLink>
                     <SmartNavLink
                         route="projects"
-                        className={styles.link}
-                        activeClassName={styles.active}
+                        withoutPadding
                     >
                         Projects
                     </SmartNavLink>
                     <SmartNavLink
                         route="tutorials"
-                        className={styles.link}
-                        activeClassName={styles.active}
+                        withoutPadding
                     >
                         Tutorials
                     </SmartNavLink>
                     <SmartNavLink
                         route="teams"
-                        className={styles.link}
-                        activeClassName={styles.active}
+                        withoutPadding
                     >
                         Teams
                     </SmartNavLink>
                     <SmartNavLink
                         route="userGroups"
-                        className={styles.link}
-                        activeClassName={styles.active}
+                        withoutPadding
                     >
                         User groups
                     </SmartNavLink>
                     <SmartNavLink
                         route="contributors"
-                        className={styles.link}
-                        activeClassName={styles.active}
+                        withoutPadding
                     >
                         Contributors
                     </SmartNavLink>
diff --git a/app/Root/components/Navbar/styles.module.css b/app/Root/components/Navbar/styles.module.css
index b494655f..3a13a674 100644
--- a/app/Root/components/Navbar/styles.module.css
+++ b/app/Root/components/Navbar/styles.module.css
@@ -1,13 +1,22 @@
 .navbar {
+    --main-spacing: var(--spacing-lg);
     display: grid;
     z-index: 1;
     box-shadow: var(--shadow-card);
     background-color: var(--color-primary);
+    padding: var(--spacing-md) 0;
     color: var(--color-text-on-dark);
-    grid-template-columns: 1fr [content-start] min(100%, var(--width-page-content-max)) [content-end] 1fr;
+    grid-template-columns:
+        1fr
+        [content-start]
+            min(
+                100% - 2 * var(--main-spacing),
+                var(--width-page-content-max) - 2 * var(--main-spacing)
+            )
+        [content-end]
+        1fr;
 
     .content {
-        align-items: center;
         grid-column: content;
 
         .logo {
@@ -19,18 +28,5 @@
             flex-direction: column;
             justify-content: center;
         }
-
-        .link {
-            opacity: 0.6;
-            border-top: var(--width-separator-thin) solid transparent;
-            border-bottom: var(--width-separator-thin) solid transparent;
-            color: var(--color-text-on-dark);
-            font-weight: var(--font-weight-bold);
-
-            &.active {
-                opacity: 1;
-                border-bottom-color: var(--color-text-on-dark);
-            }
-        }
     }
 }
diff --git a/app/Root/components/SmartNavLink/index.tsx b/app/Root/components/SmartNavLink/index.tsx
index 5efc0e74..fbbd0d62 100644
--- a/app/Root/components/SmartNavLink/index.tsx
+++ b/app/Root/components/SmartNavLink/index.tsx
@@ -6,23 +6,31 @@ import { _cs } from '@togglecorp/fujs';
 
 import { RouteKeys } from '#base/configs/routes';
 import useRouteMatching, { Attrs } from '#base/hooks/useRouteMatching';
+import ButtonLayout, { ButtonLayoutProps } from '#components/ButtonLayout';
 
 import styles from './styles.module.css';
 
-export type Props = Omit<NavLinkProps, 'to'> & {
+export type Props = Omit<NavLinkProps, 'to'> & ButtonLayoutProps & {
     route: RouteKeys;
     attrs?: Attrs;
-    children?: React.ReactNode;
     activeClassName?: string;
-    className?: string;
 };
 
 function SmartNavLink(props: Props) {
     const {
         route,
         attrs,
-        children,
         className,
+        start,
+        children,
+        end,
+        startContainerClassName,
+        childrenContainerClassName,
+        endContainerClassName,
+        colorVariant = 'accent',
+        styleVariant = 'transparent',
+        withoutPadding,
+        spacing,
         activeClassName,
         ...otherProps
     } = props;
@@ -40,11 +48,26 @@ function SmartNavLink(props: Props) {
             className={({ isActive }) => _cs(
                 styles.smartNavLink,
                 isActive && styles.active,
-                className,
                 isActive && activeClassName,
             )}
         >
-            {children}
+            <ButtonLayout
+                className={_cs(
+                    styles.buttonLayout,
+                    className,
+                )}
+                start={start}
+                end={end}
+                startContainerClassName={startContainerClassName}
+                endContainerClassName={endContainerClassName}
+                childrenContainerClassName={childrenContainerClassName}
+                spacing={spacing}
+                colorVariant={colorVariant}
+                styleVariant={styleVariant}
+                withoutPadding={withoutPadding}
+            >
+                {children}
+            </ButtonLayout>
         </NavLink>
     );
 }
diff --git a/app/Root/components/SmartNavLink/styles.module.css b/app/Root/components/SmartNavLink/styles.module.css
index 740ff90d..b5731c4d 100644
--- a/app/Root/components/SmartNavLink/styles.module.css
+++ b/app/Root/components/SmartNavLink/styles.module.css
@@ -1,16 +1,19 @@
 .smart-nav-link {
-    display: flex;
-    position: relative;
-    align-items: center;
-    outline: none;
-    text-decoration: none;
-    color: var(--color-text);
+    display: contents;
 
-    &:hover {
-        background-color: var(--color-hover-background);
+    .button-layout {
+        opacity: 0.6;
+        border-top: var(--width-separator-thin) solid transparent;
+        border-bottom: var(--width-separator-thin) solid transparent;
+        color: var(--color-text-on-dark);
+        font-weight: var(--font-weight-bold);
     }
 
     &.active {
-        color: var(--color-accent);
+        .button-layout {
+            opacity: 1;
+            border-bottom-color: var(--color-text-on-dark);
+        }
     }
+
 }
diff --git a/app/Root/index.tsx b/app/Root/index.tsx
index fd1e9c3e..3fd418b8 100644
--- a/app/Root/index.tsx
+++ b/app/Root/index.tsx
@@ -1,5 +1,6 @@
 import 'react-mde/lib/styles/css/react-mde-all.css';
 import 'maplibre-gl/dist/maplibre-gl.css';
+import 'mapillary-js/dist/mapillary.css';
 
 import {
     useCallback,
diff --git a/app/components/Description/index.tsx b/app/components/Description/index.tsx
index 01d8742f..c97d35bb 100644
--- a/app/components/Description/index.tsx
+++ b/app/components/Description/index.tsx
@@ -5,16 +5,24 @@ import styles from './styles.module.css';
 interface Props {
     className?: string;
     children?: React.ReactNode;
+    compact?: boolean;
 }
 
 function Description(props: Props) {
     const {
         className,
         children,
+        compact,
     } = props;
 
     return (
-        <div className={_cs(styles.description, className)}>
+        <div
+            className={_cs(
+                styles.description,
+                compact && styles.compact,
+                className,
+            )}
+        >
             {children}
         </div>
     );
diff --git a/app/components/Description/styles.module.css b/app/components/Description/styles.module.css
index e031b6d8..61cd9bde 100644
--- a/app/components/Description/styles.module.css
+++ b/app/components/Description/styles.module.css
@@ -1,3 +1,7 @@
 .description {
     color: var(--color-text-light);
+
+    &.compact {
+        font-size: var(--font-size-sm);
+    }
 }
diff --git a/app/components/GridLayoutItem/index.tsx b/app/components/GridLayoutItem/index.tsx
index ceac25c8..2647d0c2 100644
--- a/app/components/GridLayoutItem/index.tsx
+++ b/app/components/GridLayoutItem/index.tsx
@@ -1,12 +1,15 @@
 import {
     HTMLProps,
-    useMemo,
+    useEffect,
+    useRef,
 } from 'react';
 import {
+    _cs,
     isDefined,
-    isNotDefined,
 } from '@togglecorp/fujs';
 
+import styles from './style.module.css';
+
 interface Props extends Omit<HTMLProps<HTMLDivElement>, 'ref'> {
     rowSpan?: number;
     columnSpan?: number;
@@ -16,31 +19,33 @@ function GridLayoutItem(props: Props) {
     const {
         rowSpan,
         columnSpan,
-        style,
         ...otherProps
     } = props;
 
-    const combinedStyle = useMemo(() => {
-        if (isNotDefined(rowSpan) && isNotDefined(columnSpan)) {
-            return style;
-        }
-
-        const tempStyle = { ...style };
-
-        if (isDefined(rowSpan)) {
-            tempStyle.gridRow = `span ${rowSpan}`;
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (containerRef.current) {
+            containerRef.current.style.setProperty(
+                '--num-row-span',
+                String(rowSpan ?? 1),
+            );
+            containerRef.current.style.setProperty(
+                '--num-column-span',
+                String(columnSpan ?? 1),
+            );
         }
-
-        if (isDefined(columnSpan)) {
-            tempStyle.gridColumn = `span ${columnSpan}`;
-        }
-
-        return tempStyle;
-    }, [style, rowSpan, columnSpan]);
+    }, [rowSpan, columnSpan]);
 
     return (
         <div
-            style={combinedStyle}
+            ref={containerRef}
+            className={_cs(
+                styles.gridLayoutItem,
+                isDefined(rowSpan) && styles.rowSpan,
+                isDefined(columnSpan) && styles.columnSpan,
+            )}
+            // style={combinedStyle}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...otherProps}
         />
diff --git a/app/components/GridLayoutItem/style.module.css b/app/components/GridLayoutItem/style.module.css
new file mode 100644
index 00000000..b88541fd
--- /dev/null
+++ b/app/components/GridLayoutItem/style.module.css
@@ -0,0 +1,20 @@
+.grid-layout-item {
+    &.row-span {
+        grid-row: span var(--num-row-span, 1);
+    }
+
+    &.column-span {
+        grid-column: span var(--num-column-span, 1);
+    }
+
+    @media screen and (max-width: 40rem) {
+        grid-row: initial;
+        grid-column: initial;
+
+        &.row-span,
+        &.column-span {
+            grid-row: initial;
+            grid-column: initial;
+        }
+    }
+}
diff --git a/app/components/ListLayout/index.tsx b/app/components/ListLayout/index.tsx
index 5ca4ef7a..5732fbcc 100644
--- a/app/components/ListLayout/index.tsx
+++ b/app/components/ListLayout/index.tsx
@@ -40,7 +40,7 @@ function ListLayout(props: Props) {
         withWrap,
         children,
         numPreferredGridColumns = 2,
-        minGridColumnSize = '12rem',
+        minGridColumnSize = '16rem',
         spacingOffset,
         withFullWidth,
         elementRef: elementRefFromProps,
diff --git a/app/components/ListLayout/styles.module.css b/app/components/ListLayout/styles.module.css
index b55cbc69..8a49767f 100644
--- a/app/components/ListLayout/styles.module.css
+++ b/app/components/ListLayout/styles.module.css
@@ -5,7 +5,16 @@
         .grid-content {
             display: grid;
             /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
-            grid-template-columns: repeat(auto-fill, minmax(max(var(--min-grid-column-size), calc((100cqi - var(--reserved-space)) / var(--num-preferred-grid-columns))), 1fr));
+            grid-template-columns: repeat(
+                auto-fill,
+                minmax(
+                    max(
+                        var(--min-grid-column-size),
+                        calc((100cqi - var(--reserved-space)) / var(--num-preferred-grid-columns))
+                    ),
+                    1fr
+                )
+            );
         }
     }
 
@@ -27,9 +36,11 @@
         flex-wrap: wrap;
     }
 
-    @container (max-width: 20rem) {
-        .grid-content {
-            grid-template-columns: 1fr;
+    @container (max-width: 24rem) {
+        &.grid-layout {
+            .grid-content {
+                grid-template-columns: 1fr;
+            }
         }
     }
 }
diff --git a/app/components/MapillaryImagePreview/index.tsx b/app/components/MapillaryImagePreview/index.tsx
new file mode 100644
index 00000000..823946b4
--- /dev/null
+++ b/app/components/MapillaryImagePreview/index.tsx
@@ -0,0 +1,45 @@
+import {
+    useEffect,
+    useRef,
+} from 'react';
+import {
+    _cs,
+    isDefined,
+} from '@togglecorp/fujs';
+import { Viewer } from 'mapillary-js';
+
+import styles from './styles.module.css';
+
+interface Props {
+    className?: string;
+    imageId: string | undefined;
+}
+
+function MapillaryImagePreview(props: Props) {
+    const {
+        className,
+        imageId,
+    } = props;
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const viewerRef = useRef<Viewer>();
+
+    useEffect(() => {
+        if (containerRef.current && isDefined(imageId)) {
+            viewerRef.current = new Viewer({
+                accessToken: import.meta.env.APP_MAPILLARY_API_KEY,
+                container: containerRef.current,
+                imageId,
+            });
+        }
+    }, [imageId]);
+
+    return (
+        <div
+            ref={containerRef}
+            className={_cs(styles.mapillaryImagePreview, className)}
+        />
+    );
+}
+
+export default MapillaryImagePreview;
diff --git a/app/components/MapillaryImagePreview/styles.module.css b/app/components/MapillaryImagePreview/styles.module.css
new file mode 100644
index 00000000..6448b58f
--- /dev/null
+++ b/app/components/MapillaryImagePreview/styles.module.css
@@ -0,0 +1,3 @@
+.mapillary-image-preview {
+    isolation: isolate;
+}
diff --git a/app/components/Pager/index.tsx b/app/components/Pager/index.tsx
index e6f74f21..533fe5ef 100644
--- a/app/components/Pager/index.tsx
+++ b/app/components/Pager/index.tsx
@@ -91,9 +91,8 @@ function Pager(props: Props) {
                     key={i}
                     name={i}
                     onClick={onActivePageChange}
-                    styleVariant={i === activePage ? 'filled' : 'outline'}
+                    styleVariant={i === activePage ? 'filled' : 'translucent'}
                     colorVariant={i === activePage ? 'accent' : 'text'}
-                    spacing="sm"
                 >
                     {i}
                 </Button>
diff --git a/app/components/TextOutput/index.tsx b/app/components/TextOutput/index.tsx
index 70dafc7a..35afa83a 100644
--- a/app/components/TextOutput/index.tsx
+++ b/app/components/TextOutput/index.tsx
@@ -43,6 +43,18 @@ function formatDate(
     return formattedDate;
 }
 
+function formatBoolean(value: boolean | null | undefined) {
+    if (value === true) {
+        return 'Yes';
+    }
+
+    if (value === false) {
+        return 'No';
+    }
+
+    return null;
+}
+
 interface BaseProps {
     className?: string;
     icon?: React.ReactNode
@@ -53,6 +65,7 @@ interface BaseProps {
     withWrap?: boolean;
     spacing?: SpacingType;
     withCenterAlign?: boolean;
+    emptyValueDisplay?: React.ReactNode;
 }
 
 interface BooleanProps {
@@ -96,6 +109,7 @@ function TextOutput(props: Props) {
         spacing,
         withWrap,
         withCenterAlign,
+        emptyValueDisplay = '--',
     } = props;
 
     const spacingClassName = useSpacingToken({
@@ -113,6 +127,10 @@ function TextOutput(props: Props) {
             return formatDate(value);
         }
 
+        if (valueType === 'boolean') {
+            return formatBoolean(value);
+        }
+
         return value;
     }, [value, valueType]);
 
@@ -142,7 +160,7 @@ function TextOutput(props: Props) {
                 </div>
             )}
             <div className={styles.value}>
-                {formattedValue}
+                {formattedValue ?? emptyValueDisplay}
             </div>
             {description && (
                 <div>
diff --git a/app/components/domain/BaseMap/index.tsx b/app/components/domain/BaseMap/index.tsx
index bad05c82..2888ec3a 100644
--- a/app/components/domain/BaseMap/index.tsx
+++ b/app/components/domain/BaseMap/index.tsx
@@ -114,10 +114,6 @@ function BaseMap(props: Props) {
         };
     }, [url, tileSize, credits, minzoom, maxzoom]);
 
-    if (isNotDefined(mapStyle)) {
-        return null;
-    }
-
     return (
         <Map
             mapStyle={mapStyle}
diff --git a/app/components/domain/ContributorUserCard/index.tsx b/app/components/domain/ContributorUserCard/index.tsx
index 22927038..db0d7c5b 100644
--- a/app/components/domain/ContributorUserCard/index.tsx
+++ b/app/components/domain/ContributorUserCard/index.tsx
@@ -86,7 +86,7 @@ function ContributorUserCard(props: Props) {
             </ListLayout>
             <ListLayout
                 layout={compact ? 'block' : 'grid'}
-                minGridColumnSize="11rem"
+                minGridColumnSize="12rem"
                 spacing="sm"
                 numPreferredGridColumns={3}
             >
diff --git a/app/components/domain/ProjectSpecificDetails/StreetDetails/index.tsx b/app/components/domain/ProjectSpecificDetails/StreetDetails/index.tsx
new file mode 100644
index 00000000..404db765
--- /dev/null
+++ b/app/components/domain/ProjectSpecificDetails/StreetDetails/index.tsx
@@ -0,0 +1,88 @@
+import { isNotDefined } from '@togglecorp/fujs';
+import { removeNull } from '@togglecorp/toggle-form';
+
+import Container from '#components/Container';
+import CustomOptionPreview from '#components/domain/CustomOptionsPreview';
+import ProjectAssetPreview from '#components/domain/ProjectAssetPreview';
+import ListLayout from '#components/ListLayout';
+import TextOutput from '#components/TextOutput';
+import { StreetProjectPropertyType } from '#generated/types/graphql';
+
+interface Props {
+    data: StreetProjectPropertyType | undefined;
+}
+
+function StreetDetails(props: Props) {
+    const { data } = props;
+
+    if (isNotDefined(data)) {
+        return null;
+    }
+
+    return (
+        <>
+            <ListLayout layout="grid">
+                <ProjectAssetPreview
+                    assetId={data.aoiGeometry}
+                />
+                <Container
+                    headingLevel={5}
+                    heading="Custom options"
+                >
+                    <CustomOptionPreview
+                        value={removeNull(data.customOptions)}
+                        variant="info"
+                    />
+                </Container>
+            </ListLayout>
+            <Container
+                heading="Mapillary Image Filters"
+                headingLevel={5}
+            >
+                <ListLayout
+                    layout="grid"
+                    spacing="sm"
+                >
+                    <TextOutput
+                        label="Start date"
+                        value={data.mapillaryImageFilters.startTime}
+                    />
+                    <TextOutput
+                        label="End date"
+                        value={data.mapillaryImageFilters.endTime}
+                    />
+                    <TextOutput
+                        label="Image Creator ID"
+                        value={data.mapillaryImageFilters.creatorId}
+                    />
+                    <TextOutput
+                        label="Mapillary Organization ID"
+                        value={data.mapillaryImageFilters.organizationId}
+                    />
+                    <TextOutput
+                        label="Image Sampling Threshold"
+                        value={data.mapillaryImageFilters.samplingThreshold}
+                        valueType="number"
+                    />
+                </ListLayout>
+                <ListLayout
+                    layout="block"
+                    spacing="sm"
+                >
+                    <TextOutput
+                        label="Only use 360 degree panaroma images"
+                        value={data.mapillaryImageFilters.isPano}
+                        valueType="boolean"
+                    />
+                    <TextOutput
+                        label="Randomize the order of images in the project"
+                        value={data.mapillaryImageFilters.randomizeOrder}
+                        valueType="boolean"
+                    />
+                </ListLayout>
+            </Container>
+        </>
+    );
+}
+
+export default StreetDetails;
diff --git a/app/components/domain/ProjectSpecificDetails/index.tsx b/app/components/domain/ProjectSpecificDetails/index.tsx
index 130ad3df..ba659e7d 100644
--- a/app/components/domain/ProjectSpecificDetails/index.tsx
+++ b/app/components/domain/ProjectSpecificDetails/index.tsx
@@ -10,6 +10,7 @@ import ProjectTypeOutput from '../ProjectTypeOutput';
 import CompareDetails from './CompareDetails';
 import CompletenessDetails from './CompletenessDetails';
 import FindDetails from './FindDetails';
+import StreetDetails from './StreetDetails';
 import ValidateDetails from './ValidateDetails';
 import ValidateImageDetails from './ValidateImageDetails';
 
@@ -103,6 +104,12 @@ function ProjectSpecificDetails(props: Props) {
                     data={projectData.project.projectTypeSpecifics}
                 />
             )}
+            {/* eslint-disable-next-line no-underscore-dangle */}
+            {projectData?.project.projectTypeSpecifics?.__typename === 'StreetProjectPropertyType' && (
+                <StreetDetails
+                    data={projectData.project.projectTypeSpecifics}
+                />
+            )}
         </Container>
     );
 }
diff --git a/app/components/domain/ProjectStatusIcon/index.tsx b/app/components/domain/ProjectStatusIcon/index.tsx
index 917de3bb..53dd460c 100644
--- a/app/components/domain/ProjectStatusIcon/index.tsx
+++ b/app/components/domain/ProjectStatusIcon/index.tsx
@@ -1,6 +1,7 @@
 import {
     PiArchive,
     PiCheckCircle,
+    PiChecks,
     PiCloudCheck,
     PiFileText,
     PiHourglassMedium,
@@ -31,34 +32,46 @@ function ProjectStatusIcon(props: Props) {
         return <PiFileText className={className} />;
     }
 
-    if (value === ProjectStatusEnum.MarkedAsReady) {
+    if (value === ProjectStatusEnum.ReadyToProcess) {
         return <PiHourglassMedium className={className} />;
     }
 
-    if (value === ProjectStatusEnum.Ready) {
+    if (value === ProjectStatusEnum.Processed) {
         return <PiCheckCircle className={className} />;
     }
 
-    if (value === ProjectStatusEnum.Failed) {
+    if (value === ProjectStatusEnum.ProcessingFailed) {
         return <PiWarningCircle className={className} />;
     }
 
-    if (value === ProjectStatusEnum.Paused) {
-        return <PiPauseCircle className={className} />;
+    if (value === ProjectStatusEnum.Discarded) {
+        return <PiTrash className={className} />;
     }
 
-    if (value === ProjectStatusEnum.Archived) {
-        return <PiArchive className={className} />;
+    if (value === ProjectStatusEnum.ReadyToPublish) {
+        return <PiHourglassMedium className={className} />;
     }
 
-    if (value === ProjectStatusEnum.Discarded) {
-        return <PiTrash className={className} />;
+    if (value === ProjectStatusEnum.PublishingFailed) {
+        return <PiWarningCircle className={className} />;
     }
 
     if (value === ProjectStatusEnum.Published) {
         return <PiCloudCheck className={className} />;
     }
 
+    if (value === ProjectStatusEnum.Paused) {
+        return <PiPauseCircle className={className} />;
+    }
+
+    if (value === ProjectStatusEnum.Withdrawn) {
+        return <PiArchive className={className} />;
+    }
+
+    if (value === ProjectStatusEnum.Finished) {
+        return <PiChecks className={className} />;
+    }
+
     value satisfies never;
 
     return null;
diff --git a/app/components/domain/ProjectStatusTimeline/index.tsx b/app/components/domain/ProjectStatusTimeline/index.tsx
index 3f4d6e70..7a9f5ee8 100644
--- a/app/components/domain/ProjectStatusTimeline/index.tsx
+++ b/app/components/domain/ProjectStatusTimeline/index.tsx
@@ -1,71 +1,76 @@
-import { useMemo } from 'react';
-import { ImSpinner } from 'react-icons/im';
 import {
-    MdAdjust,
-    MdCheckCircle,
-} from 'react-icons/md';
+    PiArrowCircleRightDuotone,
+    PiSealCheckDuotone,
+    PiSealWarningDuotone,
+    PiTimer,
+} from 'react-icons/pi';
 import {
     _cs,
     isNotDefined,
-    mapToList,
 } from '@togglecorp/fujs';
 
+import Description from '#components/Description';
+import InlineLayout from '#components/InlineLayout';
 import ListLayout from '#components/ListLayout';
 import { ProjectStatusEnum } from '#generated/types/graphql';
 
 import styles from './styles.module.css';
 
-type Status = 'pending' | 'processing' | 'in-progress' | 'completed';
+type StatusTense = 'past' | 'present' | 'future';
 
 interface StatusProps {
     label: React.ReactNode;
-    description?: React.ReactNode;
-    status: Status;
+    description: React.ReactNode;
+    statusTense: StatusTense;
+    errored?: boolean;
 }
-function Status(props: StatusProps) {
+function StatusItem(props: StatusProps) {
     const {
         label,
-        status,
+        statusTense,
         description,
+        errored,
     } = props;
 
     return (
-        <ListLayout
+        <InlineLayout
             spacing="sm"
             className={_cs(
                 styles.status,
-                status === 'pending' && styles.pending,
-                status === 'in-progress' && styles.inProgress,
-                status === 'processing' && styles.processing,
-                status === 'completed' && styles.completed,
+                statusTense === 'past' && styles.past,
+                statusTense === 'present' && styles.present,
+                statusTense === 'future' && styles.future,
+                errored && styles.errored,
+            )}
+            startContainerClassName={styles.startContainer}
+            start={(
+                <ListLayout
+                    className={styles.tenseIcon}
+                    layout="block"
+                    spacing="sm"
+                >
+                    {statusTense === 'past' && !errored && <PiSealCheckDuotone className={styles.icon} />}
+                    {statusTense === 'past' && errored && <PiSealWarningDuotone className={styles.icon} />}
+                    {statusTense === 'present' && <PiArrowCircleRightDuotone className={styles.icon} />}
+                    {statusTense === 'future' && <PiTimer className={styles.icon} />}
+                    <div className={styles.line} />
+                </ListLayout>
             )}
         >
-            <ListLayout
-                className={styles.iconContainer}
-                layout="block"
-                spacing="xs"
-            >
-                {status === 'pending' && <MdAdjust className={styles.icon} />}
-                {status === 'in-progress' && <MdAdjust className={styles.icon} />}
-                {status === 'processing' && <ImSpinner className={styles.icon} />}
-                {status === 'completed' && <MdCheckCircle className={styles.icon} />}
-                <div className={styles.line} />
-            </ListLayout>
             <ListLayout
                 layout="block"
                 className={styles.details}
-                spacing="xs"
+                spacing="none"
             >
-                <div className={styles.label}>
+                <span className={styles.title}>
                     {label}
-                </div>
-                {description && (
-                    <div className={styles.description}>
-                        {description}
-                    </div>
-                )}
+                </span>
+                <Description compact>
+                    {description}
+                </Description>
             </ListLayout>
-        </ListLayout>
+            <div className={styles.backdrop} />
+        </InlineLayout>
     );
 }
 
@@ -73,170 +78,113 @@ interface Props {
     value: ProjectStatusEnum | undefined;
 }
 
-function ProjectStatusTimeline(props: Props) {
-    const { value } = props;
-    interface ProjectStatusDetail {
-        label: string,
-        status: Status,
-        description: string,
-    }
-
-    const projectStatuses = useMemo(() => {
-        const baseStatus: Record<ProjectStatusEnum | 'START', ProjectStatusDetail> = {
-            START: {
-                label: 'Start',
-                status: 'in-progress',
-                description: 'Get started with basic details of the project',
-            },
-            [ProjectStatusEnum.Draft]: {
-                label: 'Draft',
-                status: 'pending',
-                description: 'Add or update basic details or project type specific details. You can update most of the fields during this phase.',
-            },
-            [ProjectStatusEnum.MarkedAsReady]: {
-                label: 'Processing',
-                status: 'pending',
-                description: 'Project is being processed',
-            },
-            [ProjectStatusEnum.Failed]: {
-                label: 'Update required',
-                status: 'pending',
-                description: 'There are validation errors in the project',
-            },
-            [ProjectStatusEnum.Ready]: {
-                label: 'Ready to Publish',
-                status: 'pending',
-                description: 'All of the processing is completed and the project is ready to be published',
-            },
-            [ProjectStatusEnum.Published]: {
-                label: 'Published',
-                status: 'pending',
-                description: 'Project is published and available to the users for swipping',
-            },
-            [ProjectStatusEnum.Paused]: {
-                label: 'Paused',
-                status: 'pending',
-                description: 'Project is published but not available to the users for swipping',
-            },
-            [ProjectStatusEnum.Archived]: {
-                label: 'Archived',
-                status: 'pending',
-                description: 'Project is archived and is no longer available to the users for swipping',
-            },
-            [ProjectStatusEnum.Discarded]: {
-                label: 'Discarded',
-                status: 'pending',
-                description: 'Projects is discarded',
-            },
-        };
-
-        if (isNotDefined(value)) {
-            const applicableStatus = {
-                START: baseStatus.START,
-                [ProjectStatusEnum.Draft]: baseStatus.DRAFT,
-                [ProjectStatusEnum.MarkedAsReady]: baseStatus.MARKED_AS_READY,
-                [ProjectStatusEnum.Ready]: baseStatus.READY,
-                [ProjectStatusEnum.Published]: baseStatus.PUBLISHED,
-            };
-
-            return applicableStatus;
-        }
+interface ProjectStatusDetail {
+    label: string,
+    description: string,
+}
 
-        if (value === ProjectStatusEnum.Draft) {
-            const applicableStatus = {
-                START: baseStatus.START,
-                [ProjectStatusEnum.Draft]: baseStatus.DRAFT,
-                [ProjectStatusEnum.MarkedAsReady]: baseStatus.MARKED_AS_READY,
-                [ProjectStatusEnum.Ready]: baseStatus.READY,
-                [ProjectStatusEnum.Published]: baseStatus.PUBLISHED,
-            };
+const projectStatusDetails: Record<ProjectStatusEnum, ProjectStatusDetail> = {
+    [ProjectStatusEnum.Draft]: {
+        label: 'Draft',
+        description: 'Update basic and project type specific details. You can update most of the fields during this phase.',
+    },
+    [ProjectStatusEnum.ReadyToProcess]: {
+        label: 'Processing',
+        description: 'Project is being processed to create tasks, groups and other necessary information, This might take a while depending on the inputs you\'ve provided',
+    },
+    [ProjectStatusEnum.ProcessingFailed]: {
+        label: 'Processing failed!',
+        description: 'There were some issues while processing the project.',
+    },
+    [ProjectStatusEnum.Processed]: {
+        label: 'Processed',
+        description: 'The project has been processed successfully! Add a tutorial and you may proceed to publish the project',
+    },
+    [ProjectStatusEnum.Discarded]: {
+        label: 'Discarded',
+        description: 'Projects is discarded',
+    },
+    [ProjectStatusEnum.ReadyToPublish]: {
+        label: 'Publishing',
+        description: 'Project is currently being published to firebase. Once completed, users will be able to contribute to it',
+    },
+    [ProjectStatusEnum.PublishingFailed]: {
+        label: 'Publishing failed!',
+        description: 'There were some issue while publishing the project to the firebase!',
+    },
+    [ProjectStatusEnum.Published]: {
+        label: 'Published',
+        description: 'Project is published and available to the users for swipping',
+    },
+    [ProjectStatusEnum.Paused]: {
+        label: 'Paused',
+        description: 'Project it temporarily made unavailable to the users for swipping',
+    },
+    [ProjectStatusEnum.Withdrawn]: {
+        label: 'Withdrawn',
+        description: 'Project is archived and is no longer available to the users for swipping',
+    },
+    [ProjectStatusEnum.Finished]: {
+        label: 'Finished',
+        description: 'Project is completed',
+    },
+};
 
-            applicableStatus.START.status = 'completed';
-            applicableStatus.DRAFT.status = 'in-progress';
+function ProjectStatusTimeline(props: Props) {
+    const { value } = props;
 
-            return applicableStatus;
-        }
+    const {
+        Draft,
+        ReadyToProcess,
+        ProcessingFailed,
+        Processed,
+        Discarded,
+        ReadyToPublish,
+        PublishingFailed,
+        Published,
+        Paused,
+        Withdrawn,
+        Finished,
+    } = ProjectStatusEnum;
 
-        if (value === ProjectStatusEnum.MarkedAsReady) {
-            const applicableStatus = {
-                START: baseStatus.START,
-                [ProjectStatusEnum.Draft]: baseStatus.DRAFT,
-                [ProjectStatusEnum.MarkedAsReady]: baseStatus.MARKED_AS_READY,
-                [ProjectStatusEnum.Ready]: baseStatus.READY,
-                [ProjectStatusEnum.Published]: baseStatus.PUBLISHED,
-            };
+    const statusOrder = {
+        [Draft]: 1,
+        [ReadyToProcess]: 2,
+        [ProcessingFailed]: 3,
+        [Processed]: 4,
+        [Discarded]: 5,
+        [ReadyToPublish]: 6,
+        [PublishingFailed]: 7,
+        [Published]: 8,
+        [Paused]: 9,
+        [Withdrawn]: 10,
+        [Finished]: 11,
+    };
 
-            applicableStatus.START.status = 'completed';
-            applicableStatus.DRAFT.status = 'completed';
-            applicableStatus.MARKED_AS_READY.status = 'processing';
+    function getStatusTense(status: ProjectStatusEnum | undefined): StatusTense {
+        if (isNotDefined(status)) {
+            if (isNotDefined(value)) {
+                return 'present';
+            }
 
-            return applicableStatus;
+            return 'past';
         }
 
-        if (value === ProjectStatusEnum.Ready) {
-            const applicableStatus = {
-                START: baseStatus.START,
-                [ProjectStatusEnum.Draft]: baseStatus.DRAFT,
-                [ProjectStatusEnum.MarkedAsReady]: baseStatus.MARKED_AS_READY,
-                [ProjectStatusEnum.Ready]: baseStatus.READY,
-                [ProjectStatusEnum.Published]: baseStatus.PUBLISHED,
-            };
-
-            applicableStatus.START.status = 'completed';
-            applicableStatus.DRAFT.status = 'completed';
-            applicableStatus.MARKED_AS_READY.status = 'completed';
-            applicableStatus.READY.status = 'in-progress';
-
-            return applicableStatus;
+        if (isNotDefined(value)) {
+            return 'future';
         }
 
-        if (value === ProjectStatusEnum.Failed) {
-            const applicableStatus = {
-                START: baseStatus.START,
-                [ProjectStatusEnum.Draft]: baseStatus.DRAFT,
-                [ProjectStatusEnum.MarkedAsReady]: baseStatus.MARKED_AS_READY,
-                [ProjectStatusEnum.Failed]: baseStatus.FAILED,
-            };
+        const diff = statusOrder[status] - statusOrder[value];
 
-            applicableStatus.START.status = 'completed';
-            applicableStatus.DRAFT.status = 'completed';
-            applicableStatus.MARKED_AS_READY.status = 'completed';
-            applicableStatus.FAILED.status = 'in-progress';
-
-            return applicableStatus;
+        if (diff > 0) {
+            return 'future';
         }
 
-        if (value === ProjectStatusEnum.Published) {
-            const applicableStatus = {
-                START: baseStatus.START,
-                [ProjectStatusEnum.Draft]: baseStatus.DRAFT,
-                [ProjectStatusEnum.MarkedAsReady]: baseStatus.MARKED_AS_READY,
-                [ProjectStatusEnum.Ready]: baseStatus.READY,
-                [ProjectStatusEnum.Published]: baseStatus.PUBLISHED,
-            };
-
-            applicableStatus.START.status = 'completed';
-            applicableStatus.DRAFT.status = 'completed';
-            applicableStatus.MARKED_AS_READY.status = 'completed';
-            applicableStatus.READY.status = 'completed';
-            applicableStatus.PUBLISHED.status = 'completed';
-
-            return applicableStatus;
+        if (diff < 0) {
+            return 'past';
         }
 
-        return baseStatus;
-    }, [value]);
-
-    const statusList = mapToList(
-        projectStatuses,
-        (item, key) => ({
-            key,
-            ...item,
-        }),
-    );
-
-    if (isNotDefined(projectStatuses)) {
-        return null;
+        return 'present';
     }
 
     return (
@@ -244,14 +192,79 @@ function ProjectStatusTimeline(props: Props) {
             className={styles.projectStatusOutput}
             layout="block"
         >
-            {statusList.map((statusItem) => (
-                <Status
-                    key={statusItem.key}
-                    label={statusItem.label}
-                    status={statusItem.status}
-                    description={statusItem.description}
+            <StatusItem
+                statusTense={getStatusTense(undefined)}
+                label="Initialize"
+                description="Get started with basic details of the project"
+            />
+            <StatusItem
+                statusTense={getStatusTense(Draft)}
+                label={projectStatusDetails[Draft].label}
+                description={projectStatusDetails[Draft].description}
+            />
+            {value !== ProcessingFailed && (
+                <StatusItem
+                    statusTense={getStatusTense(ReadyToProcess)}
+                    label={projectStatusDetails[ReadyToProcess].label}
+                    description={projectStatusDetails[ReadyToProcess].description}
+                />
+            )}
+            {value === ProcessingFailed && (
+                <StatusItem
+                    statusTense={getStatusTense(ProcessingFailed)}
+                    label={projectStatusDetails[ProcessingFailed].label}
+                    description={projectStatusDetails[ProcessingFailed].description}
+                    errored
+                />
+            )}
+            <StatusItem
+                statusTense={getStatusTense(Processed)}
+                label={projectStatusDetails[Processed].label}
+                description={projectStatusDetails[Processed].description}
+            />
+            {value === Discarded && (
+                <StatusItem
+                    statusTense={getStatusTense(Discarded)}
+                    label={projectStatusDetails[Discarded].label}
+                    description={projectStatusDetails[Discarded].description}
+                />
+            )}
+            <StatusItem
+                statusTense={getStatusTense(ReadyToPublish)}
+                label={projectStatusDetails[ReadyToPublish].label}
+                description={projectStatusDetails[ReadyToPublish].description}
+            />
+            {value === PublishingFailed && (
+                <StatusItem
+                    statusTense={getStatusTense(PublishingFailed)}
+                    label={projectStatusDetails[PublishingFailed].label}
+                    description={projectStatusDetails[PublishingFailed].description}
                 />
-            ))}
+            )}
+            <StatusItem
+                statusTense={getStatusTense(Published)}
+                label={projectStatusDetails[Published].label}
+                description={projectStatusDetails[Published].description}
+            />
+            {value === Paused && (
+                <StatusItem
+                    statusTense={getStatusTense(Paused)}
+                    label={projectStatusDetails[Paused].label}
+                    description={projectStatusDetails[Paused].description}
+                />
+            )}
+            {value === Withdrawn && (
+                <StatusItem
+                    statusTense={getStatusTense(Withdrawn)}
+                    label={projectStatusDetails[Withdrawn].label}
+                    description={projectStatusDetails[Withdrawn].description}
+                />
+            )}
+            <StatusItem
+                statusTense={getStatusTense(Finished)}
+                label={projectStatusDetails[Finished].label}
+                description={projectStatusDetails[Finished].description}
+            />
         </ListLayout>
     );
 }
diff --git a/app/components/domain/ProjectStatusTimeline/styles.module.css b/app/components/domain/ProjectStatusTimeline/styles.module.css
index 032c384d..9504b83d 100644
--- a/app/components/domain/ProjectStatusTimeline/styles.module.css
+++ b/app/components/domain/ProjectStatusTimeline/styles.module.css
@@ -1,21 +1,75 @@
 .project-status-output {
     .status {
-        .icon-container {
-            align-items: center;
+        position: relative;
+        isolation: isolate;
+        --status-color: transparent;
+
+        .backdrop {
+            position: absolute;
+            pointer-events: none;
+            top: calc(-1 * var(--spacing-xs));
+            left: calc(-1 * var(--spacing-xs));
+            border-radius: var(--radius-card-border);
+            background-color: color-mix(in srgb, var(--status-color) 5%, transparent);
+            width: calc(100% + 2 * var(--spacing-xs));
+            height: calc(100% + 2 * var(--spacing-xs));
+        }
+
+        .icon {
+            font-size: var(--font-size-xl);
+        }
+
+        .start-container {
             align-self: stretch;
-            flex-shrink: 0;
+        }
 
-            .icon {
-                font-size: var(--font-size-lg);
-            }
+        .tense-icon {
+            align-items: center;
 
             .line {
                 flex-grow: 1;
+                opacity: 0.2;
                 background-color: var(--color-text);
                 width: 1pt;
             }
         }
 
+        &.present {
+            --status-color: var(--color-accent);
+
+            .icon {
+                color: var(--color-accent);
+            }
+
+            .title {
+                color: var(--color-accent);
+                font-weight: var(--font-weight-bold);
+            }
+        }
+
+        &.errored {
+            --status-color: var(--color-danger);
+
+            .icon {
+                color: var(--color-danger);
+            }
+
+            .title {
+                color: var(--color-danger);
+                font-weight: var(--font-weight-bold);
+            }
+        }
+
+        &.future {
+            opacity: 0.5;
+        }
+
+        &.past {
+            .icon {
+                color: var(--color-success);
+            }
+        }
+
         .details {
             .label {
                 font-size: var(--font-size-md);
@@ -52,7 +106,7 @@
         }
 
         &:last-child {
-            .icon-container {
+            .tense-icon {
                 .line {
                     display: none;
                 }
diff --git a/app/components/domain/ProjectTaskDetails/index.tsx b/app/components/domain/ProjectTaskDetails/index.tsx
new file mode 100644
index 00000000..d4674a08
--- /dev/null
+++ b/app/components/domain/ProjectTaskDetails/index.tsx
@@ -0,0 +1,93 @@
+import { PiInfo } from 'react-icons/pi';
+import { isNotDefined } from '@togglecorp/fujs';
+
+import Container from '#components/Container';
+import PopupButton from '#components/PopupButton';
+import TextOutput from '#components/TextOutput';
+import { ProjectType } from '#generated/types/graphql';
+
+type ProjectAdditionalInputFields = Pick<
+ProjectType,
+'verificationNumber'
+| 'groupSize'
+| 'maxTasksPerUser'
+>
+
+interface Props {
+    value: ProjectAdditionalInputFields | undefined;
+}
+
+function ProjectTaskDetails(props: Props) {
+    const {
+        value,
+    } = props;
+
+    if (isNotDefined(value)) {
+        return null;
+    }
+
+    return (
+        <Container
+            heading="Task details"
+            headingLevel={5}
+            contentLayout="block"
+            spacing="sm"
+        >
+            <TextOutput
+                label="Verification number"
+                value={value.verificationNumber}
+                valueType="number"
+                withCenterAlign
+                description={(
+                    <PopupButton
+                        label={<PiInfo />}
+                        withoutDropdownIcon
+                        styleVariant="transparent"
+                        withoutPadding
+                    >
+                        How many people do you want to see every
+                        tile before you consider it finished?
+                        (default is 3 - more is recommended for harder tasks,
+                        but this will also make project take longer)
+                    </PopupButton>
+                )}
+            />
+            <TextOutput
+                label="Group size"
+                value={value.groupSize}
+                valueType="number"
+                withCenterAlign
+                description={(
+                    <PopupButton
+                        label={<PiInfo />}
+                        withoutDropdownIcon
+                        styleVariant="transparent"
+                        withoutPadding
+                    >
+                        How big should a mapping session be?
+                        Group size refers to the number of tasks per mapping session.
+                    </PopupButton>
+                )}
+            />
+            <TextOutput
+                label="Max tasks per user"
+                value={value.maxTasksPerUser}
+                valueType="number"
+                withCenterAlign
+                description={(
+                    <PopupButton
+                        label={<PiInfo />}
+                        withoutDropdownIcon
+                        styleVariant="transparent"
+                        withoutPadding
+                    >
+                        How many tasks each user is allowed to work on for this project.
+                        Empty indicates that no limit is set.
+                    </PopupButton>
+                )}
+            />
+        </Container>
+    );
+}
+
+export default ProjectTaskDetails;
diff --git a/app/components/domain/StreetScenarioPreview/index.tsx b/app/components/domain/StreetScenarioPreview/index.tsx
new file mode 100644
index 00000000..5e5c4852
--- /dev/null
+++ b/app/components/domain/StreetScenarioPreview/index.tsx
@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import { _cs } from '@togglecorp/fujs';
+import { PartialForm } from '@togglecorp/toggle-form';
+
+import Icon from '#components/domain/Icon';
+import TutorialPreviewScreenSelectInput, { PreviewItem } from '#components/domain/TutorialPreviewScreenSelectInput';
+import InlineLayout from '#components/InlineLayout';
+import ListLayout from '#components/ListLayout';
+import MapillaryImagePreview from '#components/MapillaryImagePreview';
+import MobilePreview from '#components/MobilePreview';
+import { TutorialScenarioPageCreateInput } from '#generated/types/graphql';
+
+import { PartialCustomOptionInputFields } from '../CustomOptionInput/schema';
+import CustomOptionPreview from '../CustomOptionsPreview';
+
+import styles from './styles.module.css';
+
+interface Props {
+    className?: string;
+    projectInstruction: string | undefined | null;
+    scenario: PartialForm<TutorialScenarioPageCreateInput> | undefined;
+    customOptions: PartialCustomOptionInputFields[] | undefined;
+}
+
+function StreetScenarioPreview(props: Props) {
+    const {
+        className,
+        scenario,
+        projectInstruction,
+        customOptions,
+    } = props;
+
+    const [preview, setPreview] = useState<PreviewItem | undefined>();
+    const imageId = scenario?.tasks?.[0].projectTypeSpecifics?.street?.mapillaryImageId;
+
+    return (
+        <ListLayout
+            className={_cs(styles.findScenarioPreview, className)}
+            layout="block"
+        >
+            <MobilePreview
+                heading={projectInstruction}
+                popupIcons={<Icon value={preview?.icon} />}
+                popupTitle={preview?.title || '{title}'}
+                popupDescription={preview?.description || '{description}'}
+                popupVariant={preview?.popupVariant}
+                contentClassName={styles.content}
+            >
+                <MapillaryImagePreview
+                    imageId={imageId}
+                    className={styles.streetPreview}
+                />
+                <CustomOptionPreview
+                    value={customOptions}
+                />
+            </MobilePreview>
+            <InlineLayout withCenteredContent>
+                <TutorialPreviewScreenSelectInput
+                    scenario={scenario}
+                    onPreviewChange={setPreview}
+                />
+            </InlineLayout>
+        </ListLayout>
+    );
+}
+
+export default StreetScenarioPreview;
diff --git a/app/components/domain/StreetScenarioPreview/styles.module.css b/app/components/domain/StreetScenarioPreview/styles.module.css
new file mode 100644
index 00000000..17bde00a
--- /dev/null
+++ b/app/components/domain/StreetScenarioPreview/styles.module.css
@@ -0,0 +1,15 @@
+.find-scenario-preview {
+    isolation: isolate;
+
+    .content {
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--spacing-lg);
+
+        .street-preview {
+            margin-top: var(--spacing-lg);
+            width: var(--size-tile-validate);
+            height: calc(1.5 * var(--size-tile-validate));
+        }
+    }
+}
diff --git a/app/components/domain/TutorialStatusIcon/index.tsx b/app/components/domain/TutorialStatusIcon/index.tsx
index 2c32ac5e..4ee8c347 100644
--- a/app/components/domain/TutorialStatusIcon/index.tsx
+++ b/app/components/domain/TutorialStatusIcon/index.tsx
@@ -2,7 +2,9 @@ import {
     PiArchive,
     PiCloudCheck,
     PiFileText,
+    PiHourglassMedium,
     PiTrash,
+    PiWarningCircle,
 } from 'react-icons/pi';
 import { isNotDefined } from '@togglecorp/fujs';
 
@@ -27,6 +29,18 @@ function TutorialStatusIcon(props: Props) {
         return <PiFileText className={className} />;
     }
 
+    if (value === TutorialStatusEnum.ReadyToPublish) {
+        return <PiHourglassMedium className={className} />;
+    }
+
+    if (value === TutorialStatusEnum.Published) {
+        return <PiCloudCheck className={className} />;
+    }
+
+    if (value === TutorialStatusEnum.PublishingFailed) {
+        return <PiWarningCircle className={className} />;
+    }
+
     if (value === TutorialStatusEnum.Archived) {
         return <PiArchive className={className} />;
     }
@@ -35,10 +49,6 @@ function TutorialStatusIcon(props: Props) {
         return <PiTrash className={className} />;
     }
 
-    if (value === TutorialStatusEnum.Published) {
-        return <PiCloudCheck className={className} />;
-    }
-
     value satisfies never;
 
     return null;
diff --git a/app/components/domain/TutorialStatusOutput/index.tsx b/app/components/domain/TutorialStatusOutput/index.tsx
index 58565d99..d12875b4 100644
--- a/app/components/domain/TutorialStatusOutput/index.tsx
+++ b/app/components/domain/TutorialStatusOutput/index.tsx
@@ -20,7 +20,8 @@ function TutorialStatusOutput(props: Props) {
         className,
         spacing,
     } = props;
-    const { projectStatusMapping } = useContext(EnumsContext);
+
+    const { tutorialStatusMapping } = useContext(EnumsContext);
 
     if (isNotDefined(value)) {
         return null;
@@ -34,7 +35,7 @@ function TutorialStatusOutput(props: Props) {
             spacingOffset={-2}
             withCenterAlign
         >
-            {projectStatusMapping?.[value].label}
+            {tutorialStatusMapping?.[value].label}
         </InlineLayout>
     );
 }
diff --git a/app/components/domain/ValidateImageScenarioPreview/index.tsx b/app/components/domain/ValidateImageScenarioPreview/index.tsx
index 99acb4c9..04ecd795 100644
--- a/app/components/domain/ValidateImageScenarioPreview/index.tsx
+++ b/app/components/domain/ValidateImageScenarioPreview/index.tsx
@@ -13,9 +13,13 @@ import { PartialForm } from '@togglecorp/toggle-form';
 import { PartialCustomOptionInputFields } from '#components/domain/CustomOptionInput/schema';
 import CustomOptionPreview from '#components/domain/CustomOptionsPreview';
 import Icon from '#components/domain/Icon';
+import InlineLayout from '#components/InlineLayout';
+import ListLayout from '#components/ListLayout';
 import MobilePreview from '#components/MobilePreview';
 import { TutorialScenarioPageCreateInput } from '#generated/types/graphql';
 
+import TutorialPreviewScreenSelectInput, { PreviewItem } from '../TutorialPreviewScreenSelectInput';
+
 import styles from './styles.module.css';
 
 interface Props {
@@ -33,6 +37,8 @@ function ValidateImageScenarioPreview(props: Props) {
         customOptions,
     } = props;
 
+    const [preview, setPreview] = useState<PreviewItem | undefined>();
+
     const imgRef = useRef<HTMLImageElement>(null);
     const task = scenario?.tasks?.[0]?.projectTypeSpecifics?.validateImage;
     const [bbox, setBbox] = useState<{
@@ -89,12 +95,16 @@ function ValidateImageScenarioPreview(props: Props) {
     }, [task]);
 
     return (
-        <div className={_cs(styles.validateImageScenarioPreview, className)}>
+        <ListLayout
+            className={_cs(styles.validateImageScenarioPreview, className)}
+            layout="block"
+        >
             <MobilePreview
                 heading={projectInstruction}
-                popupIcons={<Icon value={scenario?.instructionsIcon} />}
-                popupTitle={scenario?.instructionsTitle || '{title}'}
-                popupDescription={scenario?.instructionsDescription || '{description}'}
+                popupIcons={<Icon value={preview?.icon} />}
+                popupTitle={preview?.title || '{title}'}
+                popupDescription={preview?.description || '{description}'}
+                popupVariant={preview?.popupVariant}
                 contentClassName={styles.content}
             >
                 <div className={styles.imageWrapper}>
@@ -120,7 +130,13 @@ function ValidateImageScenarioPreview(props: Props) {
                     value={customOptions}
                 />
             </MobilePreview>
-        </div>
+            <InlineLayout withCenteredContent>
+                <TutorialPreviewScreenSelectInput
+                    scenario={scenario}
+                    onPreviewChange={setPreview}
+                />
+            </InlineLayout>
+        </ListLayout>
     );
 }
 
diff --git a/app/components/domain/ValidateImageScenarioPreview/styles.module.css b/app/components/domain/ValidateImageScenarioPreview/styles.module.css
index b64a75a6..bdd2fb6c 100644
--- a/app/components/domain/ValidateImageScenarioPreview/styles.module.css
+++ b/app/components/domain/ValidateImageScenarioPreview/styles.module.css
@@ -1,8 +1,5 @@
 .validate-image-scenario-preview {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    gap: var(--spacing-sm);
+    isolation: isolate;
 
     .content {
         align-items: center;
diff --git a/app/components/domain/ValidateScenarioPreview/index.tsx b/app/components/domain/ValidateScenarioPreview/index.tsx
index d7ed6b7a..20ac580e 100644
--- a/app/components/domain/ValidateScenarioPreview/index.tsx
+++ b/app/components/domain/ValidateScenarioPreview/index.tsx
@@ -1,4 +1,7 @@
-import { useMemo } from 'react';
+import {
+    useMemo,
+    useState,
+} from 'react';
 import {
     _cs,
     isDefined,
@@ -14,12 +17,16 @@ import { PartialCustomOptionInputFields } from '#components/domain/CustomOptionI
 import CustomOptionPreview from '#components/domain/CustomOptionsPreview';
 import GeoJsonPreview from '#components/domain/GeoJsonPreview';
 import Icon from '#components/domain/Icon';
+import InlineLayout from '#components/InlineLayout';
+import ListLayout from '#components/ListLayout';
 import MobilePreview from '#components/MobilePreview';
 import {
     ProjectRasterTileServerConfig,
     TutorialScenarioPageCreateInput,
 } from '#generated/types/graphql';
 
+import TutorialPreviewScreenSelectInput, { PreviewItem } from '../TutorialPreviewScreenSelectInput';
+
 import styles from './styles.module.css';
 
 const layerOptions: Omit<LineLayerSpecification, 'id' | 'source'> = {
@@ -49,6 +56,8 @@ function ValidateScenarioPreview(props: Props) {
         customOptions,
     } = props;
 
+    const [preview, setPreview] = useState<PreviewItem | undefined>();
+
     const generatedGeojson = useMemo<GeoJSON.FeatureCollection>(() => {
         const features: Array<GeoJSON.Feature> = scenario?.tasks?.map((task) => {
             if (isNotDefined(task.projectTypeSpecifics?.validate?.objectGeometry)) {
@@ -71,12 +80,16 @@ function ValidateScenarioPreview(props: Props) {
     }, [scenario]);
 
     return (
-        <div className={_cs(styles.validateScenarioPreview, className)}>
+        <ListLayout
+            className={_cs(styles.validateScenarioPreview, className)}
+            layout="block"
+        >
             <MobilePreview
                 heading={projectInstruction}
-                popupIcons={<Icon value={scenario?.instructionsIcon} />}
-                popupTitle={scenario?.instructionsTitle || '{title}'}
-                popupDescription={scenario?.instructionsDescription || '{description}'}
+                popupIcons={<Icon value={preview?.icon} />}
+                popupTitle={preview?.title || '{title}'}
+                popupDescription={preview?.description || '{description}'}
+                popupVariant={preview?.popupVariant}
                 contentClassName={styles.content}
             >
                 <GeoJsonPreview
@@ -92,7 +105,13 @@ function ValidateScenarioPreview(props: Props) {
                     value={customOptions}
                 />
             </MobilePreview>
-        </div>
+            <InlineLayout withCenteredContent>
+                <TutorialPreviewScreenSelectInput
+                    scenario={scenario}
+                    onPreviewChange={setPreview}
+                />
+            </InlineLayout>
+        </ListLayout>
     );
 }
 
diff --git a/app/components/domain/ValidateScenarioPreview/styles.module.css b/app/components/domain/ValidateScenarioPreview/styles.module.css
index 4ac7c6a4..2b2d5a42 100644
--- a/app/components/domain/ValidateScenarioPreview/styles.module.css
+++ b/app/components/domain/ValidateScenarioPreview/styles.module.css
@@ -1,8 +1,5 @@
 .validate-scenario-preview {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    gap: var(--spacing-sm);
+    isolation: isolate;
 
     .content {
         align-items: center;
diff --git a/app/contexts/EnumsContext.ts b/app/contexts/EnumsContext.ts
index f21762cd..38dcbafd 100644
--- a/app/contexts/EnumsContext.ts
+++ b/app/contexts/EnumsContext.ts
@@ -13,6 +13,7 @@ export interface EnumsContextProps {
     iconOptions: AllEnumsQuery['enums']['IconEnum'],
     overlayLayerTypeOptions: AllEnumsQuery['enums']['OverlayLayerTypeEnum'],
     tutorialStatusOptions: AllEnumsQuery['enums']['TutorialStatusEnum'],
+    firebasePushStatusOptions: AllEnumsQuery['enums']['FirebasePushStatusEnum'],
 
     validateObjectSourceTypeMapping: Record<
         AllEnumsQuery['enums']['ValidateObjectSourceTypeEnum'][number]['key'],
@@ -54,6 +55,10 @@ export interface EnumsContextProps {
         AllEnumsQuery['enums']['TutorialStatusEnum'][number]['key'],
         AllEnumsQuery['enums']['TutorialStatusEnum'][number]
     > | undefined;
+    firebasePushStatusMapping: Record<
+        AllEnumsQuery['enums']['FirebasePushStatusEnum'][number]['key'],
+        AllEnumsQuery['enums']['FirebasePushStatusEnum'][number]
+    > | undefined;
 }
 
 export const defaultAllEnumsValue: EnumsContextProps = {
@@ -67,6 +72,7 @@ export const defaultAllEnumsValue: EnumsContextProps = {
     iconOptions: [],
     overlayLayerTypeOptions: [],
     tutorialStatusOptions: [],
+    firebasePushStatusOptions: [],
 
     validateObjectSourceTypeMapping: undefined,
     validateImageSourceTypeMapping: undefined,
@@ -78,6 +84,7 @@ export const defaultAllEnumsValue: EnumsContextProps = {
     iconMapping: undefined,
     overlayLayerTypeMapping: undefined,
     tutorialStatusMapping: undefined,
+    firebasePushStatusMapping: undefined,
 };
 
 const EnumsContext = createContext<EnumsContextProps>(defaultAllEnumsValue);
diff --git a/app/index.css b/app/index.css
index 13d2d525..c361258a 100644
--- a/app/index.css
+++ b/app/index.css
@@ -6,13 +6,37 @@
     --font-family-monospace: 'Source Code Pro', monospace;
     --font-family-sans-serif: 'Source Sans 3', sans-serif;
 
-    --spacing-2xs: 0.15rem;
-    --spacing-xs: 0.25rem;
-    --spacing-sm: 0.45rem;
-    --spacing-md: 0.7rem;
-    --spacing-lg: 1.1rem;
-    --spacing-xl: 1.625rem;
-    --spacing-2xl: 2.625rem;
+    --optical-correction-factor: 1.25;
+    --spacing-base: 1rem;
+    --font-size-base: 1rem;
+
+    @media screen and (max-width: 50rem) {
+        --spacing-base: 0.87rem;
+        --font-size-base: 0.96rem;
+    }
+
+    @media screen and (max-width: 30rem) {
+        --spacing-base: 0.8rem;
+        --font-size-base: 0.87rem;
+    }
+
+    --spacing-2xs: calc(var(--spacing-base) * 0.15);
+    --spacing-xs: calc(var(--spacing-base) * 0.25);
+    --spacing-sm: calc(var(--spacing-base) * 0.45);
+    --spacing-md: calc(var(--spacing-base) * 0.7);
+    --spacing-lg: calc(var(--spacing-base) * 1.1);
+    --spacing-xl: calc(var(--spacing-base) * 1.625);
+    --spacing-2xl: calc(var(--spacing-base) * 2.625);
+
+    --font-size-2xs: calc(var(--font-size-base) * 0.75);
+    --font-size-xs: calc(var(--font-size-base) * 0.8125);
+    --font-size-sm: calc(var(--font-size-base) * 0.875);
+    --font-size-md: calc(var(--font-size-base) * 1);
+    --font-size-lg: calc(var(--font-size-base) * 1.125);
+    --font-size-xl: calc(var(--font-size-base) * 1.25);
+    --font-size-2xl: calc(var(--font-size-base) * 1.75);
+    --font-size-3xl: calc(var(--font-size-base) * 2.0);
+    --font-size-4xl: calc(var(--font-size-base) * 2.25);
 
     --color-primary: #001958;
     --color-text-on-dark: #ffffff;
@@ -44,17 +68,6 @@
     --color-input-border: rgba(0, 0, 0, 0.1);
     --color-active-input-border: var(--color-accent);
 
-    --font-size-base: 1rem;
-
-    --font-size-2xs: calc(var(--font-size-base) * 0.625);
-    --font-size-xs: calc(var(--font-size-base) * 0.75);
-    --font-size-sm: calc(var(--font-size-base) * 0.875);
-    --font-size-md: calc(var(--font-size-base) * 1);
-    --font-size-lg: calc(var(--font-size-base) * 1.15);
-    --font-size-xl: calc(var(--font-size-base) * 1.33);
-    --font-size-2xl: calc(var(--font-size-base) * 1.65);
-    --font-size-3xl: calc(var(--font-size-base) * 2.0);
-    --font-size-4xl: calc(var(--font-size-base) * 2.5);
 
     --font-weight-light: 300;
     --font-weight-medium: 360;
diff --git a/app/utils/common.ts b/app/utils/common.ts
index aa27d2ed..c6b2050b 100644
--- a/app/utils/common.ts
+++ b/app/utils/common.ts
@@ -462,19 +462,8 @@ export type ZoomLeveOption = {
     area: number;
 };
 
+// TODO: verify scale and area
 export const zoomLevelOptions: ZoomLeveOption[] = [
-    {
-        value: 10, label: 'Town View', description: 'Towns, small cities', scale: 152, area: 1500,
-    },
-    {
-        value: 11, label: 'Neighborhood View', description: 'Urban neighborhoods', scale: 76, area: 400,
-    },
-    {
-        value: 12, label: 'Street View', description: 'Street-level navigation', scale: 38, area: 100,
-    },
-    {
-        value: 13, label: 'Local Street View', description: 'Blocks, parks, schools', scale: 19, area: 25,
-    },
     {
         value: 14, label: 'Sub-Street View', description: 'Individual buildings', scale: 9.5, area: 5,
     },
diff --git a/app/utils/query.ts b/app/utils/query.ts
index 7ec36204..ab82639c 100644
--- a/app/utils/query.ts
+++ b/app/utils/query.ts
@@ -218,6 +218,7 @@ fragment ProjectDetailFields on ProjectType {
         name
     }
     status
+    statusMessage
     verificationNumber
 }
 `;
@@ -309,6 +310,8 @@ fragment TutorialDetailFields on TutorialType {
                 }
                 ... on StreetTutorialTaskPropertyType {
                     __typename
+                    mapillaryImageId
+                    geometry
                 }
             }
         }
diff --git a/app/utils/styles.ts b/app/utils/styles.ts
index c6d97926..43c987cd 100644
--- a/app/utils/styles.ts
+++ b/app/utils/styles.ts
@@ -13,9 +13,8 @@ export const fullSpacings: SpacingMode[] = [
 export function getOpticallyCorrectedSpacingValue(value: string, mode: SpacingMode) {
     // Horizontal padding seems a bit imbalanced
     // due to the gap from the line height in vertical padding
-    if (mode === 'padding-inline') {
-        // FIXME: use line-height istead of 1.5
-        return `calc(${value} + (1rem * 1.25 - 1rem))`;
+    if (mode === 'padding-block') {
+        return `calc(${value} + (1rem / var(--optical-correction-factor) - 1rem))`;
     }
 
     return value;
diff --git a/app/views/Contributors/index.tsx b/app/views/Contributors/index.tsx
index 241dbb8b..5970e405 100644
--- a/app/views/Contributors/index.tsx
+++ b/app/views/Contributors/index.tsx
@@ -25,7 +25,10 @@ import useListManagement, {
     ExactFilter,
     SearchFilter,
 } from '#hooks/useListManagement';
-import { defaultPagePerItemOptions } from '#utils/common';
+import {
+    defaultPagePerItemOptions,
+    formatNumber,
+} from '#utils/common';
 
 const sortKeyOptions: SortByOption<keyof ContributorUserOrder>[] = [
     {
@@ -142,7 +145,7 @@ function Contributors() {
             )}
         >
             <Container
-                heading={`Showing ${totalItems} of ${totalCount} users`}
+                heading={`Showing ${formatNumber(totalItems)} of ${formatNumber(totalCount)} users`}
                 headingLevel={6}
                 headerActions={(
                     <>
@@ -165,9 +168,6 @@ function Contributors() {
                 emptyMessage="No contributor found!"
                 filteredEmptyMessage="No matching contributor found!"
                 spacing="lg"
-                withBackground={totalCount === 0}
-                withPadding={totalCount === 0}
-                withMinHeight={totalCount === 0}
                 footerActions={(
                     <Pager
                         pagePerItem={pageSize}
diff --git a/app/views/EditProject/ProjectActions/index.tsx b/app/views/EditProject/ProjectActions/index.tsx
index fe05e1ec..0c539861 100644
--- a/app/views/EditProject/ProjectActions/index.tsx
+++ b/app/views/EditProject/ProjectActions/index.tsx
@@ -116,10 +116,12 @@ function ProjectActions(props: Props) {
 
     return (
         <>
-            {(status === ProjectStatusEnum.Draft || status === ProjectStatusEnum.Failed) && (
+            {(status === ProjectStatusEnum.Draft
+                || status === ProjectStatusEnum.ProcessingFailed
+            ) && (
                 <Button
-                    name={ProjectStatusEnum.MarkedAsReady}
-                    start={<ProjectStatusIcon value={ProjectStatusEnum.MarkedAsReady} />}
+                    name={ProjectStatusEnum.ReadyToProcess}
+                    start={<ProjectStatusIcon value={ProjectStatusEnum.ReadyToProcess} />}
                     onClick={setNewStatus}
                     disabled={actionsDisabled}
                     styleVariant={buttonStyleVariant}
@@ -128,9 +130,9 @@ function ProjectActions(props: Props) {
                     Process
                 </Button>
             )}
-            {status === ProjectStatusEnum.Ready && (
+            {status === ProjectStatusEnum.Processed && (
                 <Button
-                    name={ProjectStatusEnum.Published}
+                    name={ProjectStatusEnum.ReadyToPublish}
                     start={<ProjectStatusIcon value={ProjectStatusEnum.Published} />}
                     onClick={setNewStatus}
                     disabled={actionsDisabled}
@@ -142,20 +144,32 @@ function ProjectActions(props: Props) {
             )}
             {status === ProjectStatusEnum.Published && (
                 <Button
-                    name={ProjectStatusEnum.Archived}
-                    start={<ProjectStatusIcon value={ProjectStatusEnum.Archived} />}
+                    name={ProjectStatusEnum.Withdrawn}
+                    start={<ProjectStatusIcon value={ProjectStatusEnum.Withdrawn} />}
                     onClick={setNewStatus}
                     disabled={actionsDisabled}
                     colorVariant="danger"
                     styleVariant={buttonStyleVariant}
                 >
-                    Archive
+                    Withdraw
+                </Button>
+            )}
+            {status === ProjectStatusEnum.Published && (
+                <Button
+                    name={ProjectStatusEnum.Finished}
+                    start={<ProjectStatusIcon value={ProjectStatusEnum.Finished} />}
+                    onClick={setNewStatus}
+                    disabled={actionsDisabled}
+                    styleVariant={buttonStyleVariant}
+                    colorVariant="danger"
+                >
+                    Finish
                 </Button>
             )}
-            {(status === ProjectStatusEnum.Ready
-                || status === ProjectStatusEnum.Paused
+            {(status === ProjectStatusEnum.ReadyToProcess
+                || status === ProjectStatusEnum.Processed
                 || status === ProjectStatusEnum.Draft
-                || status === ProjectStatusEnum.Failed
+                || status === ProjectStatusEnum.ProcessingFailed
             ) && (
                 <Button
                     name={ProjectStatusEnum.Discarded}
@@ -176,7 +190,7 @@ function ProjectActions(props: Props) {
                     disabled={actionsDisabled}
                     styleVariant={buttonStyleVariant}
                 >
-                    Un-pause
+                    Resume
                 </Button>
             )}
             {status === ProjectStatusEnum.Published && (
@@ -227,8 +241,9 @@ function ProjectActions(props: Props) {
                         <PiArrowRight />
                         <ProjectStatusOutput value={newStatus} />
                     </ListLayout>
-                    {(newStatus === ProjectStatusEnum.Archived
+                    {(newStatus === ProjectStatusEnum.Withdrawn
                         || newStatus === ProjectStatusEnum.Discarded
+                        || newStatus === ProjectStatusEnum.Finished
                     ) && (
                         <p>
                             Please note that this action is irreversable!
diff --git a/app/views/EditProject/ProjectAdditionalInputs/index.tsx b/app/views/EditProject/ProjectAdditionalInputs/index.tsx
index ea39a3da..3748df2b 100644
--- a/app/views/EditProject/ProjectAdditionalInputs/index.tsx
+++ b/app/views/EditProject/ProjectAdditionalInputs/index.tsx
@@ -63,6 +63,7 @@ function ProjectAdditionalInputs(props: Props) {
                         onChange={setFieldValue}
                         error={error?.verificationNumber}
                         disabled={disabled}
+                        hint="How many people do you want to see every tile before you consider it finished? (default is 3 - more is recommended for harder tasks, but this will also make project take longer)"
                     />
                     <NumberInput
                         label="Group size"
@@ -71,6 +72,7 @@ function ProjectAdditionalInputs(props: Props) {
                         onChange={setFieldValue}
                         error={error?.groupSize}
                         disabled={disabled}
+                        hint="How big should a mapping session be? Group size refers to the number of tasks per mapping session."
                     />
                     <NumberInput
                         label="Max tasks per user"
@@ -79,6 +81,7 @@ function ProjectAdditionalInputs(props: Props) {
                         onChange={setFieldValue}
                         error={error?.maxTasksPerUser}
                         disabled={disabled}
+                        hint="How many tasks each user is allowed to work on for this project. Empty indicates that no limit is set."
                     />
                 </ListLayout>
                 <AssetInput
@@ -90,6 +93,7 @@ function ProjectAdditionalInputs(props: Props) {
                     onChange={setFieldValue}
                     error={error?.image}
                     disabled={disabled}
+                    hint="Make sure you have the rights to use the image. It should end with .jpg or .png."
                 />
             </ListLayout>
         </Container>
diff --git a/app/views/EditProject/UpdateProcessedProjectForm/index.tsx b/app/views/EditProject/UpdateProcessedProjectForm/index.tsx
index d19f287e..d6da8bb3 100644
--- a/app/views/EditProject/UpdateProcessedProjectForm/index.tsx
+++ b/app/views/EditProject/UpdateProcessedProjectForm/index.tsx
@@ -16,12 +16,13 @@ import {
 } from '@togglecorp/toggle-form';
 import { gql } from 'urql';
 
+import Alert from '#components/Alert';
 import Button from '#components/Button';
 import Container from '#components/Container';
 import AssetInput from '#components/domain/AssetInput';
 import ProjectSpecificDetails from '#components/domain/ProjectSpecificDetails';
 import ProjectStatusTimeline from '#components/domain/ProjectStatusTimeline';
-import InputError from '#components/InputError';
+import ProjectTaskDetails from '#components/domain/ProjectTaskDetails';
 import ListLayout from '#components/ListLayout';
 import NonFieldError from '#components/NonFieldError';
 import PageLayout from '#components/PageLayout';
@@ -231,9 +232,8 @@ function UpdateProcessedProjectForm(props: Props) {
 
     const pending = updateProcessedProjectPending;
     const baseInputsEditable = isDefined(projectData) && (
-        projectData.project.status === ProjectStatusEnum.Draft
-        || projectData.project.status === ProjectStatusEnum.Failed
-        || projectData.project.status === ProjectStatusEnum.Ready
+        projectData.project.status === ProjectStatusEnum.ProcessingFailed
+        || projectData.project.status === ProjectStatusEnum.Processed
     );
 
     const baseInputsDisabled = pending || !baseInputsEditable;
@@ -268,13 +268,17 @@ function UpdateProcessedProjectForm(props: Props) {
                 />
             )}
         >
-            <NonFieldError error={error} />
-            {projectData?.project.status === ProjectStatusEnum.Failed && (
-                <InputError>
-                    There was an error while processing the project.
-                    Please make the necessary changes before proceeding!
-                </InputError>
+            {projectData?.project.status === ProjectStatusEnum.PublishingFailed && (
+                <Alert
+                    name="processing-error"
+                    title="Processing failed!"
+                    description="There was an error while publising the project!"
+                    fullWidth
+                    type="danger"
+                    withoutShadow
+                />
             )}
+            <NonFieldError error={error} />
             <ProjectGeneralInputs
                 value={value}
                 setFieldValue={setFieldValue}
@@ -296,8 +300,12 @@ function UpdateProcessedProjectForm(props: Props) {
                         onChange={setFieldValue}
                         error={error?.image}
                         disabled={baseInputsDisabled}
+                        hint="Make sure you have the rights to use the image. It should end with .jpg or .png."
                     />
                 </ListLayout>
+                <ProjectTaskDetails
+                    value={projectData.project}
+                />
             </Container>
             <ProjectSpecificDetails
                 projectId={projectData.project.id}
diff --git a/app/views/EditProject/UpdateProcessedProjectForm/schema.ts b/app/views/EditProject/UpdateProcessedProjectForm/schema.ts
index 1bb38ad3..20e6406e 100644
--- a/app/views/EditProject/UpdateProcessedProjectForm/schema.ts
+++ b/app/views/EditProject/UpdateProcessedProjectForm/schema.ts
@@ -49,7 +49,6 @@ const processedProjectUpdateFormSchema: ProcessedProjectUpdateFormSchema = {
         description: {},
         image: {},
         team: {},
-        status: {},
         tutorial: {
             // FIXME(frozenhelium): only make this required for publish project
             required: true,
diff --git a/app/views/EditProject/UpdateProjectForm/CompareProjectSpecifics/index.tsx b/app/views/EditProject/UpdateProjectForm/CompareProjectSpecifics/index.tsx
index cbdf3069..974905c1 100644
--- a/app/views/EditProject/UpdateProjectForm/CompareProjectSpecifics/index.tsx
+++ b/app/views/EditProject/UpdateProjectForm/CompareProjectSpecifics/index.tsx
@@ -58,7 +58,7 @@ function CompareProjectSpecifics(props: Props) {
                 value={value?.aoiGeometry}
                 error={error?.aoiGeometry}
                 inputType={ProjectAssetInputTypeEnum.AoiGeometry}
-                hint="Upload your project area as GeoJSON File (max. 1MB). Make sure that you provide a single polygon geometry."
+                hint="Upload your project area as GeoJSON File (max. 1MB)"
                 disabled={disabled}
                 withoutPreview
             />
diff --git a/app/views/EditProject/UpdateProjectForm/CompletenessProjectSpecifics/index.tsx b/app/views/EditProject/UpdateProjectForm/CompletenessProjectSpecifics/index.tsx
index c1eed46f..451c7d03 100644
--- a/app/views/EditProject/UpdateProjectForm/CompletenessProjectSpecifics/index.tsx
+++ b/app/views/EditProject/UpdateProjectForm/CompletenessProjectSpecifics/index.tsx
@@ -60,7 +60,7 @@ function CompletenessProjectSpecifics(props: Props) {
                 value={value?.aoiGeometry}
                 error={error?.aoiGeometry}
                 inputType={ProjectAssetInputTypeEnum.AoiGeometry}
-                hint="Upload your project area as GeoJSON File (max. 1MB). Make sure that you provide a single polygon geometry."
+                hint="Upload your project area as GeoJSON File (max. 1MB)"
                 disabled={disabled}
                 withoutPreview
             />
diff --git a/app/views/EditProject/UpdateProjectForm/FindProjectSpecifics/index.tsx b/app/views/EditProject/UpdateProjectForm/FindProjectSpecifics/index.tsx
index 7711ae40..a9ed64c0 100644
--- a/app/views/EditProject/UpdateProjectForm/FindProjectSpecifics/index.tsx
+++ b/app/views/EditProject/UpdateProjectForm/FindProjectSpecifics/index.tsx
@@ -52,9 +52,7 @@ function FindProjectSpecifics(props: Props) {
                 value={value?.aoiGeometry}
                 error={error?.aoiGeometry}
                 inputType={ProjectAssetInputTypeEnum.AoiGeometry}
-                // FIXME: add appropriate hint and validation
-                // hint="Upload your project area as GeoJSON File (max. 1MB).
-                // Make sure that you provide a single polygon geometry."
+                hint="Upload your project area as GeoJSON File (max. 1MB)."
                 disabled={disabled}
                 withoutPreview
             />
diff --git a/app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/StreetMapilaryImageFiltersInput/index.tsx b/app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/StreetMapillaryImageFiltersInput/index.tsx
similarity index 87%
rename from app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/StreetMapilaryImageFiltersInput/index.tsx
rename to app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/StreetMapillaryImageFiltersInput/index.tsx
index 5dcbc4cd..2e69d7cd 100644
--- a/app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/StreetMapilaryImageFiltersInput/index.tsx
+++ b/app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/StreetMapillaryImageFiltersInput/index.tsx
@@ -11,18 +11,18 @@ import ListLayout from '#components/ListLayout';
 import NumberInput from '#components/NumberInput';
 import TextInput from '#components/TextInput';
 
-import { PartialStreetMapilaryImageFiltersInputFields } from './schema';
+import { PartialStreetMapillaryImageFiltersInputFields } from './schema';
 
 interface Props {
-    value: PartialStreetMapilaryImageFiltersInputFields | undefined | null;
-    error: LeafError | ObjectError<PartialStreetMapilaryImageFiltersInputFields>;
+    value: PartialStreetMapillaryImageFiltersInputFields | undefined | null;
+    error: LeafError | ObjectError<PartialStreetMapillaryImageFiltersInputFields>;
     setFieldValue: (
-        ...entries: EntriesAsList<PartialStreetMapilaryImageFiltersInputFields>
+        ...entries: EntriesAsList<PartialStreetMapillaryImageFiltersInputFields>
     ) => void;
     disabled?: boolean;
 }
 
-function StreetMapilaryImageFiltersInput(props: Props) {
+function StreetMapillaryImageFiltersInput(props: Props) {
     const {
         value,
         error: formError,
@@ -99,4 +99,4 @@ function StreetMapilaryImageFiltersInput(props: Props) {
     );
 }
 
-export default StreetMapilaryImageFiltersInput;
+export default StreetMapillaryImageFiltersInput;
diff --git a/app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/StreetMapilaryImageFiltersInput/schema.ts b/app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/StreetMapillaryImageFiltersInput/schema.ts
similarity index 50%
rename from app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/StreetMapilaryImageFiltersInput/schema.ts
rename to app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/StreetMapillaryImageFiltersInput/schema.ts
index d76e59e3..4f68b54c 100644
--- a/app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/StreetMapilaryImageFiltersInput/schema.ts
+++ b/app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/StreetMapillaryImageFiltersInput/schema.ts
@@ -6,22 +6,22 @@ import {
 import { StreetMapillaryImageFiltersInput } from '#generated/types/graphql';
 import { DeepNonNullable } from '#utils/types';
 
-export type PartialStreetMapilaryImageFiltersInputFields = PartialForm<
+export type PartialStreetMapillaryImageFiltersInputFields = PartialForm<
     DeepNonNullable<StreetMapillaryImageFiltersInput>
 >;
 
-type StreetMapilaryImageFiltersFormSchema = ObjectSchema<
-    PartialStreetMapilaryImageFiltersInputFields
+type StreetMapillaryImageFiltersFormSchema = ObjectSchema<
+    PartialStreetMapillaryImageFiltersInputFields
 >;
 
 // eslint-disable-next-line max-len
-export const defaultStreetMapilaryImageFiltersInputFormValue: PartialStreetMapilaryImageFiltersInputFields = {
+export const defaultStreetMapillaryImageFiltersInputFormValue: PartialStreetMapillaryImageFiltersInputFields = {
     randomizeOrder: false,
     isPano: false,
 };
 
-const streetMapilaryimageFiltersFormSchema: StreetMapilaryImageFiltersFormSchema = {
-    fields: (): ReturnType<StreetMapilaryImageFiltersFormSchema['fields']> => ({
+const streetMapillaryimageFiltersFormSchema: StreetMapillaryImageFiltersFormSchema = {
+    fields: (): ReturnType<StreetMapillaryImageFiltersFormSchema['fields']> => ({
         isPano: {},
         creatorId: {},
         organizationId: {},
@@ -32,4 +32,4 @@ const streetMapilaryimageFiltersFormSchema: StreetMapilaryImageFiltersFormSchema
     }),
 };
 
-export default streetMapilaryimageFiltersFormSchema;
+export default streetMapillaryimageFiltersFormSchema;
diff --git a/app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/index.tsx b/app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/index.tsx
index 0c3462ad..c65cbdc0 100644
--- a/app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/index.tsx
+++ b/app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/index.tsx
@@ -21,11 +21,11 @@ import NonFieldError from '#components/NonFieldError';
 import { ProjectAssetInputTypeEnum } from '#generated/types/graphql';
 
 import {
-    defaultStreetMapilaryImageFiltersInputFormValue,
-    PartialStreetMapilaryImageFiltersInputFields,
-} from './StreetMapilaryImageFiltersInput/schema';
+    defaultStreetMapillaryImageFiltersInputFormValue,
+    PartialStreetMapillaryImageFiltersInputFields,
+} from './StreetMapillaryImageFiltersInput/schema';
 import { type PartialStreetSpecificFields } from './schema';
-import StreetMapilaryImageFiltersInput from './StreetMapilaryImageFiltersInput';
+import StreetMapillaryImageFiltersInput from './StreetMapillaryImageFiltersInput';
 
 interface Props {
     projectId: string;
@@ -68,10 +68,10 @@ function StreetProjectSpecifics(props: Props) {
         );
     }, [setFieldValue]);
 
-    const setStreetMapilaryImageFiltersInputFieldValue = useFormObject<'mapillaryImageFilters', PartialStreetMapilaryImageFiltersInputFields>(
+    const setStreetMapillaryImageFiltersInputFieldValue = useFormObject<'mapillaryImageFilters', PartialStreetMapillaryImageFiltersInputFields>(
         'mapillaryImageFilters' as const,
         setFieldValue,
-        defaultStreetMapilaryImageFiltersInputFormValue,
+        defaultStreetMapillaryImageFiltersInputFormValue,
     );
 
     return (
@@ -124,12 +124,13 @@ function StreetProjectSpecifics(props: Props) {
                     error={error?.aoiGeometry}
                     inputType={ProjectAssetInputTypeEnum.AoiGeometry}
                     disabled={disabled}
+                    hint="Upload your project area as GeoJSON File (max. 1MB)"
                     withoutPreview
                 />
             </Container>
-            <StreetMapilaryImageFiltersInput
+            <StreetMapillaryImageFiltersInput
                 value={value?.mapillaryImageFilters}
-                setFieldValue={setStreetMapilaryImageFiltersInputFieldValue}
+                setFieldValue={setStreetMapillaryImageFiltersInputFieldValue}
                 disabled={disabled}
                 error={error?.mapillaryImageFilters}
             />
diff --git a/app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/schema.ts b/app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/schema.ts
index 75e38378..d7ad1b0e 100644
--- a/app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/schema.ts
+++ b/app/views/EditProject/UpdateProjectForm/StreetProjectSpecifics/schema.ts
@@ -11,7 +11,7 @@ import {
     type PartialProjectUpdateInput,
     type UpdateProjectContext,
 } from '../schema';
-import streetMapilaryimageFiltersFormSchema, { defaultStreetMapilaryImageFiltersInputFormValue } from './StreetMapilaryImageFiltersInput/schema';
+import streetMapillaryimageFiltersFormSchema, { defaultStreetMapillaryImageFiltersInputFormValue } from './StreetMapillaryImageFiltersInput/schema';
 
 export type PartialStreetSpecificFields = PartialForm<
     DeepNonNullable<StreetProjectPropertyInput>,
@@ -24,7 +24,7 @@ type StreetSpecificFormSchema = ObjectSchema<
 >;
 
 export const defaultStreetSpecificFormValue: PartialStreetSpecificFields = {
-    mapillaryImageFilters: defaultStreetMapilaryImageFiltersInputFormValue,
+    mapillaryImageFilters: defaultStreetMapillaryImageFiltersInputFormValue,
 };
 
 const streetSpecificFormSchema: StreetSpecificFormSchema = {
@@ -34,7 +34,7 @@ const streetSpecificFormSchema: StreetSpecificFormSchema = {
             member: () => customOptionSchema,
         },
         aoiGeometry: {},
-        mapillaryImageFilters: streetMapilaryimageFiltersFormSchema,
+        mapillaryImageFilters: streetMapillaryimageFiltersFormSchema,
     }),
 };
 
diff --git a/app/views/EditProject/UpdateProjectForm/ValidateProjectSpecifics/ObjectSourceInput/index.tsx b/app/views/EditProject/UpdateProjectForm/ValidateProjectSpecifics/ObjectSourceInput/index.tsx
index e533dbe8..7cb89dba 100644
--- a/app/views/EditProject/UpdateProjectForm/ValidateProjectSpecifics/ObjectSourceInput/index.tsx
+++ b/app/views/EditProject/UpdateProjectForm/ValidateProjectSpecifics/ObjectSourceInput/index.tsx
@@ -79,8 +79,7 @@ function ObjectSourceInput(props: Props) {
                     value={value.aoiGeometry}
                     error={error?.aoiGeometry}
                     inputType={ProjectAssetInputTypeEnum.AoiGeometry}
-                    // TODO(frozenhelium): add proper hint
-                    // hint="Upload your project area as GeoJSON File (max. 1MB)
+                    hint="Upload your project area as GeoJSON File (max. 1MB)"
                     disabled={disabled}
                     withoutPreview
                 />
@@ -92,6 +91,7 @@ function ObjectSourceInput(props: Props) {
                     value={value.objectGeojsonUrl}
                     error={error?.objectGeojsonUrl}
                     onChange={setFieldValue}
+                    hint="Provide a direct link to a GeoJSON file containing your building footprint geometries."
                 />
             )}
             {value?.sourceType === TaskingManager && (
@@ -101,6 +101,7 @@ function ObjectSourceInput(props: Props) {
                     value={value.taskingManagerProjectId}
                     error={error?.taskingManagerProjectId}
                     onChange={setFieldValue}
+                    hint="Provide the ID of a HOT Tasking Manager Project (only numbers, e.g. 6526)."
                 />
             )}
             {(value?.sourceType === AoiGeojsonFile || value?.sourceType === TaskingManager) && (
@@ -110,6 +111,7 @@ function ObjectSourceInput(props: Props) {
                     value={value.ohsomeFilter}
                     error={error?.ohsomeFilter}
                     onChange={setFieldValue}
+                    hint="Please specify which objects should be included in your project."
                 />
             )}
         </Container>
diff --git a/app/views/EditProject/UpdateProjectForm/index.tsx b/app/views/EditProject/UpdateProjectForm/index.tsx
index 42d0ad49..2886ea1c 100644
--- a/app/views/EditProject/UpdateProjectForm/index.tsx
+++ b/app/views/EditProject/UpdateProjectForm/index.tsx
@@ -17,11 +17,11 @@ import {
 } from '@togglecorp/toggle-form';
 import { ulid } from 'ulid';
 
+import Alert from '#components/Alert/index.tsx';
 import Button from '#components/Button';
 import Container from '#components/Container/index.tsx';
 import ProjectStatusTimeline from '#components/domain/ProjectStatusTimeline';
 import ProjectTypeOutput from '#components/domain/ProjectTypeOutput/index.tsx';
-import InputError from '#components/InputError/index.tsx';
 import NonFieldError from '#components/NonFieldError';
 import PageLayout from '#components/PageLayout';
 import {
@@ -105,7 +105,7 @@ function UpdateProjectForm(props: Props) {
     });
 
     useEffect(() => {
-        if (projectData.project.status !== ProjectStatusEnum.MarkedAsReady) {
+        if (projectData.project.status !== ProjectStatusEnum.ReadyToProcess) {
             return undefined;
         }
 
@@ -363,12 +363,12 @@ function UpdateProjectForm(props: Props) {
     const pending = updateProjectPending;
     const baseInputsEditable = isDefined(projectData) && (
         projectData.project.status === ProjectStatusEnum.Draft
-        || projectData.project.status === ProjectStatusEnum.Failed
-        || projectData.project.status === ProjectStatusEnum.Ready
+        || projectData.project.status === ProjectStatusEnum.ProcessingFailed
+        || projectData.project.status === ProjectStatusEnum.Processed
     );
     const projectTypeSpecificInputsEditable = isDefined(projectData) && (
         projectData.project.status === ProjectStatusEnum.Draft
-        || projectData.project.status === ProjectStatusEnum.Failed
+        || projectData.project.status === ProjectStatusEnum.ProcessingFailed
     );
 
     const baseInputsDisabled = pending || !baseInputsEditable;
@@ -417,12 +417,27 @@ function UpdateProjectForm(props: Props) {
             )}
             confirmNavigationChange={!pristine}
         >
-            {projectData?.project.status === ProjectStatusEnum.Failed && (
-                <InputError>
-                    There was an error while processing the project.
-                    Please make the necessary changes before proceeding!
-                </InputError>
+            {projectData?.project.status === ProjectStatusEnum.ProcessingFailed && (
+                <Alert
+                    name="processing-error"
+                    title="Processing failed!"
+                    description={(
+                        <>
+                            <p>
+                                There was an error while processing the project.
+                                Please make the necessary changes before proceeding!
+                            </p>
+                            {!!projectData.project.statusMessage && (
+                                <p>{projectData.project.statusMessage}</p>
+                            )}
+                        </>
+                    )}
+                    fullWidth
+                    type="danger"
+                    withoutShadow
+                />
             )}
+            <NonFieldError error={error} />
             <ProjectGeneralInputs
                 value={value}
                 setFieldValue={setFieldValue}
diff --git a/app/views/EditProject/index.tsx b/app/views/EditProject/index.tsx
index 78c71d88..9da24fd7 100644
--- a/app/views/EditProject/index.tsx
+++ b/app/views/EditProject/index.tsx
@@ -51,17 +51,17 @@ function EditProject() {
     } = projectData;
 
     if (status === ProjectStatusEnum.Draft
-        || status === ProjectStatusEnum.MarkedAsReady
-        || status === ProjectStatusEnum.Failed
+        || status === ProjectStatusEnum.ReadyToProcess
+        || status === ProjectStatusEnum.ProcessingFailed
     ) {
         return (
             <UpdateProjectForm projectData={projectData} />
         );
     }
 
-    if (status === ProjectStatusEnum.Ready
+    if (status === ProjectStatusEnum.Processed
         || status === ProjectStatusEnum.Published
-        || status === ProjectStatusEnum.Archived
+        || status === ProjectStatusEnum.Withdrawn
         || status === ProjectStatusEnum.Paused
         || status === ProjectStatusEnum.Discarded
     ) {
diff --git a/app/views/EditTutorial/InformationPageInput/BlockInput/index.tsx b/app/views/EditTutorial/InformationPageInput/BlockInput/index.tsx
index 41f312fb..05820603 100644
--- a/app/views/EditTutorial/InformationPageInput/BlockInput/index.tsx
+++ b/app/views/EditTutorial/InformationPageInput/BlockInput/index.tsx
@@ -87,6 +87,7 @@ function BlockInput(props: Props) {
                     onChange={setFieldValue}
                     error={error?.image}
                     inputType={TutorialAssetInputTypeEnum.InformationBlockImage}
+                    hint="Make sure you have the rights to use the image. It should end with .jpg or .png."
                 />
             )}
         </InlineLayout>
diff --git a/app/views/EditTutorial/ScenarioPageInput/TaskInput/StreetPropertyInput/index.tsx b/app/views/EditTutorial/ScenarioPageInput/TaskInput/StreetPropertyInput/index.tsx
new file mode 100644
index 00000000..f1626ed0
--- /dev/null
+++ b/app/views/EditTutorial/ScenarioPageInput/TaskInput/StreetPropertyInput/index.tsx
@@ -0,0 +1,59 @@
+import { _cs } from '@togglecorp/fujs';
+import {
+    EntriesAsList,
+    getErrorObject,
+    LeafError,
+    ObjectError,
+} from '@togglecorp/toggle-form';
+
+import TextArea from '#components/TextArea';
+import TextInput from '#components/TextInput';
+
+import { PartialStreetPropertyInputFields } from './schema';
+
+import styles from './styles.module.css';
+
+interface Props {
+    className?: string;
+    value: PartialStreetPropertyInputFields | undefined;
+    setFieldValue: (...entries: EntriesAsList<PartialStreetPropertyInputFields>) => void;
+    error: LeafError | ObjectError<PartialStreetPropertyInputFields>;
+    disabled?: boolean;
+}
+
+function StreetPropertyInput(props: Props) {
+    const {
+        className,
+        value,
+        setFieldValue,
+        error: formError,
+        disabled,
+    } = props;
+
+    const error = getErrorObject(formError);
+
+    return (
+        <div className={_cs(className, styles.streetPropertyInput)}>
+            <TextInput
+                label="Mapillary Image ID"
+                name="mapillaryImageId"
+                value={value?.mapillaryImageId}
+                error={error?.mapillaryImageId}
+                onChange={setFieldValue}
+                disabled={disabled}
+            />
+            <TextArea
+                className={styles.geometry}
+                label="Geometry"
+                name="geometry"
+                value={value?.geometry}
+                error={error?.geometry}
+                onChange={setFieldValue}
+                disabled={disabled}
+                rows={22}
+            />
+        </div>
+    );
+}
+
+export default StreetPropertyInput;
diff --git a/app/views/EditTutorial/ScenarioPageInput/TaskInput/StreetPropertyInput/schema.ts b/app/views/EditTutorial/ScenarioPageInput/TaskInput/StreetPropertyInput/schema.ts
new file mode 100644
index 00000000..4eda1b0c
--- /dev/null
+++ b/app/views/EditTutorial/ScenarioPageInput/TaskInput/StreetPropertyInput/schema.ts
@@ -0,0 +1,21 @@
+import {
+    ObjectSchema,
+    PartialForm,
+} from '@togglecorp/toggle-form';
+
+import { StreetTutorialTaskPropertyInput } from '#generated/types/graphql';
+import { DeepNonNullable } from '#utils/types';
+
+export type StreetPropertyInputFields = DeepNonNullable<StreetTutorialTaskPropertyInput>;
+export type PartialStreetPropertyInputFields = PartialForm<StreetPropertyInputFields>;
+
+type TaskSchema = ObjectSchema<PartialStreetPropertyInputFields>;
+
+const streetPropertyInputSchema: TaskSchema = {
+    fields: (): ReturnType<TaskSchema['fields']> => ({
+        mapillaryImageId: {},
+        geometry: {},
+    }),
+};
+
+export default streetPropertyInputSchema;
diff --git a/app/views/EditTutorial/ScenarioPageInput/TaskInput/StreetPropertyInput/styles.module.css b/app/views/EditTutorial/ScenarioPageInput/TaskInput/StreetPropertyInput/styles.module.css
new file mode 100644
index 00000000..f1fac5a8
--- /dev/null
+++ b/app/views/EditTutorial/ScenarioPageInput/TaskInput/StreetPropertyInput/styles.module.css
@@ -0,0 +1,8 @@
+.validate-property-input {
+    .geometry {
+        textarea {
+            font-family: var(--font-family-monospace);
+            font-size: var(--font-size-2xs);
+        }
+    }
+}
diff --git a/app/views/EditTutorial/ScenarioPageInput/TaskInput/index.tsx b/app/views/EditTutorial/ScenarioPageInput/TaskInput/index.tsx
index e45b13a0..6b538e70 100644
--- a/app/views/EditTutorial/ScenarioPageInput/TaskInput/index.tsx
+++ b/app/views/EditTutorial/ScenarioPageInput/TaskInput/index.tsx
@@ -15,6 +15,10 @@ import {
     TutorialProjectDetailQuery,
 } from '#generated/types/graphql';
 
+import { PartialComparePropertyInputFields } from './ComparePropertyInput/schema';
+import { PartialCompletenessPropertyInputFields } from './CompletenessPropertyInput/schema';
+import { PartialFindPropertyInputFields } from './FindPropertyInput/schema';
+import { PartialStreetPropertyInputFields } from './StreetPropertyInput/schema';
 import { PartialValidateImagePropertyInputFields } from './ValidateImagePropertyInput/schema';
 import { PartialValidatePropertyInputFields } from './ValidatePropertyInput/schema';
 import ComparePropertyInput from './ComparePropertyInput';
@@ -24,6 +28,7 @@ import {
     PartialProjectTypeSpecifics,
     PartialTaskInputFields,
 } from './schema';
+import StreetPropertyInput from './StreetPropertyInput';
 import ValidateImagePropertyInput from './ValidateImagePropertyInput';
 import ValidatePropertyInput from './ValidatePropertyInput';
 
@@ -67,19 +72,19 @@ function TaskInput(props: Props) {
         {},
     );
 
-    const setFindProjectSpecificsFieldValue = useFormObject(
+    const setFindProjectSpecificsFieldValue = useFormObject<'find', PartialFindPropertyInputFields>(
         'find' as const,
         setProjectSpecificFieldValue,
         {},
     );
 
-    const setCompareProjectSpecificsFieldValue = useFormObject(
+    const setCompareProjectSpecificsFieldValue = useFormObject<'compare', PartialComparePropertyInputFields>(
         'compare' as const,
         setProjectSpecificFieldValue,
         {},
     );
 
-    const setCompletenessProjectSpecificsFieldValue = useFormObject(
+    const setCompletenessProjectSpecificsFieldValue = useFormObject<'completeness', PartialCompletenessPropertyInputFields>(
         'completeness' as const,
         setProjectSpecificFieldValue,
         {},
@@ -97,6 +102,12 @@ function TaskInput(props: Props) {
         {},
     );
 
+    const setStreetProjectSpecificsFieldValue = useFormObject<'street', PartialStreetPropertyInputFields>(
+        'street' as const,
+        setProjectSpecificFieldValue,
+        {},
+    );
+
     return (
         <div className={_cs(styles.taskInput, className)}>
             <div className={styles.content}>
@@ -169,6 +180,14 @@ function TaskInput(props: Props) {
                         disabled
                     />
                 )}
+                {projectData?.projectType === ProjectTypeEnum.Street && (
+                    <StreetPropertyInput
+                        value={value.projectTypeSpecifics?.street}
+                        setFieldValue={setStreetProjectSpecificsFieldValue}
+                        error={getErrorObject(error?.projectTypeSpecifics)?.street}
+                        disabled
+                    />
+                )}
             </div>
         </div>
     );
diff --git a/app/views/EditTutorial/ScenarioPageInput/TaskInput/schema.ts b/app/views/EditTutorial/ScenarioPageInput/TaskInput/schema.ts
index f8e9c0ce..da7dc5cb 100644
--- a/app/views/EditTutorial/ScenarioPageInput/TaskInput/schema.ts
+++ b/app/views/EditTutorial/ScenarioPageInput/TaskInput/schema.ts
@@ -1,3 +1,4 @@
+import { isNotDefined } from '@togglecorp/fujs';
 import {
     ObjectSchema,
     PartialForm,
@@ -18,6 +19,7 @@ import {
 import comparePropertyInputSchema from './ComparePropertyInput/schema';
 import completenessPropertyInputSchema from './CompletenessPropertyInput/schema';
 import findPropertyInputSchema from './FindPropertyInput/schema';
+import streetPropertyInputSchema from './StreetPropertyInput/schema';
 import validateImagePropertyInputSchema from './ValidateImagePropertyInput/schema';
 import validatePropertyInputSchema from './ValidatePropertyInput/schema';
 
@@ -43,62 +45,94 @@ const taskSchema: TaskSchema = {
         reference: {},
         projectTypeSpecifics: {
             fields: (): ReturnType<ProjectTypeSpecificsSchema['fields']> => {
-                if (context?.projectType === ProjectTypeEnum.Find) {
+                const projectType = context?.projectType;
+
+                if (isNotDefined(projectType)) {
+                    return {
+                        find: { forceValue: undefinedValue },
+                        compare: { forceValue: undefinedValue },
+                        completeness: { forceValue: undefinedValue },
+                        validate: { forceValue: undefinedValue },
+                        validateImage: { forceValue: undefinedValue },
+                        street: { forceValue: undefinedValue },
+                    };
+                }
+
+                if (projectType === ProjectTypeEnum.Find) {
                     return {
                         find: findPropertyInputSchema,
                         completeness: { forceValue: undefinedValue },
                         compare: { forceValue: undefinedValue },
                         validate: { forceValue: undefinedValue },
                         validateImage: { forceValue: undefinedValue },
+                        street: { forceValue: undefinedValue },
                     };
                 }
 
-                if (context?.projectType === ProjectTypeEnum.Compare) {
+                if (projectType === ProjectTypeEnum.Compare) {
                     return {
                         compare: comparePropertyInputSchema,
                         find: { forceValue: undefinedValue },
                         completeness: { forceValue: undefinedValue },
                         validate: { forceValue: undefinedValue },
                         validateImage: { forceValue: undefinedValue },
+                        street: { forceValue: undefinedValue },
                     };
                 }
 
-                if (context?.projectType === ProjectTypeEnum.Completeness) {
+                if (projectType === ProjectTypeEnum.Completeness) {
                     return {
                         completeness: completenessPropertyInputSchema,
                         find: { forceValue: undefinedValue },
                         compare: { forceValue: undefinedValue },
                         validate: { forceValue: undefinedValue },
                         validateImage: { forceValue: undefinedValue },
+                        street: { forceValue: undefinedValue },
                     };
                 }
 
-                if (context?.projectType === ProjectTypeEnum.Validate) {
+                if (projectType === ProjectTypeEnum.Validate) {
                     return {
                         validate: validatePropertyInputSchema,
                         find: { forceValue: undefinedValue },
                         compare: { forceValue: undefinedValue },
                         completeness: { forceValue: undefinedValue },
                         validateImage: { forceValue: undefinedValue },
+                        street: { forceValue: undefinedValue },
                     };
                 }
 
-                if (context?.projectType === ProjectTypeEnum.ValidateImage) {
+                if (projectType === ProjectTypeEnum.ValidateImage) {
                     return {
                         validateImage: validateImagePropertyInputSchema,
                         find: { forceValue: undefinedValue },
                         compare: { forceValue: undefinedValue },
                         completeness: { forceValue: undefinedValue },
                         validate: { forceValue: undefinedValue },
+                        street: { forceValue: undefinedValue },
                     };
                 }
 
+                if (projectType === ProjectTypeEnum.Street) {
+                    return {
+                        street: streetPropertyInputSchema,
+                        find: { forceValue: undefinedValue },
+                        compare: { forceValue: undefinedValue },
+                        completeness: { forceValue: undefinedValue },
+                        validate: { forceValue: undefinedValue },
+                        validateImage: { forceValue: undefinedValue },
+                    };
+                }
+
+                projectType satisfies never;
+
                 return {
                     find: { forceValue: undefinedValue },
                     compare: { forceValue: undefinedValue },
                     completeness: { forceValue: undefinedValue },
                     validate: { forceValue: undefinedValue },
                     validateImage: { forceValue: undefinedValue },
+                    street: { forceValue: undefinedValue },
                 };
             },
         },
diff --git a/app/views/EditTutorial/ScenarioPageInput/index.tsx b/app/views/EditTutorial/ScenarioPageInput/index.tsx
index fad61a20..f8b556d1 100644
--- a/app/views/EditTutorial/ScenarioPageInput/index.tsx
+++ b/app/views/EditTutorial/ScenarioPageInput/index.tsx
@@ -21,6 +21,7 @@ import CompareScenarioPreview from '#components/domain/CompareScenarioPreview';
 import CompletenessScenarioPreview from '#components/domain/CompletenessScenarioPreview';
 import FindScenarioPreview from '#components/domain/FindScenarioPreview';
 import IconSelectInput from '#components/domain/IconSelectInput';
+import StreetScenarioPreview from '#components/domain/StreetScenarioPreview';
 import ValidateImageScenarioPreview from '#components/domain/ValidateImageScenarioPreview';
 import ValidateScenarioPreview from '#components/domain/ValidateScenarioPreview';
 import ListLayout from '#components/ListLayout';
@@ -285,6 +286,14 @@ function ScenarioPageInput(props: Props) {
                     customOptions={removeNull(projectData.projectTypeSpecifics.customOptions)}
                 />
             )}
+            {/* eslint-disable-next-line no-underscore-dangle */}
+            {projectData?.projectTypeSpecifics?.__typename === 'StreetProjectPropertyType' && (
+                <StreetScenarioPreview
+                    scenario={value}
+                    projectInstruction={projectData.projectInstruction}
+                    customOptions={removeNull(projectData.projectTypeSpecifics.customOptions)}
+                />
+            )}
         </Container>
     );
 }
diff --git a/app/views/EditTutorial/ScenarioPageInput/schema.ts b/app/views/EditTutorial/ScenarioPageInput/schema.ts
index bd29b916..4ceeba2f 100644
--- a/app/views/EditTutorial/ScenarioPageInput/schema.ts
+++ b/app/views/EditTutorial/ScenarioPageInput/schema.ts
@@ -1,13 +1,9 @@
 import {
-    nullValue,
     ObjectSchema,
     PartialForm,
 } from '@togglecorp/toggle-form';
 
-import {
-    ProjectTypeEnum,
-    TutorialScenarioPageCreateInput,
-} from '#generated/types/graphql';
+import { TutorialScenarioPageCreateInput } from '#generated/types/graphql';
 import { DeepNonNullable } from '#utils/types';
 
 import {
@@ -34,46 +30,43 @@ export type ScenarioPageSchema = ObjectSchema<
 type ScenarioPageFields = ReturnType<ScenarioPageSchema['fields']>;
 
 const scenarioPageSchema: ScenarioPageSchema = {
-    fields: (_, __, context): ScenarioPageFields => {
-        const baseFields: ScenarioPageFields = {
-            clientId: {},
-            scenarioPageNumber: {
-                required: true,
-            },
-            instructionsDescription: {},
-            instructionsIcon: {},
-            instructionsTitle: {},
-            tasks: {
-                keySelector: (value) => value.clientId,
-                member: () => taskSchema,
-            },
-        };
-
-        if (
-            context?.projectType === ProjectTypeEnum.ValidateImage
-                || context?.projectType === ProjectTypeEnum.Validate
-        ) {
-            return {
-                ...baseFields,
-                hintDescription: { forceValue: nullValue },
-                hintIcon: { forceValue: nullValue },
-                hintTitle: { forceValue: nullValue },
-                successDescription: { forceValue: nullValue },
-                successIcon: { forceValue: nullValue },
-                successTitle: { forceValue: nullValue },
-            } satisfies ScenarioPageFields;
-        }
-
-        return {
-            ...baseFields,
-            hintDescription: {},
-            hintIcon: {},
-            hintTitle: {},
-            successDescription: {},
-            successIcon: {},
-            successTitle: {},
-        } satisfies ScenarioPageFields;
-    },
+    fields: (): ScenarioPageFields => ({
+        clientId: {},
+        scenarioPageNumber: {
+            required: true,
+        },
+        instructionsDescription: {
+            required: true,
+        },
+        instructionsIcon: {
+            required: true,
+        },
+        instructionsTitle: {
+            required: true,
+        },
+        hintDescription: {
+            required: true,
+        },
+        hintIcon: {
+            required: true,
+        },
+        hintTitle: {
+            required: true,
+        },
+        successDescription: {
+            required: true,
+        },
+        successIcon: {
+            required: true,
+        },
+        successTitle: {
+            required: true,
+        },
+        tasks: {
+            keySelector: (value) => value.clientId,
+            member: () => taskSchema,
+        },
+    }),
 };
 
 export default scenarioPageSchema;
diff --git a/app/views/EditTutorial/TutorialActions/index.tsx b/app/views/EditTutorial/TutorialActions/index.tsx
index 5b81650d..3bbf20b9 100644
--- a/app/views/EditTutorial/TutorialActions/index.tsx
+++ b/app/views/EditTutorial/TutorialActions/index.tsx
@@ -117,7 +117,7 @@ function TutorialActions(props: Props) {
         <>
             {(status === TutorialStatusEnum.Draft || status === TutorialStatusEnum.Archived) && (
                 <Button
-                    name={TutorialStatusEnum.Published}
+                    name={TutorialStatusEnum.ReadyToPublish}
                     start={<TutorialStatusIcon value={TutorialStatusEnum.Published} />}
                     onClick={setNewStatus}
                     disabled={actionsDisabled}
@@ -136,7 +136,7 @@ function TutorialActions(props: Props) {
                     colorVariant="danger"
                     styleVariant={buttonStyleVariant}
                 >
-                    Archive
+                    Withdraw
                 </Button>
             )}
             {status === TutorialStatusEnum.Draft && (
diff --git a/app/views/EditTutorial/index.tsx b/app/views/EditTutorial/index.tsx
index 618e9fb3..24495725 100644
--- a/app/views/EditTutorial/index.tsx
+++ b/app/views/EditTutorial/index.tsx
@@ -38,7 +38,6 @@ import GeoJsonFileInput from '#components/domain/GeoJsonFileInput';
 import ProjectSpecificDetails from '#components/domain/ProjectSpecificDetails';
 import FileInput from '#components/FileInput';
 import InlineLayout from '#components/InlineLayout';
-import Modal from '#components/Modal';
 import NonFieldError from '#components/NonFieldError';
 import PageLayout from '#components/PageLayout';
 import TextInput from '#components/TextInput';
@@ -46,13 +45,11 @@ import TextOutput from '#components/TextOutput';
 import {
     AssetMimetypeEnum,
     ProjectTypeEnum,
-    TutorialStatusEnum,
     TutorialUpdateInput,
     useProjectOutputAssetsQuery,
     useTutorialDetailsQuery,
     useTutorialProjectDetailQuery,
     useUpdateTutorialMutation,
-    useUpdateTutorialStatusMutation,
     ValidateImageTutorialTaskPropertyInput,
 } from '#generated/types/graphql';
 import useAlert from '#hooks/useAlert';
@@ -69,6 +66,7 @@ import { PartialScenarioPageInputFields } from './ScenarioPageInput/schema';
 import { ComparePropertyInputFields } from './ScenarioPageInput/TaskInput/ComparePropertyInput/schema';
 import { CompletenessPropertyInputFields } from './ScenarioPageInput/TaskInput/CompletenessPropertyInput/schema';
 import { FindPropertyInputFields } from './ScenarioPageInput/TaskInput/FindPropertyInput/schema';
+import { StreetPropertyInputFields } from './ScenarioPageInput/TaskInput/StreetPropertyInput/schema';
 import { ValidatePropertyInputFields } from './ScenarioPageInput/TaskInput/ValidatePropertyInput/schema';
 import InformationPageInput from './InformationPageInput';
 import ScenarioPageInput from './ScenarioPageInput';
@@ -139,13 +137,10 @@ const CompletenessFeaturePropertyType = type.merge(
     },
 );
 
-/*
 const StreetFeaturePropertyType = type({
     '...': CommonFeaturePropertyType,
-    // This is not used anymore
-    // id: '"string" | "number"',
+    id: 'string',
 });
-*/
 
 const ValidateTutorialGeoJsonType = type({
     type: '"FeatureCollection"',
@@ -154,6 +149,7 @@ const ValidateTutorialGeoJsonType = type({
         properties: ValidateFeaturePropertyType,
     }).array(),
 });
+
 const FindTutorialGeoJsonType = type({
     type: '"FeatureCollection"',
     features: type({
@@ -210,6 +206,14 @@ const CompletenessTutorialGeoJsonType = type({
 
 const ValidateImageJsonType = CocoType;
 
+const StreetTutorialGeoJsonType = type({
+    type: '"FeatureCollection"',
+    features: type({
+        geometry: PolygonType.or(MultiPolygonType),
+        properties: StreetFeaturePropertyType,
+    }).array(),
+});
+
 function createMapping<T extends { clientId: string }>(items: T[]) {
     return listToMap(items, ({ clientId }) => clientId);
 }
@@ -264,18 +268,11 @@ function NewTutorial() {
 
     const alert = useAlert();
 
-    const [newStatus, setNewStatus] = useState<TutorialStatusEnum | undefined>();
-
     const [
         { fetching: updateTutorialPending },
         updateTutorial,
     ] = useUpdateTutorialMutation();
 
-    const [
-        { fetching: updateTutorialStatusPending },
-        updateTutorialStatus,
-    ] = useUpdateTutorialStatusMutation();
-
     const [{
         // fetching: tutorialDataPending,
         data: tutorialData,
@@ -374,6 +371,18 @@ function NewTutorial() {
                         };
                     }
 
+                    // eslint-disable-next-line no-underscore-dangle
+                    if (task.projectTypeSpecifics?.__typename === 'StreetTutorialTaskPropertyType') {
+                        return {
+                            ...task,
+                            projectTypeSpecifics: {
+                                street: task.projectTypeSpecifics,
+                            },
+                        };
+                    }
+
+                    task.projectTypeSpecifics satisfies undefined;
+
                     return { ...task };
                 }),
             })),
@@ -607,6 +616,7 @@ function NewTutorial() {
                         variant: 'success',
                     },
                 );
+                setPristine(false);
             } catch (apolloError) {
                 alertCombinedError(apolloError, alert);
             }
@@ -617,6 +627,7 @@ function NewTutorial() {
             updateTutorial,
             alert,
             setError,
+            setPristine,
         ],
     );
 
@@ -773,6 +784,36 @@ function NewTutorial() {
                     })),
                 }));
 
+                setFieldValue(scenarioPages, 'scenarios');
+            }
+        } else if (projectType === ProjectTypeEnum.Street) {
+            const result = StreetTutorialGeoJsonType(geoJson);
+            if (result instanceof type.errors) {
+                setError({
+                    scenarios: {
+                        [nonFieldError]: result.summary,
+                    },
+                });
+            } else {
+                const scenarioPages = result.features.map((feature, i) => ({
+                    clientId: ulid(),
+                    scenarioPageNumber: isDefined(feature.properties.screen)
+                        ? feature.properties.screen
+                        : i + 1,
+                    tasks: [
+                        {
+                            clientId: ulid(),
+                            reference: feature.properties.reference,
+                            projectTypeSpecifics: {
+                                street: {
+                                    mapillaryImageId: feature.properties.id,
+                                    geometry: JSON.stringify(feature.geometry, null, 4),
+                                } satisfies StreetPropertyInputFields,
+                            },
+                        },
+                    ],
+                }));
+
                 setFieldValue(scenarioPages, 'scenarios');
             }
         }
@@ -873,72 +914,7 @@ function NewTutorial() {
         }
     }, [alert, setFieldValue]);
 
-    const handleStatusUpdateCancel = useCallback(() => {
-        setNewStatus(undefined);
-    }, []);
-
-    const handleStatusUpdateConfirm = useCallback(async () => {
-        if (isNotDefined(tutorialData)) {
-            return;
-        }
-
-        try {
-            const result = await updateTutorialStatus({
-                data: {
-                    clientId: tutorialData.tutorial.clientId,
-                    status: newStatus,
-                },
-                id: tutorialData.tutorial.id,
-            });
-
-            if (checkAndAlertGraphQLResultError(result, alert)) {
-                return;
-            }
-
-            if (isNotDefined(result.data)
-                // eslint-disable-next-line no-underscore-dangle
-                || result.data.updateTutorialStatus.__typename !== 'TutorialTypeMutationResponseType'
-            ) {
-                alert.show(
-                    'Failed to create the Tutorial!',
-                    {
-                        description: 'Unexpectected response from the server!',
-                        variant: 'danger',
-                    },
-                );
-
-                return;
-            }
-
-            const {
-                ok,
-                errors,
-                result: updateTutorialResult,
-            } = result.data.updateTutorialStatus;
-
-            if (!ok || !updateTutorialResult) {
-                alert.show(
-                    'Failed to update status of the Tutorial!',
-                    { variant: 'danger' },
-                );
-                setError(transformErrors(errors));
-                return;
-            }
-
-            alert.show(
-                'Tutorial status updated successfully!',
-                { variant: 'success' },
-            );
-
-            setPristine(true);
-        } catch (apolloError) {
-            alertCombinedError(apolloError, alert);
-        }
-
-        setNewStatus(undefined);
-    }, [tutorialData, updateTutorialStatus, newStatus, alert, setError, setPristine]);
-
-    const inputsDisabled = updateTutorialPending || updateTutorialStatusPending;
+    const inputsDisabled = updateTutorialPending;
     const actionsDisabled = inputsDisabled;
 
     if (isNotDefined(tutorialIdFromParams)) {
@@ -1152,42 +1128,6 @@ function NewTutorial() {
                     />
                 ))}
             </Container>
-            {isDefined(newStatus) && (
-                <Modal
-                    heading="Confirm status update!"
-                    size="sm"
-                    footerActions={(
-                        <>
-                            <Button
-                                name="cancel"
-                                onClick={handleStatusUpdateCancel}
-                                styleVariant="transparent"
-                                withoutPadding
-                            >
-                                Cancel
-                            </Button>
-                            <Button
-                                name="confirm"
-                                onClick={handleStatusUpdateConfirm}
-                                styleVariant="transparent"
-                                withoutPadding
-                            >
-                                Confirm
-                            </Button>
-                        </>
-                    )}
-                    onClose={handleStatusUpdateCancel}
-                >
-                    {`Are you sure you want to change the status to ${newStatus} ?`}
-                    {(newStatus === TutorialStatusEnum.Archived
-                        || newStatus === TutorialStatusEnum.Discarded
-                    ) && (
-                        <p>
-                            Please note that this action is irreversable!
-                        </p>
-                    )}
-                </Modal>
-            )}
         </PageLayout>
     );
 }
diff --git a/app/views/NewProject/ProjectGeneralInputs/index.tsx b/app/views/NewProject/ProjectGeneralInputs/index.tsx
index 2eb9579c..68b9cd0f 100644
--- a/app/views/NewProject/ProjectGeneralInputs/index.tsx
+++ b/app/views/NewProject/ProjectGeneralInputs/index.tsx
@@ -66,6 +66,7 @@ function ProjectGeneralInputs(props: Props) {
                 onChange={setFieldValue}
                 error={error?.topic}
                 disabled={disabled}
+                hint="Enter the topic of your project."
             />
             <ListLayout layout="grid">
                 <TextInput
@@ -75,6 +76,7 @@ function ProjectGeneralInputs(props: Props) {
                     onChange={setFieldValue}
                     error={error?.region}
                     disabled={disabled}
+                    hint="Enter name of your project Region"
                 />
                 <NumberInput
                     label="Project number"
@@ -83,6 +85,7 @@ function ProjectGeneralInputs(props: Props) {
                     onChange={setFieldValue}
                     error={error?.projectNumber}
                     disabled={disabled}
+                    hint="Is this project part of a bigger campaign with multiple projects?"
                 />
             </ListLayout>
             <MarkdownEditor
@@ -92,18 +95,20 @@ function ProjectGeneralInputs(props: Props) {
                 onChange={setFieldValue}
                 error={error?.description}
                 disabled={disabled}
+                hint="Enter the description for your project. (markdown syntax is supported)"
             />
             <ListLayout
                 layout="grid"
                 spacing="lg"
             >
                 <OrganizationSelectInput
-                    label="Requesting organization"
+                    label="Organization"
                     name="requestingOrganization"
                     value={value?.requestingOrganization}
                     onChange={setFieldValue}
                     error={error?.requestingOrganization}
                     disabled={disabled}
+                    hint="Which group, institution or community is requesting this project?"
                 />
                 <TextInput
                     label="Additional info URL"
@@ -112,6 +117,7 @@ function ProjectGeneralInputs(props: Props) {
                     onChange={setFieldValue}
                     error={error?.additionalInfoUrl}
                     disabled={disabled}
+                    hint="Provide an optional link to a resource with additional information on the project (only visible in the MapSwipe web app)"
                 />
                 <TextInput
                     label="Instruction"
@@ -120,6 +126,7 @@ function ProjectGeneralInputs(props: Props) {
                     onChange={setFieldValue}
                     error={error?.projectInstruction}
                     disabled={disabled}
+                    hint="Provide a brief instruction for the user (e.g. Is there a building?)"
                 />
                 <TextInput
                     label="Look for (legacy)"
@@ -127,13 +134,13 @@ function ProjectGeneralInputs(props: Props) {
                     value={value?.lookFor}
                     onChange={setFieldValue}
                     error={error?.lookFor}
-                    hint="This field is used only for legacy app"
+                    hint="What should the users look for (e.g. buildings, cars, trees)? Note: This field is used only for legacy app as a fallback for 'Instruction'"
                     disabled={disabled}
                 />
                 <TeamSelectInput
                     label="Select Team (Private)"
                     name="team"
-                    hint="Please note that if selected, this project will only be visible to the team members"
+                    hint="Select the team for which this project should be displayed. If selected, this project will only be visible to the team members"
                     value={value?.team}
                     onChange={setFieldValue}
                     error={error?.team}
diff --git a/app/views/NewProject/index.tsx b/app/views/NewProject/index.tsx
index b107c7c1..6b28d28f 100644
--- a/app/views/NewProject/index.tsx
+++ b/app/views/NewProject/index.tsx
@@ -247,7 +247,7 @@ function NewProject() {
 
                 setPristine(true);
                 // NOTE: pristine needs to be set first before navigation
-                setTimeout(() => {
+                window.setTimeout(() => {
                     if (isDefined(routes.editProject.path)) {
                         navigate(
                             generatePath(
@@ -256,7 +256,7 @@ function NewProject() {
                             ),
                         );
                     }
-                }, 0);
+                }, 200);
             } catch (apolloError) {
                 alertCombinedError(apolloError, alert);
             }
diff --git a/app/views/NewTutorial/index.tsx b/app/views/NewTutorial/index.tsx
index cd188e50..2a322f9d 100644
--- a/app/views/NewTutorial/index.tsx
+++ b/app/views/NewTutorial/index.tsx
@@ -183,7 +183,7 @@ function NewTutorial() {
                             ),
                         );
                     }
-                }, 0);
+                }, 200);
             } catch (combinedError) {
                 alertCombinedError(combinedError, alert);
             }
diff --git a/app/views/Projects/ProjectListItem/index.tsx b/app/views/Projects/ProjectListItem/index.tsx
index 611c61f7..1bd15fc4 100644
--- a/app/views/Projects/ProjectListItem/index.tsx
+++ b/app/views/Projects/ProjectListItem/index.tsx
@@ -1,5 +1,9 @@
-import { useState } from 'react';
 import {
+    useContext,
+    useState,
+} from 'react';
+import {
+    PiArrowsClockwise,
     PiCalendar,
     PiFlag,
     PiInfo,
@@ -24,9 +28,11 @@ import InlineLayout from '#components/InlineLayout';
 import ListLayout from '#components/ListLayout';
 import MarkdownPreview from '#components/MarkdownPreview';
 import OverflowMenu from '#components/OverflowMenu';
+import PopupButton from '#components/PopupButton';
 import ProgressBar from '#components/ProgressBar';
 import Tag from '#components/Tag';
 import TextOutput from '#components/TextOutput';
+import EnumsContext from '#contexts/EnumsContext';
 import {
     ProjectsListQuery,
     ProjectStatusEnum,
@@ -41,6 +47,7 @@ interface Props {
 function ProjectListItem(props: Props) {
     const { value } = props;
     const [showDetails, setShowDetails] = useState(false);
+    const { firebasePushStatusMapping } = useContext(EnumsContext);
 
     return (
         <ExpandableContainer
@@ -56,7 +63,7 @@ function ProjectListItem(props: Props) {
                 <ListLayout
                     layout="grid"
                     numPreferredGridColumns={4}
-                    minGridColumnSize="9rem"
+                    minGridColumnSize="10rem"
                 >
                     <ImagePreview
                         src={value.image?.file?.url}
@@ -119,7 +126,7 @@ function ProjectListItem(props: Props) {
                             )}
                             contentLayout="block"
                             headerActions={(value.status !== ProjectStatusEnum.Discarded
-                                && value.status !== ProjectStatusEnum.Archived) && (
+                                && value.status !== ProjectStatusEnum.Withdrawn) && (
                                 <OverflowMenu persistent>
                                     <ProjectActions
                                         clientId={value.clientId}
@@ -133,7 +140,6 @@ function ProjectListItem(props: Props) {
                             <ListLayout
                                 layout="grid"
                                 spacing="sm"
-                                numPreferredGridColumns={2}
                             >
                                 <GridLayoutItem columnSpan={2}>
                                     <TextOutput
@@ -228,13 +234,48 @@ function ProjectListItem(props: Props) {
                                             value={value.contributorsCount}
                                             valueType="number"
                                         />
+                                    </ListLayout>
+                                    {(value.status === ProjectStatusEnum.PublishingFailed
+                                        || value.status === ProjectStatusEnum.Published
+                                        || value.status === ProjectStatusEnum.Paused
+                                        || value.status === ProjectStatusEnum.Finished
+                                        || value.status === ProjectStatusEnum.Withdrawn
+                                    ) && (
                                         <GridLayoutItem columnSpan={2}>
                                             <TextOutput
                                                 label="Firebase ID"
                                                 value={value.firebaseId}
+                                                withWrap
+                                                description={(
+                                                    <PopupButton
+                                                        label={<PiInfo />}
+                                                        withoutPadding
+                                                        withoutDropdownIcon
+                                                        styleVariant="transparent"
+                                                    >
+                                                        <TextOutput
+                                                            icon={<PiArrowsClockwise />}
+                                                            label="Firebase last synced"
+                                                            value={value.firebaseLastPushed}
+                                                            withCenterAlign
+                                                            valueType="date"
+                                                        />
+                                                        <TextOutput
+                                                            label="Firebase push status"
+                                                            // eslint-disable-next-line max-len
+                                                            value={isDefined(value.firebasePushStatus)
+                                                                // eslint-disable-next-line max-len
+                                                                ? firebasePushStatusMapping?.[value.firebasePushStatus].label
+                                                                : undefined}
+                                                            withCenterAlign
+                                                            icon={<PiCalendar />}
+                                                        />
+                                                    </PopupButton>
+                                                )}
                                             />
                                         </GridLayoutItem>
-                                    </ListLayout>
+                                    )}
+
                                     {isDefined(value.description) && (
                                         <Description>
                                             <MarkdownPreview markdown={value.description} />
diff --git a/app/views/Projects/index.tsx b/app/views/Projects/index.tsx
index f79bf087..dd6a60d2 100644
--- a/app/views/Projects/index.tsx
+++ b/app/views/Projects/index.tsx
@@ -35,6 +35,7 @@ import useListManagement, {
 } from '#hooks/useListManagement';
 import {
     defaultPagePerItemOptions,
+    formatNumber,
     keySelector,
     labelSelector,
     removeEmptyList,
@@ -116,6 +117,8 @@ query ProjectsList($filters: ProjectFilter, $order: ProjectOrder, $pagination: O
             id
             clientId
             firebaseId
+            firebasePushStatus
+            firebaseLastPushed
             additionalInfoUrl
             createdBy {
                 displayName
@@ -332,7 +335,7 @@ function Projects() {
             )}
         >
             <Container
-                heading={`Showing ${totalItems} of ${projectsResponse?.projects.totalCount ?? 0} projects`}
+                heading={`Showing ${formatNumber(totalItems)} of ${formatNumber(totalCount)} projects`}
                 headingLevel={6}
                 headerActions={(
                     <>
diff --git a/app/views/RootLayout/index.tsx b/app/views/RootLayout/index.tsx
index 33ee5f9d..aada24e6 100644
--- a/app/views/RootLayout/index.tsx
+++ b/app/views/RootLayout/index.tsx
@@ -109,6 +109,10 @@ query AllEnums {
             key
             label
         }
+        FirebasePushStatusEnum {
+            key
+            label
+        }
     }
 }
 `;
@@ -193,6 +197,7 @@ function RootLayout() {
         iconOptions: allEnumsResponse?.enums.IconEnum ?? [],
         overlayLayerTypeOptions: allEnumsResponse?.enums.OverlayLayerTypeEnum ?? [],
         tutorialStatusOptions: allEnumsResponse?.enums.TutorialStatusEnum ?? [],
+        firebasePushStatusOptions: allEnumsResponse?.enums.FirebasePushStatusEnum ?? [],
         validateObjectSourceTypeMapping: listToMap(
             allEnumsResponse?.enums.ValidateObjectSourceTypeEnum,
             ({ key }) => key,
@@ -233,6 +238,10 @@ function RootLayout() {
             allEnumsResponse?.enums.TutorialStatusEnum,
             ({ key }) => key,
         ),
+        firebasePushStatusMapping: listToMap(
+            allEnumsResponse?.enums.FirebasePushStatusEnum,
+            ({ key }) => key,
+        ),
     } satisfies EnumsContextProps), [allEnumsResponse]);
 
     const [{
diff --git a/app/views/RootLayout/styles.module.css b/app/views/RootLayout/styles.module.css
index 3d95143e..ed956b56 100644
--- a/app/views/RootLayout/styles.module.css
+++ b/app/views/RootLayout/styles.module.css
@@ -2,6 +2,7 @@
     display: grid;
     min-height: 100vh;
     grid-template-rows: auto auto 1fr;
+    font-size: var(--font-size-md);
 
     .global-loading {
         position: sticky;
diff --git a/app/views/Teams/index.tsx b/app/views/Teams/index.tsx
index 0bb34a72..552336df 100644
--- a/app/views/Teams/index.tsx
+++ b/app/views/Teams/index.tsx
@@ -17,7 +17,10 @@ import {
     useTeamsListQuery,
 } from '#generated/types/graphql';
 import useListManagement, { ExactFilter } from '#hooks/useListManagement';
-import { defaultPagePerItemOptions } from '#utils/common';
+import {
+    defaultPagePerItemOptions,
+    formatNumber,
+} from '#utils/common';
 
 import TeamListItem from './TeamListItem';
 
@@ -136,7 +139,7 @@ function Teams() {
             )}
         >
             <Container
-                heading={`Showing ${totalItems} of ${totalCount} teams`}
+                heading={`Showing ${formatNumber(totalItems)} of ${formatNumber(totalCount)} teams`}
                 headingLevel={6}
                 headerActions={(
                     <>
diff --git a/app/views/Tutorials/TutorialListItem/index.tsx b/app/views/Tutorials/TutorialListItem/index.tsx
index dcbc1a78..aaeb806a 100644
--- a/app/views/Tutorials/TutorialListItem/index.tsx
+++ b/app/views/Tutorials/TutorialListItem/index.tsx
@@ -1,14 +1,18 @@
-import { useState } from 'react';
 import {
+    useContext,
+    useState,
+} from 'react';
+import {
+    PiArrowsClockwise,
     PiCalendar,
     PiCaretDown,
     PiCaretUp,
     PiFlag,
     PiInfo,
     PiMapPin,
-    PiTextT,
     PiUser,
 } from 'react-icons/pi';
+import { isDefined } from '@togglecorp/fujs';
 
 import SmartLink from '#base/components/SmartLink';
 import Button from '#components/Button';
@@ -19,9 +23,14 @@ import TutorialStatusOutput from '#components/domain/TutorialStatusOutput';
 import GridLayoutItem from '#components/GridLayoutItem';
 import ListLayout from '#components/ListLayout';
 import OverflowMenu from '#components/OverflowMenu';
+import PopupButton from '#components/PopupButton';
 import Tag from '#components/Tag';
 import TextOutput from '#components/TextOutput';
-import { TutorialsListQuery } from '#generated/types/graphql';
+import EnumsContext from '#contexts/EnumsContext';
+import {
+    TutorialsListQuery,
+    TutorialStatusEnum,
+} from '#generated/types/graphql';
 import { getInstruction } from '#utils/common';
 import TutorialActions from '#views/EditTutorial/TutorialActions';
 
@@ -41,10 +50,13 @@ function TutorialListItem(props: Props) {
             firebaseId,
             projectId,
             project,
+            firebasePushStatus,
+            firebaseLastPushed,
         },
     } = props;
 
     const [showDetails, setShowDetails] = useState(false);
+    const { firebasePushStatusMapping } = useContext(EnumsContext);
 
     return (
         <Container
@@ -116,6 +128,7 @@ function TutorialListItem(props: Props) {
                             project.projectType,
                         )}
                         withCenterAlign
+                        withWrap
                     />
                 </GridLayoutItem>
                 <TextOutput
@@ -129,6 +142,7 @@ function TutorialListItem(props: Props) {
                     icon={<PiFlag />}
                     label="Organization"
                     value={project.requestingOrganization.name}
+                    withWrap
                 />
                 <TextOutput
                     icon={<PiCalendar />}
@@ -136,21 +150,52 @@ function TutorialListItem(props: Props) {
                     value={createdAt}
                     valueType="date"
                     withCenterAlign
+                    withWrap
                 />
                 <TextOutput
                     icon={<PiUser />}
                     label="Created by"
                     value={createdBy.displayName}
                     withCenterAlign
+                    withWrap
                 />
-                <GridLayoutItem columnSpan={2}>
-                    <TextOutput
-                        icon={<PiTextT />}
-                        label="Firebase ID"
-                        value={firebaseId}
-                        withCenterAlign
-                    />
-                </GridLayoutItem>
+                {(status === TutorialStatusEnum.PublishingFailed
+                    || status === TutorialStatusEnum.ReadyToPublish
+                    || status === TutorialStatusEnum.Published
+                    || status === TutorialStatusEnum.Archived
+                ) && (
+                    <GridLayoutItem columnSpan={2}>
+                        <TextOutput
+                            label="Firebase ID"
+                            value={firebaseId}
+                            withWrap
+                            description={(
+                                <PopupButton
+                                    label={<PiInfo />}
+                                    withoutPadding
+                                    withoutDropdownIcon
+                                    styleVariant="transparent"
+                                >
+                                    <TextOutput
+                                        icon={<PiArrowsClockwise />}
+                                        label="Firebase last synced"
+                                        value={firebaseLastPushed}
+                                        withCenterAlign
+                                        valueType="date"
+                                    />
+                                    <TextOutput
+                                        label="Firebase push status"
+                                        value={isDefined(firebasePushStatus)
+                                            ? firebasePushStatusMapping?.[firebasePushStatus].label
+                                            : undefined}
+                                        withCenterAlign
+                                        icon={<PiCalendar />}
+                                    />
+                                </PopupButton>
+                            )}
+                        />
+                    </GridLayoutItem>
+                )}
             </ListLayout>
             {showDetails && (
                 <>
diff --git a/app/views/Tutorials/index.tsx b/app/views/Tutorials/index.tsx
index 550b1b1d..b9f070fe 100644
--- a/app/views/Tutorials/index.tsx
+++ b/app/views/Tutorials/index.tsx
@@ -31,6 +31,7 @@ import useListManagement, {
 } from '#hooks/useListManagement';
 import {
     defaultPagePerItemOptions,
+    formatNumber,
     keySelector,
     labelSelector,
     removeEmptyList,
@@ -78,6 +79,8 @@ query TutorialsList($filters: TutorialFilter, $order: TutorialOrder, $pagination
             id
             clientId
             firebaseId
+            firebasePushStatus
+            firebaseLastPushed
             createdBy {
                 id
                 displayName
@@ -231,7 +234,7 @@ function Tutorials() {
             )}
         >
             <Container
-                heading={`Showing ${totalItems} of ${totalCount} tutorial`}
+                heading={`Showing ${formatNumber(totalItems)} of ${formatNumber(totalCount)} tutorial`}
                 headingLevel={6}
                 headerActions={(
                     <>
diff --git a/app/views/UserGroups/index.tsx b/app/views/UserGroups/index.tsx
index c4bcd7b5..8249a140 100644
--- a/app/views/UserGroups/index.tsx
+++ b/app/views/UserGroups/index.tsx
@@ -22,7 +22,10 @@ import {
 } from '#generated/types/graphql';
 import useBooleanState from '#hooks/useBooleanState';
 import useListManagement, { ExactFilter } from '#hooks/useListManagement';
-import { defaultPagePerItemOptions } from '#utils/common';
+import {
+    defaultPagePerItemOptions,
+    formatNumber,
+} from '#utils/common';
 
 import UserGroupFormModal from './UserGroupFormModal';
 import UserGroupListItem from './UserGroupListItem';
@@ -171,7 +174,7 @@ function UserGroups() {
             )}
         >
             <Container
-                heading={`Showing ${totalItems} of ${userGroupsResponse?.contributorUserGroups.totalCount} teams`}
+                heading={`Showing ${formatNumber(totalItems)} of ${formatNumber(totalCount)} teams`}
                 headingLevel={6}
                 headerActions={(
                     <>
diff --git a/backend b/backend
index 60cf2c63..f8d8f92d 160000
--- a/backend
+++ b/backend
@@ -1 +1 @@
-Subproject commit 60cf2c635aa10be0746b6ab2391735b859d7eef8
+Subproject commit f8d8f92d4134c35d10bd7957f3b849e778c2ff75
diff --git a/env.ts b/env.ts
index 65356126..505d49e4 100644
--- a/env.ts
+++ b/env.ts
@@ -16,4 +16,6 @@ export default defineConfig({
     // Used in application, automatically injected by vite
     APP_COMMIT_HASH: Schema.string.optional(),
     APP_VERSION: Schema.string.optional(),
+
+    APP_MAPILLARY_API_KEY: Schema.string.optional(),
 })
diff --git a/package.json b/package.json
index d8f3b4f5..338ff8cc 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
         "@urql/exchange-graphcache": "^7.2.3",
         "arktype": "^2.1.20",
         "graphql": "^16.8.1",
+        "mapillary-js": "^4.1.2",
         "maplibre-gl": "^5.5.0",
         "react": "^18.2.0",
         "react-cookie": "^8.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6e7648f7..d7e1e601 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -61,6 +61,9 @@ importers:
       graphql:
         specifier: ^16.8.1
         version: 16.10.0
+      mapillary-js:
+        specifier: ^4.1.2
+        version: 4.1.2
       maplibre-gl:
         specifier: ^5.5.0
         version: 5.5.0
@@ -1939,6 +1942,9 @@ packages:
   '@tybys/wasm-util@0.9.0':
     resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
 
+  '@types/earcut@2.1.4':
+    resolution: {integrity: sha512-qp3m9PPz4gULB9MhjGID7wpo3gJ4bTGXm7ltNDsmOvsPduTeHp8wSW9YckBj3mljeOh4F0m2z/0JKAALRKbmLQ==}
+
   '@types/estree@1.0.7':
     resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
 
@@ -1966,15 +1972,27 @@ packages:
   '@types/mapbox__vector-tile@1.3.4':
     resolution: {integrity: sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==}
 
+  '@types/node@14.18.63':
+    resolution: {integrity: sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==}
+
   '@types/node@20.17.30':
     resolution: {integrity: sha512-7zf4YyHA+jvBNfVrk2Gtvs6x7E8V+YDW05bNfG2XkWDJfYRXrTiP/DsB2zSYTaHX0bGIujTBQdMVAhb+j7mwpg==}
 
+  '@types/pako@1.0.7':
+    resolution: {integrity: sha512-YBtzT2ztNF6R/9+UXj2wTGFnC9NklAnASt3sC0h2m1bbH7G6FyBIkt4AN8ThZpNfxUo1b2iMVO0UawiJymEt8A==}
+
   '@types/pbf@3.0.5':
     resolution: {integrity: sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==}
 
+  '@types/polylabel@1.1.3':
+    resolution: {integrity: sha512-9Zw2KoDpi+T4PZz2G6pO2xArE0m/GSMTW1MIxF2s8ZY8x9XDO6fv9um0ydRGvcbkFLlaq8yNK6eZxnmMZtDgWQ==}
+
   '@types/prop-types@15.7.4':
     resolution: {integrity: sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==}
 
+  '@types/rbush@3.0.4':
+    resolution: {integrity: sha512-knSt9cCW8jj1ZSFcFeBZaX++OucmfPxxHiRwTahZfJlnQsek7O0bazTJHWD2RVj9LEoejUYF2de3/stf+QXcXw==}
+
   '@types/react-dom@18.3.6':
     resolution: {integrity: sha512-nf22//wEbKXusP6E9pfOCDwFdHAX4u172eaJI4YkDRQEZiorm6KfYnSC2SWLDMVWUOWPERmJnN0ujeAfTBLvrw==}
     peerDependencies:
@@ -1986,6 +2004,12 @@ packages:
   '@types/supercluster@7.1.3':
     resolution: {integrity: sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==}
 
+  '@types/three@0.134.0':
+    resolution: {integrity: sha512-4YB+99Rgqq27EjiYTItEoZtdjLnTh8W9LxowgpC9eWsjaQJIL4Kn/ZcUKAnW3gB/jS4hqGN8iqmid+RcUZDzpA==}
+
+  '@types/virtual-dom@2.1.4':
+    resolution: {integrity: sha512-Y7L/frVydXRd16MevczslJZQu+QWsrqZlj6ytk7mST3xen0fkx7Ollw31By/89A8Wq+nfNWm/IoTR1ac/0fRhA==}
+
   '@types/ws@8.18.1':
     resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
 
@@ -2644,6 +2668,9 @@ packages:
   browser-process-hrtime@1.0.0:
     resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
 
+  browser-split@0.0.1:
+    resolution: {integrity: sha512-JhvgRb2ihQhsljNda3BI8/UcRHVzrVwo3Q+P8vDtSiyobXuFpuZ9mq+MbRGMnC22CjW3RrfXdg6j6ITX8M+7Ow==}
+
   browserslist@4.24.4:
     resolution: {integrity: sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -2697,6 +2724,9 @@ packages:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
 
+  camelize@1.0.1:
+    resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
+
   caniuse-lite@1.0.30001714:
     resolution: {integrity: sha512-mtgapdwDLSSBnCI3JokHM7oEQBLxiJKVRtg10AxM1AyeiKcM96f0Mkbqeq+1AbiCtvMcHRulAAEMu693JrSWqg==}
 
@@ -3075,6 +3105,9 @@ packages:
   dom-serializer@1.3.2:
     resolution: {integrity: sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==}
 
+  dom-walk@0.1.2:
+    resolution: {integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==}
+
   domelementtype@2.2.0:
     resolution: {integrity: sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==}
 
@@ -3112,6 +3145,9 @@ packages:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
+  earcut@2.2.4:
+    resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==}
+
   earcut@3.0.1:
     resolution: {integrity: sha512-0l1/0gOjESMeQyYaK5IDiPNvFeu93Z/cO0TjZh9eZ1vyCtZnA7KMZ8rQggpsJHIbGSdrqYq9OhuveadOVHCshw==}
 
@@ -3154,6 +3190,9 @@ packages:
   error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
 
+  error@4.4.0:
+    resolution: {integrity: sha512-SNDKualLUtT4StGFP7xNfuFybL2f6iJujFtrWuvJqGbVQGaN+adE23veqzPz1hjUjTunLi2EnJ+0SJxtbJreKw==}
+
   es-abstract@1.19.1:
     resolution: {integrity: sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==}
     engines: {node: '>= 0.4'}
@@ -3384,6 +3423,9 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
+  ev-store@7.0.0:
+    resolution: {integrity: sha512-otazchNRnGzp2YarBJ+GXKVGvhxVATB1zmaStxJBYet0Dyq7A9VhH8IUEB/gRcL6Ch52lfpgPTRJ2m49epyMsQ==}
+
   execa@8.0.1:
     resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
     engines: {node: '>=16.17'}
@@ -3628,6 +3670,9 @@ packages:
     resolution: {integrity: sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==}
     engines: {node: '>=16'}
 
+  global@4.4.0:
+    resolution: {integrity: sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==}
+
   globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
@@ -3854,6 +3899,9 @@ packages:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
 
+  individual@3.0.0:
+    resolution: {integrity: sha512-rUY5vtT748NMRbEMrTNiFfy29BgGZwGXUi2NFUVMWQrogSLzlJvQV9eeMWi+g1aVaQ53tpyLAQtd5x/JH0Nh1g==}
+
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
@@ -4016,6 +4064,9 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
+  is-object@1.0.2:
+    resolution: {integrity: sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==}
+
   is-plain-object@5.0.0:
     resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
     engines: {node: '>=0.10.0'}
@@ -4346,6 +4397,10 @@ packages:
     resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
     engines: {node: '>=18'}
 
+  long@3.2.0:
+    resolution: {integrity: sha512-ZYvPPOMqUwPoDsbJaR10iQJYnMuZhRTvHYl62ErLIEX7RgFlziSBUUvrt3OVfc47QlHHpzPZYP17g3Fv7oeJkg==}
+    engines: {node: '>=0.6'}
+
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
@@ -4383,10 +4438,16 @@ packages:
     resolution: {integrity: sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==}
     engines: {node: '>=0.10.0'}
 
+  mapillary-js@4.1.2:
+    resolution: {integrity: sha512-LYj6xbp/Y9wfBkr/prRwgJGb3+KwvzUri0yl5QEpMEH7oC1p52ErshWmPXysKefmm6JaFML4D7FJ89viwJ4T5g==}
+
   maplibre-gl@5.5.0:
     resolution: {integrity: sha512-p8AOPuzzqn1ZA9gcXxKw0IED715we/2Owa/YUr6PANmgMvNMe/JG+V/C1hRra43Wm62Biz+Aa8AgbOLJimA8tA==}
     engines: {node: '>=16.14.0', npm: '>=8.1.0'}
 
+  martinez-polygon-clipping@0.7.4:
+    resolution: {integrity: sha512-jBEwrKtA0jTagUZj2bnmb4Yg2s4KnJGRePStgI7bAVjtcipKiF39R4LZ2V/UT61jMYWrTcBhPazexeqd6JAVtw==}
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -4445,6 +4506,9 @@ packages:
     resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
     engines: {node: '>=18'}
 
+  min-document@2.19.0:
+    resolution: {integrity: sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==}
+
   minimatch@10.0.1:
     resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
     engines: {node: 20 || >=22}
@@ -4495,6 +4559,9 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  next-tick@0.2.2:
+    resolution: {integrity: sha512-f7h4svPtl+QidoBv4taKXUjJ70G2asaZ8G28nS0OkqaalX8dwwrtWtyxEDPK62AC00ur/+/E0pUwBwY5EPn15Q==}
+
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
@@ -4673,6 +4740,9 @@ packages:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
+  pako@2.1.0:
+    resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
+
   param-case@3.0.4:
     resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
 
@@ -4782,6 +4852,9 @@ packages:
   pn@1.1.0:
     resolution: {integrity: sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==}
 
+  polylabel@1.1.0:
+    resolution: {integrity: sha512-bxaGcA40sL3d6M4hH72Z4NdLqxpXRsCFk8AITYg6x1rn1Ei3izf00UMLklerBZTO49aPA3CYrIwVulx2Bce2pA==}
+
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
@@ -5019,6 +5092,10 @@ packages:
     resolution: {integrity: sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==}
     engines: {node: '>= 0.6'}
 
+  process@0.11.10:
+    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
+    engines: {node: '>= 0.6.0'}
+
   promise@7.3.1:
     resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
 
@@ -5048,9 +5125,15 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  quickselect@2.0.0:
+    resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
+
   quickselect@3.0.0:
     resolution: {integrity: sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==}
 
+  rbush@3.0.1:
+    resolution: {integrity: sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==}
+
   react-cookie@8.0.1:
     resolution: {integrity: sha512-QNdAd0MLuAiDiLcDU/2s/eyKmmfMHtjPUKJ2dZ/5CcQ9QKUium4B3o61/haq6PQl/YWFqC5PO8GvxeHKhy3GFA==}
     peerDependencies:
@@ -5226,6 +5309,9 @@ packages:
   rfdc@1.4.1:
     resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
+  robust-predicates@2.0.4:
+    resolution: {integrity: sha512-l4NwboJM74Ilm4VKfbAtFeGq7aEjWL+5kVFcmgFA2MrdnQWx9iE/tUGvxY5HyMI7o/WpSIUFLbC5fbeaHgSCYg==}
+
   rollup-plugin-visualizer@5.14.0:
     resolution: {integrity: sha512-VlDXneTDaKsHIw8yzJAFWtrzguoJ/LnQ+lMpoVfYJ3jJF4Ihe5oYLAqLklIK/35lgUY+1yEzCkHyZ1j4A5w5fA==}
     engines: {node: '>=18'}
@@ -5257,6 +5343,9 @@ packages:
   rxjs@7.8.2:
     resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
 
+  s2-geometry@1.2.10:
+    resolution: {integrity: sha512-5WejfQu1XZ25ZerW8uL6xP1sM2krcOYKhI6TbfybGRf+vTQLrm3E+4n0+1lWg+MYqFjPzoe51zKhn2sBRMCt5g==}
+
   safe-array-concat@1.1.3:
     resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
     engines: {node: '>=0.4'}
@@ -5443,6 +5532,9 @@ packages:
     resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
     engines: {node: '>= 8'}
 
+  splaytree@0.1.4:
+    resolution: {integrity: sha512-D50hKrjZgBzqD3FT2Ek53f2dcDLAQT8SSGrzj3vidNH5ISRgceeGVJ2dQIthKOuayqFXfFjXheHNo4bbt9LhRQ==}
+
   sponge-case@1.0.1:
     resolution: {integrity: sha512-dblb9Et4DAtiZ5YSUZHLl4XhH4uK80GhAZrVXdN4O2P4gQ40Wa5UIOPUHlA/nFd2PLblBZWUioLMMAVrgpoYcA==}
 
@@ -5467,6 +5559,9 @@ packages:
   string-env-interpolation@1.0.1:
     resolution: {integrity: sha512-78lwMoCcn0nNu8LszbP1UA7g55OeE4v7rCeWnM5B453rnNr4aq+5it3FEYtZrSEiMvHZOZ9Jlqb0OD0M2VInqg==}
 
+  string-template@0.2.1:
+    resolution: {integrity: sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw==}
+
   string-width@3.1.0:
     resolution: {integrity: sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==}
     engines: {node: '>=6'}
@@ -5638,6 +5733,9 @@ packages:
     resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
     engines: {node: '>=8'}
 
+  three@0.134.0:
+    resolution: {integrity: sha512-LbBerg7GaSPjYtTOnu41AMp7tV6efUNR3p4Wk5NzkSsNTBuA5mDGOfwwZL1jhhVMLx9V20HolIUo0+U3AXehbg==}
+
   through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
@@ -5659,6 +5757,12 @@ packages:
     resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==}
     engines: {node: '>=14.0.0'}
 
+  tinyqueue@1.2.3:
+    resolution: {integrity: sha512-Qz9RgWuO9l8lT+Y9xvbzhPT2efIUIFd69N7eF7tJ9lnQl0iLj1M7peK7IoUGZL9DJHw9XftqLreccfxcQgYLxA==}
+
+  tinyqueue@2.0.3:
+    resolution: {integrity: sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==}
+
   tinyqueue@3.0.0:
     resolution: {integrity: sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==}
 
@@ -5869,6 +5973,9 @@ packages:
     resolution: {integrity: sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==}
     engines: {'0': node >=0.6.0}
 
+  virtual-dom@2.1.1:
+    resolution: {integrity: sha512-wb6Qc9Lbqug0kRqo/iuApfBpJJAq14Sk1faAnSmtqXiwahg7PVTvWMs9L02Z8nNIMqbwsxzBAA90bbtRLbw0zg==}
+
   vite-node@1.6.1:
     resolution: {integrity: sha512-YAXkfvGtuTzwWbDSACdJSg4A4DZiAqckWe90Zapc/sEX3XvHcw1NdurM/6od8J207tSDqNbSsgdCacBgvJKFuA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -6141,12 +6248,22 @@ packages:
       utf-8-validate:
         optional: true
 
+  x-is-array@0.1.0:
+    resolution: {integrity: sha512-goHPif61oNrr0jJgsXRfc8oqtYzvfiMJpTqwE7Z4y9uH+T3UozkGqQ4d2nX9mB9khvA8U2o/UbPOFjgC7hLWIA==}
+
+  x-is-string@0.1.0:
+    resolution: {integrity: sha512-GojqklwG8gpzOVEVki5KudKNoq7MbbjYZCbyWzEz7tyPA7eleiE0+ePwOWQQRb5fm86rD3S8Tc0tSFf3AOv50w==}
+
   xml-name-validator@3.0.0:
     resolution: {integrity: sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==}
 
   xmlchars@2.2.0:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
 
+  xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+
   y18n@4.0.3:
     resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
 
@@ -8060,6 +8177,8 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@types/earcut@2.1.4': {}
+
   '@types/estree@1.0.7': {}
 
   '@types/geojson-vt@3.2.5':
@@ -8087,14 +8206,22 @@ snapshots:
       '@types/mapbox__point-geometry': 0.1.4
       '@types/pbf': 3.0.5
 
+  '@types/node@14.18.63': {}
+
   '@types/node@20.17.30':
     dependencies:
       undici-types: 6.19.8
 
+  '@types/pako@1.0.7': {}
+
   '@types/pbf@3.0.5': {}
 
+  '@types/polylabel@1.1.3': {}
+
   '@types/prop-types@15.7.4': {}
 
+  '@types/rbush@3.0.4': {}
+
   '@types/react-dom@18.3.6(@types/react@18.3.20)':
     dependencies:
       '@types/react': 18.3.20
@@ -8108,6 +8235,10 @@ snapshots:
     dependencies:
       '@types/geojson': 7946.0.16
 
+  '@types/three@0.134.0': {}
+
+  '@types/virtual-dom@2.1.4': {}
+
   '@types/ws@8.18.1':
     dependencies:
       '@types/node': 20.17.30
@@ -9142,6 +9273,8 @@ snapshots:
   browser-process-hrtime@1.0.0:
     optional: true
 
+  browser-split@0.0.1: {}
+
   browserslist@4.24.4:
     dependencies:
       caniuse-lite: 1.0.30001714
@@ -9206,6 +9339,8 @@ snapshots:
 
   camelcase@5.3.1: {}
 
+  camelize@1.0.1: {}
+
   caniuse-lite@1.0.30001714: {}
 
   capital-case@1.0.4:
@@ -9611,6 +9746,8 @@ snapshots:
       domhandler: 4.3.0
       entities: 2.2.0
 
+  dom-walk@0.1.2: {}
+
   domelementtype@2.2.0: {}
 
   domexception@1.0.1:
@@ -9652,6 +9789,8 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  earcut@2.2.4: {}
+
   earcut@3.0.1: {}
 
   easy-table@1.2.0:
@@ -9691,6 +9830,12 @@ snapshots:
     dependencies:
       is-arrayish: 0.2.1
 
+  error@4.4.0:
+    dependencies:
+      camelize: 1.0.1
+      string-template: 0.2.1
+      xtend: 4.0.2
+
   es-abstract@1.19.1:
     dependencies:
       call-bind: 1.0.2
@@ -10116,6 +10261,10 @@ snapshots:
 
   esutils@2.0.3: {}
 
+  ev-store@7.0.0:
+    dependencies:
+      individual: 3.0.0
+
   execa@8.0.1:
     dependencies:
       cross-spawn: 7.0.3
@@ -10392,6 +10541,11 @@ snapshots:
       kind-of: 6.0.3
       which: 4.0.0
 
+  global@4.4.0:
+    dependencies:
+      min-document: 2.19.0
+      process: 0.11.10
+
   globals@11.12.0: {}
 
   globals@14.0.0: {}
@@ -10609,6 +10763,8 @@ snapshots:
 
   indent-string@4.0.0: {}
 
+  individual@3.0.0: {}
+
   inflight@1.0.6:
     dependencies:
       once: 1.4.0
@@ -10779,6 +10935,8 @@ snapshots:
 
   is-number@7.0.0: {}
 
+  is-object@1.0.2: {}
+
   is-plain-object@5.0.0: {}
 
   is-regex@1.1.4:
@@ -11135,6 +11293,8 @@ snapshots:
       strip-ansi: 7.1.0
       wrap-ansi: 9.0.0
 
+  long@3.2.0: {}
+
   loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
@@ -11180,6 +11340,27 @@ snapshots:
 
   map-cache@0.2.2: {}
 
+  mapillary-js@4.1.2:
+    dependencies:
+      '@types/earcut': 2.1.4
+      '@types/node': 14.18.63
+      '@types/pako': 1.0.7
+      '@types/pbf': 3.0.5
+      '@types/polylabel': 1.1.3
+      '@types/rbush': 3.0.4
+      '@types/three': 0.134.0
+      '@types/virtual-dom': 2.1.4
+      earcut: 2.2.4
+      martinez-polygon-clipping: 0.7.4
+      pako: 2.1.0
+      pbf: 3.3.0
+      polylabel: 1.1.0
+      rbush: 3.0.1
+      rxjs: 7.8.2
+      s2-geometry: 1.2.10
+      three: 0.134.0
+      virtual-dom: 2.1.1
+
   maplibre-gl@5.5.0:
     dependencies:
       '@mapbox/geojson-rewind': 0.5.2
@@ -11209,6 +11390,12 @@ snapshots:
       tinyqueue: 3.0.0
       vt-pbf: 3.1.3
 
+  martinez-polygon-clipping@0.7.4:
+    dependencies:
+      robust-predicates: 2.0.4
+      splaytree: 0.1.4
+      tinyqueue: 1.2.3
+
   math-intrinsics@1.1.0: {}
 
   mathml-tag-names@2.1.3: {}
@@ -11247,6 +11434,10 @@ snapshots:
 
   mimic-function@5.0.1: {}
 
+  min-document@2.19.0:
+    dependencies:
+      dom-walk: 0.1.2
+
   minimatch@10.0.1:
     dependencies:
       brace-expansion: 2.0.1
@@ -11292,6 +11483,8 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
+  next-tick@0.2.2: {}
+
   no-case@3.0.4:
     dependencies:
       lower-case: 2.0.2
@@ -11489,6 +11682,8 @@ snapshots:
 
   p-try@2.2.0: {}
 
+  pako@2.1.0: {}
+
   param-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
@@ -11583,6 +11778,10 @@ snapshots:
   pn@1.1.0:
     optional: true
 
+  polylabel@1.1.0:
+    dependencies:
+      tinyqueue: 2.0.3
+
   possible-typed-array-names@1.1.0: {}
 
   postcss-attribute-case-insensitive@7.0.1(postcss@8.5.3):
@@ -11869,6 +12068,8 @@ snapshots:
 
   private@0.1.8: {}
 
+  process@0.11.10: {}
+
   promise@7.3.1:
     dependencies:
       asap: 2.0.6
@@ -11895,8 +12096,14 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  quickselect@2.0.0: {}
+
   quickselect@3.0.0: {}
 
+  rbush@3.0.1:
+    dependencies:
+      quickselect: 2.0.0
+
   react-cookie@8.0.1(react@18.3.1):
     dependencies:
       '@types/hoist-non-react-statics': 3.3.6
@@ -12099,6 +12306,8 @@ snapshots:
 
   rfdc@1.4.1: {}
 
+  robust-predicates@2.0.4: {}
+
   rollup-plugin-visualizer@5.14.0(rollup@4.40.0):
     dependencies:
       open: 8.4.2
@@ -12146,6 +12355,10 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  s2-geometry@1.2.10:
+    dependencies:
+      long: 3.2.0
+
   safe-array-concat@1.1.3:
     dependencies:
       call-bind: 1.0.8
@@ -12336,6 +12549,8 @@ snapshots:
 
   source-map@0.7.4: {}
 
+  splaytree@0.1.4: {}
+
   sponge-case@1.0.1:
     dependencies:
       tslib: 2.8.1
@@ -12364,6 +12579,8 @@ snapshots:
 
   string-env-interpolation@1.0.1: {}
 
+  string-template@0.2.1: {}
+
   string-width@3.1.0:
     dependencies:
       emoji-regex: 7.0.3
@@ -12608,6 +12825,8 @@ snapshots:
       glob: 7.2.0
       minimatch: 3.0.4
 
+  three@0.134.0: {}
+
   through@2.3.8: {}
 
   timeout-signal@2.0.0: {}
@@ -12623,6 +12842,10 @@ snapshots:
 
   tinypool@0.8.4: {}
 
+  tinyqueue@1.2.3: {}
+
+  tinyqueue@2.0.3: {}
+
   tinyqueue@3.0.0: {}
 
   tinyspy@2.2.1: {}
@@ -12862,6 +13085,17 @@ snapshots:
       extsprintf: 1.3.0
     optional: true
 
+  virtual-dom@2.1.1:
+    dependencies:
+      browser-split: 0.0.1
+      error: 4.4.0
+      ev-store: 7.0.0
+      global: 4.4.0
+      is-object: 1.0.2
+      next-tick: 0.2.2
+      x-is-array: 0.1.0
+      x-is-string: 0.1.0
+
   vite-node@1.6.1(@types/node@20.17.30):
     dependencies:
       cac: 6.7.14
@@ -13158,12 +13392,18 @@ snapshots:
 
   ws@8.18.1: {}
 
+  x-is-array@0.1.0: {}
+
+  x-is-string@0.1.0: {}
+
   xml-name-validator@3.0.0:
     optional: true
 
   xmlchars@2.2.0:
     optional: true
 
+  xtend@4.0.2: {}
+
   y18n@4.0.3: {}
 
   y18n@5.0.8: {}