diff --git a/api/nginx.conf b/api/nginx.conf
index 16f1d0576..9ef1a6f40 100644
--- a/api/nginx.conf
+++ b/api/nginx.conf
@@ -2,6 +2,10 @@ server {
     listen 80;
     server_name api;
 
+    gzip on;
+    gzip_comp_level 2;
+    gzip_types text/plain text/csv text/css application/json text/javascript;
+
     location / {
         alias /usr/share/nginx/html/api/;
         autoindex on;
diff --git a/docker-compose.yaml b/docker-compose.yaml
index fa6fd06c7..ddd85c0d9 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -138,6 +138,10 @@ services:
             REACT_APP_SENTRY_DSN: ${MANAGER_DASHBOARD_SENTRY_DSN}
             REACT_APP_SENTRY_TRACES_SAMPLE_RATE: ${MANAGER_DASHBOARD_SENTRY_TRACES_SAMPLE_RATE}
             REACT_APP_COMMUNITY_DASHBOARD_URL: ${MANAGER_DASHBOARD_COMMUNITY_DASHBOARD_URL}
+            REACT_APP_IMAGE_BING_API_KEY: ${IMAGE_BING_API_KEY}
+            REACT_APP_IMAGE_MAPBOX_API_KEY: ${IMAGE_MAPBOX_API_KEY}
+            REACT_APP_IMAGE_MAXAR_PREMIUM_API_KEY: ${IMAGE_MAXAR_PREMIUM_API_KEY}
+            REACT_APP_IMAGE_MAXAR_STANDARD_API_KEY: ${IMAGE_MAXAR_STANDARD_API_KEY}
         volumes:
             - manager-dashboard-static:/code/build/
         command: bash -c 'yarn build'
diff --git a/firebase/functions/src/index.ts b/firebase/functions/src/index.ts
index d56e3da50..803d81186 100644
--- a/firebase/functions/src/index.ts
+++ b/firebase/functions/src/index.ts
@@ -30,7 +30,7 @@ exports.osmAuth.token = functions.https.onRequest((req, res) => {
 
     This function also writes to the `contributions` section in the user profile.
 */
-exports.groupUsersCounter = functions.database.ref('/v2/results/{projectId}/{groupId}/{userId}/').onCreate((snapshot, context) => {
+exports.groupUsersCounter = functions.database.ref('/v2/results/{projectId}/{groupId}/{userId}/').onCreate(async (snapshot, context) => {
     // these references/values will be updated by this function
     const groupUsersRef = admin.database().ref('/v2/groupsUsers/' + context.params.projectId + '/' + context.params.groupId);
     const userRef = admin.database().ref('/v2/users/' + context.params.userId);
@@ -53,6 +53,30 @@ exports.groupUsersCounter = functions.database.ref('/v2/results/{projectId}/{gro
     }
 
     const result = snapshot.val();
+
+
+    // New versions of app will have the appVersion defined (> 2.2.5)
+    // appVersion: 2.2.5 (14)-dev
+    const appVersionString = result.appVersion as string | undefined | null;
+
+    // Check if the app is of older version
+    // (no need to check for specific version since old app won't sent the version info)
+    if (appVersionString === null || appVersionString === undefined || appVersionString.trim() === '') {
+        const projectRef = admin.database().ref(`/v2/projects/${context.params.projectId}`);
+        const dataSnapshot = await projectRef.once('value');
+
+        if (dataSnapshot.exists()) {
+            const project = dataSnapshot.val();
+            // Check if project type is footprint and also has
+            // custom options (i.e. these are new type of projects)
+            if (project.projectType === 2 && project.customOptions) {
+                // We remove the results submitted from older version of app (< v2.2.6)
+                console.info(`Result submitted for ${context.params.projectId} was discarded: submitted from older version of app`);
+                return thisResultRef.remove();
+            }
+        }
+    }
+
     // if result ref does not contain all required attributes we don't updated counters
     // e.g. due to some error when uploading from client
     if (!Object.prototype.hasOwnProperty.call(result, 'results')) {
@@ -90,77 +114,72 @@ exports.groupUsersCounter = functions.database.ref('/v2/results/{projectId}/{gro
         Update overall taskContributionCount and project taskContributionCount in the user profile
         based on the number of results submitted and the existing count values.
     */
-    return groupUsersRef.child(context.params.userId).once('value')
-        .then((dataSnapshot) => {
-            if (dataSnapshot.exists()) {
-                console.log('group contribution exists already. user: '+context.params.userId+' project: '+context.params.projectId+' group: '+context.params.groupId);
-                return null;
-            }
-            const latestNumberOfTasks = Object.keys(result['results']).length;
-
-            return Promise.all([
-                userContributionRef.child(context.params.groupId).set(true),
-                groupUsersRef.child(context.params.userId).set(true),
-                totalTaskContributionCountRef.transaction((currentCount) => {
-                    return currentCount + latestNumberOfTasks;
-                }),
-                totalGroupContributionCountRef.transaction((currentCount) => {
-                    return currentCount + 1;
-                }),
-                taskContributionCountRef.transaction((currentCount) => {
-                    return currentCount + latestNumberOfTasks;
-                }),
-
-                // Tag userGroups of the user in the result
-                // eslint-disable-next-line promise/no-nesting
-                userRef.child('userGroups').once('value').then((userGroupsOfTheUserSnapshot) => {
-                    if (!userGroupsOfTheUserSnapshot.exists()) {
-                        return null;
-                    }
-
-                    // eslint-disable-next-line promise/no-nesting
-                    return userGroupsRef.once('value').then((allUserGroupsSnapshot) => {
-                        if (!allUserGroupsSnapshot.exists()) {
-                            return null;
-                        }
-
-                        const userGroupsOfTheUserKeyList = Object.keys(userGroupsOfTheUserSnapshot.val());
-                        if (userGroupsOfTheUserKeyList.length <= 0) {
-                            return null;
-                        }
-
-                        const allUserGroups = allUserGroupsSnapshot.val();
-                        const nonArchivedUserGroupKeys = userGroupsOfTheUserKeyList.filter((key) => {
-                            const currentUserGroup = allUserGroups[key];
-
-                            // User might have joined some group that was removed but not cleared from their list
-                            if (!currentUserGroup) {
-                                return false;
-                            }
-
-                            // Skip groups that have been archived
-                            if (currentUserGroup.archivedAt) {
-                                return false;
-                            }
-
-                            return true;
-                        });
-
-                        if (nonArchivedUserGroupKeys.length === 0) {
-                            return null;
-                        }
-
-                        const nonArchivedUserGroupsOfTheUser = nonArchivedUserGroupKeys.reduce((acc, val) => {
-                            acc[val] = true;
-                            return acc;
-                        }, {} as Record<string, boolean>);
-
-                        // Include userGroups of the user in the results
-                        return thisResultRef.child('userGroups').set(nonArchivedUserGroupsOfTheUser);
-                    });
-                }),
-            ]);
-        });
+    const dataSnapshot = await groupUsersRef.child(context.params.userId).once('value');
+    if (dataSnapshot.exists()) {
+        console.log('group contribution exists already. user: '+context.params.userId+' project: '+context.params.projectId+' group: '+context.params.groupId);
+        return null;
+    }
+
+    const latestNumberOfTasks = Object.keys(result['results']).length;
+    await Promise.all([
+        userContributionRef.child(context.params.groupId).set(true),
+        groupUsersRef.child(context.params.userId).set(true),
+        totalTaskContributionCountRef.transaction((currentCount) => {
+            return currentCount + latestNumberOfTasks;
+        }),
+        totalGroupContributionCountRef.transaction((currentCount) => {
+            return currentCount + 1;
+        }),
+        taskContributionCountRef.transaction((currentCount) => {
+            return currentCount + latestNumberOfTasks;
+        }),
+    ]);
+
+
+    // Tag userGroups of the user in the result
+    const userGroupsOfTheUserSnapshot = await userRef.child('userGroups').once('value');
+    if (!userGroupsOfTheUserSnapshot.exists()) {
+        return null;
+    }
+
+    const allUserGroupsSnapshot = await userGroupsRef.once('value');
+    if (!allUserGroupsSnapshot.exists()) {
+        return null;
+    }
+
+    const userGroupsOfTheUserKeyList = Object.keys(userGroupsOfTheUserSnapshot.val());
+    if (userGroupsOfTheUserKeyList.length <= 0) {
+        return null;
+    }
+
+    const allUserGroups = allUserGroupsSnapshot.val();
+    const nonArchivedUserGroupKeys = userGroupsOfTheUserKeyList.filter((key) => {
+        const currentUserGroup = allUserGroups[key];
+
+        // User might have joined some group that was removed but not cleared from their list
+        if (!currentUserGroup) {
+            return false;
+        }
+
+        // Skip groups that have been archived
+        if (currentUserGroup.archivedAt) {
+            return false;
+        }
+
+        return true;
+    });
+
+    if (nonArchivedUserGroupKeys.length === 0) {
+        return null;
+    }
+
+    const nonArchivedUserGroupsOfTheUser = nonArchivedUserGroupKeys.reduce((acc, val) => {
+        acc[val] = true;
+        return acc;
+    }, {} as Record<string, boolean>);
+
+    // Include userGroups of the user in the results
+    return thisResultRef.child('userGroups').set(nonArchivedUserGroupsOfTheUser);
 });
 
 
diff --git a/manager-dashboard/.env.example b/manager-dashboard/.env.example
index 453a97527..6df3985d3 100644
--- a/manager-dashboard/.env.example
+++ b/manager-dashboard/.env.example
@@ -10,3 +10,9 @@ REACT_APP_FIREBASE_STORAGE_BUCKET=
 REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
 REACT_APP_FIREBASE_APP_ID=
 REACT_APP_COMMUNITY_DASHBOARD_URL=
+
+REACT_APP_IMAGE_BING_API_KEY=
+REACT_APP_IMAGE_MAPBOX_API_KEY=
+REACT_APP_IMAGE_MAXAR_PREMIUM_API_KEY=
+# -- NOTE: not used and seems to be discontinued
+REACT_APP_IMAGE_MAXAR_STANDARD_API_KEY=
diff --git a/manager-dashboard/app/Base/components/Navbar/styles.css b/manager-dashboard/app/Base/components/Navbar/styles.css
index 30110593c..869c7b47b 100644
--- a/manager-dashboard/app/Base/components/Navbar/styles.css
+++ b/manager-dashboard/app/Base/components/Navbar/styles.css
@@ -5,7 +5,7 @@
     box-shadow: 0 3px 5px -2px var(--color-shadow);
     background-color: var(--color-primary);
     padding: var(--spacing-medium) var(--spacing-large);
-    color: var(--color-text-on-light);
+    color: var(--color-text-on-dark);
 
     .container {
         display: flex;
@@ -42,7 +42,7 @@
 
                 .link {
                     opacity: 0.7;
-                    color: var(--color-text-on-light);
+                    color: var(--color-text-on-dark);
 
                     &.active {
                         opacity: 1;
@@ -58,7 +58,7 @@
             gap: var(--spacing-medium);
 
             .logout-button {
-                color: var(--color-text-on-light);
+                color: var(--color-text-on-dark);
             }
         }
     }
diff --git a/manager-dashboard/app/Base/components/SmartLink/index.tsx b/manager-dashboard/app/Base/components/SmartLink/index.tsx
index 205e757e7..d0d5bbe31 100644
--- a/manager-dashboard/app/Base/components/SmartLink/index.tsx
+++ b/manager-dashboard/app/Base/components/SmartLink/index.tsx
@@ -3,7 +3,7 @@ import { Link, LinkProps } from 'react-router-dom';
 
 import {
     useButtonFeatures,
-    Props as ButtonProps,
+    ButtonProps,
 } from '#components/Button';
 
 import useRouteMatching, {
diff --git a/manager-dashboard/app/Base/index.tsx b/manager-dashboard/app/Base/index.tsx
index a41d73148..f2bd6e24c 100644
--- a/manager-dashboard/app/Base/index.tsx
+++ b/manager-dashboard/app/Base/index.tsx
@@ -12,6 +12,7 @@ import {
     ApolloProvider,
 } from '@apollo/client';
 import { initializeApp } from 'firebase/app';
+import 'react-mde/lib/styles/css/react-mde-all.css';
 
 import Init from '#base/components/Init';
 import PreloadMessage from '#base/components/PreloadMessage';
diff --git a/manager-dashboard/app/Base/styles.css b/manager-dashboard/app/Base/styles.css
index c599ea183..306f01caf 100644
--- a/manager-dashboard/app/Base/styles.css
+++ b/manager-dashboard/app/Base/styles.css
@@ -53,6 +53,8 @@ p {
     --color-background-primary-hint: #0d194920;
     --color-background-accent-hint: #4746f610;
 
+    --color-black: #000000;
+
     --color-scrollbar-foreground: rgba(0, 0, 0, .2);
     --color-scrollbar-background: rgba(0, 0, 0, .01);
     --color-hover-background: rgba(0, 0, 0, 0.03);
@@ -60,14 +62,17 @@ p {
 
     --color-primary: #0d1949;
     --color-primary-light: #2d5989;
-    --color-text-on-light: #ffffff;
+    --color-text-on-dark: #ffffff;
     --color-text-watermark: rgba(0, 0, 0, .4);
     --color-text: rgba(0, 0, 0, 0.8);
     --color-text-dark: rgba(0, 0, 0, 1);
     --color-text-light: rgba(0, 0, 0, 0.6);
+    --color-text-gray: #666666;
     --color-accent: #4746f6;
     --color-danger: #e04656;
     --color-success: #53b391;
+    --color-banner-alert: #fdf4dc;
+    --color-banner-text: #5C4813;
     --color-separator: rgba(0, 0, 0, 0.1);
     --color-shadow: rgba(0, 0, 0, 0.2);
 
@@ -83,24 +88,40 @@ p {
     --font-size-ultra-large: 4rem;
 
     --font-weight-medium: 400;
+    --font-weight-semibold: 600;
     --font-weight-bold: 700;
 
     --opacity-disabled-element: 0.5;
 
-    --width-separator-thin: 1px;
+    --width-separator-thin: 1pt;
+    --width-separator-thick: 5pt;
+    --width-separator-mobile-preview: 8pt;
     --width-scrollbar: 0.75rem;
     --width-page-content-max: 70rem;
     --width-navbar-content-max: 76rem;
 
+    --width-mobile-preview: 22rem;
+    --height-mobile-preview: 40rem;
+    --height-mobile-preview-builarea-content: 30rem;
+    --height-mobile-preview-footprint-content: 22rem;
+    --height-mobile-preview-change-detection-content: 14rem;
+
     --radius-popup-border: 0.25rem;
     --radius-scrollbar-border: 0.25rem;
     --radius-blur-shadow: 5px;
     --radius-modal: 0.25rem;
     --radius-button-border: 0.25rem;
     --radius-input-border: 0.25rem;
-    --radius-card-border: 0.25rem;
+    --radius-card-border: 0.5rem;
     --radius-badge-border: 1rem;
 
+    --line-height-none: 1;
+    --line-height-tight: 1.25;
+    --line-height-snug: 1.375;
+    --line-height-normal: 1.5;
+    --line-height-relaxed: 1.625;
+    --line-height-loose: 2;
+
 
     --shadow-card: 0 2px 4px -2px var(--color-shadow);
 
diff --git a/manager-dashboard/app/Base/utils/errorTransform.ts b/manager-dashboard/app/Base/utils/errorTransform.ts
index 7853b99f1..1ca65effe 100644
--- a/manager-dashboard/app/Base/utils/errorTransform.ts
+++ b/manager-dashboard/app/Base/utils/errorTransform.ts
@@ -1,8 +1,8 @@
-import { internal } from '@togglecorp/toggle-form';
+import { nonFieldError } from '@togglecorp/toggle-form';
 import { listToMap, isDefined, isNotDefined } from '@togglecorp/fujs';
 
 interface Error {
-    [internal]?: string | undefined;
+    [nonFieldError]?: string | undefined;
     [key: string]: string | Error | undefined;
 }
 
@@ -53,7 +53,7 @@ function transformObject(errors: ObjectError[] | undefined): Error | undefined {
     );
 
     return {
-        [internal]: finalNonFieldErrors,
+        [nonFieldError]: finalNonFieldErrors,
         ...finalFieldErrors,
     };
 }
@@ -68,7 +68,7 @@ function transformArray(errors: (ArrayError | null)[] | undefined): Error | unde
     const memberErrors = filteredErrors.filter((error) => error.clientId !== 'nonMemberErrors');
 
     return {
-        [internal]: topLevelError?.messages,
+        [nonFieldError]: topLevelError?.messages,
         ...listToMap(
             memberErrors,
             (error) => error.clientId,
diff --git a/manager-dashboard/app/components/AlertBanner/index.tsx b/manager-dashboard/app/components/AlertBanner/index.tsx
new file mode 100644
index 000000000..08e439be3
--- /dev/null
+++ b/manager-dashboard/app/components/AlertBanner/index.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { IoAlertCircleOutline } from 'react-icons/io5';
+import { _cs } from '@togglecorp/fujs';
+
+import Heading from '#components/Heading';
+
+import styles from './styles.css';
+
+interface Props {
+    className?: string;
+    title?: React.ReactNode;
+    children: React.ReactNode;
+}
+
+function AlertBanner(props: Props) {
+    const {
+        className,
+        children,
+        title,
+    } = props;
+
+    return (
+        <div className={_cs(styles.banner, className)}>
+            <div className={styles.bannerIcon}>
+                <IoAlertCircleOutline />
+            </div>
+            <div className={styles.container}>
+                {title && (
+                    <Heading>
+                        {title}
+                    </Heading>
+                )}
+                {children}
+            </div>
+        </div>
+    );
+}
+
+export default AlertBanner;
diff --git a/manager-dashboard/app/components/AlertBanner/styles.css b/manager-dashboard/app/components/AlertBanner/styles.css
new file mode 100644
index 000000000..770bb8e83
--- /dev/null
+++ b/manager-dashboard/app/components/AlertBanner/styles.css
@@ -0,0 +1,17 @@
+.banner {
+    display: flex;
+    gap: var(--spacing-large);
+    border-radius: var(--radius-card-border);
+    background-color: var(--color-banner-alert);
+    padding: var(--spacing-large);
+
+    .banner-icon {
+        font-size: var(--font-size-super-large);
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small);
+    }
+}
diff --git a/manager-dashboard/app/components/Button/index.tsx b/manager-dashboard/app/components/Button/index.tsx
index dad831ead..416c24e90 100644
--- a/manager-dashboard/app/components/Button/index.tsx
+++ b/manager-dashboard/app/components/Button/index.tsx
@@ -13,7 +13,7 @@ export type ButtonVariant = (
     | 'transparent'
 );
 
-export interface Props<N> extends RawButtonProps<N> {
+export interface ButtonProps<N> extends RawButtonProps<N> {
     /**
     * Variant of the button
     */
@@ -57,7 +57,7 @@ export interface Props<N> extends RawButtonProps<N> {
 type ButtonFeatureKeys = 'variant' | 'className' | 'actionsClassName' | 'iconsClassName' | 'childrenClassName' | 'children' | 'icons' | 'actions' | 'disabled';
 
 export function useButtonFeatures(
-    props: Pick<Props<string>, ButtonFeatureKeys>,
+    props: Pick<ButtonProps<string>, ButtonFeatureKeys>,
 ) {
     const {
         variant = 'default',
@@ -111,7 +111,7 @@ export function useButtonFeatures(
 /**
  * Basic button component
  */
-function Button<N>(props: Props<N>) {
+function Button<N>(props: ButtonProps<N>) {
     const {
         variant,
         className,
diff --git a/manager-dashboard/app/components/Button/styles.css b/manager-dashboard/app/components/Button/styles.css
index 5bd4987a7..2670bc56d 100644
--- a/manager-dashboard/app/components/Button/styles.css
+++ b/manager-dashboard/app/components/Button/styles.css
@@ -4,6 +4,7 @@
     border: var(--width-separator-thin) solid rgba(0, 0, 0, 0.3);
     border-radius: var(--radius-button-border);
     padding: var(--spacing-small) var(--spacing-medium);
+    width: fit-content;
     color: rgba(0, 0, 0, 0.8);
     gap: var(--spacing-small);
 
diff --git a/manager-dashboard/app/components/EmptyMessage/index.tsx b/manager-dashboard/app/components/EmptyMessage/index.tsx
new file mode 100644
index 000000000..2c45d633b
--- /dev/null
+++ b/manager-dashboard/app/components/EmptyMessage/index.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import styles from './styles.css';
+
+interface Props {
+    title: string;
+    description: string;
+}
+
+function EmptyMessage(props: Props) {
+    const {
+        title,
+        description,
+    } = props;
+
+    return (
+        <div className={styles.emptyMessage}>
+            <div className={styles.emptyMessageTitle}>
+                {title}
+            </div>
+            <div className={styles.emptyMessageDescription}>
+                {description}
+            </div>
+        </div>
+    );
+}
+
+export default EmptyMessage;
diff --git a/manager-dashboard/app/components/EmptyMessage/styles.css b/manager-dashboard/app/components/EmptyMessage/styles.css
new file mode 100644
index 000000000..0b0e979e0
--- /dev/null
+++ b/manager-dashboard/app/components/EmptyMessage/styles.css
@@ -0,0 +1,19 @@
+.empty-message {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--spacing-small);
+    padding: var(--spacing-extra-large);
+    color: var(--color-text-gray);
+
+    .empty-message-title {
+        font-size: var(--font-size-large);
+        font-weight: var(--font-weight-bold);
+    }
+
+    .empty-message-description {
+        font-size: var(--font-size-medium);
+        font-weight: var(--font-weight-medium);
+    }
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/components/ExpandableContainer/index.tsx b/manager-dashboard/app/components/ExpandableContainer/index.tsx
new file mode 100644
index 000000000..c94b8784b
--- /dev/null
+++ b/manager-dashboard/app/components/ExpandableContainer/index.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
+import { _cs } from '@togglecorp/fujs';
+
+import Button from '#components/Button';
+
+import styles from './styles.css';
+
+interface Props {
+    icons?: React.ReactNode;
+    header?: React.ReactNode;
+    actions?: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
+    openByDefault?: boolean;
+}
+
+function ExpandableContainer(props: Props) {
+    const {
+        children,
+        className,
+        icons,
+        header,
+        actions,
+        openByDefault = false,
+    } = props;
+
+    const [isExpanded, setIsExpanded] = React.useState(openByDefault);
+
+    return (
+        <div
+            className={_cs(
+                styles.expandableContainer,
+                isExpanded && styles.expanded,
+                className,
+            )}
+        >
+            <div className={styles.headerContainer}>
+                {icons && (
+                    <div className={styles.icons}>
+                        {icons}
+                    </div>
+                )}
+                <div className={styles.header}>
+                    {header}
+                </div>
+                <div className={styles.actions}>
+                    {actions}
+                    <Button
+                        name={!isExpanded}
+                        onClick={setIsExpanded}
+                        variant="action"
+                        title={isExpanded ? 'Collapse' : 'Expand'}
+                    >
+                        {isExpanded ? (
+                            <IoIosArrowUp />
+                        ) : (
+                            <IoIosArrowDown />
+                        )}
+                    </Button>
+                </div>
+            </div>
+            {isExpanded && (
+                <div className={styles.children}>
+                    {children}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default ExpandableContainer;
diff --git a/manager-dashboard/app/components/ExpandableContainer/styles.css b/manager-dashboard/app/components/ExpandableContainer/styles.css
new file mode 100644
index 000000000..bab691f46
--- /dev/null
+++ b/manager-dashboard/app/components/ExpandableContainer/styles.css
@@ -0,0 +1,53 @@
+.expandable-container {
+    border-radius: var(--radius-card-border);
+    color: inherit;
+
+    .header-container {
+        display: flex;
+        border: var(--width-separator-thin) solid var(--color-separator);
+        border-top-left-radius: var(--radius-card-border);
+        border-top-right-radius: var(--radius-card-border);
+        background-color: var(--color-background-accent-hint);
+        padding: var(--spacing-medium);
+
+        .header {
+            flex-grow: 1;
+            font-size: var(--font-size-large);
+        }
+
+        .icons {
+            display: flex;
+            gap: var(--spacing-medium);
+            flex-shrink: 0;
+
+            >* {
+                font-size: var(--font-size-large);
+            }
+        }
+
+        .actions {
+            display: flex;
+            gap: var(--spacing-medium);
+            flex-shrink: 0;
+
+            >* {
+                font-size: var(--font-size-large);
+            }
+        }
+    }
+
+    .children {
+        border: var(--width-separator-thin) solid var(--color-separator);
+        border-top: 0;
+        border-bottom-left-radius: var(--radius-card-border);
+        border-bottom-right-radius: var(--radius-card-border);
+        padding: var(--spacing-medium);
+    }
+
+    &:not(.expanded) {
+        .header-container {
+            border-bottom-left-radius: var(--radius-card-border);
+            border-bottom-right-radius: var(--radius-card-border);
+        }
+    }
+}
diff --git a/manager-dashboard/app/components/FileInput/index.tsx b/manager-dashboard/app/components/FileInput/index.tsx
index ca4b975bd..207c9f31b 100644
--- a/manager-dashboard/app/components/FileInput/index.tsx
+++ b/manager-dashboard/app/components/FileInput/index.tsx
@@ -8,60 +8,10 @@ import { MdAttachFile } from 'react-icons/md';
 import { useButtonFeatures } from '#components/Button';
 import RawInput from '#components/RawInput';
 import InputContainer, { Props as InputContainerProps } from '#components/InputContainer';
+import Preview from '#components/Preview';
 
 import styles from './styles.css';
 
-interface PreviewProps {
-    file: File | null | undefined;
-    className?: string;
-}
-
-function Preview(props: PreviewProps) {
-    const {
-        file,
-        className,
-    } = props;
-
-    const isPreviewable = file?.name?.match(/.(jpg|jpeg|png|gif)$/i) ?? false;
-    const [imageUrl, setImageUrl] = React.useState<string>();
-
-    React.useEffect(() => {
-        if (!file) {
-            return undefined;
-        }
-
-        // FIXME: use async methods
-        const fileReader = new FileReader();
-
-        const handleFileLoad = () => {
-            setImageUrl(String(fileReader.result) ?? undefined);
-        };
-
-        fileReader.addEventListener('load', handleFileLoad);
-        fileReader.readAsDataURL(file);
-
-        return () => {
-            fileReader.removeEventListener('load', handleFileLoad);
-        };
-    }, [file]);
-
-    if (!isPreviewable) {
-        return (
-            <div className={_cs(styles.noPreview, className)}>
-                Preview not available
-            </div>
-        );
-    }
-
-    return (
-        <img
-            className={_cs(styles.preview, className)}
-            alt={file?.name}
-            src={imageUrl}
-        />
-    );
-}
-
 export interface Props<Name> extends Omit<InputContainerProps, 'input'> {
     value: File | undefined | null;
     name: Name;
@@ -104,7 +54,7 @@ function FileInput<Name>(props: Props<Name>) {
                 Select file
             </>
         ),
-        variant: 'action',
+        variant: 'secondary',
         className: styles.label,
         childrenClassName: styles.content,
     });
@@ -170,7 +120,6 @@ function FileInput<Name>(props: Props<Name>) {
                     {description}
                     {showPreview && (
                         <Preview
-                            className={styles.preview}
                             file={value}
                         />
                     )}
@@ -189,6 +138,7 @@ function FileInput<Name>(props: Props<Name>) {
                         name={name}
                         onChange={handleChange}
                         accept={accept}
+                        disabled={disabled}
                     />
                 </>
             )}
diff --git a/manager-dashboard/app/components/FileInput/styles.css b/manager-dashboard/app/components/FileInput/styles.css
index f9102b3b0..f590c0854 100644
--- a/manager-dashboard/app/components/FileInput/styles.css
+++ b/manager-dashboard/app/components/FileInput/styles.css
@@ -31,23 +31,3 @@
     }
 }
 
-.no-preview {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--spacing-medium);
-    width: 100%;
-    max-width: 30rem;
-    height: 20rem;
-    color: var(--color-text-watermark);
-    font-size: var(--font-size-large);
-}
-
-.preview {
-    background-color: var(--color-input-background);
-    width: 100%;
-    max-width: 30rem;
-    height: 20rem;
-    object-fit: contain;
-    object-position: center center;
-}
diff --git a/manager-dashboard/app/components/GeoJsonFileInput/index.tsx b/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
index acc981f40..cbb9bf731 100644
--- a/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonFileInput/index.tsx
@@ -53,6 +53,7 @@ interface Props<N> extends Omit<FileInputProps<N>, 'value' | 'onChange' | 'accep
     maxFileSize?: number;
     value: GeoJSON.GeoJSON | undefined | null;
     onChange: (newValue: GeoJSON.GeoJSON | undefined, name: N) => void;
+    preview?: boolean;
 }
 
 function GeoJsonFileInput<N>(props: Props<N>) {
@@ -63,6 +64,7 @@ function GeoJsonFileInput<N>(props: Props<N>) {
         maxFileSize = DEFAULT_MAX_FILE_SIZE,
         onChange,
         name,
+        preview = false,
         ...otherProps
     } = props;
 
@@ -109,6 +111,7 @@ function GeoJsonFileInput<N>(props: Props<N>) {
                     }
 
                     const parsedGeoJSON = parseGeoJSON(text);
+
                     if (!parsedGeoJSON.errored) {
                         fileAsJson = parsedGeoJSON.value;
                     } else {
@@ -143,9 +146,11 @@ function GeoJsonFileInput<N>(props: Props<N>) {
             description={(
                 <>
                     {description}
-                    <GeoJsonPreview
-                        geoJson={value ?? undefined}
-                    />
+                    {preview && (
+                        <GeoJsonPreview
+                            geoJson={value ?? undefined}
+                        />
+                    )}
                 </>
             )}
             onChange={handleChange}
diff --git a/manager-dashboard/app/components/GeoJsonPreview/index.tsx b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
index 59d7a3599..b881e96e9 100644
--- a/manager-dashboard/app/components/GeoJsonPreview/index.tsx
+++ b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
@@ -2,22 +2,62 @@ import React from 'react';
 import {
     map as createMap,
     Map,
-    tileLayer,
     geoJSON,
+    TileLayer,
+    Coords,
+    StyleFunction,
 } from 'leaflet';
 import { _cs } from '@togglecorp/fujs';
 
 import styles from './styles.css';
 
+const toQuadKey = (x: number, y: number, z: number) => {
+    let index = '';
+    for (let i = z; i > 0; i -= 1) {
+        let b = 0;
+        // eslint-disable-next-line no-bitwise
+        const mask = 1 << (i - 1);
+        // eslint-disable-next-line no-bitwise
+        if ((x & mask) !== 0) {
+            b += 1;
+        }
+        // eslint-disable-next-line no-bitwise
+        if ((y & mask) !== 0) {
+            b += 2;
+        }
+        index += b.toString();
+    }
+    return index;
+};
+
+const BingTileLayer = TileLayer.extend({
+    getTileUrl(coords: Coords) {
+        const quadkey = toQuadKey(coords.x, coords.y, coords.z);
+        const { subdomains } = this.options;
+
+        // eslint-disable-next-line no-underscore-dangle
+        const url = this._url
+            .replace('{subdomain}', subdomains[(coords.x + coords.y) % subdomains.length])
+            .replace('{quad_key}', quadkey);
+
+        return url;
+    },
+    toQuadKey,
+});
+
 interface Props {
     className?: string;
     geoJson: GeoJSON.GeoJSON | undefined;
+    url?: string | undefined;
+    previewStyle?: StyleFunction;
 }
 
 function GeoJsonPreview(props: Props) {
     const {
         className,
         geoJson,
+        url = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+        previewStyle,
     } = props;
 
     const mapRef = React.useRef<Map>();
@@ -26,7 +66,11 @@ function GeoJsonPreview(props: Props) {
     React.useEffect(
         () => {
             if (mapContainerRef.current && !mapRef.current) {
-                mapRef.current = createMap(mapContainerRef.current);
+                mapRef.current = createMap(mapContainerRef.current, {
+                    zoomSnap: 0,
+                    scrollWheelZoom: false,
+                    zoomControl: false,
+                });
             }
 
             if (mapRef.current) {
@@ -36,11 +80,19 @@ function GeoJsonPreview(props: Props) {
                     1,
                 );
 
-                const layer = tileLayer(
-                    'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+                const finalUrl = url;
+                const quadKeyUrl = finalUrl.indexOf('{quad_key}') !== -1;
+                const Layer = quadKeyUrl
+                    ? BingTileLayer
+                    : TileLayer;
+
+                const layer = new Layer(
+                    finalUrl,
                     {
-                        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-                        subdomains: ['a', 'b', 'c'],
+                        // NOTE: we have a limit of 22
+                        maxZoom: 22,
+                        // attribution: '',
+                        // subdomains: ['a', 'b', 'c'],
                     },
                 );
 
@@ -55,7 +107,7 @@ function GeoJsonPreview(props: Props) {
                 }
             };
         },
-        [],
+        [url],
     );
 
     React.useEffect(
@@ -69,10 +121,10 @@ function GeoJsonPreview(props: Props) {
                 return undefined;
             }
 
-            const newGeoJson = geoJSON();
+            const newGeoJson = geoJSON(geoJson, {
+                style: previewStyle,
+            });
             newGeoJson.addTo(map);
-
-            newGeoJson.addData(geoJson);
             const bounds = newGeoJson.getBounds();
 
             if (bounds.isValid()) {
@@ -84,7 +136,12 @@ function GeoJsonPreview(props: Props) {
                 newGeoJson.remove();
             };
         },
-        [geoJson],
+        // NOTE: adding url as dependency as url will re-create the map
+        [
+            geoJson,
+            url,
+            previewStyle,
+        ],
     );
 
     return (
diff --git a/manager-dashboard/app/components/Heading/index.tsx b/manager-dashboard/app/components/Heading/index.tsx
new file mode 100644
index 000000000..4387ed17e
--- /dev/null
+++ b/manager-dashboard/app/components/Heading/index.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.css';
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5;
+
+const headingLevelToClassName: Record<HeadingLevel, string> = {
+    1: styles.level1,
+    2: styles.level2,
+    3: styles.level3,
+    4: styles.level4,
+    5: styles.level5,
+};
+
+export interface Props {
+    className?: string;
+    level?: HeadingLevel;
+    children: React.ReactNode;
+}
+
+function Heading(props: Props) {
+    const {
+        className,
+        level = 3,
+        children,
+    } = props;
+
+    const levelStyle = headingLevelToClassName[level];
+    const HeadingTag = `h${level}` as React.ElementType;
+
+    return (
+        <HeadingTag
+            className={_cs(
+                styles.heading,
+                levelStyle,
+                className,
+            )}
+        >
+            {children}
+        </HeadingTag>
+    );
+}
+
+export default Heading;
diff --git a/manager-dashboard/app/components/Heading/styles.css b/manager-dashboard/app/components/Heading/styles.css
new file mode 100644
index 000000000..81a4bf68b
--- /dev/null
+++ b/manager-dashboard/app/components/Heading/styles.css
@@ -0,0 +1,33 @@
+.heading {
+    --font-size: var(--font-size-extra-large);
+    --line-height: var(--line-height-snug);
+    display: flex;
+    margin: 0;
+    font-size: var(--font-size);
+    font-weight: var(--font-weight-semibold);
+
+    &.level1 {
+        --font-size: var(--font-size-super-large);
+        --line-height: var(--line-height-none);
+    }
+
+    &.level2 {
+        --font-size: var(--font-size-extra-large);
+        --line-height: var(--line-height-tight);
+    }
+
+    &.level3 {
+        --font-size: var(--font-size-large);
+        --line-height: var(--line-height-snug);
+    }
+
+    &.level4 {
+        --font-size: var(--font-size-medium);
+        --line-height: var(--line-height-normal);
+    }
+
+    &.level5 {
+        --font-size: var(--font-size-small);
+        --line-height: var(--line-height-normal);
+    }
+}
diff --git a/manager-dashboard/app/components/InputSection/index.tsx b/manager-dashboard/app/components/InputSection/index.tsx
index dd63e0fd4..56f874ed8 100644
--- a/manager-dashboard/app/components/InputSection/index.tsx
+++ b/manager-dashboard/app/components/InputSection/index.tsx
@@ -4,9 +4,11 @@ import { _cs } from '@togglecorp/fujs';
 import styles from './styles.css';
 
 interface Props {
+    actions?: React.ReactNode;
     className?: string;
     heading?: React.ReactNode;
     children?: React.ReactNode;
+    contentClassName?: string;
 }
 
 function InputSection(props: Props) {
@@ -14,16 +16,23 @@ function InputSection(props: Props) {
         className,
         heading,
         children,
+        contentClassName,
+        actions,
     } = props;
 
     return (
         <div className={_cs(styles.inputSection, className)}>
             <div className={styles.header}>
-                <h2>
+                <h2 className={styles.heading}>
                     {heading}
                 </h2>
+                {actions && (
+                    <div className={styles.actions}>
+                        {actions}
+                    </div>
+                )}
             </div>
-            <div className={styles.content}>
+            <div className={_cs(styles.content, contentClassName)}>
                 {children}
             </div>
         </div>
diff --git a/manager-dashboard/app/components/InputSection/styles.css b/manager-dashboard/app/components/InputSection/styles.css
index ee278d18f..0c0012c77 100644
--- a/manager-dashboard/app/components/InputSection/styles.css
+++ b/manager-dashboard/app/components/InputSection/styles.css
@@ -1,18 +1,32 @@
 .input-section {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-medium);
+    gap: var(--spacing-small);
 
     .header {
+        display: flex;
+        gap: var(--spacing-medium);
+        align-items: flex-end;
         padding: 0;
+
+        .heading {
+            flex-grow: 1;
+        }
+
+        .actions {
+            display: flex;
+            gap: var(--spacing-small);
+            align-items: flex-end;
+        }
     }
 
     .content {
         display: flex;
         flex-direction: column;
-        border-radius: var(--radius-card);
+        border-radius: var(--radius-card-border);
+        gap: var(--spacing-extra-large);
         background-color: var(--color-foreground);
         padding: var(--spacing-large);
-        gap: var(--spacing-extra-large);
+        min-height: 14rem;
     }
 }
diff --git a/manager-dashboard/app/components/MarkdownEditor/index.tsx b/manager-dashboard/app/components/MarkdownEditor/index.tsx
new file mode 100644
index 000000000..684ef68e8
--- /dev/null
+++ b/manager-dashboard/app/components/MarkdownEditor/index.tsx
@@ -0,0 +1,100 @@
+import React, { useCallback } from 'react';
+import Markdown from 'react-mde';
+
+import InputContainer, { Props as InputContainerProps } from '../InputContainer';
+import MarkdownPreview from '../MarkdownPreview';
+
+import styles from './styles.css';
+
+interface MarkdownEditorProps<NAME extends string> {
+    name: NAME;
+    className?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    value: string | null | undefined;
+    onChange?:(newVal: string | undefined, name: NAME) => void;
+}
+
+export type Props<NAME extends string> = Omit<InputContainerProps, 'input'> & MarkdownEditorProps<NAME>;
+
+function MarkdownEditor<NAME extends string>(props: Props<NAME>) {
+    const {
+        name,
+        value,
+        onChange,
+        actions,
+        actionsContainerClassName,
+        className,
+        disabled,
+        error,
+        errorContainerClassName,
+        hint,
+        hintContainerClassName,
+        icons,
+        iconsContainerClassName,
+        inputSectionClassName,
+        label,
+        labelContainerClassName,
+        readOnly,
+    } = props;
+
+    const [selectedTab, setSelectedTab] = React.useState<'write' | 'preview'>('write');
+    const handleValueChange = useCallback(
+        (newVal) => {
+            if (!disabled && !readOnly && onChange) {
+                onChange(newVal, name);
+            }
+        },
+        [name, onChange, disabled, readOnly],
+    );
+
+    const generateMarkdownPreview = useCallback((markdown: string | undefined) => (
+        Promise.resolve(
+            <MarkdownPreview
+                markdown={markdown ?? ''}
+            />,
+        )
+    ), []);
+
+    return (
+        <InputContainer
+            actionsContainerClassName={actionsContainerClassName}
+            className={className}
+            disabled={disabled}
+            error={error}
+            errorContainerClassName={errorContainerClassName}
+            hint={hint}
+            hintContainerClassName={hintContainerClassName}
+            icons={icons}
+            iconsContainerClassName={iconsContainerClassName}
+            inputSectionClassName={inputSectionClassName}
+            // inputContainerClassName={styles.input}
+            label={label}
+            labelContainerClassName={labelContainerClassName}
+            readOnly={readOnly}
+            actions={actions}
+            input={!readOnly ? (
+                <Markdown
+                    value={value ?? ''}
+                    selectedTab={selectedTab}
+                    onTabChange={setSelectedTab}
+                    onChange={handleValueChange}
+                    generateMarkdownPreview={generateMarkdownPreview}
+                    readOnly={disabled}
+                    disablePreview
+                    classes={{
+                        reactMde: styles.reactMde,
+                        textArea: styles.textArea,
+                        toolbar: styles.toolbar,
+                    }}
+                />
+            ) : (
+                <MarkdownPreview
+                    markdown={value || '-'}
+                />
+            )}
+        />
+    );
+}
+
+export default MarkdownEditor;
diff --git a/manager-dashboard/app/components/MarkdownEditor/styles.css b/manager-dashboard/app/components/MarkdownEditor/styles.css
new file mode 100644
index 000000000..617a4965f
--- /dev/null
+++ b/manager-dashboard/app/components/MarkdownEditor/styles.css
@@ -0,0 +1,12 @@
+.react-mde {
+    border: 0;
+    border-radius: 0;
+}
+
+.text-area {
+    background-color: transparent;
+}
+
+.toolbar {
+    background-color: transparent;
+}
diff --git a/manager-dashboard/app/components/MarkdownPreview/index.tsx b/manager-dashboard/app/components/MarkdownPreview/index.tsx
new file mode 100644
index 000000000..efb2bf9dd
--- /dev/null
+++ b/manager-dashboard/app/components/MarkdownPreview/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import MarkdownView, { MarkdownViewProps } from 'react-showdown';
+
+export const markdownOptions: MarkdownViewProps['options'] = {
+    simpleLineBreaks: true,
+    headerLevelStart: 3,
+    simplifiedAutoLink: true,
+    openLinksInNewWindow: true,
+    backslashEscapesHTMLTags: true,
+    literalMidWordUnderscores: true,
+    strikethrough: true,
+    tables: true,
+    tasklists: true,
+};
+
+export default function MarkdownPreview(props: MarkdownViewProps) {
+    const {
+        options: markdownOptionsFromProps,
+        ...otherProps
+    } = props;
+    return (
+        <MarkdownView
+            {...otherProps}
+            options={markdownOptionsFromProps ?? markdownOptions}
+        />
+    );
+}
diff --git a/manager-dashboard/app/components/MobilePreview/index.tsx b/manager-dashboard/app/components/MobilePreview/index.tsx
new file mode 100644
index 000000000..7a2e1da65
--- /dev/null
+++ b/manager-dashboard/app/components/MobilePreview/index.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { IoArrowBack, IoInformationCircleOutline } from 'react-icons/io5';
+import { _cs } from '@togglecorp/fujs';
+
+import Heading from '#components/Heading';
+
+import styles from './styles.css';
+
+interface Props {
+    className?: string;
+    headingLabel?: React.ReactNode;
+    heading?: React.ReactNode;
+    actions?: React.ReactNode;
+    children?: React.ReactNode;
+    popupTitle?: React.ReactNode;
+    popupDescription?: React.ReactNode;
+    popupIcons?: React.ReactNode;
+    contentClassName?: string;
+    popupClassName?: string;
+    popupVerticalPosition?: 'top' | 'center';
+}
+
+function MobilePreview(props: Props) {
+    const {
+        className,
+        headingLabel,
+        heading,
+        actions,
+        children,
+        popupTitle,
+        popupDescription,
+        popupIcons,
+        contentClassName,
+        popupClassName,
+        popupVerticalPosition,
+    } = props;
+
+    return (
+        <div className={_cs(styles.mobilePreview, className)}>
+            <div className={styles.header}>
+                <div className={styles.icons}>
+                    <IoArrowBack className={styles.backIcon} />
+                </div>
+                <Heading
+                    className={styles.heading}
+                    level={5}
+                >
+                    <div className={styles.label}>
+                        {headingLabel}
+                    </div>
+                    <div>
+                        {heading}
+                    </div>
+                </Heading>
+                <div className={styles.actions}>
+                    {actions}
+                    <IoInformationCircleOutline className={styles.infoIcon} />
+                </div>
+            </div>
+            <div className={styles.contentContainer}>
+                {(popupTitle || popupDescription || popupIcons) && (
+                    <div
+                        className={_cs(
+                            styles.popup,
+                            popupClassName,
+                            popupVerticalPosition === 'center' && styles.verticallyCentered,
+                        )}
+                    >
+                        <div className={styles.details}>
+                            <div className={styles.popupTitle}>
+                                {popupTitle}
+                            </div>
+                            <div>
+                                {popupDescription}
+                            </div>
+                        </div>
+                        <div className={styles.icons}>
+                            {popupIcons}
+                        </div>
+                    </div>
+                )}
+                <div className={_cs(styles.content, contentClassName)}>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default MobilePreview;
diff --git a/manager-dashboard/app/components/MobilePreview/styles.css b/manager-dashboard/app/components/MobilePreview/styles.css
new file mode 100644
index 000000000..dc57ad3b5
--- /dev/null
+++ b/manager-dashboard/app/components/MobilePreview/styles.css
@@ -0,0 +1,91 @@
+.mobile-preview {
+    display: flex;
+    flex-direction: column;
+    border: var(--width-separator-mobile-preview) solid var(--color-black);
+    border-radius: var(--radius-card-border);
+    background-color: var(--color-black);
+    padding: var(--spacing-small) 0;
+    width: calc(var(--width-mobile-preview) + var(--width-separator-mobile-preview));
+    height: var(--height-mobile-preview);
+    color: var(--color-text-on-dark);
+
+    .header {
+        display: flex;
+        flex-shrink: 0;
+        background-color: var(--color-primary);
+        padding: var(--spacing-medium);
+        gap: var(--spacing-medium);
+
+        .heading {
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            text-align: center;
+
+            .label {
+                font-weight: var(--font-weight-medium);
+            }
+        }
+
+        .icons {
+            .back-icon {
+                font-size: var(--font-size-super-large);
+            }
+        }
+
+        .actions {
+            flex-shrink: 0;
+
+            .info-icon {
+                font-size: var(--font-size-extra-large);
+            }
+        }
+    }
+
+    .content-container {
+        display: flex;
+        position: relative;
+        flex-direction: column;
+        flex-grow: 1;
+        z-index: 0;
+        background-color: var(--color-primary);
+        padding: var(--spacing-medium);
+        overflow: auto;
+
+        .content {
+            flex-grow: 1;
+            overflow: auto;
+        }
+
+        .popup {
+            display: flex;
+            position: absolute;
+            top: var(--spacing-medium);
+            left: var(--spacing-small);
+            z-index: 1;
+            border-radius: var(--radius-card-border);
+            background-color: var(--color-foreground);
+            padding: var(--spacing-small) var(--spacing-medium);
+            width: calc(100% - 2 * var(--spacing-small));
+            color: var(--color-text);
+
+            &.vertically-centered {
+                top: 50%;
+                transform: translateY(-50%);
+            }
+
+            .details {
+                flex-grow: 1;
+
+                .popup-title {
+                    font-weight: var(--font-weight-bold);
+                }
+            }
+
+            .icons {
+                flex-shrink: 0;
+                font-size: var(--font-size-super-large);
+            }
+        }
+    }
+}
diff --git a/manager-dashboard/app/components/NonFieldError/index.tsx b/manager-dashboard/app/components/NonFieldError/index.tsx
new file mode 100644
index 000000000..aa91856d3
--- /dev/null
+++ b/manager-dashboard/app/components/NonFieldError/index.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { _cs, isNotDefined } from '@togglecorp/fujs';
+import {
+    Error,
+    nonFieldError,
+    getErrorObject,
+} from '@togglecorp/toggle-form';
+
+import styles from './styles.css';
+
+interface Props<T> {
+    className?: string;
+    error: Error<T>;
+}
+
+function NonFieldError<T>(props: Props<T>) {
+    const {
+        className,
+        error,
+    } = props;
+
+    if (!error) {
+        return null;
+    }
+
+    const errorMessage = getErrorObject(error)?.[nonFieldError];
+
+    if (isNotDefined(errorMessage)) {
+        return null;
+    }
+
+    return (
+        <div className={_cs(styles.nonFieldError, className)}>
+            {errorMessage}
+        </div>
+    );
+}
+
+export default NonFieldError;
diff --git a/manager-dashboard/app/components/NonFieldError/styles.css b/manager-dashboard/app/components/NonFieldError/styles.css
new file mode 100644
index 000000000..cc6d8bdd4
--- /dev/null
+++ b/manager-dashboard/app/components/NonFieldError/styles.css
@@ -0,0 +1,3 @@
+.non-field-error {
+    color: var(--color-danger);
+}
diff --git a/manager-dashboard/app/components/PopupButton/index.tsx b/manager-dashboard/app/components/PopupButton/index.tsx
new file mode 100644
index 000000000..a18359990
--- /dev/null
+++ b/manager-dashboard/app/components/PopupButton/index.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
+import { _cs } from '@togglecorp/fujs';
+
+import Button, { ButtonProps } from '#components/Button';
+import useBlurEffect from '#hooks/useBlurEffect';
+import Popup from '#components/Popup';
+
+import styles from './styles.css';
+
+export interface PopupButtonProps<NAME extends number | string | undefined> extends Omit<ButtonProps<NAME>, 'label'> {
+    popupClassName?: string;
+    popupContentClassName?: string;
+    label: React.ReactNode;
+    componentRef?: React.MutableRefObject<{
+        setPopupVisibility: React.Dispatch<React.SetStateAction<boolean>>;
+    } | null>;
+    persistent?: boolean;
+    arrowHidden?: boolean;
+    defaultShown?: boolean;
+}
+
+function PopupButton<NAME extends number | string | undefined>(props: PopupButtonProps<NAME>) {
+    const {
+        popupClassName,
+        popupContentClassName,
+        children,
+        label,
+        name,
+        actions,
+        componentRef,
+        arrowHidden,
+        persistent = false,
+        defaultShown,
+        ...otherProps
+    } = props;
+
+    const buttonRef = React.useRef<HTMLButtonElement>(null);
+    const popupRef = React.useRef<HTMLDivElement>(null);
+
+    const [popupShown, setPopupShown] = React.useState(defaultShown ?? false);
+
+    React.useEffect(
+        () => {
+            if (componentRef) {
+                componentRef.current = {
+                    setPopupVisibility: setPopupShown,
+                };
+            }
+        },
+        [componentRef],
+    );
+
+    useBlurEffect(
+        popupShown && !persistent,
+        setPopupShown,
+        popupRef,
+        buttonRef,
+    );
+
+    const handleShowPopup = React.useCallback(
+        () => {
+            setPopupShown((prevState) => !prevState);
+        },
+        [],
+    );
+
+    return (
+        <>
+            <Button
+                {...otherProps}
+                name={name}
+                elementRef={buttonRef}
+                onClick={handleShowPopup}
+                actions={(
+                    <>
+                        {actions}
+                        {!arrowHidden && (
+                            <>
+                                {popupShown ? <IoIosArrowUp /> : <IoIosArrowDown />}
+                            </>
+                        )}
+                    </>
+                )}
+            >
+                {label}
+            </Button>
+            {popupShown && (
+                <Popup
+                    elementRef={popupRef}
+                    parentRef={buttonRef}
+                    className={_cs(styles.popup, popupClassName)}
+                    contentClassName={_cs(styles.popupContent, popupContentClassName)}
+                >
+                    {children}
+                </Popup>
+            )}
+        </>
+    );
+}
+
+export default PopupButton;
diff --git a/manager-dashboard/app/components/PopupButton/styles.css b/manager-dashboard/app/components/PopupButton/styles.css
new file mode 100644
index 000000000..235f00864
--- /dev/null
+++ b/manager-dashboard/app/components/PopupButton/styles.css
@@ -0,0 +1,10 @@
+.popup {
+    padding-top: calc(var(--tui-spacing-large) - var(--tui-spacing-medium));
+    padding-bottom: calc(var(--tui-spacing-large) - var(--tui-spacing-medium));
+
+    .popup-content {
+        display: flex;
+        flex-direction: column;
+        max-width: max(50vw, 300px);
+    }
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/components/Preview/index.tsx b/manager-dashboard/app/components/Preview/index.tsx
new file mode 100644
index 000000000..897104a0a
--- /dev/null
+++ b/manager-dashboard/app/components/Preview/index.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.css';
+
+interface PreviewProps {
+    file: File | null | undefined;
+    className?: string;
+}
+
+function Preview(props: PreviewProps) {
+    const {
+        file,
+        className,
+    } = props;
+
+    const isPreviewable = file?.name?.match(/.(jpg|jpeg|png|gif)$/i) ?? false;
+    const [imageUrl, setImageUrl] = React.useState<string>();
+
+    React.useEffect(() => {
+        if (!file) {
+            return undefined;
+        }
+
+        // FIXME: use async methods
+        const fileReader = new FileReader();
+
+        const handleFileLoad = () => {
+            setImageUrl(String(fileReader.result) ?? undefined);
+        };
+
+        fileReader.addEventListener('load', handleFileLoad);
+        fileReader.readAsDataURL(file);
+
+        return () => {
+            fileReader.removeEventListener('load', handleFileLoad);
+        };
+    }, [file]);
+
+    if (!isPreviewable) {
+        return (
+            <div className={_cs(styles.noPreview, className)}>
+                Preview not available
+            </div>
+        );
+    }
+
+    return (
+        <img
+            className={_cs(styles.preview, className)}
+            alt={file?.name}
+            src={imageUrl}
+        />
+    );
+}
+
+export default Preview;
diff --git a/manager-dashboard/app/components/Preview/styles.css b/manager-dashboard/app/components/Preview/styles.css
new file mode 100644
index 000000000..08ae788b6
--- /dev/null
+++ b/manager-dashboard/app/components/Preview/styles.css
@@ -0,0 +1,21 @@
+.preview {
+    background-color: var(--color-input-background);
+    width: 100%;
+    max-width: 30rem;
+    height: 20rem;
+    object-fit: contain;
+    object-position: center center;
+}
+
+.no-preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--color-background);
+    padding: var(--spacing-medium);
+    width: 100%;
+    max-width: 30rem;
+    height: 10rem;
+    color: var(--color-text-watermark);
+    font-size: var(--font-size-large);
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/components/SelectInput/SearchSelectInput.tsx b/manager-dashboard/app/components/SelectInput/SearchSelectInput.tsx
index 70347658f..edb93e1f5 100644
--- a/manager-dashboard/app/components/SelectInput/SearchSelectInput.tsx
+++ b/manager-dashboard/app/components/SelectInput/SearchSelectInput.tsx
@@ -37,7 +37,6 @@ type OptionKey = string | number;
 export type SearchSelectInputProps<
     T extends OptionKey,
     K,
-    // eslint-disable-next-line @typescript-eslint/ban-types
     O extends object,
     P extends Def,
     OMISSION extends string,
@@ -87,7 +86,6 @@ const emptyList: unknown[] = [];
 function SearchSelectInput<
     T extends OptionKey,
     K extends string,
-    // eslint-disable-next-line @typescript-eslint/ban-types
     O extends object,
     P extends Def,
 >(
diff --git a/manager-dashboard/app/components/SelectInput/index.tsx b/manager-dashboard/app/components/SelectInput/index.tsx
index 0290ec96d..d5998c228 100644
--- a/manager-dashboard/app/components/SelectInput/index.tsx
+++ b/manager-dashboard/app/components/SelectInput/index.tsx
@@ -11,12 +11,10 @@ type Def = { containerClassName?: string };
 export type SelectInputProps<
     T extends OptionKey,
     K extends string,
-    // eslint-disable-next-line @typescript-eslint/ban-types
     O extends object,
     P extends Def,
 > = SearchSelectInputProps<T, K, O, P, 'onSearchValueChange' | 'searchOptions' | 'onShowDropdownChange' | 'totalOptionsCount'>;
 
-// eslint-disable-next-line @typescript-eslint/ban-types
 function SelectInput<T extends OptionKey, K extends string, O extends object, P extends Def>(
     props: SelectInputProps<T, K, O, P>,
 ) {
diff --git a/manager-dashboard/app/components/SelectInputContainer/index.tsx b/manager-dashboard/app/components/SelectInputContainer/index.tsx
index 9dd565627..794aab80b 100644
--- a/manager-dashboard/app/components/SelectInputContainer/index.tsx
+++ b/manager-dashboard/app/components/SelectInputContainer/index.tsx
@@ -92,7 +92,7 @@ export type SelectInputContainerProps<
 
 const emptyList: unknown[] = [];
 
-// eslint-disable-next-line @typescript-eslint/ban-types, max-len
+// eslint-disable-next-line max-len
 function SelectInputContainer<OK extends OptionKey, N extends string, O extends object, P extends ContentBaseProps>(
     props: SelectInputContainerProps<OK, N, O, P, never>,
 ) {
diff --git a/manager-dashboard/app/components/Tabs/index.tsx b/manager-dashboard/app/components/Tabs/index.tsx
deleted file mode 100644
index 7d31b31e1..000000000
--- a/manager-dashboard/app/components/Tabs/index.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import React from 'react';
-import { _cs } from '@togglecorp/fujs';
-import RawButton, { Props as RawButtonProps } from '../RawButton';
-
-import styles from './styles.css';
-
-type TabKey = string;
-
-export interface TabContextProps<T> {
-    activeTab: T;
-    setActiveTab: (key: T) => void;
-}
-
-const TabContext = React.createContext<TabContextProps<unknown>>({
-    activeTab: undefined,
-    setActiveTab: () => {
-        // eslint-disable-next-line no-console
-        console.warn('setActiveTab called before it was initialized');
-    },
-});
-
-export interface TabProps<T> extends Omit<RawButtonProps<T>, 'onClick'>{
-    name: T;
-}
-
-export function Tab<T>(props: TabProps<T>) {
-    const {
-        activeTab,
-        setActiveTab,
-    } = React.useContext(TabContext);
-
-    const {
-        className,
-        name,
-        ...otherProps
-    } = props;
-
-    const isActive = name === activeTab;
-
-    return (
-        <RawButton
-            className={_cs(
-                className,
-                styles.tab,
-                isActive && styles.active,
-            )}
-            onClick={setActiveTab}
-            name={name}
-            role="tab"
-            {...otherProps}
-        />
-    );
-}
-
-export interface TabListProps extends React.HTMLProps<HTMLDivElement> {
-    children: React.ReactNode;
-    className?: string;
-}
-
-export function TabList(props: TabListProps) {
-    const {
-        children,
-        className,
-        ...otherProps
-    } = props;
-
-    return (
-        <div
-            {...otherProps}
-            className={_cs(className, styles.tabList)}
-            role="tablist"
-        >
-            { children }
-        </div>
-    );
-}
-
-export interface TabPanelProps extends React.HTMLProps<HTMLDivElement> {
-    name: TabKey;
-    elementRef?: React.Ref<HTMLDivElement>;
-}
-
-export function TabPanel(props: TabPanelProps) {
-    const { activeTab } = React.useContext(TabContext);
-
-    const {
-        name,
-        elementRef,
-        ...otherProps
-    } = props;
-
-    if (name !== activeTab) {
-        return null;
-    }
-
-    return (
-        <div
-            {...otherProps}
-            role="tabpanel"
-            ref={elementRef}
-        />
-    );
-}
-
-export interface Props<T> {
-    children: React.ReactNode;
-    value: T;
-    onChange: (key: T) => void;
-}
-
-export function Tabs<T>(props: Props<T>) {
-    const {
-        children,
-        value,
-        onChange,
-    } = props;
-
-    const contextValue = React.useMemo(() => ({
-        // Note: following cast is required since we do not have any other method
-        // to provide template in the context type
-        activeTab: value as unknown as T,
-        setActiveTab: onChange as unknown as (key: T) => void,
-    }), [value, onChange]);
-
-    return (
-        <TabContext.Provider value={contextValue}>
-            { children }
-        </TabContext.Provider>
-    );
-}
-
-export default Tabs;
diff --git a/manager-dashboard/app/components/Tabs/styles.css b/manager-dashboard/app/components/Tabs/styles.css
deleted file mode 100644
index 947908cdd..000000000
--- a/manager-dashboard/app/components/Tabs/styles.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.tab {
-    text-align: left;
-
-    &.active {
-        color: var(--color-accent);
-    }
-}
-
-.tab-list {
-    display: flex;
-    gap: var(--spacing-large);
-    padding: var(--spacing-medium);
-}
diff --git a/manager-dashboard/app/components/TileServerInput/index.tsx b/manager-dashboard/app/components/TileServerInput/index.tsx
index 5038a3c8f..ef5a7a566 100644
--- a/manager-dashboard/app/components/TileServerInput/index.tsx
+++ b/manager-dashboard/app/components/TileServerInput/index.tsx
@@ -7,7 +7,8 @@ import {
     SetValueArg,
     ObjectSchema,
     requiredStringCondition,
-    requiredCondition,
+    addCondition,
+    nullValue,
 } from '@togglecorp/toggle-form';
 
 import TextInput from '#components/TextInput';
@@ -30,7 +31,7 @@ export const TILE_SERVER_BING = 'bing';
 const TILE_SERVER_MAPBOX = 'mapbox';
 const TILE_SERVER_MAXAR_STANDARD = 'maxar_standard';
 const TILE_SERVER_MAXAR_PREMIUM = 'maxar_premium';
-const TILE_SERVER_ESRI = 'esri';
+export const TILE_SERVER_ESRI = 'esri';
 const TILE_SERVER_ESRI_BETA = 'esri_beta';
 const TILE_SERVER_CUSTOM = 'custom';
 
@@ -77,26 +78,53 @@ function imageryUrlCondition(value: string | null | undefined) {
     return 'Imagery url must contain {x}, {y} (or {-y}) & {z} placeholders or {quad_key} placeholder.';
 }
 
+const MD_TEXT_MAX_LENGTH = 1000;
+
 type TileServerInputType = PartialForm<TileServer>;
 type TileServerSchema = ObjectSchema<PartialForm<TileServerInputType>, unknown>;
 type TileServerFields = ReturnType<TileServerSchema['fields']>;
 export function tileServerFieldsSchema(value: TileServerInputType | undefined): TileServerFields {
-    const basicFields: TileServerFields = {
-        name: [requiredStringCondition, getNoMoreThanNCharacterCondition(1000)],
-        credits: [requiredStringCondition, getNoMoreThanNCharacterCondition(1000)],
+    let basicFields: TileServerFields = {
+        name: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+            validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
+        },
+        credits: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+            validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
+        },
     };
-
-    if (value?.name === TILE_SERVER_CUSTOM) {
-        return {
-            ...basicFields,
-            url: [
-                requiredStringCondition,
-                imageryUrlCondition,
-                getNoMoreThanNCharacterCondition(1000),
-            ],
-            wmtsLayerName: [requiredCondition, getNoMoreThanNCharacterCondition(1000)],
-        };
-    }
+    basicFields = addCondition(
+        basicFields,
+        value,
+        ['name'],
+        ['url', 'wmtsLayerName'],
+        (tileValues) => {
+            if (tileValues?.name === TILE_SERVER_CUSTOM) {
+                return {
+                    url: {
+                        required: true,
+                        requiredValidation: requiredStringCondition,
+                        validations: [
+                            getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH),
+                            imageryUrlCondition,
+                        ],
+                    },
+                    wmtsLayerName: {
+                        required: true,
+                        requiredValidation: requiredStringCondition,
+                        validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
+                    },
+                };
+            }
+            return {
+                url: { forceValue: nullValue },
+                wmtsLayerName: { forceValue: nullValue },
+            };
+        },
+    );
     return basicFields;
 }
 
diff --git a/manager-dashboard/app/resources/icons/1_Tap_Black.png b/manager-dashboard/app/resources/icons/1_Tap_Black.png
new file mode 100644
index 000000000..471cc49c6
Binary files /dev/null and b/manager-dashboard/app/resources/icons/1_Tap_Black.png differ
diff --git a/manager-dashboard/app/resources/icons/2_Tap_Black.png b/manager-dashboard/app/resources/icons/2_Tap_Black.png
new file mode 100644
index 000000000..689c6fcb0
Binary files /dev/null and b/manager-dashboard/app/resources/icons/2_Tap_Black.png differ
diff --git a/manager-dashboard/app/resources/icons/3_Tap_Black.png b/manager-dashboard/app/resources/icons/3_Tap_Black.png
new file mode 100644
index 000000000..19b33d3ab
Binary files /dev/null and b/manager-dashboard/app/resources/icons/3_Tap_Black.png differ
diff --git a/manager-dashboard/app/resources/icons/swipeleft_icon_black.png b/manager-dashboard/app/resources/icons/swipeleft_icon_black.png
new file mode 100644
index 000000000..c6286076a
Binary files /dev/null and b/manager-dashboard/app/resources/icons/swipeleft_icon_black.png differ
diff --git a/manager-dashboard/app/resources/icons/tap_icon.png b/manager-dashboard/app/resources/icons/tap_icon.png
new file mode 100644
index 000000000..d332bc489
Binary files /dev/null and b/manager-dashboard/app/resources/icons/tap_icon.png differ
diff --git a/manager-dashboard/app/resources/icons/tap_icon_angular.png b/manager-dashboard/app/resources/icons/tap_icon_angular.png
new file mode 100644
index 000000000..a925155c6
Binary files /dev/null and b/manager-dashboard/app/resources/icons/tap_icon_angular.png differ
diff --git a/manager-dashboard/app/utils/common.ts b/manager-dashboard/app/utils/common.ts
deleted file mode 100644
index 90ad219b7..000000000
--- a/manager-dashboard/app/utils/common.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { isDefined } from '@togglecorp/fujs';
-
-export function valueSelector<T>(item: { value: T }) {
-    return item.value;
-}
-
-export function labelSelector<T>(item: { label: T }) {
-    return item.label;
-}
-
-export function getNoMoreThanNCharacterCondition(maxCharacters: number) {
-    return (value: string | undefined) => {
-        if (!isDefined(value) || value.length <= maxCharacters) {
-            return undefined;
-        }
-
-        return `Max ${maxCharacters} characters allowed`;
-    };
-}
-
-export type ProjectInputType = 'aoi_file' | 'link' | 'TMId';
-export type ProjectStatus = 'private_active' | 'private_inactive' | 'active' | 'inactive' | 'finished' | 'archived' | 'tutorial';
-export const PROJECT_TYPE_BUILD_AREA = 1;
-export const PROJECT_TYPE_FOOTPRINT = 2;
-export const PROJECT_TYPE_CHANGE_DETECTION = 3;
-export const PROJECT_TYPE_COMPLETENESS = 4;
-
-export type ProjectType = 1 | 2 | 3 | 4;
-
-export const projectTypeLabelMap: {
-    [key in ProjectType]: string
-} = {
-    [PROJECT_TYPE_BUILD_AREA]: 'Build Area',
-    [PROJECT_TYPE_FOOTPRINT]: 'Footprint',
-    [PROJECT_TYPE_CHANGE_DETECTION]: 'Change Detection',
-    [PROJECT_TYPE_COMPLETENESS]: 'Completeness',
-};
diff --git a/manager-dashboard/app/utils/common.tsx b/manager-dashboard/app/utils/common.tsx
new file mode 100644
index 000000000..dfd624ecd
--- /dev/null
+++ b/manager-dashboard/app/utils/common.tsx
@@ -0,0 +1,302 @@
+import React from 'react';
+import {
+    IoAddOutline,
+    IoAlertOutline,
+    IoBanOutline,
+    IoCheckmarkOutline,
+    IoCloseOutline,
+    IoEggOutline,
+    IoEllipseOutline,
+    IoFlagOutline,
+    IoHandLeftOutline,
+    IoHandRightOutline,
+    IoHappyOutline,
+    IoHeartOutline,
+    IoHelpOutline,
+    IoInformationOutline,
+    IoPrismOutline,
+    IoRefreshOutline,
+    IoRemoveOutline,
+    IoSadOutline,
+    IoSearchOutline,
+    IoShapesOutline,
+    IoSquareOutline,
+    IoStarOutline,
+    IoThumbsDownOutline,
+    IoThumbsUpOutline,
+    IoTriangleOutline,
+    IoWarningOutline,
+} from 'react-icons/io5';
+import { isDefined, listToMap } from '@togglecorp/fujs';
+import { IconType } from 'react-icons';
+
+import oneTapIcon from '#resources/icons/1_Tap_Black.png';
+import twoTapIcon from '#resources/icons/2_Tap_Black.png';
+import threeTapIcon from '#resources/icons/3_Tap_Black.png';
+import tapIcon from '#resources/icons/tap_icon.png';
+import angularTapIcon from '#resources/icons/tap_icon_angular.png';
+import swipeIcon from '#resources/icons/swipeleft_icon_black.png';
+
+export function valueSelector<T>(item: { value: T }) {
+    return item.value;
+}
+
+export function labelSelector<T>(item: { label: T }) {
+    return item.label;
+}
+
+export function keySelector<T>(item: { key: T }) {
+    return item.key;
+}
+
+export function getNoMoreThanNCharacterCondition(maxCharacters: number) {
+    return (value: string | undefined) => {
+        if (!isDefined(value) || value.length <= maxCharacters) {
+            return undefined;
+        }
+
+        return `Max ${maxCharacters} characters allowed`;
+    };
+}
+
+export type ProjectInputType = 'aoi_file' | 'link' | 'TMId';
+export type ProjectStatus = 'private_active' | 'private_inactive' | 'active' | 'inactive' | 'finished' | 'archived' | 'tutorial';
+export const PROJECT_TYPE_BUILD_AREA = 1;
+export const PROJECT_TYPE_FOOTPRINT = 2;
+export const PROJECT_TYPE_CHANGE_DETECTION = 3;
+export const PROJECT_TYPE_COMPLETENESS = 4;
+
+export type ProjectType = 1 | 2 | 3 | 4;
+
+export const projectTypeLabelMap: {
+    [key in ProjectType]: string
+} = {
+    [PROJECT_TYPE_BUILD_AREA]: 'Build Area',
+    [PROJECT_TYPE_FOOTPRINT]: 'Footprint',
+    [PROJECT_TYPE_CHANGE_DETECTION]: 'Change Detection',
+    [PROJECT_TYPE_COMPLETENESS]: 'Completeness',
+};
+
+export type IconKey = 'add-outline'
+    | 'alert-outline'
+    | 'ban-outline'
+    | 'check'
+    | 'close-outline'
+    | 'egg-outline'
+    | 'ellipse-outline'
+    | 'flag-outline'
+    | 'hand-left-outline'
+    | 'hand-right-outline'
+    | 'happy-outline'
+    | 'heart-outline'
+    | 'help-outline'
+    | 'information-outline'
+    | 'prism-outline'
+    | 'refresh-outline'
+    | 'remove-outline'
+    | 'sad-outline'
+    | 'search-outline'
+    | 'shapes-outline'
+    | 'square-outline'
+    | 'star-outline'
+    | 'thumbs-down-outline'
+    | 'thumbs-up-outline'
+    | 'triangle-outline'
+    | 'warning-outline'
+    | 'general-tap'
+    | 'tap'
+    | 'tap-1'
+    | 'tap-2'
+    | 'tap-3'
+    | 'swipe-left';
+
+export interface IconItem {
+    key: IconKey;
+    label: string;
+    component: IconType;
+}
+
+function getPngIcon(src: string, alt: string) {
+    const element = () => (
+        <img
+            src={src}
+            alt={alt}
+            style={{
+                height: '1em',
+                width: '1em',
+                objectFit: 'contain',
+            }}
+        />
+    );
+
+    return element;
+}
+
+export const iconList: IconItem[] = [
+    {
+        key: 'add-outline',
+        label: 'Add',
+        component: IoAddOutline,
+    },
+    {
+        key: 'alert-outline',
+        label: 'Alert',
+        component: IoAlertOutline,
+    },
+    {
+        key: 'ban-outline',
+        label: 'Ban',
+        component: IoBanOutline,
+    },
+    {
+        key: 'check',
+        label: 'Check',
+        component: IoCheckmarkOutline,
+    },
+    {
+        key: 'close-outline',
+        label: 'Close',
+        component: IoCloseOutline,
+    },
+    {
+        key: 'egg-outline',
+        label: 'Egg',
+        component: IoEggOutline,
+    },
+    {
+        key: 'ellipse-outline',
+        label: 'Ellipse',
+        component: IoEllipseOutline,
+    },
+    {
+        key: 'flag-outline',
+        label: 'Flag',
+        component: IoFlagOutline,
+    },
+    {
+        key: 'hand-left-outline',
+        label: 'Hand Left',
+        component: IoHandLeftOutline,
+    },
+    {
+        key: 'hand-right-outline',
+        label: 'Hand Right',
+        component: IoHandRightOutline,
+    },
+    {
+        key: 'happy-outline',
+        label: 'Happy',
+        component: IoHappyOutline,
+    },
+    {
+        key: 'heart-outline',
+        label: 'Heart',
+        component: IoHeartOutline,
+    },
+    {
+        key: 'help-outline',
+        label: 'Help',
+        component: IoHelpOutline,
+    },
+    {
+        key: 'information-outline',
+        label: 'Information',
+        component: IoInformationOutline,
+    },
+    {
+        key: 'prism-outline',
+        label: 'Prism',
+        component: IoPrismOutline,
+    },
+    {
+        key: 'refresh-outline',
+        label: 'Refresh',
+        component: IoRefreshOutline,
+    },
+    {
+        key: 'remove-outline',
+        label: 'Remove',
+        component: IoRemoveOutline,
+    },
+    {
+        key: 'sad-outline',
+        label: 'Sad',
+        component: IoSadOutline,
+    },
+    {
+        key: 'search-outline',
+        label: 'Search',
+        component: IoSearchOutline,
+    },
+    {
+        key: 'shapes-outline',
+        label: 'Shapes',
+        component: IoShapesOutline,
+    },
+    {
+        key: 'square-outline',
+        label: 'Square',
+        component: IoSquareOutline,
+    },
+    {
+        key: 'star-outline',
+        label: 'Star',
+        component: IoStarOutline,
+    },
+    {
+        key: 'thumbs-down-outline',
+        label: 'Thumbs Down',
+        component: IoThumbsDownOutline,
+    },
+    {
+        key: 'thumbs-up-outline',
+        label: 'Thumbs Up',
+        component: IoThumbsUpOutline,
+    },
+    {
+        key: 'triangle-outline',
+        label: 'Triangle',
+        component: IoTriangleOutline,
+    },
+    {
+        key: 'warning-outline',
+        label: 'Warning',
+        component: IoWarningOutline,
+    },
+    {
+        key: 'general-tap',
+        label: 'General Tap',
+        component: getPngIcon(tapIcon, 'general tap'),
+    },
+    {
+        key: 'tap',
+        label: 'Tap',
+        component: getPngIcon(angularTapIcon, 'tap'),
+    },
+    {
+        key: 'tap-1',
+        label: '1-Tap',
+        component: getPngIcon(oneTapIcon, 'one tap'),
+    },
+    {
+        key: 'tap-2',
+        label: '2-Tap',
+        component: getPngIcon(twoTapIcon, 'two tap'),
+    },
+    {
+        key: 'tap-3',
+        label: '3-Tap',
+        component: getPngIcon(threeTapIcon, 'three tap'),
+    },
+    {
+        key: 'swipe-left',
+        label: 'Swipe Left',
+        component: getPngIcon(swipeIcon, 'swipe left'),
+    },
+];
+
+export const iconMap = listToMap(
+    iconList,
+    (icon) => icon.key,
+    (icon) => icon.component,
+);
diff --git a/manager-dashboard/app/components/OrganisationFormModal/index.tsx b/manager-dashboard/app/views/Home/OrganisationFormModal/index.tsx
similarity index 94%
rename from manager-dashboard/app/components/OrganisationFormModal/index.tsx
rename to manager-dashboard/app/views/Home/OrganisationFormModal/index.tsx
index b79bdbe03..5c0b0e7f8 100644
--- a/manager-dashboard/app/components/OrganisationFormModal/index.tsx
+++ b/manager-dashboard/app/views/Home/OrganisationFormModal/index.tsx
@@ -18,8 +18,8 @@ import {
     useForm,
     getErrorObject,
     createSubmitHandler,
-    requiredCondition,
     analyzeErrors,
+    requiredStringCondition,
 } from '@togglecorp/toggle-form';
 import {
     MdOutlinePublishedWithChanges,
@@ -51,8 +51,16 @@ const MAX_CHARS_DESCRIPTION = 100;
 
 const organisationFormSchema: OrganisationFormSchema = {
     fields: (): OrganisationFormSchemaFields => ({
-        name: [requiredCondition, getNoMoreThanNCharacterCondition(MAX_CHARS_NAME)],
-        description: [getNoMoreThanNCharacterCondition(MAX_CHARS_DESCRIPTION)],
+        name: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+            validations: [getNoMoreThanNCharacterCondition(MAX_CHARS_NAME)],
+        },
+        description: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+            validations: [getNoMoreThanNCharacterCondition(MAX_CHARS_DESCRIPTION)],
+        },
     }),
 };
 
@@ -74,7 +82,7 @@ function OrganisationFormModal(props: Props) {
         value,
         validate,
         setError,
-    } = useForm(organisationFormSchema, defaultOrganisationFormValue);
+    } = useForm(organisationFormSchema, { value: defaultOrganisationFormValue });
 
     const mountedRef = useMountedRef();
     const { user } = React.useContext(UserContext);
diff --git a/manager-dashboard/app/components/OrganisationFormModal/styles.css b/manager-dashboard/app/views/Home/OrganisationFormModal/styles.css
similarity index 100%
rename from manager-dashboard/app/components/OrganisationFormModal/styles.css
rename to manager-dashboard/app/views/Home/OrganisationFormModal/styles.css
diff --git a/manager-dashboard/app/components/OrganisationList/index.tsx b/manager-dashboard/app/views/Home/OrganisationList/index.tsx
similarity index 100%
rename from manager-dashboard/app/components/OrganisationList/index.tsx
rename to manager-dashboard/app/views/Home/OrganisationList/index.tsx
diff --git a/manager-dashboard/app/components/OrganisationList/styles.css b/manager-dashboard/app/views/Home/OrganisationList/styles.css
similarity index 100%
rename from manager-dashboard/app/components/OrganisationList/styles.css
rename to manager-dashboard/app/views/Home/OrganisationList/styles.css
diff --git a/manager-dashboard/app/components/TutorialList/index.tsx b/manager-dashboard/app/views/Home/TutorialList/index.tsx
similarity index 100%
rename from manager-dashboard/app/components/TutorialList/index.tsx
rename to manager-dashboard/app/views/Home/TutorialList/index.tsx
diff --git a/manager-dashboard/app/components/TutorialList/styles.css b/manager-dashboard/app/views/Home/TutorialList/styles.css
similarity index 100%
rename from manager-dashboard/app/components/TutorialList/styles.css
rename to manager-dashboard/app/views/Home/TutorialList/styles.css
diff --git a/manager-dashboard/app/views/Home/index.tsx b/manager-dashboard/app/views/Home/index.tsx
index ef2c69073..ad1c09bd8 100644
--- a/manager-dashboard/app/views/Home/index.tsx
+++ b/manager-dashboard/app/views/Home/index.tsx
@@ -12,12 +12,12 @@ import SmartLink from '#base/components/SmartLink';
 import useBooleanState from '#hooks/useBooleanState';
 
 import Button from '#components/Button';
-import OrganisationFormModal from '#components/OrganisationFormModal';
-import TutorialList from '#components/TutorialList';
-import OrganisationList from '#components/OrganisationList';
 import TextInput from '#components/TextInput';
 import useInputState from '#hooks/useInputState';
 
+import OrganisationFormModal from './OrganisationFormModal';
+import OrganisationList from './OrganisationList';
+import TutorialList from './TutorialList';
 import styles from './styles.css';
 
 interface Props {
diff --git a/manager-dashboard/app/views/Login/index.tsx b/manager-dashboard/app/views/Login/index.tsx
index 8dc6c5c13..f0d45f6b1 100644
--- a/manager-dashboard/app/views/Login/index.tsx
+++ b/manager-dashboard/app/views/Login/index.tsx
@@ -12,7 +12,7 @@ import {
     useForm,
     getErrorObject,
     createSubmitHandler,
-    internal,
+    nonFieldError,
 } from '@togglecorp/toggle-form';
 
 import TextInput from '#components/TextInput';
@@ -33,8 +33,14 @@ type LoginFormSchema = ObjectSchema<LoginFormFields>;
 type LoginFormSchemaFields = ReturnType<LoginFormSchema['fields']>
 const loginFormSchema: LoginFormSchema = {
     fields: (): LoginFormSchemaFields => ({
-        email: [requiredStringCondition],
-        password: [requiredStringCondition],
+        email: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+        },
+        password: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+        },
     }),
 };
 
@@ -57,7 +63,7 @@ function Login(props: Props) {
         value,
         validate,
         setError,
-    } = useForm(loginFormSchema, defaultLoginFormValue);
+    } = useForm(loginFormSchema, { value: defaultLoginFormValue });
     const error = getErrorObject(formError);
 
     const [pending, setPending] = React.useState(false);
@@ -83,7 +89,6 @@ function Login(props: Props) {
                 if (!mountedRef.current) {
                     return;
                 }
-                setErrorMessage(undefined);
                 setPending(false);
             } catch (submissionError) {
                 // eslint-disable-next-line no-console
@@ -118,7 +123,7 @@ function Login(props: Props) {
 
                 setError((prevError) => ({
                     ...getErrorObject(prevError),
-                    [internal]: 'Failed to authenticate',
+                    [nonFieldError]: 'Failed to authenticate',
                 }));
 
                 setPending(false);
@@ -168,9 +173,9 @@ function Login(props: Props) {
                         type="password"
                         disabled={pending}
                     />
-                    {error?.[internal] && (
+                    {error?.[nonFieldError] && (
                         <div className={styles.errorMessage}>
-                            {error?.[internal]}
+                            {error?.[nonFieldError]}
                         </div>
                     )}
                     <div className={styles.actions}>
diff --git a/manager-dashboard/app/views/Login/styles.css b/manager-dashboard/app/views/Login/styles.css
index 82d1d718a..a9726a911 100644
--- a/manager-dashboard/app/views/Login/styles.css
+++ b/manager-dashboard/app/views/Login/styles.css
@@ -25,7 +25,7 @@
             }
 
             .text {
-                color: var(--color-text-on-light);
+                color: var(--color-text-on-dark);
             }
         }
 
diff --git a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
index 648f5d3ef..8daa29984 100644
--- a/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
+++ b/manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { EntriesAsList, ObjectError, SetBaseValueArg } from '@togglecorp/toggle-form';
 import TextInput from '#components/TextInput';
 import { generateProjectName, PartialProjectFormType } from '#views/NewProject/utils';
@@ -12,7 +12,7 @@ import styles from '#views/NewProject/styles.css';
 
 export interface Props<T extends PartialProjectFormType> {
     className?: string;
-    submissionPending: boolean;
+    disabled: boolean;
     value: T;
     setValue: (value: SetBaseValueArg<T>, doNotReset?: boolean) => void;
     setFieldValue: (...entries: EntriesAsList<T>) => void;
@@ -21,7 +21,7 @@ export interface Props<T extends PartialProjectFormType> {
 
 function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
     const {
-        submissionPending,
+        disabled,
         value,
         setValue,
         setFieldValue,
@@ -37,10 +37,6 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
         organisationsPending,
     } = useProjectOptions(value?.projectType);
 
-    React.useEffect(() => {
-        setFieldValue(tutorialOptions?.[0]?.value, 'tutorialId');
-    }, [setFieldValue, value?.projectType, tutorialOptions]);
-
     const setFieldValueAndGenerateName = React.useCallback(
         (...entries: EntriesAsList<PartialProjectFormType>) => {
             // NOTE: we need to use setFieldValue to set error on change
@@ -61,6 +57,21 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
         },
         [setFieldValue, setValue],
     );
+
+    const handleTutorialOptions = useCallback(
+        (tutorialId: string) => {
+            setFieldValue(tutorialId, 'tutorialId');
+
+            const newTutorial = tutorialOptions.find((tutorial) => tutorial.value === tutorialId);
+
+            setFieldValue(newTutorial?.customOptions, 'customOptions');
+        },
+        [
+            tutorialOptions,
+            setFieldValue,
+        ],
+    );
+
     return (
 
         <>
@@ -72,7 +83,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     error={error?.projectTopic}
                     label="Project Topic"
                     hint="Enter the topic of your project (50 char max)."
-                    disabled={submissionPending}
+                    disabled={disabled}
                     autoFocus
                 />
                 <TextInput
@@ -82,7 +93,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     label="Project Region"
                     hint="Enter name of your project Region (50 chars max)"
                     error={error?.projectRegion}
-                    disabled={submissionPending}
+                    disabled={disabled}
                 />
             </div>
             <div className={styles.inputGroup}>
@@ -93,7 +104,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     label="Project Number"
                     hint="Is this project part of a bigger campaign with multiple projects?"
                     error={error?.projectNumber}
-                    disabled={submissionPending}
+                    disabled={disabled}
                 />
                 <SelectInput
                     name={'requestingOrganisation' as const}
@@ -103,7 +114,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     error={error?.requestingOrganisation}
                     label="Requesting Organisation"
                     hint="Which group, institution or community is requesting this project?"
-                    disabled={submissionPending || organisationsPending}
+                    disabled={disabled || organisationsPending}
                     keySelector={valueSelector}
                     labelSelector={labelSelector}
                 />
@@ -116,7 +127,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                 readOnly
                 placeholder="[Project Topic] - [Project Region] ([Task Number]) [Requesting Organisation]"
                 // error={error?.name}
-                disabled={submissionPending}
+                disabled={disabled}
             />
             <div className={styles.inputGroup}>
                 <SelectInput
@@ -129,7 +140,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     label="Visibility"
                     hint="Choose either 'public' or select the team for which this project should be displayed"
                     error={error?.visibility}
-                    disabled={submissionPending || teamsPending}
+                    disabled={disabled || teamsPending}
                 />
                 <TextInput
                     name={'lookFor' as const}
@@ -138,7 +149,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     error={error?.lookFor}
                     label="Look For"
                     hint="What should the users look for (e.g. buildings, cars, trees)? (25 chars max)"
-                    disabled={submissionPending}
+                    disabled={disabled}
                 />
             </div>
             <TextArea
@@ -148,7 +159,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                 error={error?.projectDetails}
                 label="Project Details"
                 hint="Enter the description for your project. (markdown syntax is supported)."
-                disabled={submissionPending}
+                disabled={disabled}
                 rows={4}
             />
             <div className={styles.inputGroup}>
@@ -160,7 +171,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     hint="Make sure you have the rights to use the image. It should end with .jpg or .png."
                     showPreview
                     error={error?.projectImage}
-                    disabled={submissionPending}
+                    disabled={disabled}
                 />
                 <div className={styles.verticalInputGroup}>
                     <SelectInput
@@ -168,12 +179,13 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                         hint="Choose which tutorial should be used for this project. Make sure that this aligns with what you are looking for."
                         name={'tutorialId' as const}
                         value={value?.tutorialId}
-                        onChange={setFieldValue}
+                        onChange={handleTutorialOptions}
                         options={tutorialOptions}
                         error={error?.tutorialId}
                         keySelector={valueSelector}
                         labelSelector={labelSelector}
-                        disabled={submissionPending || tutorialsPending}
+                        disabled={disabled || tutorialsPending}
+                        nonClearable
                     />
                     <NumberInput
                         name={'verificationNumber' as const}
@@ -182,7 +194,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                         label="Verification Number"
                         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)"
                         error={error?.verificationNumber}
-                        disabled={submissionPending}
+                        disabled={disabled}
                     />
                     <NumberInput
                         name={'groupSize' as const}
@@ -191,7 +203,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                         label="Group Size"
                         hint="How big should a mapping session be? Group size refers to the number of tasks per mapping session."
                         error={error?.groupSize}
-                        disabled={submissionPending}
+                        disabled={disabled}
                     />
                 </div>
             </div>
diff --git a/manager-dashboard/app/views/NewProject/index.tsx b/manager-dashboard/app/views/NewProject/index.tsx
index a8a808da5..d3a0f8455 100644
--- a/manager-dashboard/app/views/NewProject/index.tsx
+++ b/manager-dashboard/app/views/NewProject/index.tsx
@@ -2,13 +2,14 @@ import React from 'react';
 import {
     _cs,
     isDefined,
+    isNotDefined,
 } from '@togglecorp/fujs';
 import {
     useForm,
     getErrorObject,
     createSubmitHandler,
     analyzeErrors,
-    internal,
+    nonFieldError,
 } from '@togglecorp/toggle-form';
 import {
     getStorage,
@@ -37,13 +38,14 @@ import SegmentInput from '#components/SegmentInput';
 import GeoJsonFileInput from '#components/GeoJsonFileInput';
 import TileServerInput, {
     TILE_SERVER_BING,
+    TILE_SERVER_ESRI,
     tileServerDefaultCredits,
 } from '#components/TileServerInput';
 import InputSection from '#components/InputSection';
 import Button from '#components/Button';
+import NonFieldError from '#components/NonFieldError';
 import AnimatedSwipeIcon from '#components/AnimatedSwipeIcon';
-import BasicProjectInfoForm from './BasicProjectInfoForm';
-
+import ExpandableContainer from '#components/ExpandableContainer';
 import {
     valueSelector,
     labelSelector,
@@ -55,6 +57,9 @@ import {
     PROJECT_TYPE_CHANGE_DETECTION,
 } from '#utils/common';
 
+import CustomOptionInput from '#views/NewTutorial/CustomOptionInput';
+import CustomOptionPreview from '#views/NewTutorial/CustomOptionInput/CustomOptionPreview';
+
 import {
     projectFormSchema,
     ProjectFormType,
@@ -70,25 +75,27 @@ import {
     validateAoiOnOhsome,
     validateProjectIdOnHotTaskingManager,
 } from './utils';
+import BasicProjectInfoForm from './BasicProjectInfoForm';
+
 // eslint-disable-next-line postcss-modules/no-unused-class
 import styles from './styles.css';
 
 import projectTypeOptions from '#base/configs/projectTypes';
 
 const defaultProjectFormValue: PartialProjectFormType = {
-    projectType: PROJECT_TYPE_BUILD_AREA,
+    // projectType: PROJECT_TYPE_BUILD_AREA,
     projectNumber: 1,
     visibility: 'public',
     verificationNumber: 3,
     zoomLevel: 18,
-    groupSize: getGroupSize(PROJECT_TYPE_BUILD_AREA),
+    // groupSize: getGroupSize(PROJECT_TYPE_BUILD_AREA),
     tileServer: {
         name: TILE_SERVER_BING,
         credits: tileServerDefaultCredits[TILE_SERVER_BING],
     },
     tileServerB: {
-        name: TILE_SERVER_BING,
-        credits: tileServerDefaultCredits[TILE_SERVER_BING],
+        name: TILE_SERVER_ESRI,
+        credits: tileServerDefaultCredits[TILE_SERVER_ESRI],
     },
     // maxTasksPerUser: -1,
     inputType: PROJECT_INPUT_TYPE_UPLOAD,
@@ -115,7 +122,9 @@ function NewProject(props: Props) {
         validate,
         setError,
         setValue,
-    } = useForm(projectFormSchema, defaultProjectFormValue);
+    } = useForm(projectFormSchema, {
+        value: defaultProjectFormValue,
+    });
 
     const [testPending, setTestPending] = React.useState(false);
     const [geometryDescription, setGeometryDescription] = React.useState<string>();
@@ -245,7 +254,7 @@ function NewProject(props: Props) {
         if (!userId) {
             setError((err) => ({
                 ...getErrorObject(err),
-                [internal]: 'Cannot submit form because user is not defined',
+                [nonFieldError]: 'Cannot submit form because user is not defined',
             }));
             setProjectSubmissionStatus('failed');
             return;
@@ -351,7 +360,7 @@ function NewProject(props: Props) {
                 console.error(submissionError);
                 setError((err) => ({
                     ...getErrorObject(err),
-                    [internal]: 'Some error occurred',
+                    [nonFieldError]: 'Some error occurred',
                 }));
                 setProjectSubmissionStatus('failed');
             }
@@ -376,8 +385,29 @@ function NewProject(props: Props) {
         || projectSubmissionStatus === 'projectSubmit'
     );
 
-    const tileServerBVisible = value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
-        || value?.projectType === PROJECT_TYPE_COMPLETENESS;
+    const tileServerBVisible = value.projectType === PROJECT_TYPE_CHANGE_DETECTION
+        || value.projectType === PROJECT_TYPE_COMPLETENESS;
+
+    const projectTypeEmpty = isNotDefined(value.projectType);
+
+    const { customOptions: customOptionsFromValue } = value;
+
+    const customOptions = React.useMemo(() => (customOptionsFromValue?.map((option) => ({
+        ...option,
+        optionId: option.value,
+        subOptions: option.subOptions?.map((subOption) => ({
+            ...subOption,
+            subOptionsId: subOption.value,
+        })),
+    }))), [customOptionsFromValue]);
+
+    const optionsError = React.useMemo(
+        () => getErrorObject(error?.customOptions),
+        [error?.customOptions],
+    );
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const noOp = () => {};
 
     return (
         <div className={_cs(styles.newProject, className)}>
@@ -388,7 +418,7 @@ function NewProject(props: Props) {
                     <SegmentInput
                         name={'projectType' as const}
                         onChange={handleProjectTypeChange}
-                        value={value?.projectType}
+                        value={value.projectType}
                         label="Project Type"
                         hint="Select the type of your project."
                         options={projectTypeOptions}
@@ -402,44 +432,84 @@ function NewProject(props: Props) {
                         setValue={setValue}
                         setFieldValue={setFieldValue}
                         error={error}
-                        submissionPending={submissionPending}
+                        disabled={submissionPending || projectTypeEmpty}
                     />
                 </InputSection>
-                {(value?.projectType === PROJECT_TYPE_BUILD_AREA
-                    || value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
-                    || value?.projectType === PROJECT_TYPE_COMPLETENESS) && (
+                {(
+                    value.projectType === PROJECT_TYPE_FOOTPRINT
+                    && customOptions
+                    && customOptions.length > 0
+                ) && (
+                    <InputSection
+                        heading="Custom Options"
+                    >
+                        <NonFieldError
+                            error={optionsError}
+                        />
+                        {(customOptions && customOptions.length > 0) ? (
+                            <div className={styles.customOptionContainer}>
+                                <div className={styles.customOptionList}>
+                                    {customOptions.map((option, index) => (
+                                        <ExpandableContainer
+                                            key={option.value}
+                                            header={option.title || `Option ${index + 1}`}
+                                        >
+                                            <CustomOptionInput
+                                                key={option.value}
+                                                value={option}
+                                                index={index}
+                                                onChange={noOp}
+                                                error={optionsError?.[option.value]}
+                                                readOnly
+                                            />
+                                        </ExpandableContainer>
+                                    ))}
+                                </div>
+                                <CustomOptionPreview
+                                    value={customOptions}
+                                    lookFor={value.lookFor}
+                                />
+                            </div>
+                        ) : (
+                            <div>No options</div>
+                        )}
+                    </InputSection>
+                )}
+                {(value.projectType === PROJECT_TYPE_BUILD_AREA
+                    || value.projectType === PROJECT_TYPE_CHANGE_DETECTION
+                    || value.projectType === PROJECT_TYPE_COMPLETENESS) && (
                     <InputSection
                         heading="Zoom Level"
                     >
                         <NumberInput
                             name={'zoomLevel' as const}
-                            value={value?.zoomLevel}
+                            value={value.zoomLevel}
                             onChange={setFieldValue}
                             label="Zoom Level"
                             hint="We use the Tile Map Service zoom levels. Please check for your area which zoom level is available. For example, Bing imagery is available at zoomlevel 18 for most regions. If you use a custom tile server you may be able to use even higher zoom levels."
                             error={error?.zoomLevel}
-                            disabled={submissionPending}
+                            disabled={submissionPending || projectTypeEmpty}
                         />
                     </InputSection>
                 )}
-                {(value?.projectType === PROJECT_TYPE_BUILD_AREA
-                    || value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
-                    || value?.projectType === PROJECT_TYPE_COMPLETENESS) && (
+                {(value.projectType === PROJECT_TYPE_BUILD_AREA
+                    || value.projectType === PROJECT_TYPE_CHANGE_DETECTION
+                    || value.projectType === PROJECT_TYPE_COMPLETENESS) && (
                     <InputSection
                         heading="Project AOI Geometry"
                     >
                         <GeoJsonFileInput
                             name={'geometry' as const}
-                            value={value?.geometry as GeoJSON.GeoJSON | undefined}
+                            value={value.geometry as GeoJSON.GeoJSON | undefined}
                             onChange={setFieldValueAndClearTestMessage}
                             label="Project AOI Geometry"
                             hint="Upload your project area as GeoJSON File (max. 1MB). Make sure that you provide a single polygon geometry."
                             error={error?.geometry}
-                            disabled={submissionPending}
+                            disabled={submissionPending || projectTypeEmpty}
                         />
                     </InputSection>
                 )}
-                {value?.projectType === PROJECT_TYPE_FOOTPRINT && (
+                {value.projectType === PROJECT_TYPE_FOOTPRINT && (
                     <InputSection
                         heading="Project Tasks Geometry"
                     >
@@ -447,57 +517,57 @@ function NewProject(props: Props) {
                             label="Select an option for Project Task Geometry"
                             name={'inputType' as const}
                             onChange={handleInputTypeChange}
-                            value={value?.inputType}
+                            value={value.inputType}
                             options={projectInputTypeOptions}
                             keySelector={valueSelector}
                             labelSelector={labelSelector}
                             error={error?.inputType}
-                            disabled={submissionPending || testPending}
+                            disabled={submissionPending || projectTypeEmpty || testPending}
                         />
-                        {value?.inputType === PROJECT_INPUT_TYPE_LINK && (
+                        {value.inputType === PROJECT_INPUT_TYPE_LINK && (
                             <TextInput
                                 name={'geometry' as const}
-                                value={value?.geometry as string | undefined}
+                                value={value.geometry as string | undefined}
                                 label="Input Geometries File (Direct Link)"
                                 hint="Provide a direct link to a GeoJSON file containing your building footprint geometries."
                                 error={error?.geometry}
                                 onChange={setFieldValue}
-                                disabled={submissionPending || testPending}
+                                disabled={submissionPending || projectTypeEmpty || testPending}
                             />
                         )}
-                        {value?.inputType === PROJECT_INPUT_TYPE_UPLOAD && (
+                        {value.inputType === PROJECT_INPUT_TYPE_UPLOAD && (
                             <GeoJsonFileInput
                                 name={'geometry' as const}
-                                value={value?.geometry as GeoJSON.GeoJSON | undefined}
+                                value={value.geometry as GeoJSON.GeoJSON}
                                 onChange={setFieldValueAndClearTestMessage}
                                 label="GeoJSON File"
                                 hint="Upload your project area as GeoJSON File (max. 1MB). Make sure that you provide a maximum of 10 polygon geometries."
                                 error={error?.geometry}
-                                disabled={submissionPending || testPending}
+                                disabled={submissionPending || projectTypeEmpty || testPending}
                             />
                         )}
-                        {value?.inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID && (
+                        {value.inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID && (
                             <TextInput
                                 name={'TMId' as const}
                                 // NOTE: This is actually a string but
                                 // should only support numeric characters
                                 type="number"
                                 min="1"
-                                value={value?.TMId}
+                                value={value.TMId}
                                 onChange={setFieldValueAndClearTestMessage}
                                 label="HOT Tasking Manager ProjectID"
                                 hint="Provide the ID of a HOT Tasking Manager Project (only numbers, e.g. 6526)."
                                 error={error?.TMId}
-                                disabled={submissionPending || testPending}
+                                disabled={submissionPending || projectTypeEmpty || testPending}
                             />
                         )}
-                        {(value?.inputType === PROJECT_INPUT_TYPE_UPLOAD
-                            || value?.inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
+                        {(value.inputType === PROJECT_INPUT_TYPE_UPLOAD
+                            || value.inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
                         ) && (
                             <>
                                 <SegmentInput
                                     name={'filter' as const}
-                                    value={value?.filter}
+                                    value={value.filter}
                                     onChange={setFieldValueAndClearTestMessage}
                                     label="Ohsome Filter"
                                     hint="Please specify which objects should be included in your project."
@@ -505,16 +575,18 @@ function NewProject(props: Props) {
                                     error={error?.filter}
                                     keySelector={valueSelector}
                                     labelSelector={labelSelector}
-                                    disabled={submissionPending || testPending}
+                                    disabled={submissionPending || projectTypeEmpty || testPending}
                                 />
-                                {value?.filter === FILTER_OTHERS && (
+                                {value.filter === FILTER_OTHERS && (
                                     <TextInput
                                         name={'filterText' as const}
-                                        value={value?.filterText}
+                                        value={value.filterText}
                                         onChange={setFieldValueAndClearTestMessage}
                                         error={error?.filterText}
                                         label="Custom Filter"
-                                        disabled={submissionPending || testPending}
+                                        disabled={(
+                                            submissionPending || projectTypeEmpty || testPending
+                                        )}
                                         placeholder="amenities=* and geometry:polygon"
                                     />
                                 )}
@@ -531,7 +603,9 @@ function NewProject(props: Props) {
                                         className={styles.testButton}
                                         name={undefined}
                                         onClick={handleTestAoi}
-                                        disabled={submissionPending || testPending}
+                                        disabled={(
+                                            submissionPending || projectTypeEmpty || testPending
+                                        )}
                                     >
                                         {testPending ? 'Testing...' : 'Test'}
                                     </Button>
@@ -546,12 +620,12 @@ function NewProject(props: Props) {
                 >
                     <NumberInput
                         name={'maxTasksPerUser' as const}
-                        value={value?.maxTasksPerUser}
+                        value={value.maxTasksPerUser}
                         onChange={setFieldValue}
                         label="Max Tasks Per User"
                         hint="How many tasks each user is allowed to work on for this project. Empty indicates that no limit is set."
                         error={error?.maxTasksPerUser}
-                        disabled={submissionPending}
+                        disabled={submissionPending || projectTypeEmpty}
                     />
                 </InputSection>
 
@@ -560,10 +634,10 @@ function NewProject(props: Props) {
                 >
                     <TileServerInput
                         name={'tileServer' as const}
-                        value={value?.tileServer}
+                        value={value.tileServer}
                         error={error?.tileServer}
                         onChange={setFieldValue}
-                        disabled={submissionPending}
+                        disabled={submissionPending || projectTypeEmpty}
                     />
                 </InputSection>
 
@@ -573,10 +647,10 @@ function NewProject(props: Props) {
                     >
                         <TileServerInput
                             name={'tileServerB' as const}
-                            value={value?.tileServerB}
+                            value={value.tileServerB}
                             error={error?.tileServerB}
                             onChange={setFieldValue}
-                            disabled={submissionPending}
+                            disabled={submissionPending || projectTypeEmpty}
                         />
                     </InputSection>
                 )}
@@ -589,7 +663,7 @@ function NewProject(props: Props) {
                     <Button
                         name={undefined}
                         onClick={handleSubmitButtonClick}
-                        disabled={submissionPending}
+                        disabled={submissionPending || projectTypeEmpty}
                     >
                         Submit
                     </Button>
diff --git a/manager-dashboard/app/views/NewProject/styles.css b/manager-dashboard/app/views/NewProject/styles.css
index ba2f1784f..bcbad1ed6 100644
--- a/manager-dashboard/app/views/NewProject/styles.css
+++ b/manager-dashboard/app/views/NewProject/styles.css
@@ -13,6 +13,18 @@
         max-width: 70rem;
         gap: var(--spacing-large);
 
+        .custom-option-container {
+            display: flex;
+            gap: var(--spacing-large);
+
+            .custom-option-list {
+                display: flex;
+                flex-direction: column;
+                flex-grow: 1;
+                gap: var(--spacing-medium);
+            }
+        }
+
         .input-group {
             display: flex;
             flex-wrap: wrap;
diff --git a/manager-dashboard/app/views/NewProject/useProjectOptions.ts b/manager-dashboard/app/views/NewProject/useProjectOptions.ts
index a18f17d04..057d64ae5 100644
--- a/manager-dashboard/app/views/NewProject/useProjectOptions.ts
+++ b/manager-dashboard/app/views/NewProject/useProjectOptions.ts
@@ -8,6 +8,7 @@ import {
 } from 'firebase/database';
 
 import useFirebaseDatabase from '#hooks/useFirebaseDatabase';
+import { CustomOptions } from '#views/NewTutorial/utils';
 
 // FIXME: these typings are reusable
 interface Organisation {
@@ -56,6 +57,7 @@ interface Tutorial {
     tileServerB?: TileServerDetails; // For Change detection and Completeness
     tutorialDraftId: string;
     zoomLevel: number;
+    customOptions: CustomOptions;
 }
 
 function useProjectOptions(selectedProjectType: number | undefined) {
@@ -129,6 +131,7 @@ function useProjectOptions(selectedProjectType: number | undefined) {
             .map((tutorial) => ({
                 value: tutorial.projectId,
                 label: tutorial.name,
+                customOptions: tutorial.customOptions,
             })),
         [tutorials, selectedProjectType],
     );
diff --git a/manager-dashboard/app/views/NewProject/utils.ts b/manager-dashboard/app/views/NewProject/utils.ts
index b33162d7e..30317e6b8 100644
--- a/manager-dashboard/app/views/NewProject/utils.ts
+++ b/manager-dashboard/app/views/NewProject/utils.ts
@@ -7,17 +7,20 @@ import {
 } from '@togglecorp/fujs';
 import {
     ObjectSchema,
+    ArraySchema,
     PartialForm,
-    requiredCondition,
     requiredStringCondition,
     integerCondition,
     greaterThanCondition,
     greaterThanOrEqualToCondition,
     lessThanOrEqualToCondition,
-    forceNullType,
+    addCondition,
+    nullValue,
+    urlCondition,
 } from '@togglecorp/toggle-form';
 import { getType as getFeatureType } from '@turf/invariant';
 import getFeatureArea from '@turf/area';
+
 import {
     TileServer,
     tileServerFieldsSchema,
@@ -31,8 +34,21 @@ import {
     PROJECT_TYPE_FOOTPRINT,
     PROJECT_TYPE_CHANGE_DETECTION,
     PROJECT_TYPE_COMPLETENESS,
+    IconKey,
 } from '#utils/common';
 
+export type CustomOptionsForProject = {
+    title: string;
+    value: number;
+    description: string;
+    icon: IconKey;
+    iconColor: string;
+    subOptions: {
+        description: string;
+        value: number;
+    }[];
+}[];
+
 export interface ProjectFormType {
     projectTopic: string;
     projectType: ProjectType;
@@ -56,6 +72,7 @@ export interface ProjectFormType {
     maxTasksPerUser: number;
     tileServer: TileServer;
     tileServerB?: TileServer;
+    customOptions?: CustomOptionsForProject;
 }
 
 export const PROJECT_INPUT_TYPE_UPLOAD = 'aoi_file';
@@ -84,188 +101,409 @@ export const filterOptions = [
 export type PartialProjectFormType = PartialForm<
     Omit<ProjectFormType, 'projectImage'> & { projectImage?: File },
     // NOTE: we do not want to change File and FeatureCollection to partials
-    'geometry' | 'projectImage'
+    'geometry' | 'projectImage' | 'value'
 >;
 
 type ProjectFormSchema = ObjectSchema<PartialProjectFormType>;
 type ProjectFormSchemaFields = ReturnType<ProjectFormSchema['fields']>;
 
+type PartialCustomOptions = NonNullable<PartialProjectFormType['customOptions']>[number];
+type CustomOptionSchema = ObjectSchema<PartialCustomOptions, PartialProjectFormType>;
+type CustomOptionSchemaFields = ReturnType<CustomOptionSchema['fields']>
+type CustomOptionFormSchema = ArraySchema<PartialCustomOptions, PartialProjectFormType>;
+type CustomOptionFormSchemaMember = ReturnType<CustomOptionFormSchema['member']>;
+
 // FIXME: break this into multiple geometry conditions
 const DEFAULT_MAX_FEATURES = 20;
 // const DEFAULT_MAX_FEATURES = 10;
 const DEFAULT_MAX_AREA = 20;
-function validGeometryCondition(
-    featureCollection: GeoJSON.GeoJSON | string | undefined,
-    allValue: PartialProjectFormType,
-) {
-    if (!featureCollection) {
-        return undefined;
-    }
-    if (typeof featureCollection === 'string') {
-        return undefined;
-    }
-    if (featureCollection.type !== 'FeatureCollection') {
-        return 'Only FeatureCollection is supported';
-    }
+function validGeometryCondition(zoomLevel: number | undefined | null) {
+    function validGeometryConditionForZoom(
+        featureCollection: GeoJSON.GeoJSON | string | undefined,
+    ) {
+        if (!featureCollection) {
+            return undefined;
+        }
+        if (typeof featureCollection === 'string') {
+            return 'Invalid GeoJSON.';
+        }
+        if (featureCollection.type !== 'FeatureCollection') {
+            return 'GeoJSON type should be FeatureCollection.';
+        }
 
-    const numberOfFeatures = featureCollection.features.length;
+        const numberOfFeatures = featureCollection.features.length;
 
-    if (!numberOfFeatures) {
-        return 'GeoJson has no features';
-    }
+        if (!numberOfFeatures) {
+            return 'GeoJSON has no features.';
+        }
 
-    const maxNumberOfFeatures = DEFAULT_MAX_FEATURES;
-    if (numberOfFeatures > maxNumberOfFeatures) {
-        return `GeoJson has too many (${numberOfFeatures}) features. Only ${maxNumberOfFeatures} are allowed`;
-    }
+        const maxNumberOfFeatures = DEFAULT_MAX_FEATURES;
+        if (numberOfFeatures > maxNumberOfFeatures) {
+            return `GeoJSON has too many (${numberOfFeatures}) features. Only ${maxNumberOfFeatures} features are allowed`;
+        }
 
-    const invalidFeatures = featureCollection.features.filter((feature) => {
-        const featureType = getFeatureType(feature);
-        return featureType !== 'Polygon' && featureType !== 'MultiPolygon';
-    });
+        const invalidFeatures = featureCollection.features.filter((feature) => {
+            const featureType = getFeatureType(feature);
+            return featureType !== 'Polygon' && featureType !== 'MultiPolygon';
+        });
 
-    if (invalidFeatures.length > 0) {
-        const invalidFeatureMap = listToGroupList(
-            invalidFeatures,
-            (feature) => getFeatureType(feature),
-        );
+        if (invalidFeatures.length > 0) {
+            const invalidFeatureMap = listToGroupList(
+                invalidFeatures,
+                (feature) => getFeatureType(feature),
+            );
 
-        const unsupportedTypeList = Object.entries(invalidFeatureMap)
-            .map(([featureKey, feature]) => `${feature.length} ${featureKey}`);
-        const unsupportedFeatureTypes = unsupportedTypeList.join(', ');
+            const unsupportedTypeList = Object.entries(invalidFeatureMap)
+                .map(([featureKey, feature]) => `${feature.length} ${featureKey}`);
+            const unsupportedFeatureTypes = unsupportedTypeList.join(', ');
 
-        return `GeoJson contains ${unsupportedFeatureTypes} features. These are currently not supported. Please make sure the it only contains Polygon or MultiPolygons`;
-    }
+            return `GeoJSON contains ${unsupportedFeatureTypes} features. These are currently not supported. Please make sure the it only contains Polygon or MultiPolygons`;
+        }
 
-    const totalArea = sum(
-        featureCollection.features.map(
-            (feature) => getFeatureArea(feature),
-        ).filter((num) => isDefined(num) && !Number.isNaN(num)),
-    );
-    const totalAreaInSqKm = totalArea / 1000000;
+        const totalArea = sum(
+            featureCollection.features.map(
+                (feature) => getFeatureArea(feature),
+            ).filter((num) => isDefined(num) && !Number.isNaN(num)),
+        );
+        const totalAreaInSqKm = totalArea / 1000000;
 
-    const zoomLevel = allValue?.zoomLevel;
-    const maxArea = isDefined(zoomLevel)
-        ? (5 * (4 ** (23 - zoomLevel)))
-        : DEFAULT_MAX_AREA;
+        const maxArea = isDefined(zoomLevel)
+            ? (5 * (4 ** (23 - zoomLevel)))
+            : DEFAULT_MAX_AREA;
 
-    if (maxArea < totalAreaInSqKm) {
-        return `Area covered by GeoJson (${totalAreaInSqKm.toFixed(2)} sqkm) is too large, max allowed area for selected zoom level is ${maxArea} sqkm`;
-    }
+        if (maxArea < totalAreaInSqKm) {
+            return `Area covered by GeoJSON (${totalAreaInSqKm.toFixed(2)} sqkm) is too large, max allowed area for selected zoom level is ${maxArea} sqkm`;
+        }
 
-    return undefined;
+        return undefined;
+    }
+    return validGeometryConditionForZoom;
 }
 
+export const MAX_OPTIONS = 6;
+export const MIN_OPTIONS = 2;
+export const MAX_SUB_OPTIONS = 6;
+export const MIN_SUB_OPTIONS = 2;
+
 export const projectFormSchema: ProjectFormSchema = {
     fields: (value): ProjectFormSchemaFields => {
-        const baseSchema: ProjectFormSchemaFields = {
-            projectTopic: [requiredStringCondition, getNoMoreThanNCharacterCondition(50)],
-            projectType: [requiredCondition],
-            projectRegion: [requiredStringCondition, getNoMoreThanNCharacterCondition(50)],
-            projectNumber: [requiredCondition, integerCondition, greaterThanCondition(0)],
-            requestingOrganisation: [requiredStringCondition],
-            name: [requiredStringCondition],
-            visibility: [requiredCondition],
-            lookFor: [getNoMoreThanNCharacterCondition(25)],
-            projectDetails: [requiredStringCondition, getNoMoreThanNCharacterCondition(10000)],
-            tutorialId: [requiredCondition],
-            projectImage: [requiredCondition],
-            verificationNumber: [
-                requiredCondition,
-                greaterThanOrEqualToCondition(3),
-                lessThanOrEqualToCondition(10000),
-                integerCondition,
-            ],
-            groupSize: [
-                requiredCondition,
-                greaterThanOrEqualToCondition(10),
-                lessThanOrEqualToCondition(250),
-                integerCondition,
-            ],
-            tileServer: {
-                fields: tileServerFieldsSchema,
+        let baseSchema: ProjectFormSchemaFields = {
+            projectTopic: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+                validations: [getNoMoreThanNCharacterCondition(50)],
             },
-            maxTasksPerUser: [
-                greaterThanCondition(0),
-                integerCondition,
-            ],
-
-            zoomLevel: [forceNullType],
-            geometry: [forceNullType],
-            filter: [forceNullType],
-            filterText: [forceNullType],
-            TMId: [forceNullType],
-            tileServerB: [forceNullType],
-        };
-
-        if (value?.projectType === PROJECT_TYPE_BUILD_AREA) {
-            return {
-                ...baseSchema,
-                zoomLevel: [
-                    requiredCondition,
-                    greaterThanOrEqualToCondition(14),
-                    lessThanOrEqualToCondition(22),
+            projectType: {
+                required: true,
+            },
+            projectRegion: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+                validations: [getNoMoreThanNCharacterCondition(50)],
+            },
+            projectNumber: {
+                required: true,
+                validations: [
                     integerCondition,
+                    greaterThanCondition(0),
                 ],
-                geometry: [
-                    requiredCondition,
-                    validGeometryCondition,
+            },
+            requestingOrganisation: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+            },
+            name: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+            },
+            visibility: {
+                required: true,
+            },
+            lookFor: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+                validations: [getNoMoreThanNCharacterCondition(25)],
+            },
+            projectDetails: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+                validations: [getNoMoreThanNCharacterCondition(10000)],
+            },
+            tutorialId: {
+                required: true,
+            },
+            projectImage: {
+                required: true,
+            },
+            verificationNumber: {
+                required: true,
+                requiredValidation: integerCondition,
+                validations: [
+                    greaterThanOrEqualToCondition(3),
+                    lessThanOrEqualToCondition(10000),
                 ],
-            };
-        }
-
-        if (value?.projectType === PROJECT_TYPE_FOOTPRINT) {
-            return {
-                ...baseSchema,
-                inputType: [requiredCondition],
-                filter: (value?.inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
-                    || value?.inputType === PROJECT_INPUT_TYPE_UPLOAD)
-                    ? [requiredCondition]
-                    : [forceNullType],
-                filterText: (
-                    value?.inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
-                    || value?.inputType === PROJECT_INPUT_TYPE_UPLOAD
-                ) && value?.filter === FILTER_OTHERS
-                    ? [requiredStringCondition, getNoMoreThanNCharacterCondition(1000)]
-                    : [forceNullType],
-                // FIXME: geometry type is either string or object
-                // update validation
-                geometry: (value?.inputType === PROJECT_INPUT_TYPE_LINK
-                    || value?.inputType === PROJECT_INPUT_TYPE_UPLOAD)
-                    ? [requiredCondition, validGeometryCondition]
-                    : [forceNullType],
-                // FIXME: number string condition
-                TMId: value?.inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
-                    ? [requiredStringCondition, getNoMoreThanNCharacterCondition(1000)]
-                    : [forceNullType],
-            };
-        }
-
-        if (value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
-            || value?.projectType === PROJECT_TYPE_COMPLETENESS) {
-            return {
-                ...baseSchema,
-                zoomLevel: [
-                    requiredCondition,
-                    greaterThanOrEqualToCondition(14),
-                    lessThanOrEqualToCondition(22),
+            },
+            groupSize: {
+                required: true,
+                validations: [
                     integerCondition,
+                    greaterThanOrEqualToCondition(10),
+                    lessThanOrEqualToCondition(250),
                 ],
-                geometry: [
-                    requiredCondition,
-                    validGeometryCondition,
+            },
+            tileServer: {
+                fields: tileServerFieldsSchema,
+            },
+            maxTasksPerUser: {
+                validations: [
+                    integerCondition,
+                    greaterThanCondition(0),
                 ],
-                tileServerB: {
-                    fields: tileServerFieldsSchema,
-                },
-            };
-        }
+            },
+        };
+
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType'],
+            ['customOptions'],
+            (formValues) => {
+                if (formValues?.projectType === PROJECT_TYPE_FOOTPRINT) {
+                    return {
+                        customOptions: {
+                            keySelector: (key) => key.value,
+                            member: (): CustomOptionFormSchemaMember => ({
+                                fields: (): CustomOptionSchemaFields => ({
+                                    title: {},
+                                    value: {},
+                                    description: {},
+                                    icon: {},
+                                    iconColor: {},
+                                    subOptions: {
+                                        keySelector: (subOption) => subOption.value,
+                                        member: () => ({
+                                            fields: () => ({
+                                                value: {},
+                                                description: {},
+                                            }),
+                                        }),
+                                    },
+                                }),
+                            }),
+                        },
+                    };
+                }
+                return {
+                    customOptions: { forceValue: nullValue },
+                };
+            },
+        );
+
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType'],
+            ['tileServerB'],
+            (v) => {
+                const projectType = v?.projectType;
+                if (
+                    projectType === PROJECT_TYPE_CHANGE_DETECTION
+                    || projectType === PROJECT_TYPE_COMPLETENESS
+                ) {
+                    return {
+                        tileServerB: {
+                            fields: tileServerFieldsSchema,
+                        },
+                    };
+                }
+                return {
+                    tileServerB: { forceValue: nullValue },
+                };
+            },
+        );
+
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType'],
+            ['zoomLevel'],
+            (v) => {
+                const projectType = v?.projectType;
+                if (
+                    projectType === PROJECT_TYPE_BUILD_AREA
+                    || projectType === PROJECT_TYPE_COMPLETENESS
+                    || projectType === PROJECT_TYPE_CHANGE_DETECTION
+                ) {
+                    return {
+                        zoomLevel: {
+                            required: true,
+                            validations: [
+                                greaterThanOrEqualToCondition(14),
+                                lessThanOrEqualToCondition(22),
+                                integerCondition,
+                            ],
+                        },
+                    };
+                }
+                return {
+                    zoomLevel: { forceValue: nullValue },
+                };
+            },
+        );
+
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType'],
+            ['inputType'],
+            (v) => {
+                const projectType = v?.projectType;
+                if (projectType === PROJECT_TYPE_FOOTPRINT) {
+                    return {
+                        inputType: { required: true },
+                    };
+                }
+                return {
+                    inputType: { forceValue: nullValue },
+                };
+            },
+        );
+
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType', 'inputType', 'zoomLevel'],
+            ['geometry'],
+            (v) => {
+                const projectType = v?.projectType;
+                const inputType = v?.inputType;
+                const zoomLevel = v?.zoomLevel;
+                if (
+                    projectType === PROJECT_TYPE_BUILD_AREA
+                    || projectType === PROJECT_TYPE_COMPLETENESS
+                    || projectType === PROJECT_TYPE_CHANGE_DETECTION
+                    || (projectType === PROJECT_TYPE_FOOTPRINT && (
+                        inputType === PROJECT_INPUT_TYPE_UPLOAD
+                    ))
+                ) {
+                    return {
+                        geometry: {
+                            required: true,
+                            validations: [validGeometryCondition(zoomLevel)],
+                        },
+                    };
+                }
+                // NOTE: we are using geometry field to hold both geometry url
+                // and uploaded geometry
+                if (
+                    projectType === PROJECT_TYPE_FOOTPRINT
+                    && inputType === PROJECT_INPUT_TYPE_LINK
+                ) {
+                    return {
+                        geometry: {
+                            required: true,
+                            requiredValidation: (val) => {
+                                if (typeof val === 'object') {
+                                    return undefined;
+                                }
+                                return requiredStringCondition(val);
+                            },
+                            validations: [
+                                (val) => {
+                                    if (typeof val === 'object') {
+                                        return 'Invalid URL.';
+                                    }
+                                    return urlCondition(val);
+                                },
+                            ],
+                        },
+                    };
+                }
+                return {
+                    geometry: { forceValue: nullValue },
+                };
+            },
+        );
+
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType', 'inputType'],
+            ['TMId'],
+            (v) => {
+                const projectType = v?.projectType;
+                const inputType = v?.inputType;
+                return {
+                    // TODO: number string condition
+                    TMId: projectType === PROJECT_TYPE_FOOTPRINT && (
+                        inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
+                    )
+                        ? {
+                            required: true,
+                            requiredValidation: requiredStringCondition,
+                            validations: [getNoMoreThanNCharacterCondition(1000)],
+                        }
+                        : {
+                            forceValue: nullValue,
+                        },
+                };
+            },
+        );
+
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType', 'inputType'],
+            ['filter'],
+            (v) => {
+                const projectType = v?.projectType;
+                const inputType = v?.inputType;
+                return {
+                    // TODO: we should also allow filter for PROJECT_INPUT_TYPE_LINK
+                    filter: projectType === PROJECT_TYPE_FOOTPRINT && (
+                        inputType === PROJECT_INPUT_TYPE_UPLOAD
+                        || inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
+                    )
+                        ? { required: true }
+                        : { forceValue: nullValue },
+                };
+            },
+        );
+
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType', 'inputType', 'filter'],
+            ['filterText'],
+            (v) => {
+                const projectType = v?.projectType;
+                const inputType = v?.inputType;
+                const filter = v?.filter;
+
+                if (
+                    projectType === PROJECT_TYPE_FOOTPRINT
+                    && (
+                        inputType === PROJECT_INPUT_TYPE_TASKING_MANAGER_ID
+                        || inputType === PROJECT_INPUT_TYPE_UPLOAD
+                    )
+                    && filter === FILTER_OTHERS
+                ) {
+                    return {
+                        filterText: {
+                            required: true,
+                            requiredValidation: requiredStringCondition,
+                            validations: [getNoMoreThanNCharacterCondition(1000)],
+                        },
+                    };
+                }
+                return {
+                    filterText: { forceValue: nullValue },
+                };
+            },
+        );
 
         return baseSchema;
     },
-    fieldDependencies: () => ({
-        geometry: ['zoomLevel'],
-    }),
 };
 
 export function generateProjectName(
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
new file mode 100644
index 000000000..73e4ee926
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { iconMap } from '#utils/common';
+import MobilePreview from '#components/MobilePreview';
+
+import {
+    colorKeyToColorMap,
+    PartialTutorialFormType,
+} from '../../utils';
+import styles from './styles.css';
+
+interface Props {
+    value: PartialTutorialFormType['customOptions'];
+    lookFor: string | undefined;
+}
+
+export default function CustomOptionPreview(props: Props) {
+    const {
+        value,
+        lookFor,
+    } = props;
+
+    return (
+        <MobilePreview
+            className={styles.customOptionPreview}
+            contentClassName={styles.content}
+            heading={lookFor || '{look for}'}
+            headingLabel="You are looking for:"
+        >
+            {value?.map((option, index) => {
+                const Icon = option.icon
+                    ? iconMap[option.icon]
+                    : iconMap['flag-outline'];
+
+                const previewText = [
+                    option.title || `{option ${index + 1}}`,
+                    option.description,
+                ].filter(Boolean).join(' - ');
+
+                return (
+                    <div
+                        className={styles.previewContent}
+                        key={option.optionId}
+                    >
+                        {Icon && (
+                            <div
+                                className={styles.previewIcon}
+                                style={{
+                                    backgroundColor: option.iconColor || colorKeyToColorMap.gray,
+                                }}
+                            >
+                                <Icon />
+                            </div>
+                        )}
+                        <div className={styles.previewText}>
+                            {previewText}
+                        </div>
+                    </div>
+                );
+            })}
+        </MobilePreview>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
new file mode 100644
index 000000000..eb2db2f03
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css
@@ -0,0 +1,29 @@
+.custom-option-preview {
+    position: sticky;
+    top: 0;
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-large);
+
+        .preview-content {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-medium);
+            color: var(--color-text-on-dark);
+
+            .preview-icon {
+                display: flex;
+                align-items: center;
+                border-radius: 50%;
+                padding: var(--spacing-extra-small);
+                font-size: var(--font-size-extra-large);
+            }
+
+            .preview-text {
+                font-size: var(--font-size-small);
+            }
+        }
+    }
+}
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/index.tsx
new file mode 100644
index 000000000..614faada2
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/index.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import {
+    Error,
+    SetValueArg,
+    getErrorObject,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+import TextInput from '#components/TextInput';
+import Button from '#components/Button';
+import NumberInput from '#components/NumberInput';
+
+import { PartialCustomOptionsType } from '..';
+import styles from './styles.css';
+
+type PartialSubOptionType = NonNullable<PartialCustomOptionsType['subOptions']>[number]
+
+interface Props {
+    value: PartialSubOptionType;
+    onChange: (value: SetValueArg<PartialSubOptionType>, index: number) => void;
+    onRemove: (index: number) => void;
+    index: number;
+    error: Error<PartialSubOptionType> | undefined;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+export default function SubOption(props: Props) {
+    const {
+        value,
+        onChange,
+        onRemove,
+        index,
+        error: riskyError,
+        disabled,
+        readOnly,
+    } = props;
+
+    const onReasonChange = useFormObject(index, onChange, { subOptionsId: 1 });
+
+    const error = getErrorObject(riskyError);
+    return (
+        <div className={styles.subOptionContent}>
+            <TextInput
+                className={styles.subOptionInput}
+                label="Title"
+                value={value.description}
+                name={'description' as const}
+                error={error?.description}
+                onChange={onReasonChange}
+                disabled={disabled || readOnly}
+            />
+            <NumberInput
+                className={styles.subOptionInput}
+                label="Value"
+                value={value.value}
+                name={'value' as const}
+                error={error?.value}
+                onChange={onReasonChange}
+                disabled={disabled || readOnly}
+            />
+            {!readOnly && (
+                <Button
+                    name={index}
+                    onClick={onRemove}
+                    disabled={disabled}
+                >
+                    Remove
+                </Button>
+            )}
+        </div>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/styles.css
new file mode 100644
index 000000000..2602d2e38
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/styles.css
@@ -0,0 +1,9 @@
+.sub-option-content {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--spacing-medium);
+
+    .sub-option-input {
+        flex-grow: 1;
+    }
+}
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
new file mode 100644
index 000000000..cd45bb4f7
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
@@ -0,0 +1,184 @@
+import React from 'react';
+import { MdAdd } from 'react-icons/md';
+
+import {
+    SetValueArg,
+    Error,
+    useFormObject,
+    getErrorObject,
+    useFormArray,
+} from '@togglecorp/toggle-form';
+import Button from '#components/Button';
+import Heading from '#components/Heading';
+import TextInput from '#components/TextInput';
+import NumberInput from '#components/NumberInput';
+import SelectInput from '#components/SelectInput';
+import NonFieldError from '#components/NonFieldError';
+import { iconList, keySelector, labelSelector } from '#utils/common';
+
+import SubOptionInput from './SubOptionInput';
+import {
+    PartialTutorialFormType,
+    iconColorOptions,
+} from '../utils';
+
+import styles from './styles.css';
+
+export type PartialCustomOptionsType = NonNullable<PartialTutorialFormType['customOptions']>[number]
+const defaultCustomOptionsValue: PartialCustomOptionsType = {
+    optionId: -1,
+};
+
+type subOptionsType = NonNullable<PartialCustomOptionsType['subOptions']>[number];
+
+interface Props {
+    value: PartialCustomOptionsType;
+    onChange: (value: SetValueArg<PartialCustomOptionsType>, index: number) => void | undefined;
+    index: number;
+    error: Error<PartialCustomOptionsType> | undefined;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+
+export default function CustomOptionInput(props: Props) {
+    const {
+        value,
+        onChange,
+        index,
+        error: riskyError,
+        disabled,
+        readOnly,
+    } = props;
+
+    const onOptionChange = useFormObject(index, onChange, defaultCustomOptionsValue);
+
+    const {
+        setValue: onSubOptionsAdd,
+        removeValue: onSubOptionsRemove,
+    } = useFormArray('subOptions', onOptionChange);
+
+    const error = getErrorObject(riskyError);
+
+    const subOptionsError = React.useMemo(
+        () => getErrorObject(error?.subOptions),
+        [error?.subOptions],
+    );
+
+    const handleSubOptionsAdd = React.useCallback(
+        () => {
+            onOptionChange(
+                (oldValue: PartialCustomOptionsType['subOptions']) => {
+                    const safeOldValue = oldValue ?? [];
+
+                    const newSubOptionsId = safeOldValue.length > 0
+                        ? Math.max(...safeOldValue.map((subOptions) => subOptions.subOptionsId)) + 1
+                        : 1;
+
+                    const newSubOptions: subOptionsType = {
+                        subOptionsId: newSubOptionsId,
+                    };
+
+                    return [...safeOldValue, newSubOptions];
+                },
+                'subOptions',
+            );
+        },
+        [onOptionChange],
+    );
+
+    return (
+        <div className={styles.customOption}>
+            <div className={styles.optionContent}>
+                <TextInput
+                    className={styles.optionInput}
+                    label="Title"
+                    value={value?.title}
+                    name={'title' as const}
+                    onChange={onOptionChange}
+                    error={error?.title}
+                    disabled={disabled || readOnly}
+                />
+                <SelectInput
+                    className={styles.optionIcon}
+                    name="icon"
+                    label="Icon"
+                    value={value?.icon}
+                    options={iconList}
+                    keySelector={keySelector}
+                    labelSelector={labelSelector}
+                    onChange={onOptionChange}
+                    error={error?.icon}
+                    disabled={disabled || readOnly}
+                />
+            </div>
+            <div className={styles.optionContent}>
+                <NumberInput
+                    className={styles.optionInput}
+                    label="Value"
+                    value={value?.value}
+                    name={'value' as const}
+                    onChange={onOptionChange}
+                    error={error?.value}
+                    disabled={disabled || readOnly}
+                />
+                <SelectInput
+                    className={styles.optionIcon}
+                    name="iconColor"
+                    label="Icon Color"
+                    value={value?.iconColor}
+                    options={iconColorOptions}
+                    keySelector={keySelector}
+                    labelSelector={labelSelector}
+                    onChange={onOptionChange}
+                    error={error?.iconColor}
+                    disabled={disabled || readOnly}
+                />
+            </div>
+            <TextInput
+                className={styles.optionInput}
+                label="Description"
+                value={value.description}
+                name={'description' as const}
+                onChange={onOptionChange}
+                error={error?.description}
+                disabled={disabled || readOnly}
+            />
+            {/* FIXME: use accordion open by default */}
+            <div className={styles.subOptions}>
+                <Heading level={5}>
+                    Sub-options
+                </Heading>
+                <NonFieldError
+                    error={subOptionsError}
+                />
+                {value.subOptions?.map((sub, i) => (
+                    <SubOptionInput
+                        key={sub.subOptionsId}
+                        value={sub}
+                        index={i}
+                        onChange={onSubOptionsAdd}
+                        onRemove={onSubOptionsRemove}
+                        error={subOptionsError?.[sub.subOptionsId]}
+                        disabled={disabled}
+                        readOnly={readOnly}
+                    />
+                ))}
+                {!value.subOptions?.length && (
+                    <div>No sub-options</div>
+                )}
+                {!readOnly && (
+                    <Button
+                        name="addSubOption"
+                        className={styles.addButton}
+                        icons={<MdAdd />}
+                        onClick={handleSubOptionsAdd}
+                        // FIXME: use constant from utils
+                        disabled={disabled || (value.subOptions && value.subOptions.length >= 6)}
+                    >
+                        Add Sub-option
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
new file mode 100644
index 000000000..044a38345
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css
@@ -0,0 +1,31 @@
+.custom-option {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-large);
+
+    .option-content {
+        display: flex;
+        gap: var(--spacing-medium);
+
+        .option-input {
+            flex-grow: 1;
+        }
+
+        .option-icon {
+            flex-basis: 10rem;
+        }
+    }
+
+    .add-button {
+        width: fit-content;
+    }
+
+    .sub-options {
+        display: flex;
+        flex-direction: column;
+        border-radius: var(--radius-card-border);
+        gap: var(--spacing-medium);
+        background-color: var(--color-background);
+        padding: var(--spacing-medium);
+    }
+}
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/BlockInput/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/BlockInput/index.tsx
new file mode 100644
index 000000000..9519f8560
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/BlockInput/index.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+    SetValueArg,
+    Error,
+    useFormObject,
+    getErrorObject,
+} from '@togglecorp/toggle-form';
+
+import FileInput from '#components/FileInput';
+import MarkdownEditor from '#components/MarkdownEditor';
+
+import { PartialBlocksType } from '../../utils';
+// import styles from './styles.css';
+
+type PartialBlockType = NonNullable<PartialBlocksType>[number];
+interface Props {
+    value: PartialBlockType;
+    onChange: (value: SetValueArg<PartialBlockType>, index: number) => void;
+    index: number;
+    error: Error<PartialBlockType> | undefined;
+    disabled: boolean;
+}
+
+export default function BlockInput(props: Props) {
+    const {
+        value,
+        onChange,
+        index,
+        error: riskyError,
+        disabled,
+    } = props;
+
+    const onBlockChange = useFormObject(index, onChange, { blockNumber: -1, blockType: 'text' });
+
+    const error = getErrorObject(riskyError);
+    return (
+        <div>
+            {value.blockType === 'text' && (
+                <MarkdownEditor
+                    name={'textDescription' as const}
+                    value={value?.textDescription}
+                    label={`Block #${index + 1}`}
+                    onChange={onBlockChange}
+                    error={error?.textDescription}
+                    disabled={disabled}
+                />
+            )}
+            {value.blockType === 'image' && (
+                <FileInput
+                    name={'imageFile' as const}
+                    value={value?.imageFile}
+                    onChange={onBlockChange}
+                    label={`Block #${index + 1}`}
+                    hint="Make sure you have the rights to
+                    use this image. It should end with  .jpg or .png."
+                    accept="image/png, image/jpeg"
+                    error={error?.imageFile}
+                    disabled={disabled}
+                />
+            )}
+        </div>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/BlockInput/styles.css b/manager-dashboard/app/views/NewTutorial/InformationPageInput/BlockInput/styles.css
new file mode 100644
index 000000000..2add2c32c
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/BlockInput/styles.css
@@ -0,0 +1,3 @@
+.block {
+    display: flex;
+}
\ No newline at end of file
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
new file mode 100644
index 000000000..87f8d8ef9
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+
+import MobilePreview from '#components/MobilePreview';
+import Preview from '#components/Preview';
+import MarkdownPreview from '#components/MarkdownPreview';
+
+import { PartialTutorialFormType } from '../../utils';
+import styles from './styles.css';
+
+interface Props {
+    value: NonNullable<PartialTutorialFormType['informationPages']>[number];
+    index: number;
+    lookFor: string | undefined;
+}
+
+export default function InformationPagePreview(props: Props) {
+    const {
+        value,
+        index,
+        lookFor,
+    } = props;
+
+    return (
+        <MobilePreview
+            className={styles.informationPreview}
+            heading={lookFor || '{look for}'}
+            headingLabel="You are looking for:"
+            contentClassName={styles.content}
+        >
+            {value?.title || `{page title ${index}}`}
+            {value?.blocks?.map((preview) => {
+                if (preview.blockType === 'text') {
+                    return (
+                        <MarkdownPreview
+                            key={preview.blockNumber}
+                            markdown={preview.textDescription || '{block}'}
+                        />
+                    );
+                }
+                if (preview.blockType === 'image') {
+                    return (
+                        <Preview
+                            key={preview.blockNumber}
+                            className={styles.imagePreview}
+                            file={preview.imageFile}
+                        />
+                    );
+                }
+                return null;
+            })}
+        </MobilePreview>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
new file mode 100644
index 000000000..0d575060f
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css
@@ -0,0 +1,15 @@
+.information-preview {
+    position: sticky;
+    top: 0;
+    overflow: auto;
+
+    .content {
+        display: flex;
+        gap: var(--spacing-large);
+        flex-direction: column;
+    }
+
+    .image-preview {
+        height: 10rem;
+    }
+}
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
new file mode 100644
index 000000000..5faf46697
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/index.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import {
+    SetValueArg,
+    Error,
+    useFormObject,
+    getErrorObject,
+    useFormArray,
+} from '@togglecorp/toggle-form';
+
+import TextInput from '#components/TextInput';
+import InformationPagePreview from './InformationPagePreview';
+
+import { InformationPagesType } from '../utils';
+import BlockInput from './BlockInput';
+
+import styles from './styles.css';
+
+interface Props {
+    value: InformationPagesType,
+    onChange: (value: SetValueArg<InformationPagesType>, index: number) => void;
+    index: number;
+    error: Error<InformationPagesType> | undefined;
+    disabled: boolean;
+    lookFor: string | undefined;
+}
+
+export default function InformationPageInput(props: Props) {
+    const {
+        value,
+        onChange,
+        index,
+        error: riskyError,
+        disabled,
+        lookFor,
+    } = props;
+
+    const onInformationPageChange = useFormObject(index, onChange, { pageNumber: -1 });
+
+    const {
+        setValue: onChangeBlock,
+    } = useFormArray('blocks', onInformationPageChange);
+
+    const error = getErrorObject(riskyError);
+
+    const blockError = React.useMemo(
+        () => getErrorObject(error?.blocks),
+        [error?.blocks],
+    );
+
+    return (
+        <div className={styles.informationContainer}>
+            <div className={styles.informationForm}>
+                <TextInput
+                    name={'title' as const}
+                    value={value?.title}
+                    label="Title"
+                    onChange={onInformationPageChange}
+                    error={error?.title}
+                    disabled={disabled}
+                />
+                {value.blocks?.map((block, i) => (
+                    <BlockInput
+                        key={block.blockNumber}
+                        value={block}
+                        onChange={onChangeBlock}
+                        index={i}
+                        error={blockError?.[block.blockNumber]}
+                        disabled={disabled}
+                    />
+                ))}
+            </div>
+            <InformationPagePreview
+                value={value}
+                index={index}
+                lookFor={lookFor}
+            />
+        </div>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/InformationPageInput/styles.css b/manager-dashboard/app/views/NewTutorial/InformationPageInput/styles.css
new file mode 100644
index 000000000..6e4a55005
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/InformationPageInput/styles.css
@@ -0,0 +1,11 @@
+.information-container {
+    display: flex;
+    gap: var(--spacing-extra-large);
+
+    .informationForm {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        gap: var(--spacing-large);
+    }
+}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/BuildAreaGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/BuildAreaGeoJsonPreview/index.tsx
new file mode 100644
index 000000000..95b032f16
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/BuildAreaGeoJsonPreview/index.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { PathOptions, StyleFunction } from 'leaflet';
+import { _cs } from '@togglecorp/fujs';
+
+import MobilePreview from '#components/MobilePreview';
+import GeoJsonPreview from '#components/GeoJsonPreview';
+import { iconMap, IconKey } from '#utils/common';
+
+import { BuildAreaGeoJSON, BuildAreaProperties } from '../../utils';
+import styles from './styles.css';
+
+interface Props {
+    className?: string;
+    geoJson: BuildAreaGeoJSON | undefined;
+    previewPopUp?: {
+        title?: string;
+        description?: string;
+        icon?: IconKey;
+    }
+    url: string | undefined;
+    lookFor: string | undefined;
+}
+
+const previewStyles: StyleFunction<BuildAreaProperties> = (feature) => {
+    const buildAreaPreviewStylesobject: PathOptions = {
+        color: '#ffffff',
+        stroke: true,
+        weight: 0.5,
+        fillOpacity: 0.2,
+    };
+    if (!feature) {
+        return buildAreaPreviewStylesobject;
+    }
+    const referenceColorMap: Record<number, string> = {
+        0: 'transparent',
+        1: 'green',
+        2: 'yellow',
+        3: 'red',
+    };
+    const ref = feature.properties.reference;
+    return {
+        ...buildAreaPreviewStylesobject,
+        fillColor: referenceColorMap[ref] || 'transparent',
+    };
+};
+
+function BuildAreaGeoJsonPreview(props: Props) {
+    const {
+        className,
+        geoJson,
+        previewPopUp,
+        url,
+        lookFor,
+    } = props;
+
+    const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
+
+    return (
+        <MobilePreview
+            className={_cs(styles.scenarioGeoJsonPreview, className)}
+            heading={lookFor || '{look for}'}
+            headingLabel="You are looking for:"
+            popupIcons={Comp && <Comp />}
+            popupTitle={previewPopUp?.title || '{title}'}
+            popupDescription={previewPopUp?.description || '{description}'}
+            contentClassName={styles.content}
+        >
+            <GeoJsonPreview
+                className={styles.mapContainer}
+                geoJson={geoJson}
+                url={url}
+                previewStyle={previewStyles}
+            />
+        </MobilePreview>
+    );
+}
+
+export default BuildAreaGeoJsonPreview;
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/BuildAreaGeoJsonPreview/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/BuildAreaGeoJsonPreview/styles.css
new file mode 100644
index 000000000..b30921584
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/BuildAreaGeoJsonPreview/styles.css
@@ -0,0 +1,8 @@
+.scenario-geo-json-preview {
+    .content {
+        .map-container {
+            z-index: 0;
+            height: var(--height-mobile-preview-builarea-content);
+        }
+    }
+}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
new file mode 100644
index 000000000..e64d1c3cc
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { _cs } from '@togglecorp/fujs';
+
+import MobilePreview from '#components/MobilePreview';
+import GeoJsonPreview from '#components/GeoJsonPreview';
+import { iconMap, IconKey } from '#utils/common';
+
+import { ChangeDetectionGeoJSON } from '../../utils';
+import styles from './styles.css';
+
+interface Props {
+    className?: string;
+    geoJson: ChangeDetectionGeoJSON | undefined;
+    previewPopUp?: {
+        title?: string;
+        description?: string;
+        icon?: IconKey;
+    }
+    urlA: string | undefined;
+    urlB: string | undefined;
+    lookFor: string | undefined;
+}
+
+const previewStyles = () => (
+    {
+        stroke: true,
+        weight: 0.5,
+        color: '#ffffff',
+        fillColor: 'transparent',
+        fillOpacity: 0.2,
+    }
+);
+
+export default function ChangeDetectionGeoJsonPreview(props: Props) {
+    const {
+        className,
+        geoJson,
+        previewPopUp,
+        urlA,
+        urlB,
+        lookFor,
+    } = props;
+
+    const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
+
+    return (
+        <MobilePreview
+            className={_cs(styles.changeDetectionGeoJsonPreview, className)}
+            heading={lookFor || '{look for}'}
+            headingLabel="You are looking for:"
+            popupIcons={Comp && <Comp />}
+            popupTitle={previewPopUp?.title || '{title}'}
+            popupDescription={previewPopUp?.description || '{description}'}
+            contentClassName={styles.content}
+            popupVerticalPosition="center"
+        >
+            <GeoJsonPreview
+                className={styles.mapPreview}
+                previewStyle={previewStyles}
+                geoJson={geoJson}
+                url={urlA}
+            />
+            <GeoJsonPreview
+                className={styles.mapPreview}
+                previewStyle={previewStyles}
+                geoJson={geoJson}
+                url={urlB}
+            />
+        </MobilePreview>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css
new file mode 100644
index 000000000..5242c622a
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css
@@ -0,0 +1,14 @@
+.change-detection-geo-json-preview {
+    .content {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        gap: var(--spacing-extra-large);
+
+        .map-preview {
+            align-self: center;
+            width: var(--height-mobile-preview-change-detection-content);
+            height: var(--height-mobile-preview-change-detection-content);
+        }
+    }
+}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
new file mode 100644
index 000000000..e5971e7dd
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { StyleFunction } from 'leaflet';
+import { _cs } from '@togglecorp/fujs';
+
+import MobilePreview from '#components/MobilePreview';
+import GeoJsonPreview from '#components/GeoJsonPreview';
+import { IconKey, iconMap } from '#utils/common';
+
+import {
+    PartialCustomOptionsType,
+    colorKeyToColorMap,
+    FootprintGeoJSON,
+    FootprintProperties,
+} from '../../utils';
+import styles from './styles.css';
+
+interface Props {
+    className?: string;
+    geoJson: FootprintGeoJSON | undefined;
+    previewPopUp?: {
+        title?: string;
+        description?: string;
+        icon?: IconKey;
+    }
+    url: string | undefined;
+    customOptions: PartialCustomOptionsType | undefined;
+    lookFor: string | undefined;
+}
+
+const previewStyles: StyleFunction<FootprintProperties> = () => (
+    {
+        color: '#ffffff',
+        dashArray: '3',
+        stroke: true,
+        weight: 1,
+        fillColor: 'transparent',
+    }
+);
+
+export default function FootprintGeoJsonPreview(props: Props) {
+    const {
+        className,
+        geoJson,
+        url,
+        previewPopUp,
+        customOptions,
+        lookFor,
+    } = props;
+
+    const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
+
+    return (
+        <MobilePreview
+            className={_cs(styles.footprintGeoJsonPreview, className)}
+            contentClassName={styles.content}
+            heading={lookFor || '{look for}'}
+            headingLabel="You are looking for:"
+            popupIcons={Comp && <Comp />}
+            popupTitle={previewPopUp?.title || '{title}'}
+            popupDescription={previewPopUp?.description || '{description}'}
+        >
+            <GeoJsonPreview
+                className={styles.mapPreview}
+                previewStyle={previewStyles}
+                url={url}
+                geoJson={geoJson}
+            />
+            <div className={styles.options}>
+                {customOptions?.map((option) => {
+                    const Icon = option.icon
+                        ? iconMap[option.icon]
+                        : iconMap['flag-outline'];
+                    return (
+                        <div
+                            key={option.optionId}
+                            className={styles.optionContainer}
+                        >
+                            <div
+                                className={styles.option}
+                                style={{
+                                    backgroundColor: (
+                                        option.iconColor
+                                        || colorKeyToColorMap.gray
+                                    ),
+                                }}
+                            >
+                                {Icon && (
+                                    <Icon />
+                                )}
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        </MobilePreview>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css
new file mode 100644
index 000000000..fba8474d7
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/styles.css
@@ -0,0 +1,36 @@
+.footprint-geo-json-preview {
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-large);
+
+        .map-preview {
+            position: relative;
+            z-index: 0;
+            height: var(--height-mobile-preview-footprint-content);
+        }
+
+        .options {
+            display: grid;
+            flex-grow: 1;
+            grid-template-columns: 1fr 1fr 1fr;
+            grid-gap: var(--spacing-large);
+
+            .option-container {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .option {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 50%;
+                    width: 2.5rem;
+                    height: 2.5rem;
+                    font-size: var(--font-size-extra-large);
+                }
+            }
+        }
+    }
+}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
new file mode 100644
index 000000000..cba2dec68
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx
@@ -0,0 +1,320 @@
+import React from 'react';
+import {
+    useFormObject,
+    PartialForm,
+    SetValueArg,
+    Error,
+    getErrorObject,
+} from '@togglecorp/toggle-form';
+import {
+    iconList,
+    valueSelector,
+    labelSelector,
+    keySelector,
+    IconKey,
+    ProjectType,
+    PROJECT_TYPE_BUILD_AREA,
+    PROJECT_TYPE_FOOTPRINT,
+    PROJECT_TYPE_CHANGE_DETECTION,
+    PROJECT_TYPE_COMPLETENESS,
+} from '#utils/common';
+import TextInput from '#components/TextInput';
+import Heading from '#components/Heading';
+import SelectInput from '#components/SelectInput';
+import SegmentInput from '#components/SegmentInput';
+
+import {
+    TutorialTasksGeoJSON,
+    FootprintGeoJSON,
+    BuildAreaGeoJSON,
+    ChangeDetectionGeoJSON,
+    PartialCustomOptionsType,
+} from '../utils';
+import BuildAreaGeoJsonPreview from './BuildAreaGeoJsonPreview';
+import FootprintGeoJsonPreview from './FootprintGeoJsonPreview';
+import ChangeDetectionGeoJsonPreview from './ChangeDetectionGeoJsonPreview';
+import styles from './styles.css';
+
+type ScenarioType = {
+    scenarioId: number;
+    hint: {
+        description: string;
+        icon: IconKey;
+        title: string;
+    };
+    instructions: {
+        description: string;
+        icon: IconKey;
+        title: string;
+    };
+    success: {
+        description: string;
+        icon: IconKey;
+        title: string;
+    };
+};
+
+interface ScenarioSegmentType {
+    value: 'instructions' | 'hint' | 'success';
+    label: string;
+}
+
+const previewOptions: ScenarioSegmentType[] = [
+    { value: 'instructions', label: 'Instruction' },
+    { value: 'hint', label: 'Hint' },
+    { value: 'success', label: 'Success' },
+];
+
+type PartialScenarioType = PartialForm<ScenarioType, 'scenarioId'>;
+
+const defaultScenarioTabsValue: PartialScenarioType = {
+    scenarioId: -1,
+};
+
+interface Props {
+    value: PartialScenarioType,
+    onChange: (value: SetValueArg<PartialScenarioType>, index: number) => void;
+    index: number,
+    error: Error<PartialScenarioType> | undefined;
+    geoJson: TutorialTasksGeoJSON | undefined;
+    projectType: ProjectType | undefined;
+    urlA: string | undefined;
+    urlB: string | undefined;
+    customOptions: PartialCustomOptionsType | undefined;
+    scenarioId: number;
+    disabled: boolean;
+    lookFor: string | undefined;
+}
+
+export default function ScenarioPageInput(props: Props) {
+    const {
+        value,
+        onChange,
+        index,
+        error: riskyError,
+        geoJson: geoJsonFromProps,
+        urlA,
+        projectType,
+        urlB,
+        customOptions,
+        scenarioId,
+        disabled,
+        lookFor,
+    } = props;
+
+    const [activeSegmentInput, setActiveInput] = React.useState<ScenarioSegmentType['value']>('instructions');
+
+    const onFieldChange = useFormObject(
+        index,
+        onChange,
+        defaultScenarioTabsValue,
+    );
+
+    const onInstructionFieldChange = useFormObject<'instructions', PartialScenarioType['instructions']>(
+        'instructions',
+        onFieldChange,
+        {},
+    );
+    const onHintFieldChange = useFormObject<'hint', PartialScenarioType['hint']>(
+        'hint',
+        onFieldChange,
+        {},
+    );
+    const onSuccessFieldChange = useFormObject<'success', PartialScenarioType['success']>(
+        'success',
+        onFieldChange,
+        {},
+    );
+
+    const handleInstructionFieldChange = React.useCallback<typeof onInstructionFieldChange>(
+        (...args) => {
+            setActiveInput('instructions');
+            onInstructionFieldChange(...args);
+        },
+        [onInstructionFieldChange],
+    );
+
+    const handleHintFieldChange = React.useCallback<typeof onHintFieldChange>(
+        (...args) => {
+            setActiveInput('hint');
+            onHintFieldChange(...args);
+        },
+        [onHintFieldChange],
+    );
+
+    const handleSuccessFieldChange = React.useCallback<typeof onSuccessFieldChange>(
+        (...args) => {
+            setActiveInput('success');
+            onSuccessFieldChange(...args);
+        },
+        [onSuccessFieldChange],
+    );
+
+    const error = getErrorObject(riskyError);
+    const instructionsError = getErrorObject(error?.instructions);
+    const hintError = getErrorObject(error?.hint);
+    const successError = getErrorObject(error?.success);
+
+    const geoJson = React.useMemo(
+        () => {
+            if (!geoJsonFromProps) {
+                return undefined;
+            }
+            return {
+                ...geoJsonFromProps,
+                features: geoJsonFromProps.features.filter(
+                    (feature) => feature.properties.screen === scenarioId,
+                ),
+            };
+        },
+        [geoJsonFromProps, scenarioId],
+    );
+
+    const previewPopUpData = value[activeSegmentInput];
+
+    return (
+        <div className={styles.scenario}>
+            <div className={styles.scenarioContent}>
+                <Heading level={4}>
+                    Instructions
+                </Heading>
+                <div className={styles.scenarioForm}>
+                    <div className={styles.scenarioFormContent}>
+                        <TextInput
+                            name={'title' as const}
+                            value={value.instructions?.title}
+                            label="Title"
+                            onChange={handleInstructionFieldChange}
+                            error={instructionsError?.title}
+                            disabled={disabled}
+                        />
+                        <TextInput
+                            name={'description' as const}
+                            value={value.instructions?.description}
+                            label="Description"
+                            onChange={handleInstructionFieldChange}
+                            error={instructionsError?.description}
+                            disabled={disabled}
+                        />
+                    </div>
+                    <SelectInput
+                        name="icon"
+                        label="Icon"
+                        value={value.instructions?.icon}
+                        options={iconList}
+                        keySelector={keySelector}
+                        labelSelector={labelSelector}
+                        onChange={handleInstructionFieldChange}
+                        error={instructionsError?.icon}
+                        disabled={disabled}
+                    />
+                </div>
+                <Heading level={4}>
+                    Hint
+                </Heading>
+                <div className={styles.scenarioForm}>
+                    <div className={styles.scenarioFormContent}>
+                        <TextInput
+                            name={'title' as const}
+                            value={value.hint?.title}
+                            label="Title"
+                            onChange={handleHintFieldChange}
+                            error={hintError?.title}
+                            disabled={disabled}
+                        />
+                        <TextInput
+                            name={'description' as const}
+                            value={value.hint?.description}
+                            label="Description"
+                            onChange={handleHintFieldChange}
+                            error={hintError?.description}
+                            disabled={disabled}
+                        />
+                    </div>
+                    <SelectInput
+                        name="icon"
+                        label="Icon"
+                        value={value.hint?.icon}
+                        options={iconList}
+                        keySelector={keySelector}
+                        labelSelector={labelSelector}
+                        onChange={handleHintFieldChange}
+                        error={hintError?.icon}
+                        disabled={disabled}
+                    />
+                </div>
+                <Heading level={4}>
+                    Success
+                </Heading>
+                <div className={styles.scenarioForm}>
+                    <div className={styles.scenarioFormContent}>
+                        <TextInput
+                            name={'title' as const}
+                            value={value.success?.title}
+                            label="Title"
+                            onChange={handleSuccessFieldChange}
+                            error={successError?.title}
+                            disabled={disabled}
+                        />
+                        <TextInput
+                            name={'description' as const}
+                            value={value.success?.description}
+                            label="Description"
+                            onChange={handleSuccessFieldChange}
+                            error={successError?.description}
+                            disabled={disabled}
+                        />
+                    </div>
+                    <SelectInput
+                        name="icon"
+                        label="Icon"
+                        value={value.success?.icon}
+                        options={iconList}
+                        keySelector={keySelector}
+                        labelSelector={labelSelector}
+                        onChange={handleSuccessFieldChange}
+                        error={successError?.icon}
+                        disabled={disabled}
+                    />
+                </div>
+            </div>
+            <div className={styles.scenarioPreview}>
+                {projectType === PROJECT_TYPE_CHANGE_DETECTION && (
+                    <ChangeDetectionGeoJsonPreview
+                        geoJson={geoJson as ChangeDetectionGeoJSON | undefined}
+                        previewPopUp={previewPopUpData}
+                        urlA={urlA}
+                        urlB={urlB}
+                        lookFor={lookFor}
+                    />
+                )}
+                {((projectType === PROJECT_TYPE_BUILD_AREA)
+                    || (projectType === PROJECT_TYPE_COMPLETENESS)) && (
+                    <BuildAreaGeoJsonPreview
+                        geoJson={geoJson as BuildAreaGeoJSON | undefined}
+                        previewPopUp={previewPopUpData}
+                        url={urlA}
+                        lookFor={lookFor}
+                    />
+                )}
+                {projectType === PROJECT_TYPE_FOOTPRINT && (
+                    <FootprintGeoJsonPreview
+                        geoJson={geoJson as FootprintGeoJSON | undefined}
+                        previewPopUp={previewPopUpData}
+                        url={urlA}
+                        customOptions={customOptions}
+                        lookFor={lookFor}
+                    />
+                )}
+                <SegmentInput
+                    name={undefined}
+                    value={activeSegmentInput}
+                    options={previewOptions}
+                    keySelector={valueSelector}
+                    labelSelector={labelSelector}
+                    onChange={setActiveInput}
+                />
+            </div>
+        </div>
+    );
+}
diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/styles.css b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/styles.css
new file mode 100644
index 000000000..20e8b2e57
--- /dev/null
+++ b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/styles.css
@@ -0,0 +1,29 @@
+.scenario {
+    display: flex;
+    gap: var(--spacing-extra-large);
+
+    .scenario-content {
+        display: flex;
+        flex-basis: 65%;
+        flex-direction: column;
+        gap: var(--spacing-large);
+
+        .scenario-form {
+            display: flex;
+            gap: var(--spacing-medium);
+
+            .scenario-form-content {
+                display: flex;
+                flex-basis: 80%;
+                flex-direction: column;
+                gap: var(--spacing-medium);
+            }
+        }
+    }
+
+    .scenario-preview {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+    }
+}
diff --git a/manager-dashboard/app/views/NewTutorial/index.tsx b/manager-dashboard/app/views/NewTutorial/index.tsx
index 945de082a..433c9dca0 100644
--- a/manager-dashboard/app/views/NewTutorial/index.tsx
+++ b/manager-dashboard/app/views/NewTutorial/index.tsx
@@ -2,12 +2,18 @@ import React from 'react';
 import {
     _cs,
     isDefined,
+    unique,
+    isNotDefined,
+    isTruthyString,
+    difference,
+    listToMap,
 } from '@togglecorp/fujs';
 import {
     useForm,
     getErrorObject,
     createSubmitHandler,
     analyzeErrors,
+    useFormArray,
 } from '@togglecorp/toggle-form';
 import {
     getStorage,
@@ -25,54 +31,320 @@ import {
     MdSwipe,
     MdOutlinePublishedWithChanges,
     MdOutlineUnpublished,
+    MdAdd,
 } from 'react-icons/md';
+import {
+    IoIosTrash,
+} from 'react-icons/io';
+import {
+    IoInformationCircleOutline,
+} from 'react-icons/io5';
 import { Link } from 'react-router-dom';
 
 import UserContext from '#base/context/UserContext';
+import projectTypeOptions from '#base/configs/projectTypes';
 import useMountedRef from '#hooks/useMountedRef';
 import Modal from '#components/Modal';
 import TextInput from '#components/TextInput';
 import NumberInput from '#components/NumberInput';
+import Heading from '#components/Heading';
 import SegmentInput from '#components/SegmentInput';
-import FileInput from '#components/FileInput';
 import GeoJsonFileInput from '#components/GeoJsonFileInput';
-import JsonFileInput from '#components/JsonFileInput';
+import ExpandableContainer from '#components/ExpandableContainer';
+import PopupButton from '#components/PopupButton';
 import TileServerInput, {
     TILE_SERVER_BING,
+    TILE_SERVER_ESRI,
     tileServerDefaultCredits,
 } from '#components/TileServerInput';
 import InputSection from '#components/InputSection';
 import Button from '#components/Button';
+import NonFieldError from '#components/NonFieldError';
+import EmptyMessage from '#components/EmptyMessage';
+import AlertBanner from '#components/AlertBanner';
 import {
     valueSelector,
     labelSelector,
     PROJECT_TYPE_BUILD_AREA,
     PROJECT_TYPE_COMPLETENESS,
     PROJECT_TYPE_CHANGE_DETECTION,
+    PROJECT_TYPE_FOOTPRINT,
+    ProjectType,
 } from '#utils/common';
 
 import {
+    tileServerUrls,
     tutorialFormSchema,
+    defaultFootprintCustomOptions,
     TutorialFormType,
     PartialTutorialFormType,
+    PartialInformationPagesType,
+    ScenarioPagesType,
+    CustomOptionType,
+    InformationPagesType,
+    InformationPageTemplateKey,
+    infoPageTemplateOptions,
+    infoPageBlocksMap,
+    MAX_INFO_PAGES,
+    MAX_OPTIONS,
+    deleteKey,
+    TutorialTasksGeoJSON,
+    BuildAreaProperties,
+    ChangeDetectionProperties,
 } from './utils';
+
+import CustomOptionPreview from './CustomOptionInput/CustomOptionPreview';
+import CustomOptionInput from './CustomOptionInput';
+import ScenarioPageInput from './ScenarioPageInput';
+import InformationPageInput from './InformationPageInput';
 import styles from './styles.css';
 
-import projectTypeOptions from '#base/configs/projectTypes';
+export function getDuplicates<T, K extends string | number>(
+    list: T[],
+    keySelector: (item: T) => K,
+    filter: (count: number) => boolean = (count) => count > 1,
+) {
+    const counts = listToMap<T, number, K>(
+        list,
+        keySelector,
+        (_, key, __, acc) => {
+            const value: number | undefined = acc[key];
+            return isDefined(value) ? value + 1 : 1;
+        },
+    );
+    return Object.keys(counts).filter((key) => filter(counts[key as K]));
+}
+
+type ValidType ='number' | 'string' | 'boolean';
+function checkSchema<T extends object>(
+    obj: T,
+    schema: Record<string, ValidType | ValidType[]>,
+) {
+    const schemaKeys = Object.keys(schema);
+    const errors = schemaKeys.map(
+        (key) => {
+            const expectedType = schema[key];
+
+            const keySafe = key as keyof T;
+            const currentValue: unknown = obj[keySafe];
+            const valueType = typeof currentValue;
+
+            if (Array.isArray(expectedType)) {
+                const indexOfType = expectedType.findIndex(
+                    (type) => type === valueType,
+                );
+                if (indexOfType === -1) {
+                    return `type of ${key} expected to be one of type ${expectedType.join(', ')}`;
+                }
+            } else if (typeof currentValue !== expectedType) {
+                return `type of ${key} expected to be of ${expectedType}`;
+            }
+
+            return undefined;
+        },
+    ).filter(isDefined);
+
+    return errors;
+}
+
+function getGeoJSONError(
+    tutorialTasks: TutorialTasksGeoJSON,
+    projectType: ProjectType,
+) {
+    if (isNotDefined(tutorialTasks.features) || !Array.isArray(tutorialTasks.features)) {
+        return 'GeoJSON does not contain iterable features';
+    }
+
+    // Check properties schema
+    const projectSchemas: {
+        [key in ProjectType]: Record<string, ValidType | ValidType[]>;
+    } = {
+        [PROJECT_TYPE_FOOTPRINT]: {
+            id: ['string', 'number'],
+            reference: 'number',
+            screen: 'number',
+        },
+        [PROJECT_TYPE_CHANGE_DETECTION]: {
+            reference: 'number',
+            screen: 'number',
+            task_id: 'string',
+            tile_x: 'number',
+            tile_y: 'number',
+            tile_z: 'number',
+        },
+        [PROJECT_TYPE_BUILD_AREA]: {
+            reference: 'number',
+            screen: 'number',
+            task_id: 'string',
+            tile_x: 'number',
+            tile_y: 'number',
+            tile_z: 'number',
+        },
+        [PROJECT_TYPE_COMPLETENESS]: {
+            reference: 'number',
+            screen: 'number',
+            task_id: 'string',
+            tile_x: 'number',
+            tile_y: 'number',
+            tile_z: 'number',
+        },
+    };
+    const schemaErrors = tutorialTasks.features.map(
+        (feature) => checkSchema(
+            feature.properties,
+            projectSchemas[projectType],
+        ).join(', '),
+    ).filter(isTruthyString);
+    if (schemaErrors.length > 0) {
+        return `Invalid GeoJSON for Footprint: ${schemaErrors[0]} (${schemaErrors.length} total errors)`;
+    }
+
+    return undefined;
+}
+
+function getGeoJSONWarning(
+    tutorialTasks: TutorialTasksGeoJSON | undefined,
+    projectType: ProjectType | undefined,
+    customOptions: number[] | undefined,
+    maxZoom: number | undefined,
+) {
+    const errors = [];
+
+    const screens = tutorialTasks?.features?.map(
+        (feature) => feature.properties.screen,
+    ) ?? [];
+    if (screens.length > 0) {
+        const minScreen = Math.min(...screens);
+        const maxScreen = Math.max(...screens);
+        const totalScreen = maxScreen - minScreen + 1;
+
+        if (minScreen !== 1) {
+            errors.push(`Screen in GeoJSON should start from 1. The first screen is ${minScreen}`);
+        }
+
+        const actualScreens = new Set(screens);
+        const expectedScreens = new Set(Array.from(
+            { length: totalScreen },
+            (_, index) => minScreen + index,
+        ));
+
+        const missingScreens = difference(
+            expectedScreens,
+            actualScreens,
+        );
+
+        if (missingScreens.size === 1) {
+            errors.push(`Screen in GeoJSON should be sequential. The missing screen is ${[...missingScreens].sort().join(', ')}`);
+        } else if (missingScreens.size > 1) {
+            errors.push(`Screen in GeoJSON should be sequential. The missing screens are ${[...missingScreens].sort().join(', ')}`);
+        }
+
+        if (
+            projectType === PROJECT_TYPE_BUILD_AREA
+            || projectType === PROJECT_TYPE_COMPLETENESS
+        ) {
+            const dups = getDuplicates(
+                screens,
+                (item) => item,
+                (count) => count !== 6,
+            );
+            if (dups.length === 1) {
+                errors.push(`There should be exactly 6 squares with same screen in GeoJSON. The invalid screen is ${dups.join(', ')}`);
+            } else if (dups.length > 1) {
+                errors.push(`There should be exactly 6 squares with same screen in GeoJSON. The invalid screens are ${dups.join(', ')}`);
+            }
+        } else if (
+            projectType === PROJECT_TYPE_CHANGE_DETECTION
+            || projectType === PROJECT_TYPE_FOOTPRINT
+        ) {
+            const dups = getDuplicates(
+                screens,
+                (item) => item,
+                (count) => count > 1,
+            );
+            if (dups.length === 1) {
+                errors.push(`Screen in GeoJSON should not be duplicated. The duplicated screen is ${dups.join(', ')}`);
+            } else if (dups.length > 1) {
+                errors.push(`Screen in GeoJSON should not be duplicated. The duplicated screens are ${dups.join(', ')}`);
+            }
+        }
+    }
+
+    if (
+        projectType === PROJECT_TYPE_BUILD_AREA
+        || projectType === PROJECT_TYPE_CHANGE_DETECTION
+        || projectType === PROJECT_TYPE_COMPLETENESS
+    ) {
+        type LocalTutorialTasksGeoJSON = GeoJSON.FeatureCollection<
+            GeoJSON.Geometry,
+            BuildAreaProperties | ChangeDetectionProperties
+        >;
+        const zooms = (tutorialTasks as LocalTutorialTasksGeoJSON)?.features?.map(
+            (feature) => feature.properties.tile_z,
+        ) ?? [];
+        const uniqueZooms = new Set(zooms);
+        if (uniqueZooms.size > 1) {
+            errors.push(`Zoom in GeoJSON should be all be the same. Zoom should be either ${[...uniqueZooms].sort().join(' or ')}`);
+        } else if (isDefined(maxZoom) && uniqueZooms.size === 1) {
+            const zoom = [...uniqueZooms][0];
+            if (zoom !== maxZoom) {
+                errors.push(`Zoom in GeoJSON does not match defined zoom level. ${zoom} != ${maxZoom}`);
+            }
+        }
+    }
+
+    // Check if options are not available
+    const references = tutorialTasks?.features?.map(
+        (feature) => feature.properties.reference,
+    ) ?? [];
+    const selectedOptionsSet = new Set(references);
+    const availableOptionsSet = projectType === PROJECT_TYPE_FOOTPRINT
+        ? customOptions ?? []
+        : [0, 1, 2, 3];
+
+    const invalidOptions = difference(new Set(selectedOptionsSet), new Set(availableOptionsSet));
+    if (invalidOptions.size === 1) {
+        errors.push(`Reference in GeoJSON should be either ${availableOptionsSet.join(', ')}. The invalid reference is ${[...invalidOptions].join(', ')}`);
+    } else if (invalidOptions.size > 1) {
+        errors.push(`Reference in GeoJSON should be either ${availableOptionsSet.join(', ')}. The invalid references are ${[...invalidOptions].sort().join(', ')}`);
+    }
+
+    return errors;
+}
+
+type CustomScreen = Omit<TutorialFormType['scenarioPages'][number], 'scenarioId'>;
+function sanitizeScreens(scenarioPages: TutorialFormType['scenarioPages']) {
+    const screens = scenarioPages.reduce<Record<string, CustomScreen>>(
+        (acc, currentValue) => {
+            const { scenarioId, ...other } = currentValue;
+            acc[scenarioId] = {
+                ...other,
+            };
+
+            return acc;
+        },
+        {},
+    );
+    return screens;
+}
 
 const defaultTutorialFormValue: PartialTutorialFormType = {
-    projectType: PROJECT_TYPE_BUILD_AREA,
+    // projectType: PROJECT_TYPE_BUILD_AREA,
+    projectType: undefined,
     zoomLevel: 18,
     tileServer: {
         name: TILE_SERVER_BING,
         credits: tileServerDefaultCredits[TILE_SERVER_BING],
     },
     tileServerB: {
-        name: TILE_SERVER_BING,
-        credits: tileServerDefaultCredits[TILE_SERVER_BING],
+        name: TILE_SERVER_ESRI,
+        credits: tileServerDefaultCredits[TILE_SERVER_ESRI],
     },
+    customOptions: defaultFootprintCustomOptions,
 };
 
+type SubmissionStatus = 'started' | 'imageUpload' | 'tutorialSubmit' | 'success' | 'failed';
+
 interface Props {
     className?: string;
 }
@@ -86,25 +358,49 @@ function NewTutorial(props: Props) {
 
     const mountedRef = useMountedRef();
 
+    const popupElementRef = React.useRef<{
+        setPopupVisibility: React.Dispatch<React.SetStateAction<boolean>>;
+    }>(null);
+
+    const [
+        tutorialSubmissionStatus,
+        setTutorialSubmissionStatus,
+    ] = React.useState<SubmissionStatus | undefined>();
+
     const {
         setFieldValue,
         value,
         error: formError,
         validate,
         setError,
-    } = useForm(tutorialFormSchema, defaultTutorialFormValue);
+    } = useForm(tutorialFormSchema, {
+        value: defaultTutorialFormValue,
+    });
 
-    const [
-        tutorialSubmissionStatus,
-        setTutorialSubmissionStatus,
-    ] = React.useState<'started' | 'imageUpload' | 'tutorialSubmit' | 'success' | 'failed' | undefined>();
+    const {
+        setValue: onScenarioFormChange,
+    } = useFormArray<
+        'scenarioPages',
+        ScenarioPagesType
+    >('scenarioPages', setFieldValue);
 
-    const error = React.useMemo(
-        () => getErrorObject(formError),
-        [formError],
-    );
+    const {
+        setValue: setOptionValue,
+        removeValue: onOptionRemove,
+    } = useFormArray<
+        'customOptions',
+        CustomOptionType
+    >('customOptions', setFieldValue);
+
+    const {
+        setValue: setInformationPageValue,
+        removeValue: onInformationPageRemove,
+    } = useFormArray<
+        'informationPages',
+        InformationPagesType
+    >('informationPages', setFieldValue);
 
-    const handleFormSubmission = React.useCallback((
+    const handleSubmission = React.useCallback((
         finalValuesFromProps: PartialTutorialFormType,
     ) => {
         const userId = user?.id;
@@ -123,39 +419,81 @@ function NewTutorial(props: Props) {
                 return;
             }
             const {
-                exampleImage1,
-                exampleImage2,
+                scenarioPages,
+                informationPages,
                 ...valuesToCopy
             } = finalValues;
 
+            const sanitizedScenarioPages = sanitizeScreens(scenarioPages);
+
+            try {
+                await navigator.clipboard.writeText(
+                    JSON.stringify(sanitizedScenarioPages, null, 2),
+                );
+                // FIXME: remove this in production
+                // eslint-disable-next-line no-alert
+                alert('Tutorial JSON copied to clipboard.');
+            } catch (err) {
+                // FIXME: remove this in production
+                // eslint-disable-next-line no-alert
+                alert(`Tutorial JSON could not be copied ${err}`);
+            }
+
             const storage = getStorage();
             const timestamp = (new Date()).getTime();
-            const uploadedImage1Ref = storageRef(storage, `projectImages/${timestamp}-tutorial-image-1-${exampleImage1.name}`);
-            const uploadedImage2Ref = storageRef(storage, `projectImages/${timestamp}-tutorial-image-2-${exampleImage2.name}`);
 
             setTutorialSubmissionStatus('imageUpload');
             try {
-                const uploadTask1 = await uploadBytes(uploadedImage1Ref, exampleImage1);
-                if (!mountedRef.current) {
-                    return;
-                }
-                const downloadUrl1 = await getDownloadURL(uploadTask1.ref);
-                if (!mountedRef.current) {
-                    return;
-                }
-                const uploadTask2 = await uploadBytes(uploadedImage2Ref, exampleImage2);
-                if (!mountedRef.current) {
-                    return;
-                }
-                const downloadUrl2 = await getDownloadURL(uploadTask2.ref);
-                if (!mountedRef.current) {
-                    return;
-                }
+                const informationPagesPromises = informationPages.map(async (info, index) => {
+                    const blocksPromise = info.blocks.map(async (block) => {
+                        if (!block.imageFile) {
+                            return block;
+                        }
+                        const {
+                            imageFile,
+                            ...otherBlocks
+                        } = block;
+
+                        const uploadImagesRef = storageRef(
+                            storage,
+                            `tutorialImages/${timestamp}-block-image-${block.blockNumber}-${imageFile?.name}`,
+                        );
+                        const uploadTask = await uploadBytes(uploadImagesRef, block.imageFile);
+                        const downloadUrl = await getDownloadURL(uploadTask.ref);
+
+                        return {
+                            ...otherBlocks,
+                            image: downloadUrl,
+                        };
+                    });
+
+                    const blocks = await Promise.all(blocksPromise);
+
+                    return {
+                        ...info,
+                        // We are making sure that page number starts with 1
+                        // and is sequential
+                        pageNumber: index + 1,
+                        blocks,
+                    };
+                });
+                const sanitizedInformationPages = await Promise.all(informationPagesPromises);
+
+                const sanitizedCustomOptions = valuesToCopy.customOptions?.map((option) => {
+                    const optionWithoutId = deleteKey(option, 'optionId');
+                    return {
+                        ...optionWithoutId,
+                        subOptions: optionWithoutId.subOptions?.map(
+                            (subOption) => deleteKey(subOption, 'subOptionsId'),
+                        ),
+                    };
+                });
 
                 const uploadData = {
                     ...valuesToCopy,
-                    exampleImage1: downloadUrl1,
-                    exampleImage2: downloadUrl2,
+                    customOptions: sanitizedCustomOptions ?? null,
+                    screens: sanitizedScenarioPages ?? null,
+                    informationPages: sanitizedInformationPages ?? null,
                     createdBy: userId,
                 };
 
@@ -165,6 +503,7 @@ function NewTutorial(props: Props) {
                 if (!mountedRef.current) {
                     return;
                 }
+
                 const newKey = newTutorialDraftsRef.key;
 
                 if (newKey) {
@@ -191,14 +530,113 @@ function NewTutorial(props: Props) {
         submitToFirebase();
     }, [user, mountedRef]);
 
-    const handleSubmitButtonClick = React.useMemo(
-        () => createSubmitHandler(validate, setError, handleFormSubmission),
-        [validate, setError, handleFormSubmission],
+    const handleSubmitButtonClick = React.useCallback(
+        () => {
+            createSubmitHandler(
+                validate,
+                setError,
+                handleSubmission,
+            )();
+        },
+        [validate, setError, handleSubmission],
     );
 
-    const hasErrors = React.useMemo(
-        () => analyzeErrors(error),
-        [error],
+    const handleAddDefineOptions = React.useCallback(
+        () => {
+            setFieldValue(
+                (oldValue: PartialTutorialFormType['customOptions']) => {
+                    const safeOldValues = oldValue ?? [];
+
+                    const newOptionId = safeOldValues.length > 0
+                        ? Math.max(...safeOldValues.map((option) => option.optionId)) + 1
+                        : 1;
+                    const newValue = safeOldValues.length > 0
+                        ? Math.max(...safeOldValues.map((option) => option.value ?? 0)) + 1
+                        : 1;
+
+                    const newDefineOption: CustomOptionType = {
+                        optionId: newOptionId,
+                        value: newValue,
+                        icon: undefined,
+                        title: undefined,
+                        iconColor: undefined,
+                    };
+
+                    return [...safeOldValues, newDefineOption];
+                },
+                'customOptions',
+            );
+        },
+        [
+            setFieldValue,
+        ],
+    );
+
+    const handleGeoJsonFile = React.useCallback((
+        geoProps: GeoJSON.GeoJSON | undefined,
+    ) => {
+        const projectType = value?.projectType;
+        const tutorialTasks = geoProps as TutorialTasksGeoJSON;
+
+        if (!tutorialTasks || !projectType) {
+            setFieldValue(undefined, 'tutorialTasks');
+            setFieldValue(undefined, 'scenarioPages');
+            return;
+        }
+
+        const errors = getGeoJSONError(tutorialTasks, projectType);
+        if (errors) {
+            setFieldValue(undefined, 'tutorialTasks');
+            setFieldValue(undefined, 'scenarioPages');
+            setError((prevError) => ({
+                ...getErrorObject(prevError),
+                tutorialTasks: errors,
+            }));
+            return;
+        }
+
+        setFieldValue(tutorialTasks, 'tutorialTasks');
+
+        const uniqueArray = unique(
+            tutorialTasks.features,
+            ((geo) => geo?.properties.screen),
+        );
+        const sorted = uniqueArray.sort((a, b) => a.properties.screen - b.properties.screen);
+        const tutorialTaskArray = sorted?.map((geo) => (
+            {
+                scenarioId: geo.properties.screen,
+                hint: {},
+                instructions: {},
+                success: {},
+            }
+        ));
+
+        setFieldValue(tutorialTaskArray, 'scenarioPages');
+    }, [setFieldValue, setError, value?.projectType]);
+
+    const handleAddInformationPage = React.useCallback(
+        (template: InformationPageTemplateKey) => {
+            setFieldValue(
+                (oldValue: PartialInformationPagesType) => {
+                    const newOldValue = oldValue ?? [];
+
+                    const newPage = newOldValue.length > 0
+                        ? Math.max(...newOldValue.map((info) => info.pageNumber)) + 1
+                        : 1;
+
+                    const blocks = infoPageBlocksMap[template];
+                    const newPageInformation: InformationPagesType = {
+                        pageNumber: newPage,
+                        title: undefined,
+                        blocks,
+                    };
+                    return [...newOldValue, newPageInformation];
+                },
+                'informationPages',
+            );
+            popupElementRef.current?.setPopupVisibility(false);
+        },
+        [setFieldValue],
     );
 
     const submissionPending = (
@@ -207,19 +645,93 @@ function NewTutorial(props: Props) {
         || tutorialSubmissionStatus === 'tutorialSubmit'
     );
 
-    const tileServerBVisible = value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
-        || value?.projectType === PROJECT_TYPE_COMPLETENESS;
+    const tileServerBVisible = value.projectType === PROJECT_TYPE_CHANGE_DETECTION
+        || value.projectType === PROJECT_TYPE_COMPLETENESS;
+
+    const error = React.useMemo(
+        () => getErrorObject(formError),
+        [formError],
+    );
+    const scenarioError = React.useMemo(
+        () => getErrorObject(error?.scenarioPages),
+        [error?.scenarioPages],
+    );
+
+    const optionsError = React.useMemo(
+        () => getErrorObject(error?.customOptions),
+        [error?.customOptions],
+    );
+
+    const informationPagesError = React.useMemo(
+        () => getErrorObject(error?.informationPages),
+        [error?.informationPages],
+    );
+
+    const hasErrors = React.useMemo(
+        () => analyzeErrors(error),
+        [error],
+    );
+
+    const warning = React.useMemo(
+        () => {
+            const options = value?.customOptions?.map((option) => option.value) ?? [];
+            const subOptions = value?.customOptions?.flatMap(
+                (option) => option.subOptions?.map((subOption) => subOption.value),
+            ) ?? [];
+            const selectedValues = [
+                ...options,
+                ...subOptions,
+            ].filter(isDefined);
+            return getGeoJSONWarning(
+                value?.tutorialTasks,
+                value?.projectType,
+                selectedValues,
+                value?.zoomLevel,
+            );
+        },
+        [value?.tutorialTasks, value?.projectType, value?.customOptions, value?.zoomLevel],
+    );
+
+    const getTileServerUrl = (val: PartialTutorialFormType['tileServer']) => {
+        const tileServerName = val?.name;
+        if (isNotDefined(tileServerName)) {
+            return undefined;
+        }
+        if (tileServerName === 'custom') {
+            return val?.url;
+        }
+        return tileServerUrls[tileServerName];
+    };
+
+    const projectTypeEmpty = isNotDefined(value.projectType);
+
+    const {
+        customOptions,
+        informationPages,
+    } = value;
+
+    const handleProjectTypeChange = React.useCallback(
+        (newValue: ProjectType | undefined) => {
+            setFieldValue(undefined, 'tutorialTasks');
+            setFieldValue(undefined, 'scenarioPages');
+            setFieldValue(newValue, 'projectType');
+        },
+        [setFieldValue],
+    );
 
     return (
         <div className={_cs(styles.newTutorial, className)}>
+            <Heading level={1}>
+                Create New Tutorial
+            </Heading>
             <div className={styles.container}>
                 <InputSection
-                    heading="Basic Tutorial Information"
+                    heading="Basic Information"
                 >
                     <SegmentInput
                         name={'projectType' as const}
-                        onChange={setFieldValue}
-                        value={value?.projectType}
+                        onChange={handleProjectTypeChange}
+                        value={value.projectType}
                         label="Project Type"
                         hint="Select the type of your project."
                         options={projectTypeOptions}
@@ -228,98 +740,193 @@ function NewTutorial(props: Props) {
                         error={error?.projectType}
                         disabled={submissionPending}
                     />
-                    <div className={styles.inputGroup}>
-                        <TextInput
-                            name={'lookFor' as const}
-                            value={value?.lookFor}
-                            onChange={setFieldValue}
-                            label="Look For"
-                            hint="What should the users look for (e.g. buildings, cars, trees)? (25 chars max)."
-                            error={error?.lookFor}
-                            disabled={submissionPending}
-                            autoFocus
-                        />
-                        <TextInput
-                            name={'name' as const}
-                            value={value?.name}
-                            onChange={setFieldValue}
-                            label="Name"
-                            hint="Provide a clear name for your tutorial. You can select tutorials based on their name later during the project creation."
-                            error={error?.name}
-                            disabled={submissionPending}
-                        />
-                    </div>
-                    <div className={styles.inputGroup}>
-                        <JsonFileInput
-                            name={'screens' as const}
-                            value={value?.screens}
-                            onChange={setFieldValue}
-                            label="Upload Tutorial Text as JSON"
-                            hint="It should end with .json"
-                            error={error?.screens}
-                            disabled={submissionPending}
-                        />
-                        <GeoJsonFileInput
-                            name={'tutorialTasks' as const}
-                            value={value?.tutorialTasks}
-                            onChange={setFieldValue}
-                            label="Upload Tutorial Tasks as GeoJSON"
-                            hint="It should end with .geojson or .geo.json"
-                            error={error?.tutorialTasks}
-                            disabled={submissionPending}
-                        />
-                    </div>
-                    <div className={styles.inputGroup}>
-                        <FileInput
-                            name={'exampleImage1' as const}
-                            value={value?.exampleImage1}
-                            onChange={setFieldValue}
-                            label="Upload Example Image 1"
-                            hint="Make sure you have the rights to use this image. It should end with  .jpg or .png."
-                            showPreview
-                            accept="image/png, image/jpeg"
-                            error={error?.exampleImage1}
-                            disabled={submissionPending}
-                        />
-                        <FileInput
-                            name={'exampleImage2' as const}
-                            value={value?.exampleImage2}
-                            onChange={setFieldValue}
-                            label="Upload Example Image 2"
-                            hint="Make sure you have the rights to use this image. It should end with  .jpg or .png."
-                            showPreview
-                            accept="image/png, image/jpeg"
-                            error={error?.exampleImage2}
-                            disabled={submissionPending}
-                        />
-                    </div>
+                    <TextInput
+                        name={'name' as const}
+                        value={value.name}
+                        onChange={setFieldValue}
+                        label="Name of the Tutorial"
+                        hint="Provide a clear name for your tutorial. You can select tutorials based on their name later during the project creation."
+                        error={error?.name}
+                        disabled={submissionPending || projectTypeEmpty}
+                    />
+                    <TextInput
+                        name={'lookFor' as const}
+                        value={value.lookFor}
+                        onChange={setFieldValue}
+                        label="Look For"
+                        hint="What should the users look for (e.g. buildings, cars, trees)?"
+                        error={error?.lookFor}
+                        disabled={submissionPending || projectTypeEmpty}
+                        autoFocus
+                    />
                 </InputSection>
-                {(value?.projectType === PROJECT_TYPE_BUILD_AREA
-                    || value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
-                    || value?.projectType === PROJECT_TYPE_COMPLETENESS) && (
+                {value.projectType === PROJECT_TYPE_FOOTPRINT && (
                     <InputSection
-                        heading="Zoom Level"
+                        heading="Custom Options"
+                        actions={(
+                            <Button
+                                name={undefined}
+                                icons={<MdAdd />}
+                                onClick={handleAddDefineOptions}
+                                disabled={
+                                    submissionPending
+                                    || projectTypeEmpty
+                                    || (customOptions && customOptions.length >= MAX_OPTIONS)
+                                }
+                            >
+                                Add Option
+                            </Button>
+                        )}
                     >
-                        <NumberInput
-                            name={'zoomLevel' as const}
-                            value={value?.zoomLevel}
-                            onChange={setFieldValue}
-                            label="Zoom Level"
-                            hint="We use the Tile Map Service zoom levels. Please check for your area which zoom level is available. For example, Bing imagery is available at zoomlevel 18 for most regions. If you use a custom tile server you may be able to use even higher zoom levels."
-                            error={error?.zoomLevel}
-                            disabled={submissionPending}
+                        <AlertBanner>
+                            <div className={styles.bannerContent}>
+                                <div className={styles.bannerText}>
+                                    While creating options,
+                                    please use the values as listed
+                                    below for HOT Tasking Manager Geometries
+                                </div>
+                                <div className={styles.indicatorList}>
+                                    <div className={styles.indicator}>
+                                        0 = No
+                                    </div>
+                                    <div className={styles.indicator}>
+                                        1 = Yes
+                                    </div>
+                                    <div className={styles.indicator}>
+                                        2 = Maybe
+                                    </div>
+                                    <div className={styles.indicator}>
+                                        3 = Bad Imagery
+                                    </div>
+                                </div>
+                            </div>
+                        </AlertBanner>
+                        <NonFieldError
+                            error={optionsError}
                         />
+                        {(customOptions && customOptions.length > 0) ? (
+                            <div className={styles.customOptionContainer}>
+                                <div className={styles.customOptionList}>
+                                    {customOptions.map((option, index) => (
+                                        <ExpandableContainer
+                                            key={option.optionId}
+                                            header={option.title || `Option ${index + 1}`}
+                                            openByDefault={index === customOptions.length - 1}
+                                            actions={(
+                                                <Button
+                                                    name={index}
+                                                    onClick={onOptionRemove}
+                                                    variant="action"
+                                                    title="Delete Option"
+                                                    disabled={
+                                                        submissionPending
+                                                        || projectTypeEmpty
+                                                    }
+                                                >
+                                                    <IoIosTrash />
+                                                </Button>
+                                            )}
+                                        >
+                                            <CustomOptionInput
+                                                key={option.optionId}
+                                                value={option}
+                                                index={index}
+                                                onChange={setOptionValue}
+                                                error={optionsError?.[option.optionId]}
+                                                disabled={submissionPending || projectTypeEmpty}
+                                            />
+                                        </ExpandableContainer>
+                                    ))}
+                                </div>
+                                <CustomOptionPreview
+                                    value={customOptions}
+                                    lookFor={value.lookFor}
+                                />
+                            </div>
+                        ) : (
+                            <div>No options</div>
+                        )}
                     </InputSection>
                 )}
+                <InputSection
+                    heading="Information Pages"
+                    actions={(
+                        <PopupButton
+                            componentRef={popupElementRef}
+                            name={undefined}
+                            icons={<MdAdd />}
+                            label="Add Page"
+                            popupContentClassName={styles.newInfoButtonPopup}
+                            disabled={submissionPending || projectTypeEmpty}
+                        >
+                            {infoPageTemplateOptions.map((infoPageTemplate) => (
+                                <Button
+                                    className={styles.popupItem}
+                                    name={infoPageTemplate.key}
+                                    key={infoPageTemplate.key}
+                                    onClick={handleAddInformationPage}
+                                    variant="transparent"
+                                    disabled={(
+                                        submissionPending
+                                        || projectTypeEmpty
+                                        || (informationPages
+                                            && informationPages.length >= MAX_INFO_PAGES)
+                                    )}
+                                >
+                                    {infoPageTemplate.label}
+                                </Button>
+                            ))}
+                        </PopupButton>
+                    )}
+                >
+                    <NonFieldError
+                        error={informationPagesError}
+                    />
+                    <div className={styles.informationPageList}>
+                        {informationPages?.map((page, i) => (
+                            <ExpandableContainer
+                                key={page.pageNumber}
+                                header={page.title || `Intro ${i + 1}`}
+                                openByDefault={i === informationPages.length - 1}
+                                actions={(
+                                    <Button
+                                        name={i}
+                                        onClick={onInformationPageRemove}
+                                        variant="action"
+                                        title="Delete page"
+                                        disabled={submissionPending || projectTypeEmpty}
+                                    >
+                                        <IoIosTrash />
+                                    </Button>
+                                )}
+                            >
+                                <InformationPageInput
+                                    value={page}
+                                    onChange={setInformationPageValue}
+                                    lookFor={value.lookFor}
+                                    index={i}
+                                    error={informationPagesError?.[page.pageNumber]}
+                                    disabled={submissionPending || projectTypeEmpty}
+                                />
+                            </ExpandableContainer>
+                        ))}
+                        {!(informationPages?.length) && (
+                            <EmptyMessage
+                                title="Start adding Information pages"
+                                description="Add pages selecting templates from “Add page” dropdown"
+                            />
+                        )}
+                    </div>
+                </InputSection>
                 <InputSection
                     heading={tileServerBVisible ? 'Tile Server A' : 'Tile Server'}
                 >
                     <TileServerInput
                         name={'tileServer' as const}
-                        value={value?.tileServer}
+                        value={value.tileServer}
                         error={error?.tileServer}
                         onChange={setFieldValue}
-                        disabled={submissionPending}
+                        disabled={submissionPending || projectTypeEmpty}
                     />
                 </InputSection>
                 {tileServerBVisible && (
@@ -328,13 +935,97 @@ function NewTutorial(props: Props) {
                     >
                         <TileServerInput
                             name={'tileServerB' as const}
-                            value={value?.tileServerB}
+                            value={value.tileServerB}
                             error={error?.tileServerB}
                             onChange={setFieldValue}
-                            disabled={submissionPending}
+                            disabled={submissionPending || projectTypeEmpty}
                         />
                     </InputSection>
                 )}
+                {
+                    (value.projectType === PROJECT_TYPE_BUILD_AREA
+                        || value.projectType === PROJECT_TYPE_CHANGE_DETECTION
+                        || value.projectType === PROJECT_TYPE_COMPLETENESS)
+                    && (
+                        <InputSection
+                            heading="Zoom Level"
+                        >
+                            <NumberInput
+                                name={'zoomLevel' as const}
+                                value={value.zoomLevel}
+                                onChange={setFieldValue}
+                                label="Zoom Level"
+                                hint="We use the Tile Map Service zoom levels. Please check for your area which zoom level is available. For example, Bing imagery is available at zoomlevel 18 for most regions. If you use a custom tile server you may be able to use even higher zoom levels."
+                                error={error?.zoomLevel}
+                                disabled={submissionPending || projectTypeEmpty}
+                            />
+                        </InputSection>
+                    )
+                }
+                <InputSection
+                    heading="Scenario Pages"
+                >
+                    <GeoJsonFileInput
+                        name={'tutorialTasks' as const}
+                        label="Upload Scenarios as GeoJSON"
+                        value={value.tutorialTasks}
+                        onChange={handleGeoJsonFile}
+                        hint="It should end with .geojson or .geo.json"
+                        error={error?.tutorialTasks}
+                        disabled={submissionPending || projectTypeEmpty}
+                    />
+                    <div className={styles.scenarioList}>
+                        {value.scenarioPages?.map((task, index) => (
+                            <ExpandableContainer
+                                key={task.scenarioId}
+                                // NOTE: only open first scenario by default
+                                openByDefault={index === 0}
+                                header={`Scenario ${task.scenarioId}`}
+                            >
+                                <ScenarioPageInput
+                                    key={task.scenarioId}
+                                    scenarioId={task.scenarioId}
+                                    index={index}
+                                    value={task}
+                                    projectType={value.projectType}
+                                    onChange={onScenarioFormChange}
+                                    error={scenarioError?.[task.scenarioId]}
+                                    customOptions={customOptions}
+                                    geoJson={value.tutorialTasks}
+                                    urlA={getTileServerUrl(value.tileServer)}
+                                    urlB={getTileServerUrl(value.tileServerB)}
+                                    lookFor={value.lookFor}
+                                    disabled={submissionPending || projectTypeEmpty}
+                                />
+                            </ExpandableContainer>
+                        ))}
+                        {(value.scenarioPages?.length ?? 0) === 0 && (
+                            <EmptyMessage
+                                title="Upload geojson file first"
+                                description="This section will automatically show scenarios after uploading geojson file"
+                            />
+                        )}
+                    </div>
+                </InputSection>
+                {warning.length > 0 && (
+                    <AlertBanner
+                        title="Warnings"
+                    >
+                        <div className={styles.warningContainer}>
+                            {warning.map((item) => (
+                                <div
+                                    key={item}
+                                    className={styles.warningItem}
+                                >
+                                    <div className={styles.iconContainer}>
+                                        <IoInformationCircleOutline />
+                                    </div>
+                                    {item}
+                                </div>
+                            ))}
+                        </div>
+                    </AlertBanner>
+                )}
                 {hasErrors && (
                     <div className={styles.errorMessage}>
                         Please correct all the errors above before submission!
@@ -344,7 +1035,7 @@ function NewTutorial(props: Props) {
                     <Button
                         name={undefined}
                         onClick={handleSubmitButtonClick}
-                        disabled={submissionPending}
+                        disabled={submissionPending || projectTypeEmpty}
                     >
                         Submit
                     </Button>
diff --git a/manager-dashboard/app/views/NewTutorial/styles.css b/manager-dashboard/app/views/NewTutorial/styles.css
index 6ac3932c9..ffef8723b 100644
--- a/manager-dashboard/app/views/NewTutorial/styles.css
+++ b/manager-dashboard/app/views/NewTutorial/styles.css
@@ -4,6 +4,7 @@
     flex-direction: column;
     background-color: var(--color-background);
     padding: var(--spacing-large);
+    gap: var(--spacing-extra-large);
     overflow: auto;
 
     .container {
@@ -11,17 +12,68 @@
         flex-direction: column;
         width: 100%;
         max-width: 70rem;
-        gap: var(--spacing-large);
+        gap: var(--spacing-extra-large);
 
-        .input-group {
+        .information-page-list {
             display: flex;
-            flex-wrap: wrap;
-            gap: var(--spacing-extra-large);
+            flex-direction: column;
+            gap: var(--spacing-medium);
+        }
 
-            >* {
-                flex-basis: 0;
+        .banner-content {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-medium);
+
+            .banner-text {
+                color: var(--color-banner-text);
+                font-size: var(--spacing-medium);
+            }
+
+            .indicator-list {
+                display: flex;
+                gap: var(--spacing-medium);
+
+                .indicator {
+                    border-radius: var(--radius-badge-border);
+                    background-color: var(--color-backdrop-light);
+                    padding: var(--spacing-small) var(--spacing-medium);
+                    font-size: var(--spacing-medium);
+                }
+            }
+        }
+
+        .custom-option-container {
+            display: flex;
+            gap: var(--spacing-large);
+
+            .custom-option-list {
+                display: flex;
+                flex-direction: column;
                 flex-grow: 1;
-                min-width: 20rem;
+                gap: var(--spacing-medium);
+            }
+        }
+
+        .scenario-list {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-medium);
+        }
+    }
+
+    .warning-container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-extra-small);
+
+        .warning-item {
+            display: flex;
+            gap: var(--spacing-small);
+            align-items: flex-start;
+
+            .icon-container {
+                font-size: var(--font-size-large);
             }
         }
     }
@@ -89,13 +141,29 @@
     }
 }
 
+.new-info-button-popup {
+    padding: var(--spacing-small) 0;
+
+    .popup-item {
+        border-radius: unset;
+        padding: var(--spacing-small) var(--spacing-large);
+        width: 100%;
+
+        &:hover {
+            background-color: var(--color-separator);
+        }
+    }
+}
+
 @keyframes wiggle {
     0% {
         transform: rotate(0deg) translateX(0);
     }
+
     25% {
         transform: rotateY(30deg) rotate(-10deg) translateX(-50px);
     }
+
     100% {
         transform: rotate(0deg) translateX(0);
     }
diff --git a/manager-dashboard/app/views/NewTutorial/utils.ts b/manager-dashboard/app/views/NewTutorial/utils.ts
index 4c94b89d2..0a3bc9349 100644
--- a/manager-dashboard/app/views/NewTutorial/utils.ts
+++ b/manager-dashboard/app/views/NewTutorial/utils.ts
@@ -1,39 +1,404 @@
 import {
     ObjectSchema,
     PartialForm,
-    requiredCondition,
     requiredStringCondition,
-    forceNullType,
     greaterThanOrEqualToCondition,
     lessThanOrEqualToCondition,
     integerCondition,
+    nullValue,
+    ArraySchema,
+    addCondition,
 } from '@togglecorp/toggle-form';
+import {
+    isDefined,
+    getDuplicates,
+} from '@togglecorp/fujs';
+
 import {
     TileServer,
+    TileServerType,
     tileServerFieldsSchema,
 } from '#components/TileServerInput';
-
 import {
     getNoMoreThanNCharacterCondition,
     ProjectType,
     PROJECT_TYPE_BUILD_AREA,
     PROJECT_TYPE_CHANGE_DETECTION,
     PROJECT_TYPE_COMPLETENESS,
+    PROJECT_TYPE_FOOTPRINT,
+    IconKey,
 } from '#utils/common';
 
-// FIXME: include here
+const BING_KEY = process.env.REACT_APP_IMAGE_BING_API_KEY;
+const MAPBOX_KEY = process.env.REACT_APP_IMAGE_MAPBOX_API_KEY;
+const MAXAR_PREMIUM = process.env.REACT_APP_IMAGE_MAXAR_PREMIUM_API_KEY;
+const MAXAR_STANDARD = process.env.REACT_APP_IMAGE_MAXAR_STANDARD_API_KEY;
+
+export type ColorKey = (
+    'red'
+    | 'pink'
+    | 'purple'
+    | 'deepPurple'
+    | 'indigo'
+    | 'blue'
+    | 'cyan'
+    | 'teal'
+    | 'green'
+    | 'lime'
+    | 'yellow'
+    | 'orange'
+    | 'brown'
+    | 'gray'
+);
+
+// FIXME: need to rethink the colors
+export const colorKeyToColorMap: Record<ColorKey, string> = {
+    red: '#D32F2F',
+    pink: '#D81B60',
+    purple: '#9C27B0',
+    deepPurple: '#673AB7',
+    indigo: '#3F51B5',
+    blue: '#1976D2',
+    cyan: '#0097A7',
+    teal: '#00695C',
+    green: '#2E7D32',
+    lime: '#9E9D24',
+    yellow: '#FFD600',
+    orange: '#FF9100',
+    brown: '#795548',
+    gray: '#757575',
+};
+
+export interface ColorOptions {
+    key: ColorKey;
+    label: string;
+    color: string;
+}
+
+export const iconColorOptions: ColorOptions[] = [
+    {
+        key: 'red',
+        label: 'Red',
+        color: colorKeyToColorMap.red,
+    },
+    {
+        key: 'pink',
+        label: 'Pink',
+        color: colorKeyToColorMap.pink,
+    },
+    {
+        key: 'purple',
+        label: 'Purple',
+        color: colorKeyToColorMap.purple,
+    },
+    {
+        key: 'deepPurple',
+        label: 'Deep Purple',
+        color: colorKeyToColorMap.deepPurple,
+    },
+    {
+        key: 'indigo',
+        label: 'Indigo',
+        color: colorKeyToColorMap.indigo,
+    },
+    {
+        key: 'blue',
+        label: 'Blue',
+        color: colorKeyToColorMap.blue,
+    },
+    {
+        key: 'cyan',
+        label: 'Cyan',
+        color: colorKeyToColorMap.cyan,
+    },
+    {
+        key: 'teal',
+        label: 'Teal',
+        color: colorKeyToColorMap.teal,
+    },
+    {
+        key: 'green',
+        label: 'Green',
+        color: colorKeyToColorMap.green,
+    },
+    {
+        key: 'lime',
+        label: 'Lime',
+        color: colorKeyToColorMap.lime,
+    },
+    {
+        key: 'yellow',
+        label: 'Yellow',
+        color: colorKeyToColorMap.yellow,
+    },
+    {
+        key: 'orange',
+        label: 'Orange',
+        color: colorKeyToColorMap.orange,
+    },
+    {
+        key: 'brown',
+        label: 'Brown',
+        color: colorKeyToColorMap.brown,
+    },
+    {
+        key: 'gray',
+        label: 'Gray',
+        color: colorKeyToColorMap.gray,
+    },
+];
+
+export const tileServerUrls: {
+    [key in Exclude<TileServerType, 'custom'>]: string;
+} = {
+    bing: `https://ecn.t0.tiles.virtualearth.net/tiles/a{quad_key}.jpeg?g=1&token=${BING_KEY}`,
+    mapbox: `https://d.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.jpg?access_token=${MAPBOX_KEY}`,
+    maxar_premium: `https://services.digitalglobe.com/earthservice/tmsaccess/tms/1.0.0/DigitalGlobe%3AImageryTileService@EPSG%3A3857@jpg/{z}/{x}/{y}.jpg?connectId=${MAXAR_PREMIUM}`,
+    maxar_standard: `https://services.digitalglobe.com/earthservice/tmsaccess/tms/1.0.0/DigitalGlobe%3AImageryTileService@EPSG%3A3857@jpg/{z}/{x}/{y}.jpg?connectId=${MAXAR_STANDARD}`,
+    esri: 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+    esri_beta: 'https://clarity.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+};
+
+export type InformationPageTemplateKey = '1-picture' | '2-picture' | '3-picture';
+
+interface InformationPageOption {
+    key: InformationPageTemplateKey;
+    label: string;
+}
+
+export const infoPageTemplateOptions: InformationPageOption[] = [
+    {
+        key: '1-picture',
+        label: 'With 1 picture',
+    },
+    {
+        key: '2-picture',
+        label: 'With 2 pictures',
+    },
+    {
+        key: '3-picture',
+        label: 'With 3 pictures',
+    },
+];
+
+type BlockType = 'text' | 'image';
+
+interface Block {
+    blockNumber: number,
+    blockType: BlockType,
+}
+
+export const infoPageBlocksMap: Record<InformationPageTemplateKey, Block[]> = {
+    '1-picture': [
+        {
+            blockNumber: 1,
+            blockType: 'text',
+        },
+        {
+            blockNumber: 2,
+            blockType: 'image',
+        },
+    ],
+    '2-picture': [
+        {
+            blockNumber: 1,
+            blockType: 'text',
+        },
+        {
+            blockNumber: 2,
+            blockType: 'image',
+        },
+        {
+            blockNumber: 3,
+            blockType: 'text',
+        },
+        {
+            blockNumber: 4,
+            blockType: 'image',
+        },
+    ],
+    '3-picture': [
+        {
+            blockNumber: 1,
+            blockType: 'text',
+        },
+        {
+            blockNumber: 2,
+            blockType: 'image',
+        },
+        {
+            blockNumber: 3,
+            blockType: 'text',
+        },
+        {
+            blockNumber: 4,
+            blockType: 'image',
+        },
+        {
+            blockNumber: 5,
+            blockType: 'text',
+        },
+        {
+            blockNumber: 6,
+            blockType: 'image',
+        },
+    ],
+};
+
+// FIXME: need to confirm if the values are correct
+export const defaultFootprintCustomOptions: PartialTutorialFormType['customOptions'] = [
+    {
+        optionId: 1,
+        value: 1,
+        title: 'Yes',
+        icon: 'check',
+        iconColor: 'green',
+        description: 'the shape does outline a building in the image',
+    },
+    {
+        optionId: 2,
+        value: 0,
+        title: 'No',
+        icon: 'close-outline',
+        iconColor: 'red',
+        description: 'the shape doesn\'t match a building in the image',
+    },
+    {
+        optionId: 3,
+        value: 2,
+        title: 'Not Sure',
+        icon: 'remove-outline',
+        iconColor: 'orange',
+        description: 'if you\'re not sure or there is cloud cover / bad imagery',
+    },
+];
+
+export function deleteKey<T extends object, K extends keyof T>(
+    value: T,
+    key: K,
+): Omit<T, K> {
+    const copy: Omit<T, K> & { [key in K]: T[K] | undefined } = {
+        ...value,
+    };
+    delete copy[key];
+    return copy;
+}
+
+export interface BuildAreaProperties {
+    reference: number;
+    screen: number;
+    // eslint-disable-next-line camelcase
+    task_id: string;
+    // eslint-disable-next-line camelcase
+    tile_x: number;
+    // eslint-disable-next-line camelcase
+    tile_y: number;
+    // eslint-disable-next-line camelcase
+    tile_z: number;
+
+    // groupId: string;
+    // taskId: string;
+    // category for completeness?
+}
+
+export interface FootprintProperties {
+    id: string;
+    reference: number;
+    screen: number;
+}
+
+export interface ChangeDetectionProperties {
+    reference: number;
+    screen: number;
+    // eslint-disable-next-line camelcase
+    task_id: string;
+    // eslint-disable-next-line camelcase
+    tile_x: number;
+    // eslint-disable-next-line camelcase
+    tile_y: number;
+    // eslint-disable-next-line camelcase
+    tile_z: number;
+
+    // category: string;
+    // groupId: string;
+    // taskId: string;
+}
+
+export type BuildAreaGeoJSON = GeoJSON.FeatureCollection<
+    GeoJSON.Geometry,
+    BuildAreaProperties
+>;
+
+export type FootprintGeoJSON = GeoJSON.FeatureCollection<
+    GeoJSON.Geometry,
+    FootprintProperties
+>;
+
+export type ChangeDetectionGeoJSON = GeoJSON.FeatureCollection<
+    GeoJSON.Geometry,
+    ChangeDetectionProperties
+>;
+
+export type TutorialTasksGeoJSON = GeoJSON.FeatureCollection<
+    GeoJSON.Geometry,
+    BuildAreaProperties | FootprintProperties | ChangeDetectionProperties
+>;
+
+export type CustomOptions = {
+    optionId: number; // we clear this before sending to server
+    title: string;
+    value: number;
+    description: string;
+    icon: IconKey;
+    iconColor: string;
+    subOptions: {
+        subOptionsId: number; // we clear this before sending to server
+        description: string;
+        value: number;
+    }[];
+}[];
+
+export type InformationPages = {
+    pageNumber: number; // we need to re-calculate this
+    title: string;
+    blocks: {
+        blockNumber: number;
+        blockType: BlockType;
+        textDescription?: string;
+        imageFile?: File;
+    }[];
+}[];
+
 export interface TutorialFormType {
     lookFor: string;
     name: string;
-    tileServer: TileServer,
-    screens?: GeoJSON.GeoJSON ; // FIXME: this is not FeatureCollection
-    tutorialTasks?: GeoJSON.GeoJSON;
+    tileServer: TileServer;
+    scenarioPages: { // we change this array to map before sending to server
+        scenarioId: number;
+        hint: {
+            description: string;
+            icon: IconKey;
+            title: string;
+        };
+        instructions: {
+            description: string;
+            icon: IconKey;
+            title: string;
+        };
+        success: {
+            description: string;
+            icon: IconKey;
+            title: string;
+        };
+    }[];
+    tutorialTasks?: TutorialTasksGeoJSON,
     exampleImage1: File;
     exampleImage2: File;
     projectType: ProjectType;
-
     tileServerB?: TileServer,
     zoomLevel?: number;
+    customOptions?: CustomOptions;
+    informationPages: InformationPages;
 }
 
 export type PartialTutorialFormType = PartialForm<
@@ -42,59 +407,357 @@ export type PartialTutorialFormType = PartialForm<
         exampleImage2?: File;
     },
     // NOTE: we do not want to change File and FeatureCollection to partials
-    'screens' | 'tutorialTasks' | 'exampleImage1' | 'exampleImage2'
+    'image' | 'tutorialTasks' | 'exampleImage1' | 'exampleImage2' | 'scenarioId' | 'optionId' | 'subOptionsId' | 'pageNumber' | 'blockNumber' | 'blockType' | 'imageFile'
 >;
 
 type TutorialFormSchema = ObjectSchema<PartialTutorialFormType>;
 type TutorialFormSchemaFields = ReturnType<TutorialFormSchema['fields']>;
 
+export type ScenarioPagesType = NonNullable<PartialTutorialFormType['scenarioPages']>[number];
+type ScenarioPagesSchema = ObjectSchema<ScenarioPagesType, PartialTutorialFormType>;
+type ScenarioPagesFormSchemaFields = ReturnType<ScenarioPagesSchema['fields']>;
+
+type ScenarioPagesFormSchema = ArraySchema<ScenarioPagesType, PartialTutorialFormType>;
+type ScenarioPagesFormSchemaMember = ReturnType<ScenarioPagesFormSchema['member']>;
+
+export type CustomOptionType = NonNullable<PartialTutorialFormType['customOptions']>[number];
+type CustomOptionSchema = ObjectSchema<CustomOptionType, PartialTutorialFormType>;
+export type CustomOptionSchemaFields = ReturnType<CustomOptionSchema['fields']>
+
+export type CustomOptionFormSchema = ArraySchema<CustomOptionType, PartialTutorialFormType>;
+export type CustomOptionFormSchemaMember = ReturnType<CustomOptionFormSchema['member']>;
+
+export type InformationPagesType = NonNullable<PartialTutorialFormType['informationPages']>[number]
+type InformationPagesSchema = ObjectSchema<InformationPagesType, PartialTutorialFormType>;
+type InformationPagesSchemaFields = ReturnType<InformationPagesSchema['fields']>
+
+type InformationPagesFormSchema = ArraySchema<InformationPagesType, PartialTutorialFormType>;
+type InformationPagesFormSchemaMember = ReturnType<InformationPagesFormSchema['member']>;
+
+export type PartialInformationPagesType = PartialTutorialFormType['informationPages'];
+export type PartialCustomOptionsType = PartialTutorialFormType['customOptions'];
+export type PartialBlocksType = NonNullable<NonNullable<PartialInformationPagesType>[number]>['blocks'];
+
+export const MAX_OPTIONS = 6;
+export const MIN_OPTIONS = 2;
+export const MAX_SUB_OPTIONS = 6;
+export const MIN_SUB_OPTIONS = 2;
+
+export const MAX_INFO_PAGES = 10;
+
+const SM_TEXT_MAX_LENGTH = 25;
+const MD_TEXT_MAX_LENGTH = 1000;
+const LG_TEXT_MAX_LENGTH = 2000;
+
 export const tutorialFormSchema: TutorialFormSchema = {
     fields: (value): TutorialFormSchemaFields => {
-        const baseSchema: TutorialFormSchemaFields = {
-            projectType: [requiredCondition],
-            lookFor: [requiredStringCondition, getNoMoreThanNCharacterCondition(25)],
-            name: [requiredStringCondition, getNoMoreThanNCharacterCondition(1000)],
+        let baseSchema: TutorialFormSchemaFields = {
+            projectType: {
+                required: true,
+            },
+            lookFor: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+                validations: [getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH)],
+            },
+            name: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+                validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
+            },
             tileServer: {
                 fields: tileServerFieldsSchema,
             },
-            screens: [requiredCondition],
-            // FIXME: add validation for tutorialTasks (geojson)
-            tutorialTasks: [requiredCondition],
-            exampleImage1: [requiredCondition],
-            exampleImage2: [requiredCondition],
-
-            tileServerB: [forceNullType],
-            zoomLevel: [forceNullType],
+            tutorialTasks: {
+                required: true,
+            },
+            scenarioPages: {
+                keySelector: (key) => key.scenarioId,
+                member: (): ScenarioPagesFormSchemaMember => ({
+                    fields: (): ScenarioPagesFormSchemaFields => ({
+                        scenarioId: {
+                            required: true,
+                        },
+                        hint: {
+                            fields: () => ({
+                                title: {
+                                    required: true,
+                                    requiredValidation: requiredStringCondition,
+                                    validations: [
+                                        getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH),
+                                    ],
+                                },
+                                description: {
+                                    required: true,
+                                    requiredValidation: requiredStringCondition,
+                                    validations: [
+                                        getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH),
+                                    ],
+                                },
+                                icon: { required: true },
+                            }),
+                        },
+                        instructions: {
+                            fields: () => ({
+                                title: {
+                                    required: true,
+                                    requiredValidation: requiredStringCondition,
+                                    validations: [
+                                        getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH),
+                                    ],
+                                },
+                                description: {
+                                    required: true,
+                                    requiredValidation: requiredStringCondition,
+                                    validations: [
+                                        getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH),
+                                    ],
+                                },
+                                icon: { required: true },
+                            }),
+                        },
+                        success: {
+                            fields: () => ({
+                                title: {
+                                    required: true,
+                                    requiredValidation: requiredStringCondition,
+                                    validations: [
+                                        getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH),
+                                    ],
+                                },
+                                description: {
+                                    required: true,
+                                    requiredValidation: requiredStringCondition,
+                                    validations: [
+                                        getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH),
+                                    ],
+                                },
+                                icon: { required: true },
+                            }),
+                        },
+                    }),
+                }),
+            },
+            informationPages: {
+                validation: (info) => {
+                    if (info && info.length > MAX_INFO_PAGES) {
+                        return `Information page cannot be more than ${MAX_INFO_PAGES}`;
+                    }
+                    return undefined;
+                },
+                keySelector: (key) => key.pageNumber,
+                member: (): InformationPagesFormSchemaMember => ({
+                    fields: (): InformationPagesSchemaFields => ({
+                        pageNumber: { required: true },
+                        title: {
+                            required: true,
+                            requiredValidation: requiredStringCondition,
+                            validations: [getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH)],
+                        },
+                        blocks: {
+                            keySelector: (key) => key.blockNumber,
+                            member: () => ({
+                                fields: (blockValue) => {
+                                    let fields = {
+                                        blockNumber: { required: true },
+                                        blockType: { required: true },
+                                    };
+
+                                    fields = addCondition(
+                                        fields,
+                                        blockValue,
+                                        ['blockType'],
+                                        ['imageFile', 'textDescription'],
+                                        (v) => {
+                                            if (v?.blockType === 'text') {
+                                                return {
+                                                    textDescription: {
+                                                        required: true,
+                                                        requiredValdation: requiredStringCondition,
+                                                        // eslint-disable-next-line max-len
+                                                        validations: [getNoMoreThanNCharacterCondition(LG_TEXT_MAX_LENGTH)],
+                                                    },
+                                                    imageFile: { forceValue: nullValue },
+                                                };
+                                            }
+                                            return {
+                                                imageFile: { required: true },
+                                                textDescription: { forceValue: nullValue },
+
+                                            };
+                                        },
+                                    );
+                                    return fields;
+                                },
+                            }),
+                        },
+                    }),
+                }),
+            },
         };
 
-        if (value?.projectType === PROJECT_TYPE_BUILD_AREA) {
-            return {
-                ...baseSchema,
-                zoomLevel: [
-                    requiredCondition,
-                    greaterThanOrEqualToCondition(14),
-                    lessThanOrEqualToCondition(22),
-                    integerCondition,
-                ],
-            };
-        }
-
-        if (value?.projectType === PROJECT_TYPE_CHANGE_DETECTION
-            || value?.projectType === PROJECT_TYPE_COMPLETENESS) {
-            return {
-                ...baseSchema,
-                zoomLevel: [
-                    requiredCondition,
-                    greaterThanOrEqualToCondition(14),
-                    lessThanOrEqualToCondition(22),
-                    integerCondition,
-                ],
-                tileServerB: {
-                    fields: tileServerFieldsSchema,
-                },
-            };
-        }
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType'],
+            ['customOptions'],
+            (formValues) => {
+                const customOptionField: CustomOptionFormSchema = {
+                    validation: (options) => {
+                        if (!options) {
+                            return undefined;
+                        }
+
+                        if (options.length < MIN_OPTIONS) {
+                            return `There should be at least ${MIN_OPTIONS} options`;
+                        }
+
+                        if (options.length > MAX_OPTIONS) {
+                            return `There shouldn\`t be more than ${MAX_OPTIONS} options`;
+                        }
+
+                        const optionValues = options.flatMap(
+                            (val) => val.value,
+                        ).filter(isDefined);
+
+                        const subOptionValues = options.flatMap((val) => {
+                            const subValue = val.subOptions?.map(
+                                (sub) => sub.value,
+                            );
+                            return subValue;
+                        }).filter(isDefined);
+
+                        const allOptionValues = [...optionValues, ...subOptionValues];
+
+                        const hasDuplicateValue = getDuplicates(allOptionValues, (k) => k);
+                        if (hasDuplicateValue.length > 0) {
+                            return `The value for options and sub-options are duplicated: ${
+                                hasDuplicateValue.map((duplicate) => duplicate).join(', ')
+                            }`;
+                        }
+                        return undefined;
+                    },
+                    keySelector: (key) => key.optionId,
+                    member: (): CustomOptionFormSchemaMember => ({
+                        // FIXME: get this condition from common
+                        fields: (): CustomOptionSchemaFields => ({
+                            optionId: {
+                                required: true,
+                            },
+                            title: {
+                                required: true,
+                                requiredValidation: requiredStringCondition,
+                                validations: [getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH)],
+                            },
+                            value: {
+                                required: true,
+                                validations: [
+                                    integerCondition,
+                                    greaterThanOrEqualToCondition(0),
+                                ],
+                            },
+                            description: {
+                                required: true,
+                                requiredValidation: requiredStringCondition,
+                                validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
+                            },
+                            icon: {
+                                required: true,
+                            },
+                            iconColor: {
+                                required: true,
+                            },
+                            subOptions: {
+                                keySelector: (key) => key.subOptionsId,
+                                validation: (sub) => {
+                                    if (!sub || sub.length === 0) {
+                                        return undefined;
+                                    }
+                                    if (sub.length < MIN_SUB_OPTIONS) {
+                                        return `There should be at least ${MIN_SUB_OPTIONS} sub-options`;
+                                    }
+
+                                    if (sub.length > MAX_SUB_OPTIONS) {
+                                        return `There shouldn\`t be more than ${MAX_SUB_OPTIONS} sub-options`;
+                                    }
+
+                                    return undefined;
+                                },
+                                member: () => ({
+                                    fields: () => ({
+                                        subOptionsId: {
+                                            required: true,
+                                        },
+                                        description: {
+                                            required: true,
+                                            requiredValidation: requiredStringCondition,
+                                            validations: [
+                                                // eslint-disable-next-line max-len
+                                                getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH),
+                                            ],
+                                        },
+                                        value: {
+                                            required: true,
+                                            validations: [
+                                                integerCondition,
+                                                greaterThanOrEqualToCondition(0),
+                                            ],
+                                        },
+                                    }),
+                                }),
+                            },
+                        }),
+                    }),
+                };
+
+                if (formValues?.projectType === PROJECT_TYPE_FOOTPRINT) {
+                    return {
+                        customOptions: customOptionField,
+                    };
+                }
+                return {
+                    customOptions: { forceValue: nullValue },
+                };
+            },
+        );
+
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType'],
+            ['zoomLevel'],
+            (v) => (v?.projectType === PROJECT_TYPE_BUILD_AREA
+                || v?.projectType === PROJECT_TYPE_CHANGE_DETECTION
+                || v?.projectType === PROJECT_TYPE_COMPLETENESS
+                ? {
+                    zoomLevel: {
+                        required: true,
+                        validations: [
+                            greaterThanOrEqualToCondition(14),
+                            lessThanOrEqualToCondition(22),
+                            integerCondition,
+                        ],
+                    },
+                } : {
+                    zoomLevel: { forceValue: nullValue },
+                }),
+        );
 
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType'],
+            ['tileServerB'],
+            (v) => (v?.projectType === PROJECT_TYPE_CHANGE_DETECTION
+                || v?.projectType === PROJECT_TYPE_COMPLETENESS
+                ? {
+                    tileServerB: {
+                        fields: tileServerFieldsSchema,
+                    },
+                } : {
+                    tileServerB: { forceValue: nullValue },
+                }),
+        );
         return baseSchema;
     },
 };
diff --git a/manager-dashboard/app/views/UserGroups/UserGroupFormModal/index.tsx b/manager-dashboard/app/views/UserGroups/UserGroupFormModal/index.tsx
index c71ee44af..016da91bf 100644
--- a/manager-dashboard/app/views/UserGroups/UserGroupFormModal/index.tsx
+++ b/manager-dashboard/app/views/UserGroups/UserGroupFormModal/index.tsx
@@ -18,8 +18,8 @@ import {
     useForm,
     getErrorObject,
     createSubmitHandler,
-    requiredCondition,
     analyzeErrors,
+    requiredStringCondition,
 } from '@togglecorp/toggle-form';
 import {
     MdOutlinePublishedWithChanges,
@@ -51,8 +51,16 @@ const MAX_CHARS_DESCRIPTION = 100;
 
 const userGroupFormSchema: UserGroupFormSchema = {
     fields: (): UserGroupFormSchemaFields => ({
-        name: [requiredCondition, getNoMoreThanNCharacterCondition(MAX_CHARS_NAME)],
-        description: [getNoMoreThanNCharacterCondition(MAX_CHARS_DESCRIPTION)],
+        name: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+            validations: [getNoMoreThanNCharacterCondition(MAX_CHARS_NAME)],
+        },
+        description: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+            validations: [getNoMoreThanNCharacterCondition(MAX_CHARS_DESCRIPTION)],
+        },
     }),
 };
 
@@ -75,7 +83,7 @@ function UserGroupFormModal(props: Props) {
         value,
         validate,
         setError,
-    } = useForm(userGroupFormSchema, defaultUserGroupFormValue);
+    } = useForm(userGroupFormSchema, { value: defaultUserGroupFormValue });
 
     const mountedRef = useMountedRef();
     const { user } = React.useContext(UserContext);
diff --git a/manager-dashboard/package.json b/manager-dashboard/package.json
index dd433e347..de3c020bd 100644
--- a/manager-dashboard/package.json
+++ b/manager-dashboard/package.json
@@ -14,12 +14,7 @@
         "build:prod": "webpack --mode=production --node-env=production",
         "watch": "webpack --watch",
         "start": "webpack serve --mode=development",
-        "initialize": "mkdir -p generated && yes n | cp -i type.template.tsx generated/types.tsx 2>/dev/null",
-        "check-unused": "unimported",
-        "prelint": "yarn initialize",
-        "pretypecheck": "yarn initialize",
-        "prebuild": "yarn initialize",
-        "prestart": "yarn initialize"
+        "check-unused": "unimported"
     },
     "repository": {
         "type": "git",
@@ -39,7 +34,7 @@
         "@sentry/react": "^6.9.0",
         "@sentry/tracing": "^6.9.0",
         "@togglecorp/fujs": "^1.9.2",
-        "@togglecorp/toggle-form": "^1.2.1",
+        "@togglecorp/toggle-form": "^2.0.3",
         "@turf/area": "^6.5.0",
         "@turf/invariant": "^6.5.0",
         "apollo-link": "^1.2.14",
@@ -54,7 +49,9 @@
         "leaflet": "^1.8.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "react-icons": "^4.3.1"
+        "react-icons": "^4.3.1",
+        "react-mde": "^11.5.0",
+        "react-showdown": "^2.3.1"
     },
     "devDependencies": {
         "@babel/core": "^7.13.10",
@@ -77,8 +74,8 @@
         "@types/react": "^17.0.14",
         "@types/react-dom": "^17.0.9",
         "@types/react-router-dom": "^5.1.8",
-        "@typescript-eslint/eslint-plugin": "^4.28.3",
-        "@typescript-eslint/parser": "^4.28.3",
+        "@typescript-eslint/eslint-plugin": "^5.59.8",
+        "@typescript-eslint/parser": "^5.59.8",
         "babel-jest": "^27.4.6",
         "babel-loader": "^8.2.2",
         "babel-plugin-graphql-tag": "^3.3.0",
@@ -120,7 +117,7 @@
         "stylelint-config-recommended": "^5.0.0",
         "stylelint-webpack-plugin": "^2.2.2",
         "terser-webpack-plugin": "^5.1.4",
-        "typescript": "^4.3.5",
+        "typescript": "^5.0.4",
         "unimported": "^1.19.1",
         "webpack": "^5.27.0",
         "webpack-cli": "^4.5.0",
diff --git a/manager-dashboard/yarn.lock b/manager-dashboard/yarn.lock
index f55aae387..a3597eea5 100644
--- a/manager-dashboard/yarn.lock
+++ b/manager-dashboard/yarn.lock
@@ -292,7 +292,7 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0":
+"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz#90538e60b672ecf1b448f5f4f5433d37e79a3ec3"
   integrity sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==
@@ -1224,7 +1224,7 @@
     "@babel/helper-validator-option" "^7.14.5"
     "@babel/plugin-transform-typescript" "^7.16.1"
 
-"@babel/runtime-corejs3@^7.10.2", "@babel/runtime-corejs3@^7.11.2":
+"@babel/runtime-corejs3@^7.10.2":
   version "7.16.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.16.5.tgz#9057d879720c136193f0440bc400088212a74894"
   integrity sha512-F1pMwvTiUNSAM8mc45kccMQxj31x3y3P+tA/X8hKNWp3/hUsxdGxZ3D3H8JIkxtfA8qGkaBTKvcmvStaYseAFw==
@@ -1232,13 +1232,20 @@
     core-js-pure "^3.19.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.14.0", "@babel/runtime@^7.16.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.16.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4":
   version "7.16.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.5.tgz#7f3e34bf8bdbbadf03fbb7b1ea0d929569c9487a"
   integrity sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.19.0":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.5.tgz#8492dddda9644ae3bda3b45eabe87382caee7200"
+  integrity sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6"
@@ -1344,108 +1351,6 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz#d5e0706cf8c6acd8c6032f8d54070af261bbbb2f"
   integrity sha512-ws57AidsDvREKrZKYffXddNkyaF14iHNHm8VQnZH6t99E8gczjNN0GpvcGny0imC80yQ0tHz1xVUKk/KFQSUyA==
 
-"@emotion/cache@^10.0.27":
-  version "10.0.29"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
-  integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
-  dependencies:
-    "@emotion/sheet" "0.9.4"
-    "@emotion/stylis" "0.8.5"
-    "@emotion/utils" "0.11.3"
-    "@emotion/weak-memoize" "0.2.5"
-
-"@emotion/core@^10.1.1":
-  version "10.3.1"
-  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.3.1.tgz#4021b6d8b33b3304d48b0bb478485e7d7421c69d"
-  integrity sha512-447aUEjPIm0MnE6QYIaFz9VQOHSXf4Iu6EWOIqq11EAPqinkSZmfymPTmlOE3QjLv846lH4JVZBUOtwGbuQoww==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    "@emotion/cache" "^10.0.27"
-    "@emotion/css" "^10.0.27"
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/sheet" "0.9.4"
-    "@emotion/utils" "0.11.3"
-
-"@emotion/css@^10.0.27":
-  version "10.0.27"
-  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
-  integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
-  dependencies:
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/utils" "0.11.3"
-    babel-plugin-emotion "^10.0.27"
-
-"@emotion/hash@0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
-  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
-
-"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.6":
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
-  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
-  dependencies:
-    "@emotion/memoize" "0.7.4"
-
-"@emotion/memoize@0.7.4":
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
-  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
-
-"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
-  version "0.11.16"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
-  integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==
-  dependencies:
-    "@emotion/hash" "0.8.0"
-    "@emotion/memoize" "0.7.4"
-    "@emotion/unitless" "0.7.5"
-    "@emotion/utils" "0.11.3"
-    csstype "^2.5.7"
-
-"@emotion/sheet@0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
-  integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
-
-"@emotion/styled-base@^10.3.0":
-  version "10.3.0"
-  resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.3.0.tgz#9aa2c946100f78b47316e4bc6048321afa6d4e36"
-  integrity sha512-PBRqsVKR7QRNkmfH78hTSSwHWcwDpecH9W6heujWAcyp2wdz/64PP73s7fWS1dIPm8/Exc8JAzYS8dEWXjv60w==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    "@emotion/is-prop-valid" "0.8.8"
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/utils" "0.11.3"
-
-"@emotion/styled@^10.0.27":
-  version "10.3.0"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.3.0.tgz#8ee959bf75730789abb5f67f7c3ded0c30aec876"
-  integrity sha512-GgcUpXBBEU5ido+/p/mCT2/Xx+Oqmp9JzQRuC+a4lYM4i4LBBn/dWvc0rQ19N9ObA8/T4NWMrPNe79kMBDJqoQ==
-  dependencies:
-    "@emotion/styled-base" "^10.3.0"
-    babel-plugin-emotion "^10.0.27"
-
-"@emotion/stylis@0.8.5":
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
-  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
-
-"@emotion/unitless@0.7.5":
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
-  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
-
-"@emotion/utils@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
-  integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
-
-"@emotion/weak-memoize@0.2.5":
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
-  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
-
 "@endemolshinegroup/cosmiconfig-typescript-loader@3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz#eea4635828dde372838b0909693ebd9aafeec22d"
@@ -1456,6 +1361,18 @@
     ts-node "^9"
     tslib "^2"
 
+"@eslint-community/eslint-utils@^4.2.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+  dependencies:
+    eslint-visitor-keys "^3.3.0"
+
+"@eslint-community/regexpp@^4.4.0":
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.5.1.tgz#cdd35dce4fa1a89a4fd42b1599eb35b3af408884"
+  integrity sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -3006,180 +2923,6 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@storybook/addons@6.4.9":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.4.9.tgz#43b5dabf6781d863fcec0a0b293c236b4d5d4433"
-  integrity sha512-y+oiN2zd+pbRWwkf6aQj4tPDFn+rQkrv7fiVoMxsYub+kKyZ3CNOuTSJH+A1A+eBL6DmzocChUyO6jvZFuh6Dg==
-  dependencies:
-    "@storybook/api" "6.4.9"
-    "@storybook/channels" "6.4.9"
-    "@storybook/client-logger" "6.4.9"
-    "@storybook/core-events" "6.4.9"
-    "@storybook/csf" "0.0.2--canary.87bc651.0"
-    "@storybook/router" "6.4.9"
-    "@storybook/theming" "6.4.9"
-    "@types/webpack-env" "^1.16.0"
-    core-js "^3.8.2"
-    global "^4.4.0"
-    regenerator-runtime "^0.13.7"
-
-"@storybook/api@6.4.9":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.4.9.tgz#6187d08658629580f0a583f2069d55b34964b34a"
-  integrity sha512-U+YKcDQg8xal9sE5eSMXB9vcqk8fD1pSyewyAjjbsW5hV0B3L3i4u7z/EAD9Ujbnor+Cvxq+XGvp+Qnc5Gd40A==
-  dependencies:
-    "@storybook/channels" "6.4.9"
-    "@storybook/client-logger" "6.4.9"
-    "@storybook/core-events" "6.4.9"
-    "@storybook/csf" "0.0.2--canary.87bc651.0"
-    "@storybook/router" "6.4.9"
-    "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.4.9"
-    core-js "^3.8.2"
-    fast-deep-equal "^3.1.3"
-    global "^4.4.0"
-    lodash "^4.17.21"
-    memoizerific "^1.11.3"
-    regenerator-runtime "^0.13.7"
-    store2 "^2.12.0"
-    telejson "^5.3.2"
-    ts-dedent "^2.0.0"
-    util-deprecate "^1.0.2"
-
-"@storybook/channel-postmessage@6.4.9":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.4.9.tgz#b20b7d66f0f2a8ba39fe9002f3a3dc16d9e1f681"
-  integrity sha512-0Oif4e6/oORv4oc2tHhIRts9faE/ID9BETn4uqIUWSl2CX1wYpKYDm04rEg3M6WvSzsi+6fzoSFvkr9xC5Ns2w==
-  dependencies:
-    "@storybook/channels" "6.4.9"
-    "@storybook/client-logger" "6.4.9"
-    "@storybook/core-events" "6.4.9"
-    core-js "^3.8.2"
-    global "^4.4.0"
-    qs "^6.10.0"
-    telejson "^5.3.2"
-
-"@storybook/channels@6.4.9":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.4.9.tgz#132c574d3fb2e6aaa9c52312c592794699b9d8ec"
-  integrity sha512-DNW1qDg+1WFS2aMdGh658WJXh8xBXliO5KAn0786DKcWCsKjfsPPQg/QCHczHK0+s5SZyzQT5aOBb4kTRHELQA==
-  dependencies:
-    core-js "^3.8.2"
-    ts-dedent "^2.0.0"
-    util-deprecate "^1.0.2"
-
-"@storybook/client-api@^6.0.21":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.4.9.tgz#e3d90c66356d6f53f8ceb4f31753f670f704fde0"
-  integrity sha512-1IljlTr+ea2pIr6oiPhygORtccOdEb7SqaVzWDfLCHOhUnJ2Ka5UY9ADqDa35jvSSdRdynfk9Yl5/msY0yY1yg==
-  dependencies:
-    "@storybook/addons" "6.4.9"
-    "@storybook/channel-postmessage" "6.4.9"
-    "@storybook/channels" "6.4.9"
-    "@storybook/client-logger" "6.4.9"
-    "@storybook/core-events" "6.4.9"
-    "@storybook/csf" "0.0.2--canary.87bc651.0"
-    "@storybook/store" "6.4.9"
-    "@types/qs" "^6.9.5"
-    "@types/webpack-env" "^1.16.0"
-    core-js "^3.8.2"
-    fast-deep-equal "^3.1.3"
-    global "^4.4.0"
-    lodash "^4.17.21"
-    memoizerific "^1.11.3"
-    qs "^6.10.0"
-    regenerator-runtime "^0.13.7"
-    store2 "^2.12.0"
-    synchronous-promise "^2.0.15"
-    ts-dedent "^2.0.0"
-    util-deprecate "^1.0.2"
-
-"@storybook/client-logger@6.4.9":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.4.9.tgz#ef6af30fac861fea69c8917120ed06b4c2f0b54e"
-  integrity sha512-BVagmmHcuKDZ/XROADfN3tiolaDW2qG0iLmDhyV1gONnbGE6X5Qm19Jt2VYu3LvjKF1zMPSWm4mz7HtgdwKbuQ==
-  dependencies:
-    core-js "^3.8.2"
-    global "^4.4.0"
-
-"@storybook/core-events@6.4.9":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.4.9.tgz#7febedb8d263fbd6e4a69badbfcdce0101e6f782"
-  integrity sha512-YhU2zJr6wzvh5naYYuy/0UKNJ/SaXu73sIr0Tx60ur3bL08XkRg7eZ9vBhNBTlAa35oZqI0iiGCh0ljiX7yEVQ==
-  dependencies:
-    core-js "^3.8.2"
-
-"@storybook/csf@0.0.2--canary.87bc651.0":
-  version "0.0.2--canary.87bc651.0"
-  resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.2--canary.87bc651.0.tgz#c7b99b3a344117ef67b10137b6477a3d2750cf44"
-  integrity sha512-ajk1Uxa+rBpFQHKrCcTmJyQBXZ5slfwHVEaKlkuFaW77it8RgbPJp/ccna3sgoi8oZ7FkkOyvv1Ve4SmwFqRqw==
-  dependencies:
-    lodash "^4.17.15"
-
-"@storybook/router@6.4.9":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.4.9.tgz#7cc3f85494f4e14d38925e2802145df69a071201"
-  integrity sha512-GT2KtVHo/mBjxDBFB5ZtVJVf8vC+3p5kRlQC4jao68caVp7H24ikPOkcY54VnQwwe4A1aXpGbJXUyTisEPFlhQ==
-  dependencies:
-    "@storybook/client-logger" "6.4.9"
-    core-js "^3.8.2"
-    fast-deep-equal "^3.1.3"
-    global "^4.4.0"
-    history "5.0.0"
-    lodash "^4.17.21"
-    memoizerific "^1.11.3"
-    qs "^6.10.0"
-    react-router "^6.0.0"
-    react-router-dom "^6.0.0"
-    ts-dedent "^2.0.0"
-
-"@storybook/semver@^7.3.2":
-  version "7.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/semver/-/semver-7.3.2.tgz#f3b9c44a1c9a0b933c04e66d0048fcf2fa10dac0"
-  integrity sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==
-  dependencies:
-    core-js "^3.6.5"
-    find-up "^4.1.0"
-
-"@storybook/store@6.4.9":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/store/-/store-6.4.9.tgz#613c6f13271276837c6a603a16199d2abf90153e"
-  integrity sha512-H30KfiM2XyGMJcLaOepCEUsU7S3C/f7t46s6Nhw0lc5w/6HTQc2jGV3GgG3lUAUAzEQoxmmu61w3N2a6eyRzmg==
-  dependencies:
-    "@storybook/addons" "6.4.9"
-    "@storybook/client-logger" "6.4.9"
-    "@storybook/core-events" "6.4.9"
-    "@storybook/csf" "0.0.2--canary.87bc651.0"
-    core-js "^3.8.2"
-    fast-deep-equal "^3.1.3"
-    global "^4.4.0"
-    lodash "^4.17.21"
-    memoizerific "^1.11.3"
-    regenerator-runtime "^0.13.7"
-    slash "^3.0.0"
-    stable "^0.1.8"
-    synchronous-promise "^2.0.15"
-    ts-dedent "^2.0.0"
-    util-deprecate "^1.0.2"
-
-"@storybook/theming@6.4.9":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.4.9.tgz#8ece44007500b9a592e71eca693fbeac90803b0d"
-  integrity sha512-Do6GH6nKjxfnBg6djcIYAjss5FW9SRKASKxLYxX2RyWJBpz0m/8GfcGcRyORy0yFTk6jByA3Hs+WFH3GnEbWkw==
-  dependencies:
-    "@emotion/core" "^10.1.1"
-    "@emotion/is-prop-valid" "^0.8.6"
-    "@emotion/styled" "^10.0.27"
-    "@storybook/client-logger" "6.4.9"
-    core-js "^3.8.2"
-    deep-object-diff "^1.1.0"
-    emotion-theming "^10.0.27"
-    global "^4.4.0"
-    memoizerific "^1.11.3"
-    polished "^4.0.5"
-    resolve-from "^5.0.0"
-    ts-dedent "^2.0.0"
-
 "@stylelint/postcss-css-in-js@^0.37.2":
   version "0.37.2"
   resolved "https://registry.yarnpkg.com/@stylelint/postcss-css-in-js/-/postcss-css-in-js-0.37.2.tgz#7e5a84ad181f4234a2480803422a47b8749af3d2"
@@ -3212,21 +2955,27 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
-"@togglecorp/fujs@^1.9.2", "@togglecorp/fujs@^1.9.2-beta.0":
+"@togglecorp/fujs@^1.9.2":
   version "1.9.2"
   resolved "https://registry.yarnpkg.com/@togglecorp/fujs/-/fujs-1.9.2.tgz#72fad13bd21eb04ecd078b50baaa68e2badbb248"
   integrity sha512-dH0mmqtty32bmQ18MEFHf+f2NwYsIDjn6A4N0NO5q9LyYnNnpnc+7tgeDan/fGXUXD7pXIBc400baGffaVUBaw==
   dependencies:
     "@babel/runtime" "^7.7.7"
 
-"@togglecorp/toggle-form@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@togglecorp/toggle-form/-/toggle-form-1.2.1.tgz#43145c3e61bf910916edb73fd735eb2dd5cdbef6"
-  integrity sha512-YzjbiC2+E6aZOb2T57bkhcTG7Iq03dn53Yw/Ve2k/rBY6BNLLrFJaePbfAXe5on7rO+57/RVkqpO46FTFAjfRw==
+"@togglecorp/fujs@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@togglecorp/fujs/-/fujs-2.0.0.tgz#b1834326a173e568a226d956271b1b532b5f1f30"
+  integrity sha512-Fx5SF9kusbf35uT2WYlI6gdqqSL/e3JN4urAyB2O+jPz1VkG2I85VRqFxGjrg4m/ZZH+HRyGgLhSDn2V8LNdjA==
+  dependencies:
+    "@babel/runtime" "^7.19.0"
+
+"@togglecorp/toggle-form@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@togglecorp/toggle-form/-/toggle-form-2.0.3.tgz#4867900b11aef8a9a53833535530fa911264b762"
+  integrity sha512-43JytRKdqWu9LrRDAbVxyaDjmFWsjEwWfG3UdFl8lbdE/M/BCU/yZIYTq8B8Xavf6ryUhcFIjWbSEAEBdc0K2A==
   dependencies:
-    "@babel/runtime-corejs3" "^7.11.2"
-    "@storybook/client-api" "^6.0.21"
-    "@togglecorp/fujs" "^1.9.2-beta.0"
+    "@babel/runtime" "^7.19.0"
+    "@togglecorp/fujs" "^2.0.0"
 
 "@tootallnate/once@1":
   version "1.1.2"
@@ -3383,11 +3132,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/is-function@^1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.1.tgz#2d024eace950c836d9e3335a66b97960ae41d022"
-  integrity sha512-A79HEEiwXTFtfY+Bcbo58M2GRYzCr9itHWzbzHVFNEYCcoU/MMGwYYf721gBrnhpj1s6RGVVha/IgNFnR0Iw/Q==
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -3420,7 +3164,7 @@
   resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.5.tgz#738dd390a6ecc5442f35e7f03fa1431353f7e138"
   integrity sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==
 
-"@types/json-schema@*", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.7", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
+"@types/json-schema@*", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
   version "7.0.9"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
@@ -3501,11 +3245,6 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
-"@types/qs@^6.9.5":
-  version "6.9.7"
-  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
-  integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
-
 "@types/react-dom@^17.0.9":
   version "17.0.11"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466"
@@ -3551,6 +3290,11 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+"@types/semver@^7.3.12":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.0.tgz#591c1ce3a702c45ee15f47a42ade72c2fd78978a"
+  integrity sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==
+
 "@types/stack-utils@^2.0.0":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
@@ -3574,11 +3318,6 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
-"@types/webpack-env@^1.16.0":
-  version "1.16.3"
-  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.16.3.tgz#b776327a73e561b71e7881d0cd6d34a1424db86a"
-  integrity sha512-9gtOPPkfyNoEqCQgx4qJKkuNm/x0R2hKR7fdl7zvTJyHnIisuE/LfvXOsYWL0o3qq6uiBnKZNNNzi3l0y/X+xw==
-
 "@types/websocket@1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@types/websocket/-/websocket-1.0.2.tgz#d2855c6a312b7da73ed16ba6781815bf30c6187a"
@@ -3603,33 +3342,23 @@
   resolved "https://registry.yarnpkg.com/@types/zen-observable/-/zen-observable-0.8.0.tgz#8b63ab7f1aa5321248aad5ac890a485656dcea4d"
   integrity sha512-te5lMAWii1uEJ4FwLjzdlbw3+n0FZNOvFXHxQDKeT0dilh7HOzdMzV2TrJVUzq8ep7J4Na8OUYPRLSQkJHAlrg==
 
-"@typescript-eslint/eslint-plugin@^4.28.3":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.33.0.tgz#c24dc7c8069c7706bc40d99f6fa87edcb2005276"
-  integrity sha512-aINiAxGVdOl1eJyVjaWn/YcVAq4Gi/Yo35qHGCnqbWVz61g39D0h23veY/MA0rFFGfxK7TySg2uwDeNv+JgVpg==
-  dependencies:
-    "@typescript-eslint/experimental-utils" "4.33.0"
-    "@typescript-eslint/scope-manager" "4.33.0"
-    debug "^4.3.1"
-    functional-red-black-tree "^1.0.1"
-    ignore "^5.1.8"
-    regexpp "^3.1.0"
-    semver "^7.3.5"
+"@typescript-eslint/eslint-plugin@^5.59.8":
+  version "5.59.8"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.8.tgz#1e7a3e5318ece22251dfbc5c9c6feeb4793cc509"
+  integrity sha512-JDMOmhXteJ4WVKOiHXGCoB96ADWg9q7efPWHRViT/f09bA8XOMLAVHHju3l0MkZnG1izaWXYmgvQcUjTRcpShQ==
+  dependencies:
+    "@eslint-community/regexpp" "^4.4.0"
+    "@typescript-eslint/scope-manager" "5.59.8"
+    "@typescript-eslint/type-utils" "5.59.8"
+    "@typescript-eslint/utils" "5.59.8"
+    debug "^4.3.4"
+    grapheme-splitter "^1.0.4"
+    ignore "^5.2.0"
+    natural-compare-lite "^1.4.0"
+    semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/experimental-utils@4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.33.0.tgz#6f2a786a4209fa2222989e9380b5331b2810f7fd"
-  integrity sha512-zeQjOoES5JFjTnAhI5QY7ZviczMzDptls15GFsI6jyUOq0kOf9+WonkhtlIhh0RgHRnqj5gdNxW5j1EvAyYg6Q==
-  dependencies:
-    "@types/json-schema" "^7.0.7"
-    "@typescript-eslint/scope-manager" "4.33.0"
-    "@typescript-eslint/types" "4.33.0"
-    "@typescript-eslint/typescript-estree" "4.33.0"
-    eslint-scope "^5.1.1"
-    eslint-utils "^3.0.0"
-
-"@typescript-eslint/parser@^4.28.1", "@typescript-eslint/parser@^4.28.3":
+"@typescript-eslint/parser@^4.28.1":
   version "4.33.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.33.0.tgz#dfe797570d9694e560528d18eecad86c8c744899"
   integrity sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==
@@ -3639,6 +3368,16 @@
     "@typescript-eslint/typescript-estree" "4.33.0"
     debug "^4.3.1"
 
+"@typescript-eslint/parser@^5.59.8":
+  version "5.59.8"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.59.8.tgz#60cbb00671d86cf746044ab797900b1448188567"
+  integrity sha512-AnR19RjJcpjoeGojmwZtCwBX/RidqDZtzcbG3xHrmz0aHHoOcbWnpDllenRDmDvsV0RQ6+tbb09/kyc+UT9Orw==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.59.8"
+    "@typescript-eslint/types" "5.59.8"
+    "@typescript-eslint/typescript-estree" "5.59.8"
+    debug "^4.3.4"
+
 "@typescript-eslint/scope-manager@4.33.0":
   version "4.33.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz#d38e49280d983e8772e29121cf8c6e9221f280a3"
@@ -3647,11 +3386,34 @@
     "@typescript-eslint/types" "4.33.0"
     "@typescript-eslint/visitor-keys" "4.33.0"
 
+"@typescript-eslint/scope-manager@5.59.8":
+  version "5.59.8"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.59.8.tgz#ff4ad4fec6433647b817c4a7d4b4165d18ea2fa8"
+  integrity sha512-/w08ndCYI8gxGf+9zKf1vtx/16y8MHrZs5/tnjHhMLNSixuNcJavSX4wAiPf4aS5x41Es9YPCn44MIe4cxIlig==
+  dependencies:
+    "@typescript-eslint/types" "5.59.8"
+    "@typescript-eslint/visitor-keys" "5.59.8"
+
+"@typescript-eslint/type-utils@5.59.8":
+  version "5.59.8"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.59.8.tgz#aa6c029a9d7706d26bbd25eb4666398781df6ea2"
+  integrity sha512-+5M518uEIHFBy3FnyqZUF3BMP+AXnYn4oyH8RF012+e7/msMY98FhGL5SrN29NQ9xDgvqCgYnsOiKp1VjZ/fpA==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "5.59.8"
+    "@typescript-eslint/utils" "5.59.8"
+    debug "^4.3.4"
+    tsutils "^3.21.0"
+
 "@typescript-eslint/types@4.33.0":
   version "4.33.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.33.0.tgz#a1e59036a3b53ae8430ceebf2a919dc7f9af6d72"
   integrity sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==
 
+"@typescript-eslint/types@5.59.8":
+  version "5.59.8"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.59.8.tgz#212e54414733618f5d0fd50b2da2717f630aebf8"
+  integrity sha512-+uWuOhBTj/L6awoWIg0BlWy0u9TyFpCHrAuQ5bNfxDaZ1Ppb3mx6tUigc74LHcbHpOHuOTOJrBoAnhdHdaea1w==
+
 "@typescript-eslint/typescript-estree@4.33.0", "@typescript-eslint/typescript-estree@^4.28.1":
   version "4.33.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz#0dfb51c2908f68c5c08d82aefeaf166a17c24609"
@@ -3665,6 +3427,33 @@
     semver "^7.3.5"
     tsutils "^3.21.0"
 
+"@typescript-eslint/typescript-estree@5.59.8":
+  version "5.59.8"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.8.tgz#801a7b1766481629481b3b0878148bd7a1f345d7"
+  integrity sha512-Jy/lPSDJGNow14vYu6IrW790p7HIf/SOV1Bb6lZ7NUkLc2iB2Z9elESmsaUtLw8kVqogSbtLH9tut5GCX1RLDg==
+  dependencies:
+    "@typescript-eslint/types" "5.59.8"
+    "@typescript-eslint/visitor-keys" "5.59.8"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/utils@5.59.8":
+  version "5.59.8"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.59.8.tgz#34d129f35a2134c67fdaf024941e8f96050dca2b"
+  integrity sha512-Tr65630KysnNn9f9G7ROF3w1b5/7f6QVCJ+WK9nhIocWmx9F+TmCAcglF26Vm7z8KCTwoKcNEBZrhlklla3CKg==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@types/json-schema" "^7.0.9"
+    "@types/semver" "^7.3.12"
+    "@typescript-eslint/scope-manager" "5.59.8"
+    "@typescript-eslint/types" "5.59.8"
+    "@typescript-eslint/typescript-estree" "5.59.8"
+    eslint-scope "^5.1.1"
+    semver "^7.3.7"
+
 "@typescript-eslint/visitor-keys@4.33.0":
   version "4.33.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz#2a22f77a41604289b7a186586e9ec48ca92ef1dd"
@@ -3673,6 +3462,14 @@
     "@typescript-eslint/types" "4.33.0"
     eslint-visitor-keys "^2.0.0"
 
+"@typescript-eslint/visitor-keys@5.59.8":
+  version "5.59.8"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.8.tgz#aa6a7ef862add919401470c09e1609392ef3cc40"
+  integrity sha512-pJhi2ms0x0xgloT7xYabil3SGGlojNNKjK/q6dB3Ey0uJLMjK2UDGJvHieiyJVW/7C3KI+Z4Q3pEHkm4ejA+xQ==
+  dependencies:
+    "@typescript-eslint/types" "5.59.8"
+    eslint-visitor-keys "^3.3.0"
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -4376,22 +4173,6 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-emotion@^10.0.27:
-  version "10.2.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz#a1fe3503cff80abfd0bdda14abd2e8e57a79d17d"
-  integrity sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@emotion/hash" "0.8.0"
-    "@emotion/memoize" "0.7.4"
-    "@emotion/serialize" "^0.11.16"
-    babel-plugin-macros "^2.0.0"
-    babel-plugin-syntax-jsx "^6.18.0"
-    convert-source-map "^1.5.0"
-    escape-string-regexp "^1.0.5"
-    find-root "^1.1.0"
-    source-map "^0.5.7"
-
 babel-plugin-graphql-tag@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-graphql-tag/-/babel-plugin-graphql-tag-3.3.0.tgz#77d8ce04fb8f2ca56bce9af0ca7d5ad2b91f53bc"
@@ -4423,15 +4204,6 @@ babel-plugin-jest-hoist@^27.5.1:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-macros@^2.0.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
-  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
-  dependencies:
-    "@babel/runtime" "^7.7.2"
-    cosmiconfig "^6.0.0"
-    resolve "^1.12.0"
-
 babel-plugin-module-resolver@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-4.1.0.tgz#22a4f32f7441727ec1fbf4967b863e1e3e9f33e2"
@@ -4482,11 +4254,6 @@ babel-plugin-polyfill-regenerator@^0.3.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.0"
 
-babel-plugin-syntax-jsx@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
-  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
-
 babel-plugin-syntax-trailing-function-commas@^7.0.0-beta.0:
   version "7.0.0-beta.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz#aa213c1435e2bffeb6fca842287ef534ad05d5cf"
@@ -5270,7 +5037,7 @@ content-type@~1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
   integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
@@ -5305,7 +5072,7 @@ core-js-pure@^3.19.0:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.20.1.tgz#f7a2c62f98de83e4da8fca7b78846d3a2f542145"
   integrity sha512-yeNNr3L9cEBwNy6vhhIJ0nko7fE7uFO6PgawcacGt2VWep4WqQx0RiqlkgSP7kqUMC1IKdfO9qPeWXcUheHLVQ==
 
-core-js@3, core-js@^3.6.5, core-js@^3.8.2:
+core-js@3:
   version "3.20.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.20.1.tgz#eb1598047b7813572f1dc24b7c6a95528c99eef3"
   integrity sha512-btdpStYFQScnNVQ5slVcr858KP0YWYjV16eGJQw8Gg7CWtu/2qNvIM3qVRIR3n1pK2R9NNOrTevbvAYxajwEjg==
@@ -5338,17 +5105,6 @@ cosmiconfig@7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-cosmiconfig@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
-  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
-  dependencies:
-    "@types/parse-json" "^4.0.0"
-    import-fresh "^3.1.0"
-    parse-json "^5.0.0"
-    path-type "^4.0.0"
-    yaml "^1.7.2"
-
 cosmiconfig@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
@@ -5568,11 +5324,6 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.5.7:
-  version "2.6.19"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
-  integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
-
 csstype@^3.0.2:
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
@@ -5636,7 +5387,7 @@ debug@^3.1.1, debug@^3.2.6, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.3.2:
+debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -5700,11 +5451,6 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deep-object-diff@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.0.tgz#d6fabf476c2ed1751fc94d5ca693d2ed8c18bc5a"
-  integrity sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==
-
 deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
@@ -6021,15 +5767,6 @@ emojis-list@^3.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
-emotion-theming@^10.0.27:
-  version "10.3.0"
-  resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.3.0.tgz#7f84d7099581d7ffe808aab5cd870e30843db72a"
-  integrity sha512-mXiD2Oj7N9b6+h/dC6oLf9hwxbtKHQjoIqtodEyL8CpkN4F3V4IK/BT4D0C7zSs4BBFOu4UlPJbvvBLa88SGEA==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    "@emotion/weak-memoize" "0.2.5"
-    hoist-non-react-statics "^3.3.0"
-
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -6324,13 +6061,6 @@ eslint-utils@^2.1.0:
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
-eslint-utils@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
-  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
-  dependencies:
-    eslint-visitor-keys "^2.0.0"
-
 eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
@@ -6341,6 +6071,11 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
+eslint-visitor-keys@^3.3.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz#c22c48f48942d08ca824cc526211ae400478a994"
+  integrity sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==
+
 eslint-webpack-plugin@^2.5.4:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/eslint-webpack-plugin/-/eslint-webpack-plugin-2.6.0.tgz#3bd4ada4e539cb1f6687d2f619073dbb509361cd"
@@ -6652,6 +6387,17 @@ fast-glob@^3.1.1, fast-glob@^3.2.5:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fast-glob@^3.2.9:
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
+  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -6807,11 +6553,6 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
-find-root@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
-  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
-
 find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
@@ -7104,7 +6845,7 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
-global@^4.4.0, global@~4.4.0:
+global@~4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
   integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
@@ -7148,6 +6889,18 @@ globby@11.x.x, globby@^11.0.3, globby@^11.0.4:
     merge2 "^1.3.0"
     slash "^3.0.0"
 
+globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
 globby@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
@@ -7198,6 +6951,11 @@ graceful-fs@^4.2.9:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
+grapheme-splitter@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
+  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
+
 graphql-anywhere@^4.2.7:
   version "4.2.7"
   resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-4.2.7.tgz#c06fb40b1d62b39470c80e3731478dbbef060067"
@@ -7345,13 +7103,6 @@ header-case@^2.0.4:
     capital-case "^1.0.4"
     tslib "^2.0.3"
 
-history@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/history/-/history-5.0.0.tgz#0cabbb6c4bbf835addb874f8259f6d25101efd08"
-  integrity sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==
-  dependencies:
-    "@babel/runtime" "^7.7.6"
-
 history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@@ -7364,14 +7115,7 @@ history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
-history@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/history/-/history-5.2.0.tgz#7cdd31cf9bac3c5d31f09c231c9928fad0007b7c"
-  integrity sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==
-  dependencies:
-    "@babel/runtime" "^7.7.6"
-
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7458,7 +7202,7 @@ htmlparser2@^3.10.0:
     inherits "^2.0.1"
     readable-stream "^3.1.1"
 
-htmlparser2@^6.1.0:
+htmlparser2@^6.0.1, htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
   integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
@@ -7582,6 +7326,11 @@ ignore@^5.1.4, ignore@^5.1.8:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
+ignore@^5.2.0:
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
+  integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
+
 image-q@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/image-q/-/image-q-1.1.1.tgz#fc84099664460b90ca862d9300b6bfbbbfbf8056"
@@ -7604,7 +7353,7 @@ import-cwd@^3.0.0:
   dependencies:
     import-from "^3.0.0"
 
-import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
+import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -7928,7 +7677,7 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
-is-function@^1.0.1, is-function@^1.0.2:
+is-function@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08"
   integrity sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==
@@ -8068,7 +7817,7 @@ is-promise@^2.1.0:
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
   integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
 
-is-regex@^1.0.4, is-regex@^1.1.2, is-regex@^1.1.4:
+is-regex@^1.0.4, is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
   integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
@@ -8190,11 +7939,6 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
-isobject@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0"
-  integrity sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==
-
 isomorphic-fetch@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-3.0.0.tgz#0267b005049046d2421207215d45d6a262b8b8b4"
@@ -9218,7 +8962,7 @@ lodash.without@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
   integrity sha1-PNRXSgC2e643OpS3SHcmQFB7eqw=
 
-lodash@4.17.21, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0, lodash@~4.17.0:
+lodash@4.17.21, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0, lodash@~4.17.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -9341,11 +9085,6 @@ map-obj@^4.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
   integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
 
-map-or-similar@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08"
-  integrity sha1-beJlMXSt+12e3DPGnT6Sobdvrwg=
-
 map-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
@@ -9396,13 +9135,6 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
-memoizerific@^1.11.3:
-  version "1.11.3"
-  resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
-  integrity sha1-fIekZGREwy11Q4VwkF8tvRsagFo=
-  dependencies:
-    map-or-similar "^1.5.0"
-
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -9439,7 +9171,7 @@ merge-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
-merge2@^1.3.0:
+merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
@@ -9671,6 +9403,11 @@ native-url@^0.2.6:
   dependencies:
     querystring "^0.2.0"
 
+natural-compare-lite@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
+  integrity sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -10388,13 +10125,6 @@ pngjs@^3.0.0, pngjs@^3.3.3:
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
   integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
 
-polished@^4.0.5:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/polished/-/polished-4.1.3.tgz#7a3abf2972364e7d97770b827eec9a9e64002cfc"
-  integrity sha512-ocPAcVBUOryJEKe0z2KLd1l9EBa1r5mSwlKpExmrLzsnIzJo4axsoU9O2BjOTkDGDT4mZ0WFE5XKTlR3nLnZOA==
-  dependencies:
-    "@babel/runtime" "^7.14.0"
-
 portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -11112,13 +10842,6 @@ qs@6.9.6:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.6.tgz#26ed3c8243a431b2924aca84cc90471f35d5a0ee"
   integrity sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==
 
-qs@^6.10.0:
-  version "6.10.2"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.2.tgz#c1431bea37fc5b24c5bdbafa20f16bdf2a4b9ffe"
-  integrity sha512-mSIdjzqznWgfd4pMii7sHtaYF8rx8861hBO80SraY5GT0XQibWZWJSid0avzHGkDIZLImux2S5mXO0Hfct2QCw==
-  dependencies:
-    side-channel "^1.0.4"
-
 querystring@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
@@ -11200,6 +10923,11 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-mde@^11.5.0:
+  version "11.5.0"
+  resolved "https://registry.yarnpkg.com/react-mde/-/react-mde-11.5.0.tgz#3e81a505071aa80287fb23a1c0ce5e8b34c82055"
+  integrity sha512-CH/VK6d+tpVjJ8rTXfh1dDt6GWedTgCU0668p8toqhAc3vy0Lu872O2RKYDSpkUrlbHI08fjUPTl++nExp6gag==
+
 react-refresh@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.10.0.tgz#2f536c9660c0b9b1d500684d9e52a65e7404f7e3"
@@ -11218,14 +10946,6 @@ react-router-dom@^5.2.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-router-dom@^6.0.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.2.1.tgz#32ec81829152fbb8a7b045bf593a22eadf019bec"
-  integrity sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==
-  dependencies:
-    history "^5.2.0"
-    react-router "6.2.1"
-
 react-router@5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.1.tgz#4d2e4e9d5ae9425091845b8dbc6d9d276239774d"
@@ -11242,12 +10962,14 @@ react-router@5.2.1:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-router@6.2.1, react-router@^6.0.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.2.1.tgz#be2a97a6006ce1d9123c28934e604faef51448a3"
-  integrity sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==
+react-showdown@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/react-showdown/-/react-showdown-2.3.1.tgz#c1d4644e3c351ae131da49d8ba081db812c7ca80"
+  integrity sha512-3O9Gz6HF1MQbGK17gYOO6EJP27h9Sp+g/L7KeOhMJERuutYP3802MPaL8JybjeI97X9HTeeN4A89WjOpEHl3NQ==
   dependencies:
-    history "^5.2.0"
+    domhandler "^4.0.0"
+    htmlparser2 "^6.0.1"
+    showdown "^1.9.1"
 
 react@^17.0.2:
   version "17.0.2"
@@ -11341,7 +11063,12 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
-regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
+regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
@@ -11582,7 +11309,7 @@ resolve.exports@^1.1.0:
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9"
   integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.9.0:
+resolve@^1.10.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.9.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -11833,6 +11560,13 @@ semver@^7.3.2:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.3.7:
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.1.tgz#c90c4d631cf74720e46b21c1d37ea07edfab91ec"
+  integrity sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.17.2:
   version "0.17.2"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.2.tgz#926622f76601c41808012c8bf1688fe3906f7820"
@@ -11959,6 +11693,13 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+showdown@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/showdown/-/showdown-1.9.1.tgz#134e148e75cd4623e09c21b0511977d79b5ad0ef"
+  integrity sha512-9cGuS382HcvExtf5AHk7Cb4pAeQQ+h0eTr33V1mu+crYWV4KvWAw6el92bDrqGEk5d46Ai/fhbEUwqJ/mTCNEA==
+  dependencies:
+    yargs "^14.2"
+
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
@@ -12104,7 +11845,7 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
   integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
 
-source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
+source-map@^0.5.0, source-map@^0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -12234,11 +11975,6 @@ static-extend@^0.1.1:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
 
-store2@^2.12.0:
-  version "2.13.1"
-  resolved "https://registry.yarnpkg.com/store2/-/store2-2.13.1.tgz#fae7b5bb9d35fc53dc61cd262df3abb2f6e59022"
-  integrity sha512-iJtHSGmNgAUx0b/MCS6ASGxb//hGrHHRgzvN+K5bvkBTN7A9RTpPSf1WSp+nPGvWCJ1jRnvY7MKnuqfoi3OEqg==
-
 string-env-interpolation@1.0.1, string-env-interpolation@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string-env-interpolation/-/string-env-interpolation-1.0.1.tgz#ad4397ae4ac53fe6c91d1402ad6f6a52862c7152"
@@ -12623,11 +12359,6 @@ sync-fetch@0.3.0:
     buffer "^5.7.0"
     node-fetch "^2.6.1"
 
-synchronous-promise@^2.0.15:
-  version "2.0.15"
-  resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.15.tgz#07ca1822b9de0001f5ff73595f3d08c4f720eb8e"
-  integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==
-
 table@^6.0.9, table@^6.6.0:
   version "6.7.5"
   resolved "https://registry.yarnpkg.com/table/-/table-6.7.5.tgz#f04478c351ef3d8c7904f0e8be90a1b62417d238"
@@ -12644,20 +12375,6 @@ tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
 
-telejson@^5.3.2:
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/telejson/-/telejson-5.3.3.tgz#fa8ca84543e336576d8734123876a9f02bf41d2e"
-  integrity sha512-PjqkJZpzEggA9TBpVtJi1LVptP7tYtXB6rEubwlHap76AMjzvOdKX41CxyaW7ahhzDU1aftXnMCx5kAPDZTQBA==
-  dependencies:
-    "@types/is-function" "^1.0.0"
-    global "^4.4.0"
-    is-function "^1.0.2"
-    is-regex "^1.1.2"
-    is-symbol "^1.0.3"
-    isobject "^4.0.0"
-    lodash "^4.17.21"
-    memoizerific "^1.11.3"
-
 temp-dir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"
@@ -12871,11 +12588,6 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
-ts-dedent@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
-  integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
-
 ts-invariant@^0.3.2:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.3.3.tgz#b5742b1885ecf9e29c31a750307480f045ec0b16"
@@ -13025,6 +12737,11 @@ typescript@^4.3.5:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.4.tgz#a17d3a0263bf5c8723b9c52f43c5084edf13c2e8"
   integrity sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==
 
+typescript@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.0.4.tgz#b217fd20119bd61a94d4011274e0ab369058da3b"
+  integrity sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==
+
 ua-parser-js@^0.7.30:
   version "0.7.31"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"
@@ -13941,7 +13658,7 @@ yaml-ast-parser@^0.0.43:
   resolved "https://registry.yarnpkg.com/yaml-ast-parser/-/yaml-ast-parser-0.0.43.tgz#e8a23e6fb4c38076ab92995c5dca33f3d3d7c9bb"
   integrity sha512-2PTINUwsRqSd+s8XxKaJWQlUuEMHJQyEuh2edBbW8KNJz0SJPwUSD2zRWqezFEdN7IzAgeuYHFUCF7o8zRdZ0A==
 
-yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
+yaml@^1.10.0, yaml@^1.10.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
@@ -13954,6 +13671,14 @@ yargs-parser@^13.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^15.0.1:
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.3.tgz#316e263d5febe8b38eef61ac092b33dfcc9b1115"
+  integrity sha512-/MVEVjTXy/cGAjdtQf8dW3V9b97bPN7rNn8ETj6BmAQL7ibC7O1Q9SPJbGjgh3SlwoBNXMzj/ZGIj8mBgl12YA==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-parser@^18.1.2:
   version "18.1.3"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
@@ -13988,6 +13713,23 @@ yargs@^13.3.2:
     y18n "^4.0.0"
     yargs-parser "^13.1.2"
 
+yargs@^14.2:
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-14.2.3.tgz#1a1c3edced1afb2a2fea33604bc6d1d8d688a414"
+  integrity sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==
+  dependencies:
+    cliui "^5.0.0"
+    decamelize "^1.2.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^15.0.1"
+
 yargs@^15.3.1:
   version "15.4.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
diff --git a/mapswipe_workers/mapswipe_workers/generate_stats/generate_stats.py b/mapswipe_workers/mapswipe_workers/generate_stats/generate_stats.py
index 22809842e..1a28c111f 100644
--- a/mapswipe_workers/mapswipe_workers/generate_stats/generate_stats.py
+++ b/mapswipe_workers/mapswipe_workers/generate_stats/generate_stats.py
@@ -1,4 +1,8 @@
+import csv
 import datetime as dt
+import hashlib
+import os
+import shutil
 from typing import List, Optional
 
 from mapswipe_workers import auth
@@ -6,6 +10,62 @@
 from mapswipe_workers.generate_stats import overall_stats, project_stats
 
 
+def generate_data_for_mapswipe_website():
+    """
+    Generate data for website
+    """
+    website_data_dest = f"{DATA_PATH}/api/website-data"
+
+    # TODO: Move to utils
+    def _compute_md5(file_name):
+        hash_md5 = hashlib.md5()
+        with open(file_name, "rb") as f:
+            for chunk in iter(lambda: f.read(4096), b""):
+                hash_md5.update(chunk)
+        return hash_md5.hexdigest()
+
+    def _project_history_zip():
+        project_history_file = f"{website_data_dest}/project-history"
+        zip_file_name = shutil.make_archive(
+            project_history_file,
+            "zip",
+            f"{DATA_PATH}/api/history/",
+        )
+        logger.info("finished generate project-history zip")
+        return zip_file_name
+
+    def _manifest_file():
+        endpoints_dir = f"{DATA_PATH}/api/"
+        manifest_file = f"{website_data_dest}/overall-endpoints.csv"
+        with open(manifest_file, "w") as fp:
+            csv_writer = csv.writer(fp)
+            csv_writer.writerow(["endpoints", "size_bytes"])
+            for path, _, files in os.walk(endpoints_dir):
+                for name in files:
+                    file_path = os.path.join(path, name)
+                    csv_writer.writerow(
+                        [
+                            "/api/" + file_path.split("/api/")[1],
+                            os.path.getsize(file_path),
+                        ]
+                    )
+        logger.info("finished generate endpoints manifest for existing stats")
+        return manifest_file
+
+    def _generate_file_hash(files):
+        for file in files:
+            md5_hash = _compute_md5(file)
+            with open(f"{file}.md5", "w") as fp:
+                fp.write(md5_hash)
+
+    files_to_track_for_checksum = [
+        f"{DATA_PATH}/api/projects/projects_centroid.geojson",
+        f"{DATA_PATH}/api/projects/projects_geom.geojson",
+    ]
+    files_to_track_for_checksum.extend([_project_history_zip(), _manifest_file()])
+    _generate_file_hash(files_to_track_for_checksum)
+
+
 def get_recent_projects(hours: int = 3):
     """Get ids for projects when results have been submitted within the last x hours."""
     pg_db = auth.postgresDB()
@@ -108,6 +168,7 @@ def generate_stats(project_id_list: Optional[List[str]] = None):
         overall_stats.get_overall_stats(projects_df, overall_stats_filename)
 
     logger.info(f"finished generate stats for: {project_id_list}")
+    generate_data_for_mapswipe_website()
 
 
 def generate_stats_all_projects():
diff --git a/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py b/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py
index a7eaed23f..0e4212e65 100644
--- a/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py
+++ b/mapswipe_workers/mapswipe_workers/generate_stats/overall_stats.py
@@ -64,6 +64,19 @@ def get_project_static_info(filename: str) -> pd.DataFrame:
                 project_details
                 ,regexp_replace(look_for, E'[\\n\\r]+', ' ', 'g' ) as look_for
                 ,project_type
+                ,image
+                ,created
+                -- Custom options values
+                ,CASE
+                  WHEN (
+                    project_type_specifics->'customOptions' IS NOT NULL AND
+                    (project_type_specifics->'customOptions')::TEXT != 'null'::TEXT
+                  )
+                  THEN -- thus if we have answer labels use them
+                    (project_type_specifics->'customOptions')::TEXT
+                  ELSE -- otherwise use below label range as the mapswipe app default
+                    '[{"value": 0}, {"value": 1}, {"value": 2}, {"value": 3}]'::TEXT
+                END as custom_options
                 -- add an array of the tile server names
                 ,CASE
                   WHEN project_type_specifics->'tileServer'->'name' IS NOT NULL THEN
diff --git a/mapswipe_workers/mapswipe_workers/generate_stats/project_stats.py b/mapswipe_workers/mapswipe_workers/generate_stats/project_stats.py
index 46a3c4483..3e26882a3 100644
--- a/mapswipe_workers/mapswipe_workers/generate_stats/project_stats.py
+++ b/mapswipe_workers/mapswipe_workers/generate_stats/project_stats.py
@@ -1,9 +1,10 @@
+import ast
 import datetime
 import gzip
 import json
 import os
 import tempfile
-from typing import List
+import typing
 
 import pandas as pd
 from pandas.api.types import is_numeric_dtype
@@ -238,76 +239,57 @@ def get_groups(filename: str, project_id: str) -> pd.DataFrame:
     return df
 
 
-def calc_agreement(total: int, no: int, yes: int, maybe: int, bad: int) -> float:
+def calc_agreement(row: pd.Series) -> float:
     """
-    for each task the "agreement" is computed as defined by Scott's Pi
-    Scott's Pi is a measure for inter-rater reliability
-    https://en.wikipedia.org/wiki/Scott%27s_Pi
+    for each task the "agreement" is computed (i.e. the extent to which
+    raters agree for the i-th subject). This measure is a component of
+    Fleiss' kappa: https://en.wikipedia.org/wiki/Fleiss%27_kappa
     """
 
-    # TODO: currently this is implemented only for the 4 given categories
+    # Calculate total count as the sum of all categories
+    n = row["total_count"]
 
-    if total == 1:
-        agreement = 1.0
+    row = row.drop(labels=["total_count"])
+    # extent to which raters agree for the ith subject
+    # set agreement to None if only one user contributed
+    if n == 1 or n == 0:
+        agreement = None
     else:
-        agreement = (
-            1.0
-            / (total * (total - 1))
-            * (
-                (no * (no - 1))
-                + (yes * (yes - 1))
-                + (maybe * (maybe - 1))
-                + (bad * (bad - 1))
-            )
-        )
+        agreement = (sum([i**2 for i in row]) - n) / (n * (n - 1))
 
     return agreement
 
 
-def calc_share(total: int, no: int, yes: int, maybe: int, bad: int) -> List[float]:
+def calc_share(df: pd.DataFrame) -> pd.DataFrame:
     """Calculate the share of each category on the total count."""
-    no_share = no / total
-    yes_share = yes / total
-    maybe_share = maybe / total
-    bad_share = bad / total
-
-    return [no_share, yes_share, maybe_share, bad_share]
-
-
-def calc_count(row) -> List[int]:
-    """
-    Check if a count exists for each category ("no", "yes", "maybe", "bad").
-    Then calculate total count as the sum of all categories.
-    """
-
-    try:
-        no_count = row[0]
-    except KeyError:
-        no_count = 0
+    share_df = df.filter(like="count").div(df.total_count, axis=0)
+    share_df.drop("total_count", inplace=True, axis=1)
+    share_df.columns = share_df.columns.str.replace("_count", "_share")
+    return df.join(share_df)
 
-    try:
-        yes_count = row[1]
-    except KeyError:
-        yes_count = 0
-
-    try:
-        maybe_count = row[2]
-    except KeyError:
-        maybe_count = 0
 
-    try:
-        bad_count = row[3]
-    except KeyError:
-        bad_count = 0
+def calc_parent_option_count(
+    df: pd.DataFrame,
+    custom_options: typing.Dict[int, typing.Set[int]],
+) -> pd.DataFrame:
+    df_new = df.copy()
+    # Update option count using sub options count
+    for option, sub_options in custom_options.items():
+        for sub_option in sub_options:
+            df_new[f"{option}_count"] += df_new[f"{sub_option}_count"]
+    return df_new
 
-    total_count = no_count + yes_count + maybe_count + bad_count
-    assert total_count > 0, "Total count for result must be bigger than zero."
 
-    return [total_count, no_count, yes_count, maybe_count, bad_count]
+def calc_count(df: pd.DataFrame) -> pd.DataFrame:
+    df_new = df.filter(like="count")
+    df_new_sum = df_new.sum(axis=1)
+    return df_new_sum
 
 
-def calc_quadkey(row):
+def calc_quadkey(row: pd.DataFrame):
     """Calculate quadkey based on task id."""
+    # TODO: This does not make sense for media type, digtitalization.
+    #  For these projects types we should move to project classes.
     try:
         tile_z, tile_x, tile_y = row["task_id"].split("-")
         quadkey = tile_functions.tile_coords_and_zoom_to_quadKey(
@@ -320,8 +302,42 @@ def calc_quadkey(row):
     return quadkey
 
 
+def get_custom_options(custom_options: pd.Series) -> typing.Dict[int, typing.Set[int]]:
+    eval_value = ast.literal_eval(custom_options.item())
+    return {
+        option["value"]: {
+            sub_option["value"] for sub_option in option.get("subOptions", [])
+        }
+        for option in eval_value
+    }
+
+
+def add_missing_result_columns(
+    df: typing.Union[pd.DataFrame, pd.Series],
+    custom_options: typing.Dict[int, typing.Set[int]],
+) -> pd.DataFrame:
+    """
+    Check if all possible answers columns are included in the grouped results
+    data frame and add columns if missing.
+    """
+
+    all_answer_label_values_set = set(
+        [
+            _option
+            for option, sub_options in custom_options.items()
+            for _option in [option, *sub_options]
+        ]
+    )
+    return df.reindex(
+        columns=sorted(all_answer_label_values_set),
+        fill_value=0,
+    )
+
+
 def get_agg_results_by_task_id(
-    results_df: pd.DataFrame, tasks_df: pd.DataFrame
+    results_df: pd.DataFrame,
+    tasks_df: pd.DataFrame,
+    custom_options_raw: pd.Series,
 ) -> pd.DataFrame:
     """
     For each task several users contribute results.
@@ -339,6 +355,7 @@ def get_agg_results_by_task_id(
     ----------
     results_df: pd.DataFrame
     tasks_df: pd.DataFrame
+    custom_options_raw: pd.Series
     """
 
     results_by_task_id_df = (
@@ -347,23 +364,31 @@ def get_agg_results_by_task_id(
         .unstack(fill_value=0)
     )
 
-    # calculate total count and check if other counts are defined
-    results_by_task_id_df[["total_count", 0, 1, 2, 3]] = results_by_task_id_df.apply(
-        lambda row: calc_count(row), axis=1, result_type="expand"
+    custom_options = get_custom_options(custom_options_raw)
+
+    # add columns for answer options that were not chosen for any task
+    results_by_task_id_df = add_missing_result_columns(
+        results_by_task_id_df,
+        custom_options,
     )
 
-    # calculate share based on counts
-    results_by_task_id_df[
-        ["0_share", "1_share", "2_share", "3_share"]
-    ] = results_by_task_id_df.apply(
-        lambda row: calc_share(row["total_count"], row[0], row[1], row[2], row[3]),
-        axis=1,
-        result_type="expand",
+    # needed for ogr2ogr todo: might be legacy?
+    results_by_task_id_df = results_by_task_id_df.add_suffix("_count")
+
+    # calculate total count of votes per task
+    results_by_task_id_df["total_count"] = calc_count(results_by_task_id_df)
+
+    results_by_task_id_df = calc_parent_option_count(
+        results_by_task_id_df,
+        custom_options,
     )
 
+    # calculate share based on counts
+    results_by_task_id_df = calc_share(results_by_task_id_df)
+
     # calculate agreement
     results_by_task_id_df["agreement"] = results_by_task_id_df.apply(
-        lambda row: calc_agreement(row["total_count"], row[0], row[1], row[2], row[3]),
+        calc_agreement,
         axis=1,
     )
     logger.info("calculated agreement")
@@ -383,11 +408,6 @@ def get_agg_results_by_task_id(
     )
     logger.info("added geometry to aggregated results")
 
-    # rename columns, ogr2ogr will fail otherwise
-    agg_results_df.rename(
-        columns={0: "0_count", 1: "1_count", 2: "2_count", 3: "3_count"}, inplace=True
-    )
-
     return agg_results_df
 
 
@@ -430,7 +450,11 @@ def get_per_project_statistics(project_id: str, project_info: pd.Series) -> dict
             add_metadata = False
 
         # aggregate results by task id
-        agg_results_df = get_agg_results_by_task_id(results_df, tasks_df)
+        agg_results_df = get_agg_results_by_task_id(
+            results_df,
+            tasks_df,
+            project_info["custom_options"],
+        )
         agg_results_df.to_csv(agg_results_filename, index_label="idx")
 
         geojson_functions.gzipped_csv_to_gzipped_geojson(
diff --git a/mapswipe_workers/mapswipe_workers/generate_stats/tasking_manager_geometries.py b/mapswipe_workers/mapswipe_workers/generate_stats/tasking_manager_geometries.py
index 8d1e0f412..bc3b5b5e7 100644
--- a/mapswipe_workers/mapswipe_workers/generate_stats/tasking_manager_geometries.py
+++ b/mapswipe_workers/mapswipe_workers/generate_stats/tasking_manager_geometries.py
@@ -19,10 +19,14 @@ def load_data(project_id: str, gzipped_csv_file: str) -> list:
     project_data = []
     with gzip.open(gzipped_csv_file, mode="rt") as f:
         reader = csv.reader(f, delimiter=",")
+        column_index_map = {}
 
         for i, row in enumerate(reader):
             if i == 0:
                 # skip header
+                column_index_map = {
+                    column_label: index for index, column_label in enumerate(row)
+                }
                 continue
 
             # the last row of the csv might contain a comment about data use
@@ -42,14 +46,15 @@ def load_data(project_id: str, gzipped_csv_file: str) -> list:
                     "task_x": task_x,
                     "task_y": task_y,
                     "task_z": task_z,
-                    "no_count": int(row[2]),
-                    "yes_count": int(row[3]),
-                    "maybe_count": int(row[4]),
-                    "bad_imagery_count": int(row[5]),
-                    "no_share": float(row[7]),
-                    "yes_share": float(row[8]),
-                    "maybe_share": float(row[9]),
-                    "bad_imagery_share": float(row[10]),
+                    # XXX: Assuming 0->No, 1->Yes, 2->Maybe, 3->Bad
+                    "no_count": int(column_index_map.get("0_count", 0)),
+                    "yes_count": int(column_index_map.get("1_count", 0)),
+                    "maybe_count": int(column_index_map.get("2_count", 0)),
+                    "bad_imagery_count": int(column_index_map.get("3_count", 0)),
+                    "no_share": float(column_index_map.get("0_count", 0)),
+                    "yes_share": float(column_index_map.get("1_count", 0)),
+                    "maybe_share": float(column_index_map.get("2_count", 0)),
+                    "bad_imagery_share": float(column_index_map.get("3_count", 0)),
                     "wkt": tile_functions.geometry_from_tile_coords(
                         task_x, task_y, task_z
                     ),
diff --git a/mapswipe_workers/mapswipe_workers/generate_stats/user_stats.py b/mapswipe_workers/mapswipe_workers/generate_stats/user_stats.py
index f05731d1b..111c7df76 100644
--- a/mapswipe_workers/mapswipe_workers/generate_stats/user_stats.py
+++ b/mapswipe_workers/mapswipe_workers/generate_stats/user_stats.py
@@ -1,6 +1,37 @@
 import pandas as pd
 
 
+def get_agreeing_contributions_per_user_and_task(row):
+    """
+    Compare user contibution to classifications of other users by calculating
+    the number of agreeing and disagreeing results.
+    """
+
+    # XXX: We need to figure what which values to check? Parent or child
+    r = row["result"]
+    count_str = f"{r}_count"
+    # ignore -999 values
+    if count_str == "-999_count":
+        return 0
+    else:
+        return row[count_str] - 1
+
+
+def get_disagreeing_contributions_per_user_and_task(row):
+    """
+    Compare user contibution to classifications of other users by calculating
+    the number of agreeing and disagreeing results.
+    """
+
+    total_count = row["total_count"]
+    if total_count == 0:
+        return 0
+    else:
+        agreeing_contributions = row["agreeing_contributions"]
+        disagreeing_contributions = total_count - (agreeing_contributions + 1)
+        return disagreeing_contributions
+
+
 def get_agg_results_by_user_id(
     results_df: pd.DataFrame, agg_results_df: pd.DataFrame
 ) -> pd.DataFrame:
@@ -15,26 +46,20 @@ def get_agg_results_by_user_id(
     Returns a pandas dataframe.
     """
     raw_contributions_df = results_df.merge(
-        agg_results_df, left_on="task_id", right_on="task_id"
+        agg_results_df,
+        left_on="task_id",
+        right_on="task_id",
+    )
+
+    raw_contributions_df["agreeing_contributions"] = raw_contributions_df.apply(
+        get_agreeing_contributions_per_user_and_task,
+        axis=1,
+    )
+
+    raw_contributions_df["disagreeing_contributions"] = raw_contributions_df.apply(
+        get_disagreeing_contributions_per_user_and_task,
+        axis=1,
     )
-    # compare to classifications of other users
-    # Calc number of agreeig and disagreeing results from other users.
-    raw_contributions_df.loc[
-        raw_contributions_df["result"] == 0, "agreeing_contributions"
-    ] = (raw_contributions_df["0_count"] - 1)
-    raw_contributions_df.loc[
-        raw_contributions_df["result"] == 1, "agreeing_contributions"
-    ] = (raw_contributions_df["1_count"] - 1)
-    raw_contributions_df.loc[
-        raw_contributions_df["result"] == 2, "agreeing_contributions"
-    ] = (raw_contributions_df["2_count"] - 1)
-    raw_contributions_df.loc[
-        raw_contributions_df["result"] == 3, "agreeing_contributions"
-    ] = (raw_contributions_df["3_count"] - 1)
-
-    raw_contributions_df["disagreeing_contributions"] = raw_contributions_df[
-        "total_count"
-    ] - (raw_contributions_df["agreeing_contributions"] + 1)
 
     agg_results_by_user_id_df = raw_contributions_df.groupby(
         ["project_id", "user_id", "username"]
diff --git a/mapswipe_workers/mapswipe_workers/project_types/base/project.py b/mapswipe_workers/mapswipe_workers/project_types/base/project.py
index 8feb68bd2..90342229f 100644
--- a/mapswipe_workers/mapswipe_workers/project_types/base/project.py
+++ b/mapswipe_workers/mapswipe_workers/project_types/base/project.py
@@ -89,6 +89,9 @@ def __init__(self, project_draft):
             )
 
         self.tutorialId = project_draft.get("tutorialId", None)
+        # XXX: Additional fields (Used in manager dashboard for now)
+        self.informationPages = project_draft.get("informationPages", None)
+        self.customOptions = project_draft.get("customOptions", None)
 
     # TODO: Implement resultRequiredCounter as property.
     # Does not work because for some reason project['group'] = vars()
diff --git a/mapswipe_workers/mapswipe_workers/project_types/base/tutorial.py b/mapswipe_workers/mapswipe_workers/project_types/base/tutorial.py
index 16bca7de9..85357dcd7 100644
--- a/mapswipe_workers/mapswipe_workers/project_types/base/tutorial.py
+++ b/mapswipe_workers/mapswipe_workers/project_types/base/tutorial.py
@@ -24,6 +24,9 @@ def __init__(self, tutorial_draft):
         self.status = "tutorial"
         # need to filter out None values in list due to Firebase
         self.screens = list(filter(None, tutorial_draft["screens"]))
+        # NOTE: Additional fields (Used in manager dashboard for now)
+        self.informationPages = tutorial_draft.get("informationPages", None)
+        self.customOptions = tutorial_draft.get("customOptions", None)
 
     def save_tutorial(self):
         """Save the tutorial in Firebase."""
diff --git a/mapswipe_workers/mapswipe_workers/utils/create_directories.py b/mapswipe_workers/mapswipe_workers/utils/create_directories.py
index 9e8aac659..ea56d59b0 100644
--- a/mapswipe_workers/mapswipe_workers/utils/create_directories.py
+++ b/mapswipe_workers/mapswipe_workers/utils/create_directories.py
@@ -7,6 +7,7 @@ def create_directories() -> None:
     """Create directories"""
     dirs = (
         "/api",
+        "/api/website-data",
         "/api/agg_results",
         "/api/groups",
         "/api/history",
diff --git a/mapswipe_workers/mapswipe_workers/utils/geojson_functions.py b/mapswipe_workers/mapswipe_workers/utils/geojson_functions.py
index 5a4708f05..eb6c401e8 100644
--- a/mapswipe_workers/mapswipe_workers/utils/geojson_functions.py
+++ b/mapswipe_workers/mapswipe_workers/utils/geojson_functions.py
@@ -124,7 +124,7 @@ def cast_datatypes_for_geojson(filename: str):
                         geojson_data["features"][i]["properties"][property] = float(
                             geojson_data["features"][i]["properties"][property]
                         )
-                    except ValueError:
+                    except (ValueError, TypeError):
                         pass
 
         with open(filename, "w") as f:
diff --git a/mapswipe_workers/tests/integration/test_user_stats.py b/mapswipe_workers/tests/integration/test_user_stats.py
index 03028c8ae..a7c0450fd 100644
--- a/mapswipe_workers/tests/integration/test_user_stats.py
+++ b/mapswipe_workers/tests/integration/test_user_stats.py
@@ -1,6 +1,7 @@
 import os
 import tempfile
 import unittest
+import pandas as pd
 
 import set_up
 import tear_down
@@ -56,7 +57,11 @@ def test_get_agg_results_by_user_id(self):
         tasks_df = get_tasks(self.tasks_filename, self.project_id)
         self.assertEqual(len(tasks_df), 67436)
 
-        agg_results_df = get_agg_results_by_task_id(results_df, tasks_df)
+        agg_results_df = get_agg_results_by_task_id(
+            results_df,
+            tasks_df,
+            pd.Series(data="[{\"value\": 0}, {\"value\": 1}, {\"value\": 2}, {\"value\": 3}]"),
+        )
         self.assertEqual(len(agg_results_df), 67436)
 
         agg_results_by_user_id_df = get_agg_results_by_user_id(
diff --git a/mapswipe_workers/tests/unittests/test_project_stats.py b/mapswipe_workers/tests/unittests/test_project_stats.py
new file mode 100644
index 000000000..ac301a7cf
--- /dev/null
+++ b/mapswipe_workers/tests/unittests/test_project_stats.py
@@ -0,0 +1,193 @@
+import unittest
+
+import pandas as pd
+
+from mapswipe_workers.generate_stats.project_stats import (
+    add_missing_result_columns,
+    calc_agreement,
+    calc_count,
+    calc_parent_option_count,
+    calc_share,
+    get_custom_options,
+)
+from tests.integration.base import BaseTestCase
+
+
+class TestProjectStats(BaseTestCase):
+    def test_calc_agreement(self):
+        ds = pd.Series(
+            data=[40, 15, 5, 17, 3],
+            index=["total_count", "1_count", "2_count", "3_count", "4_count"],
+        )
+        agg2 = calc_agreement(ds)
+        self.assertEqual(agg2, 0.32564102564102565)
+
+    def test_calc_count(self):
+        df = pd.DataFrame(
+            data=[[1, 15, 5, 20], [1, 234, 45, 6]],
+            columns=["taskId", "1_count", "2_count", "3_count"],
+        )
+        result = calc_count(df)
+        self.assertEqual(result[0], 40)
+
+    def test_calc_share(self):
+        df = pd.DataFrame(
+            data=[[1, 40, 15, 5, 20], [1, 285, 234, 45, 6]],
+            columns=["taskId", "total_count", "1_count", "2_count", "3_count"],
+        )
+        share = calc_share(df)
+        self.assertEqual(
+            share.filter(like="share").iloc[0].tolist(), [0.375, 0.125, 0.5]
+        )
+
+    def test_get_custom_options(self):
+        for raw_custom_options, excepted_values in [
+            (
+                [
+                    {"value": 0},
+                    {"value": 1},
+                    {"value": 2},
+                    {"value": 3}
+                ],
+                {0: set(), 1: set(), 2: set(), 3: set()},
+            ),
+            (
+                [
+                    {
+                        "value": 0,
+                        "subOptions": [
+                            {"value": 4}, {"value": 5}
+                        ],
+                    },
+                    {"value": 1},
+                    {"value": 2},
+                    {"value": 3}
+                ],
+                {0: {4, 5}, 1: set(), 2: set(), 3: set()},
+            ),
+            (
+                [
+                    {
+                        "value": 0,
+                        "subOptions": [
+                            {"value": 4}, {"value": 5}
+                        ],
+                    },
+                    {"value": 1},
+                    {"value": 2},
+                    {
+                        "value": 3,
+                        "subOptions": [
+                            {"value": 10},
+                            {"value": 12}
+                        ],
+                    },
+                ],
+                {0: {4, 5}, 1: set(), 2: set(), 3: {10, 12}},
+            ),
+        ]:
+            pd_series = pd.Series(data=[str(raw_custom_options)])
+            parsed_custom_options = get_custom_options(pd_series)
+            assert parsed_custom_options == excepted_values
+
+    def test_add_missing_result_columns(self):
+        df = pd.DataFrame(
+            data=[
+                ["project-1-group-1-task-1", 1],
+                ["project-1-group-1-task-1", 5],
+                ["project-1-group-2-task-1", 1],
+                ["project-1-group-2-task-1", 1],
+                ["project-1-group-2-task-1", 1],
+                ["project-2-group-3-task-1", 2],
+                ["project-2-group-1-task-1", 3],
+            ],
+            columns=[
+                "task_id",
+                "result",
+            ],
+        )
+        df = (
+            df.groupby(["task_id", "result"])
+            .size()
+            .unstack(fill_value=0)
+        )
+        updated_df = add_missing_result_columns(
+            df,
+            {
+                1: {4, 5},
+                2: {6},
+                3: set(),
+            },
+        )
+        # Existing columns
+        assert list(df.columns) == [1, 2, 3, 5]
+        # New columns
+        assert list(updated_df.columns) == [1, 2, 3, 4, 5, 6]
+        # Existing data
+        assert df.to_csv() == (
+            'task_id,1,2,3,5\n'
+            'project-1-group-1-task-1,1,0,0,1\n'
+            'project-1-group-2-task-1,3,0,0,0\n'
+            'project-2-group-1-task-1,0,0,1,0\n'
+            'project-2-group-3-task-1,0,1,0,0\n'
+        )
+        # New data
+        assert updated_df.to_csv() == (
+            'task_id,1,2,3,4,5,6\n'
+            'project-1-group-1-task-1,1,0,0,0,1,0\n'
+            'project-1-group-2-task-1,3,0,0,0,0,0\n'
+            'project-2-group-1-task-1,0,0,1,0,0,0\n'
+            'project-2-group-3-task-1,0,1,0,0,0,0\n'
+        )
+
+    def test_calc_parent_option_count(self):
+        df = pd.DataFrame(
+            data=[
+                [1, 40, 1, 0, 20, 0, 1, 0],
+                [2, 41, 0, 5, 20, 0, 0, 0],
+                [3, 42, 10, 10, 20, 0, 0, 1],
+                [4, 281, 0, 1, 0, 1, 1, 4],
+                [5, 282, 15, 10, 0, 1, 2, 4],
+                [1, 283, 2, 20, 0, 1, 0, 0],
+            ],
+            columns=[
+                "taskId",
+                "total_count",
+                "1_count",
+                "2_count",
+                "3_count",
+                "4_count",  # Child of 1
+                "5_count",  # Child of 1
+                "6_count",  # Child of 2
+            ],
+        )
+        updated_df = calc_parent_option_count(
+            df,
+            {
+                1: {4, 5},
+                2: {6},
+                3: set(),
+            },
+        )
+        # Columns without child shouldn't change
+        for column in [
+            "taskId",
+            "total_count",
+            "3_count",
+            "4_count",
+            "5_count",
+            "6_count",
+        ]:
+            assert df[column].compare(updated_df[column]).size == 0
+        # Columns with child should change
+        for column, updated_index, updated_value in [
+            ("1_count", [0, 3, 4, 5], [2, 2, 18, 3]),
+            ("2_count", [2, 3, 4], [11, 5, 14]),
+        ]:
+            compared = df[column].compare(updated_df[column])
+            assert list(compared['other'].index) == updated_index
+            assert list(compared['other']) == updated_value
+
+
+if __name__ == "__main__":
+    unittest.main()
diff --git a/node_modules/.yarn-integrity b/node_modules/.yarn-integrity
new file mode 100644
index 000000000..60ee24b8d
--- /dev/null
+++ b/node_modules/.yarn-integrity
@@ -0,0 +1,10 @@
+{
+  "systemParams": "linux-x64-111",
+  "modulesFolders": [],
+  "flags": [],
+  "linkedModules": [],
+  "topLevelPatterns": [],
+  "lockfileEntries": {},
+  "files": [],
+  "artifacts": {}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 000000000..e69de29bb