diff --git a/app/hooks/help/index.tsx b/app/hooks/help/index.tsx
new file mode 100644
index 0000000000..036aefc9a0
--- /dev/null
+++ b/app/hooks/help/index.tsx
@@ -0,0 +1,78 @@
+import React, {
+  createContext, useCallback, useContext, useState,
+} from 'react';
+
+import { BeaconProps, HelpContextProps, HelpProviderProps } from './types';
+
+const HelpContext = createContext<HelpContextProps>({
+  active: false,
+  onActive: (active) => { console.info(active); },
+  beacons: {},
+  addBeacon: (beacon) => { console.info(beacon); },
+  removeBeacon: (beacon) => { console.info(beacon); },
+});
+
+// Hook for child components to get the toast object ...
+// and re-render when it changes.
+export const useHelp = () => {
+  const ctx = useContext(HelpContext);
+
+  if (!ctx) {
+    throw Error(
+      'The `useHelp` hook must be called from a descendent of the `HelpProvider`.',
+    );
+  }
+
+  return {
+    active: ctx.active,
+    onActive: ctx.onActive,
+    beacons: ctx.beacons,
+    addBeacon: ctx.addBeacon,
+    removeBeacon: ctx.removeBeacon,
+  };
+};
+
+// Provider component that wraps your app and makes toast object ...
+// ... available to any child component that calls useHelp().
+export function HelpProvider({
+  children,
+}: HelpProviderProps) {
+  const [active, setActive] = useState(false);
+  const [beacons, setBeacons] = useState<Record<string, BeaconProps>>({});
+
+  const onActive = useCallback((a: boolean) => {
+    return setActive(a);
+  }, [setActive]);
+
+  const addBeacon = useCallback(({ id, state, update }) => {
+    setBeacons((prevBeacons) => {
+      return {
+        ...prevBeacons,
+        [id]: {
+          id,
+          state,
+          update,
+        },
+      };
+    });
+  }, []);
+
+  const removeBeacon = useCallback((id: string) => {
+    const { [id]: omitted, ...rest } = beacons;
+    setBeacons(rest);
+  }, [beacons]);
+
+  return (
+    <HelpContext.Provider
+      value={{
+        active,
+        onActive,
+        beacons,
+        addBeacon,
+        removeBeacon,
+      }}
+    >
+      {children}
+    </HelpContext.Provider>
+  );
+}
diff --git a/app/hooks/help/types.ts b/app/hooks/help/types.ts
new file mode 100644
index 0000000000..27b7796443
--- /dev/null
+++ b/app/hooks/help/types.ts
@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+
+export interface BeaconProps {
+  id: string;
+  update: () => void;
+  state: any;
+}
+
+export interface HelpContextProps {
+  active: boolean;
+  onActive: (active: boolean) => void;
+  beacons: Record<string, BeaconProps>,
+  addBeacon: (beacon: Record<string, unknown>) => void,
+  removeBeacon: (beaconId: string) => void,
+}
+
+export interface HelpProviderProps {
+  children: ReactNode;
+}
diff --git a/app/layout/help/beacon/component.tsx b/app/layout/help/beacon/component.tsx
new file mode 100644
index 0000000000..8deacb9153
--- /dev/null
+++ b/app/layout/help/beacon/component.tsx
@@ -0,0 +1,146 @@
+import React, {
+  ReactNode, ReactElement, cloneElement, useState,
+  useEffect,
+  useCallback,
+  useRef,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+import cx from 'classnames';
+
+import { useHelp } from 'hooks/help';
+import { usePopper } from 'react-popper';
+import { useResizeDetector } from 'react-resize-detector';
+
+import { AnimatePresence } from 'framer-motion';
+
+import Tooltip from 'components/tooltip';
+import HelpTooltip from 'layout/help/tooltip';
+import HelpSpotlight from 'layout/help/spotlight';
+
+const flipModifier = {
+  name: 'flip',
+  enabled: false,
+};
+
+const hideModifier = {
+  name: 'hide',
+  enabled: true,
+};
+export interface HelpBeaconProps {
+  id: string;
+  title: string;
+  subtitle: string;
+  content: ReactNode;
+  children: ReactElement;
+}
+
+export const HelpBeacon: React.FC<HelpBeaconProps> = ({
+  id,
+  title,
+  subtitle,
+  content,
+  children,
+}: HelpBeaconProps) => {
+  const { active, beacons, addBeacon } = useHelp();
+  const [visible, setVisible] = useState(false);
+  const childrenRef = useRef(null);
+  const [beaconRef, setBeaconRef] = useState(null);
+
+  const CHILDREN = cloneElement(children, {
+    ref: childrenRef,
+  });
+
+  const onResize = useCallback(() => {
+    Object.keys(beacons).forEach((k) => {
+      const b = beacons[k];
+      if (b.update) b.update();
+    });
+  }, [beacons]);
+
+  // 'usePopper'
+  const {
+    styles, attributes, state, update,
+  } = usePopper(childrenRef.current, beaconRef, {
+    placement: 'top-start',
+    modifiers: [
+      flipModifier,
+      hideModifier,
+    ],
+  });
+
+  useResizeDetector({
+    targetRef: childrenRef,
+    onResize,
+  });
+
+  useEffect(() => {
+    addBeacon({
+      id,
+      state,
+      update,
+    });
+  }, [active, addBeacon, id, state, update, childrenRef, beaconRef]);
+
+  return (
+    <>
+      <Tooltip
+        arrow
+        placement="bottom"
+        visible={visible && active}
+        maxWidth={350}
+        onClickOutside={() => {
+          setVisible(false);
+        }}
+        content={(
+          <HelpTooltip
+            title={title}
+            subtitle={subtitle}
+            content={content}
+          />
+        )}
+      >
+        {CHILDREN}
+      </Tooltip>
+
+      {typeof window !== 'undefined' && active && !visible && createPortal(
+        <div
+          ref={((el) => setBeaconRef(el))}
+          className={cx({
+            'z-50': true,
+            'visible pointer-events-auto': active,
+            'invisible pointer-events-none': !active || attributes?.popper?.['data-popper-reference-hidden'] || attributes?.popper?.['data-popper-escaped'],
+          })}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <button
+            type="button"
+            className={cx({
+              'relative beacon flex items-center justify-center w-6 h-6 bg-primary-500 border-2 border-gray-700 transition rounded-full focus:outline-none transform translate-x-1/2 translate-y-1/2': true,
+            })}
+            onClick={() => {
+              setVisible(!visible);
+            }}
+          >
+            <div className="absolute top-0 bottom-0 left-0 right-0 border-2 rounded-full pointer-events-none animate-pulse border-primary-500" />
+          </button>
+        </div>,
+        document?.body,
+      )}
+
+      {typeof window !== 'undefined' && active && createPortal(
+        <AnimatePresence>
+          {visible && (
+            <HelpSpotlight
+              childrenRef={childrenRef}
+            />
+          )}
+        </AnimatePresence>,
+        document?.body,
+      )}
+    </>
+  );
+};
+
+export default HelpBeacon;
diff --git a/app/layout/help/beacon/index.ts b/app/layout/help/beacon/index.ts
new file mode 100644
index 0000000000..b404d7fd44
--- /dev/null
+++ b/app/layout/help/beacon/index.ts
@@ -0,0 +1 @@
+export { default } from './component';
diff --git a/app/layout/help/button/component.tsx b/app/layout/help/button/component.tsx
new file mode 100644
index 0000000000..90f5449e87
--- /dev/null
+++ b/app/layout/help/button/component.tsx
@@ -0,0 +1,101 @@
+import React, { useCallback } from 'react';
+import cx from 'classnames';
+
+import Icon from 'components/icon';
+
+import { motion } from 'framer-motion';
+
+import { useHelp } from 'hooks/help';
+
+import HELP_SVG from 'svgs/ui/help.svg?sprite';
+
+export const HelpButton = () => {
+  const { active, onActive } = useHelp();
+
+  const onToggleActive = useCallback((e) => {
+    e.preventDefault();
+    onActive(!active);
+  }, [active, onActive]);
+
+  return (
+    <div>
+      <div
+        className="fixed bottom-0 right-0 z-50 p-2"
+      >
+        <div className="flex flex-col items-center justify-center space-y-2">
+          <button
+            type="button"
+            className={cx({
+              'relative w-8 focus:outline-none h-14 rounded-4xl p-1': true,
+            })}
+            style={{
+              boxShadow: '2px 1px 3px 0px rgba(0,0,0,0.5) inset',
+            }}
+            onClick={onToggleActive}
+          >
+            <div
+              className={cx({
+                'absolute z-10 transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 rounded-4xl transition-colors w-full h-full': true,
+                'bg-gray-500': !active,
+                'bg-primary-500': active,
+              })}
+            />
+            <motion.div
+              className="absolute z-0 transform -translate-x-1/2 -translate-y-1/2 bg-black border border-white border-opacity-25 top-1/2 left-1/2 rounded-4xl"
+              style={{
+                width: 'calc(100% + 7px)',
+                height: 'calc(100% + 7px)',
+              }}
+              animate={active ? 'enter' : 'exit'}
+              transition={{
+                duration: 0.2,
+              }}
+              initial={{
+                opacity: '0%',
+              }}
+              variants={{
+                enter: {
+                  opacity: '100%',
+                },
+                exit: {
+                  opacity: '0%',
+                },
+              }}
+            />
+            <div className="relative z-20 w-full h-full">
+              <motion.span
+                className="absolute flex items-center justify-center w-6 h-6 transform bg-white rounded-full shadow left-1/2"
+                animate={active ? 'enter' : 'exit'}
+                transition={{
+                  duration: 0.2,
+                }}
+                initial={{
+                  bottom: '0%',
+                  y: '0%',
+                  x: '-50%',
+                }}
+                variants={{
+                  enter: {
+                    bottom: '100%',
+                    y: '100%',
+                    x: '-50%',
+                  },
+                  exit: {
+                    bottom: '0%',
+                    y: '0%',
+                    x: '-50%',
+                  },
+                }}
+              >
+                <Icon icon={HELP_SVG} className="w-4 h-4" />
+              </motion.span>
+            </div>
+          </button>
+          <span className="block w-10 leading-tight text-center text-white text-xxs">Activate guide</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HelpButton;
diff --git a/app/layout/help/button/index.ts b/app/layout/help/button/index.ts
new file mode 100644
index 0000000000..b404d7fd44
--- /dev/null
+++ b/app/layout/help/button/index.ts
@@ -0,0 +1 @@
+export { default } from './component';
diff --git a/app/layout/help/spotlight/component.tsx b/app/layout/help/spotlight/component.tsx
new file mode 100644
index 0000000000..bd1f241d3b
--- /dev/null
+++ b/app/layout/help/spotlight/component.tsx
@@ -0,0 +1,111 @@
+import React, {
+  MutableRefObject, useEffect, useRef, useState,
+  useCallback,
+} from 'react';
+
+import { motion } from 'framer-motion';
+
+interface HelpSpotlightProps {
+  childrenRef: MutableRefObject<HTMLDivElement | null>;
+}
+
+export const HelpSpotlight = ({
+  childrenRef,
+}: HelpSpotlightProps) => {
+  const [canvasSize, setCanvasSize] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  const canvasRef = useRef(null);
+
+  const getCanvasSize = () => {
+    const { width, height } = document.body.getBoundingClientRect();
+
+    setCanvasSize({
+      width, height,
+    });
+  };
+
+  const drawBackground = useCallback((CTX, reference) => {
+    const { width: canvaswidth, height: canvasheight } = canvasSize;
+
+    if (reference.current) {
+      const {
+        top, left, width, height,
+      } = reference.current.getBoundingClientRect();
+
+      const gradient = CTX.createRadialGradient(
+        left + width / 2,
+        top + height / 2,
+        width,
+        left + width / 2,
+        top + height / 2,
+        height,
+      );
+
+      // Add three color stops
+      gradient.addColorStop(0, 'rgba(0,0,0,0.75)');
+      gradient.addColorStop(1, 'rgba(0,0,0,0)');
+      CTX.clearRect(0, 0, canvaswidth, canvasheight);
+
+      CTX.beginPath();
+      CTX.rect(0, 0, canvaswidth, canvasheight);
+      // CTX.fillStyle = 'rgba(0,0,0,0.75)';
+      CTX.fillStyle = gradient;
+      CTX.fill();
+    }
+  }, [canvasSize]);
+
+  const drawHighlight = useCallback((CTX, reference) => {
+    if (reference.current) {
+      const {
+        top, left, width, height,
+      } = reference.current.getBoundingClientRect();
+
+      CTX.globalCompositeOperation = 'destination-out';
+      CTX.beginPath();
+      CTX.rect(left, top, width, height);
+      CTX.fillStyle = 'white';
+      CTX.fill();
+    }
+  }, []);
+
+  const updateCanvas = useCallback(() => {
+    const CTX = canvasRef.current.getContext('2d');
+    CTX.save();
+
+    drawBackground(CTX, childrenRef);
+    drawHighlight(CTX, childrenRef);
+
+    CTX.restore();
+  }, [childrenRef, drawBackground, drawHighlight]);
+
+  useEffect(() => {
+    getCanvasSize();
+
+    window.addEventListener('resize', getCanvasSize);
+
+    return () => {
+      window.removeEventListener('resize', getCanvasSize);
+    };
+  }, []);
+
+  useEffect(() => {
+    updateCanvas();
+  }, [updateCanvas]);
+
+  return (
+    <motion.canvas
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      ref={canvasRef}
+      width={canvasSize.width}
+      height={canvasSize.height}
+      className="absolute top-0 left-0 z-10"
+    />
+  );
+};
+
+export default HelpSpotlight;
diff --git a/app/layout/help/spotlight/index.ts b/app/layout/help/spotlight/index.ts
new file mode 100644
index 0000000000..b404d7fd44
--- /dev/null
+++ b/app/layout/help/spotlight/index.ts
@@ -0,0 +1 @@
+export { default } from './component';
diff --git a/app/layout/help/tooltip/component.tsx b/app/layout/help/tooltip/component.tsx
new file mode 100644
index 0000000000..5827f4c314
--- /dev/null
+++ b/app/layout/help/tooltip/component.tsx
@@ -0,0 +1,43 @@
+import React, { ReactNode } from 'react';
+
+import Icon from 'components/icon';
+
+import HELP_2_SVG from 'svgs/ui/help-2.svg?sprite';
+
+interface HelpTooltipProps {
+  title: string;
+  subtitle: string;
+  content: ReactNode,
+}
+
+export const HelpTooltip = ({
+  title,
+  subtitle,
+  content,
+}: HelpTooltipProps) => {
+  return (
+    <div
+      className="px-6 py-5 text-gray-500 bg-white rounded-3xl"
+      style={{
+        boxShadow: '0 4px 20px rgba(0,0,0,0.25)',
+      }}
+    >
+      <header className="flex items-center space-x-4">
+        <div className="p-2.5 shadow-lg rounded-lg">
+          <Icon icon={HELP_2_SVG} className="w-9 h-9" />
+        </div>
+
+        <div>
+          <h3 className="text-xs tracking-wider uppercase font-heading">{title}</h3>
+          <h4 className="text-sm">{subtitle}</h4>
+        </div>
+      </header>
+
+      <div className="mt-5 text-sm text-gray-400" style={{ maxWidth: 330 }}>
+        {content}
+      </div>
+    </div>
+  );
+};
+
+export default HelpTooltip;
diff --git a/app/layout/help/tooltip/index.ts b/app/layout/help/tooltip/index.ts
new file mode 100644
index 0000000000..b404d7fd44
--- /dev/null
+++ b/app/layout/help/tooltip/index.ts
@@ -0,0 +1 @@
+export { default } from './component';
diff --git a/app/layout/projects/all/list/component.tsx b/app/layout/projects/all/list/component.tsx
index c88451c336..8a2589f03d 100644
--- a/app/layout/projects/all/list/component.tsx
+++ b/app/layout/projects/all/list/component.tsx
@@ -4,6 +4,7 @@ import cx from 'classnames';
 import { useSelector } from 'react-redux';
 
 import Wrapper from 'layout/wrapper';
+import HelpBeacon from 'layout/help/beacon';
 
 import Loading from 'components/loading';
 import ConfirmationPrompt from 'components/confirmation-prompt';
@@ -70,34 +71,49 @@ export const ProjectsList: React.FC<ProjectsListProps> = () => {
         />
 
         {isFetched && !!data.length && (
-          <div
-            className={cx({
-              'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4': true,
-            })}
+          <HelpBeacon
+            id="project-list"
+            title="Project list"
+            subtitle="project list"
+            content={(
+              <div>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                Beatae ratione cumque in nobis fugiat,
+                neque ullam aliquam, commodi dolorem unde inventore eaque,
+                dolorum eveniet! Corrupti voluptatum molestias quaerat voluptatem ipsa.
+              </div>
+            )}
           >
-            {data.map((d) => {
-              return (
-                <Item
-                  key={`${d.id}`}
-                  {...d}
-                  onDelete={() => {
-                    setDelete(d);
-                  }}
-                />
-              );
-            })}
-
-            <ConfirmationPrompt
-              title={`Are you sure you want to delete "${deleteProject?.name}"?`}
-              description="The action cannot be reverted. All the scenarios created will be removed too."
-              icon={DELETE_WARNING_SVG}
-              open={!!deleteProject}
-              onAccept={onDelete}
-              onRefuse={() => setDelete(null)}
-              onDismiss={() => setDelete(null)}
-            />
-
-          </div>
+            <div
+              id="projects-list"
+              className={cx({
+                'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4': true,
+              })}
+            >
+              {data.map((d) => {
+                return (
+                  <Item
+                    key={`${d.id}`}
+                    {...d}
+                    onDelete={() => {
+                      setDelete(d);
+                    }}
+                  />
+                );
+              })}
+
+              <ConfirmationPrompt
+                title={`Are you sure you want to delete "${deleteProject?.name}"?`}
+                description="The action cannot be reverted. All the scenarios created will be removed too."
+                icon={DELETE_WARNING_SVG}
+                open={!!deleteProject}
+                onAccept={onDelete}
+                onRefuse={() => setDelete(null)}
+                onDismiss={() => setDelete(null)}
+              />
+
+            </div>
+          </HelpBeacon>
         )}
 
         {isFetched && !data.length && (
diff --git a/app/layout/projects/all/toolbar/component.tsx b/app/layout/projects/all/toolbar/component.tsx
index d2772bf60d..41a4f6d8e0 100644
--- a/app/layout/projects/all/toolbar/component.tsx
+++ b/app/layout/projects/all/toolbar/component.tsx
@@ -9,8 +9,10 @@ import Link from 'next/link';
 import Search from 'components/search';
 import Button from 'components/button';
 import Icon from 'components/icon';
+import HelpBeacon from 'layout/help/beacon';
 
 import PLUS_SVG from 'svgs/ui/plus.svg?sprite';
+import UPLOAD_SVG from 'svgs/ui/upload.svg?sprite';
 
 export interface ProjectsToolbarProps {
 
@@ -22,28 +24,80 @@ export const ProjectsToolbar: React.FC<ProjectsToolbarProps> = () => {
 
   return (
     <Wrapper>
-      <div className="flex items-baseline justify-between space-x-20 mb-8">
-        <div className="flex-grow">
-          <Search
-            defaultValue={search}
-            size="base"
-            placeholder="Search by project name, planning area name..."
-            aria-label="Search"
-            onChange={(value) => { dispatch(setSearch(value)); }}
-          />
-        </div>
+      <div className="flex items-baseline justify-between mb-8 space-x-20">
+        <HelpBeacon
+          id="project-search"
+          title="Quick search"
+          subtitle="Project list"
+          content={(
+            <div>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Beatae ratione cumque in nobis fugiat,
+              neque ullam aliquam, commodi dolorem unde inventore eaque,
+              dolorum eveniet! Corrupti voluptatum molestias quaerat voluptatem ipsa.
+            </div>
+          )}
+        >
+          <div className="flex-grow">
+            <Search
+              id="project-search"
+              defaultValue={search}
+              size="base"
+              placeholder="Search by project name, planning area name..."
+              aria-label="Search"
+              onChange={(value) => { dispatch(setSearch(value)); }}
+            />
+          </div>
+        </HelpBeacon>
+
+        <div className="flex space-x-4">
+          <HelpBeacon
+            id="project-new"
+            title="Create new project"
+            subtitle="Project list"
+            content={(
+              <div>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                Beatae ratione cumque in nobis fugiat,
+                neque ullam aliquam, commodi dolorem unde inventore eaque,
+                dolorum eveniet! Corrupti voluptatum molestias quaerat voluptatem ipsa.
+              </div>
+            )}
+          >
+            <div>
+              <Link href="/projects/new">
+                <a
+                  href="/projects/new"
+                >
+                  <Button theme="primary" size="base">
+                    <span>Create new project</span>
+                    <Icon className="w-3 h-3 ml-4" icon={PLUS_SVG} />
+                  </Button>
+                </a>
+              </Link>
+            </div>
+          </HelpBeacon>
 
-        <div className="flex space-x-1">
-          <Link href="/projects/new" passHref>
-            <a
-              href="/projects/new"
-            >
-              <Button theme="primary" size="base">
-                <span>Create new project</span>
-                <Icon className="w-3 h-3 ml-4" icon={PLUS_SVG} />
+          <HelpBeacon
+            id="project-upload"
+            title="Upload project"
+            subtitle="Project list"
+            content={(
+              <div>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                Beatae ratione cumque in nobis fugiat,
+                neque ullam aliquam, commodi dolorem unde inventore eaque,
+                dolorum eveniet! Corrupti voluptatum molestias quaerat voluptatem ipsa.
+              </div>
+            )}
+          >
+            <div>
+              <Button theme="secondary" size="base">
+                <span>Upload project</span>
+                <Icon className="w-3 h-3 ml-4" icon={UPLOAD_SVG} />
               </Button>
-            </a>
-          </Link>
+            </div>
+          </HelpBeacon>
         </div>
       </div>
     </Wrapper>
diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx
index 5d83ba10a6..2e75f134a5 100644
--- a/app/layout/projects/new/form/component.tsx
+++ b/app/layout/projects/new/form/component.tsx
@@ -100,7 +100,7 @@ const ProjectForm: React.FC<ProjectFormProps> = () => {
           className="flex flex-col justify-between flex-grow w-full overflow-hidden"
         >
           <div className="grid h-full grid-cols-1 gap-0 overflow-hidden bg-gray-700 md:grid-cols-2 rounded-3xl">
-            <div className="flex flex-col flex-grow overflow-hidden">
+            <div id="project-new-form" className="flex flex-col flex-grow overflow-hidden">
               <div className="relative flex flex-col flex-grow min-h-0">
                 <div className="absolute top-0 left-0 z-10 w-full h-6 pointer-events-none bg-gradient-to-b from-gray-700 via-gray-700" />
 
diff --git a/app/layout/projects/new/map/component.tsx b/app/layout/projects/new/map/component.tsx
index 4dcb0e77d5..ca88d5f902 100644
--- a/app/layout/projects/new/map/component.tsx
+++ b/app/layout/projects/new/map/component.tsx
@@ -97,7 +97,10 @@ export const ProjectNewMap: React.FC<ProjectMapProps> = ({
   };
 
   return (
-    <div className="relative w-full h-full overflow-hidden rounded-r-3xl">
+    <div
+      id="project-new-map"
+      className="relative w-full h-full overflow-hidden rounded-r-3xl"
+    >
       <Map
         bounds={bounds}
         width="100%"
diff --git a/app/layout/projects/show/header/toolbar/component.tsx b/app/layout/projects/show/header/toolbar/component.tsx
index f9d57fa57c..e0182e4196 100644
--- a/app/layout/projects/show/header/toolbar/component.tsx
+++ b/app/layout/projects/show/header/toolbar/component.tsx
@@ -30,6 +30,7 @@ export const Toolbar: React.FC<ToolbarProps> = () => {
         >
           <div className="flex space-x-4">
             <Button
+              id="scenarios-upload"
               theme="secondary"
               size="base"
             >
@@ -38,6 +39,7 @@ export const Toolbar: React.FC<ToolbarProps> = () => {
             </Button>
 
             <Button
+              id="scenarios-download"
               theme="secondary"
               size="base"
             >
diff --git a/app/layout/projects/show/scenarios/component.tsx b/app/layout/projects/show/scenarios/component.tsx
index 862f60387a..f29a0ca399 100644
--- a/app/layout/projects/show/scenarios/component.tsx
+++ b/app/layout/projects/show/scenarios/component.tsx
@@ -25,6 +25,7 @@ import ScenarioSettings from 'layout/projects/show/scenarios/settings';
 import bgScenariosDashboard from 'images/bg-scenarios-dashboard.png';
 import PLUS_SVG from 'svgs/ui/plus.svg?sprite';
 import DELETE_WARNING_SVG from 'svgs/notifications/delete-warning.svg?sprite';
+import HelpBeacon from 'layout/help/beacon';
 
 export interface ProjectScenariosProps {
 }
@@ -165,23 +166,40 @@ export const ProjectScenarios: React.FC<ProjectScenariosProps> = () => {
               onDismiss={() => setDelete(null)}
             />
 
-            <div className="relative overflow-hidden">
-              <div className="absolute top-0 left-0 z-10 w-full h-6 bg-gradient-to-b from-black via-black" />
+            <div className="relative overflow-hidden" id="scenarios-list">
+              <div className="absolute top-0 left-0 z-10 w-full h-6 pointer-events-none bg-gradient-to-b from-black via-black" />
               <div ref={scrollRef} className="relative z-0 flex flex-col flex-grow h-full py-6 overflow-x-hidden overflow-y-auto">
                 {!!allScenariosData.length && allScenariosData.map((s, i) => {
                   return (
-                    <ScenarioItem
+                    <HelpBeacon
                       key={`${s.id}`}
-                      className={cx({
-                        'mt-3': i !== 0,
-                      })}
-                      {...s}
-                      status="draft"
-                      onDelete={() => {
-                        setDelete(s);
-                      }}
-                      SettingsC={<ScenarioSettings sid={s.id} />}
-                    />
+                      id={`${s.id}`}
+                      title="Scenarios list"
+                      subtitle="project detail"
+                      content={(
+                        <div>
+                          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                          Beatae ratione cumque in nobis fugiat,
+                          neque ullam aliquam, commodi dolorem unde inventore eaque,
+                          dolorum eveniet! Corrupti voluptatum molestias quaerat voluptatem ipsa.
+                        </div>
+                      )}
+                    >
+                      <div
+                        className={cx({
+                          'mt-3': i !== 0,
+                        })}
+                      >
+                        <ScenarioItem
+                          {...s}
+                          status="draft"
+                          onDelete={() => {
+                            setDelete(s);
+                          }}
+                          SettingsC={<ScenarioSettings sid={s.id} />}
+                        />
+                      </div>
+                    </HelpBeacon>
                   );
                 })}
 
@@ -191,7 +209,7 @@ export const ProjectScenarios: React.FC<ProjectScenariosProps> = () => {
                   </div>
                 )}
               </div>
-              <div className="absolute bottom-0 left-0 z-10 w-full h-6 bg-gradient-to-t from-black via-black" />
+              <div className="absolute bottom-0 left-0 z-10 w-full h-6 pointer-events-none bg-gradient-to-t from-black via-black" />
               <div
                 className={cx({
                   'opacity-100': allScenariosIsFetchingNextPage,
diff --git a/app/layout/projects/show/scenarios/toolbar/component.tsx b/app/layout/projects/show/scenarios/toolbar/component.tsx
index 39c181898d..8bbf683576 100644
--- a/app/layout/projects/show/scenarios/toolbar/component.tsx
+++ b/app/layout/projects/show/scenarios/toolbar/component.tsx
@@ -61,7 +61,7 @@ export const ProjectScenariosToolbar: React.FC<ProjectScenariosToolbarProps> = (
   }, [dispatch]);
 
   return (
-    <div className="flex items-center">
+    <div className="flex items-center" id="scenarios-search">
       <Search
         size="base"
         defaultValue={search}
diff --git a/app/package.json b/app/package.json
index d3e4ed6c41..c8ca281bb8 100644
--- a/app/package.json
+++ b/app/package.json
@@ -72,12 +72,14 @@
     "react-dropzone": "^11.3.1",
     "react-final-form": "^6.5.2",
     "react-intersection-observer": "^8.31.1",
+    "react-joyride": "^2.3.0",
     "react-map-gl": "^6.1.13",
     "react-map-gl-draw": "0.21.1",
     "react-modal": "^3.12.1",
     "react-popper": "^2.2.4",
     "react-query": "^3.6.0",
     "react-redux": "^7.2.2",
+    "react-resize-detector": "^6.7.3",
     "storybook-addon-next-router": "^2.0.4",
     "tailwindcss": "^2.0.2",
     "use-debounce": "^6.0.1",
diff --git a/app/pages/_app.tsx b/app/pages/_app.tsx
index 6110519ba6..a44df1aa54 100644
--- a/app/pages/_app.tsx
+++ b/app/pages/_app.tsx
@@ -6,6 +6,7 @@ import { Hydrate } from 'react-query/hydration';
 import { OverlayProvider } from '@react-aria/overlays';
 import { Provider as AuthenticationProvider } from 'next-auth/client';
 import { ToastProvider } from 'hooks/toast';
+import { HelpProvider } from 'hooks/help';
 
 import type { AppProps } from 'next/app';
 
@@ -36,9 +37,11 @@ const MarxanApp: React.ReactNode = ({ Component, pageProps }: AppProps) => {
                 defaultAutoDismiss
                 defaultAutoDismissTime={5000}
               >
-                <div className="bg-black">
-                  <Component {...pageProps} />
-                </div>
+                <HelpProvider>
+                  <div className="bg-black">
+                    <Component {...pageProps} />
+                  </div>
+                </HelpProvider>
               </ToastProvider>
             </OverlayProvider>
           </AuthenticationProvider>
diff --git a/app/pages/projects/[pid]/index.tsx b/app/pages/projects/[pid]/index.tsx
index 12e3947c80..45245e92f6 100644
--- a/app/pages/projects/[pid]/index.tsx
+++ b/app/pages/projects/[pid]/index.tsx
@@ -5,6 +5,7 @@ import Title from 'layout/title/project-title';
 import Header from 'layout/header';
 import Wrapper from 'layout/wrapper';
 import Protected from 'layout/protected';
+import Help from 'layout/help/button';
 
 import ProjectHeader from 'layout/projects/show/header';
 import ProjectScenarios from 'layout/projects/show/scenarios';
@@ -25,6 +26,8 @@ const ShowProjectsPage: React.FC = () => {
       <main className="flex flex-col w-screen h-screen">
         <Header size="base" />
 
+        <Help />
+
         <div className="pt-2.5">
           <ProjectHeader />
         </div>
diff --git a/app/pages/projects/index.tsx b/app/pages/projects/index.tsx
index de5b835b43..3b78b6eb54 100644
--- a/app/pages/projects/index.tsx
+++ b/app/pages/projects/index.tsx
@@ -10,6 +10,7 @@ import Title from 'layout/title/project-title';
 import ProjectsWelcome from 'layout/projects/all/welcome';
 import ProjectsToolbar from 'layout/projects/all/toolbar';
 import ProjectsList from 'layout/projects/all/list';
+import Help from 'layout/help/button';
 
 export const getServerSideProps = withProtection(withUser());
 
@@ -28,6 +29,8 @@ const ProjectsPage: React.FC = () => {
         <ProjectsWelcome />
         <ProjectsToolbar />
         <ProjectsList />
+
+        <Help />
       </main>
     </Protected>
   );
diff --git a/app/pages/projects/new.tsx b/app/pages/projects/new.tsx
index 3cd6586f4d..dbd05def7a 100644
--- a/app/pages/projects/new.tsx
+++ b/app/pages/projects/new.tsx
@@ -6,6 +6,7 @@ import Header from 'layout/header';
 import Protected from 'layout/protected';
 
 import Wrapper from 'layout/wrapper';
+import Help from 'layout/help/button';
 
 import ProjectNewForm from 'layout/projects/new/form';
 import Breadcrumb from 'components/breadcrumb';
@@ -28,6 +29,8 @@ const NewProjectsPage: React.FC = () => {
       <main className="flex flex-col w-screen h-screen">
         <Header size="base" />
 
+        <Help />
+
         <div className="flex flex-col py-2.5 overflow-hidden flex-grow">
           <Wrapper>
             <Breadcrumb
diff --git a/app/svgs/ui/help-2.svg b/app/svgs/ui/help-2.svg
new file mode 100644
index 0000000000..6dac2ec239
--- /dev/null
+++ b/app/svgs/ui/help-2.svg
@@ -0,0 +1,88 @@
+<svg width="42" height="40" viewBox="0 0 42 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 18.22C3 12.1787 7.94332 7.28125 14.0412 7.28125H26.7386C32.8365 7.28125 37.7798 12.1787 37.7798 18.22V27.5179C37.7798 33.5592 32.8365 38.4566 26.7386 38.4566H14.0412C7.94332 38.4566 3 33.5592 3 27.5179V18.22Z" fill="url(#paint0_linear)"/>
+<path d="M3 14.939C3 8.89768 7.94332 4.00024 14.0412 4.00024H26.7386C32.8365 4.00024 37.7798 8.89768 37.7798 14.939V19.3145C37.7798 25.3558 32.8365 30.2532 26.7386 30.2532H14.0412C7.94332 30.2532 3 25.3558 3 19.3145V14.939Z" fill="url(#paint1_linear)"/>
+<g filter="url(#filter0_d)">
+<path d="M10.7305 7.55509C10.7305 5.59167 12.337 4 14.3189 4H26.7402C32.8381 4 37.7814 8.89744 37.7814 14.9387V23.1428C37.7814 26.7676 34.8155 29.706 31.1567 29.706H14.3189C12.337 29.706 10.7305 28.1144 10.7305 26.1509V7.55509Z" fill="url(#paint2_linear)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5908 29.7058H11.8268C8.73555 29.7058 7.32921 33.5294 9.69577 35.4997L10.0086 35.7602C11.252 36.7954 12.8241 37.3629 14.4482 37.3629H26.7485H26.7512H27.0246C32.3602 37.3629 36.6856 33.0776 36.6856 27.7915V24.533C34.7376 27.6383 31.263 29.7058 27.3011 29.7058H14.6037C14.5994 29.7058 14.5951 29.7058 14.5908 29.7058Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.3019 28.6118C30.8665 28.6118 33.9937 26.7532 35.7487 23.9555L37.7906 20.7004V27.7914C37.7906 33.6817 32.9709 38.4567 27.0254 38.4567H14.4491C12.5651 38.4567 10.7415 37.7984 9.29912 36.5975L10.0095 35.7601C11.2529 36.7953 12.8249 37.3628 14.4491 37.3628H27.0254C32.3611 37.3628 36.6865 33.0776 36.6865 27.7914V24.5329C36.3598 25.0538 35.9901 25.5454 35.5824 26.003C33.5592 28.2736 30.5994 29.7057 27.3019 29.7057L11.8276 29.7057C8.7364 29.7057 7.33007 33.5293 9.69663 35.4996L10.0095 35.7601L9.29912 36.5975L8.98629 36.3371C5.83087 33.71 7.70599 28.6118 11.8276 28.6118L27.3019 28.6118Z" fill="url(#paint3_linear)"/>
+<g filter="url(#filter1_i)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.94531 35.699L10.0188 35.7602C11.2622 36.7954 12.8343 37.3629 14.4584 37.3629H26.7587H26.7614H27.0348C32.3704 37.3629 36.6958 33.0777 36.6958 27.7916V26.134C36.6923 31.4172 32.3683 35.699 27.0348 35.699H26.7614H26.7587H9.94531Z" fill="white"/>
+</g>
+<g filter="url(#filter2_d)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.0136 33.5345H8.60656C8.56315 33.3647 8.53435 33.1928 8.51953 33.0206V32.7386C8.65386 31.1611 9.91964 29.7059 11.8266 29.7059H14.5906L14.6035 29.7059H27.3009C31.2422 29.7059 34.7011 27.6601 36.6548 24.5818C36.3329 29.5796 32.1394 33.5345 27.0136 33.5345Z" fill="white"/>
+</g>
+<g filter="url(#filter3_d)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.4825 26.1147C33.4625 28.3207 30.5459 29.706 27.3027 29.706H14.6053L14.5924 29.706H11.8284C10.6427 29.706 9.7049 30.2686 9.13281 31.0734H27.0154C30.6629 31.0734 33.8383 29.0707 35.4825 26.1147Z" fill="#FBFBFB"/>
+</g>
+<g filter="url(#filter4_i)">
+<path d="M17.8168 10.7109C19.8814 9.36123 22.2901 9.19253 24.0105 10.5422C25.0428 11.3857 25.2149 12.398 24.8708 13.4102C24.5267 14.2538 24.6987 14.9286 25.731 15.7721L25.9031 15.9408L24.1826 17.1218L24.0105 16.7844C22.2901 15.6034 22.118 14.7599 22.4621 13.7476C22.8062 13.0728 22.8062 12.398 22.118 11.8918C21.2578 11.217 20.0534 11.3857 19.1932 11.8918C18.505 12.398 18.333 13.0728 19.1932 13.9163L17.3007 15.0973C15.4082 13.5789 15.9243 11.8918 17.8168 10.7109Z" fill="#3E3E3E"/>
+<path d="M17.8168 10.7109C19.8814 9.36123 22.2901 9.19253 24.0105 10.5422C25.0428 11.3857 25.2149 12.398 24.8708 13.4102C24.5267 14.2538 24.6987 14.9286 25.731 15.7721L25.9031 15.9408L24.1826 17.1218L24.0105 16.7844C22.2901 15.6034 22.118 14.7599 22.4621 13.7476C22.8062 13.0728 22.8062 12.398 22.118 11.8918C21.2578 11.217 20.0534 11.3857 19.1932 11.8918C18.505 12.398 18.333 13.0728 19.1932 13.9163L17.3007 15.0973C15.4082 13.5789 15.9243 11.8918 17.8168 10.7109Z" fill="#B7DBFF"/>
+<path d="M26.0747 17.1215C26.7629 16.7841 27.7952 16.7841 28.3114 17.1215C28.9996 17.6276 28.9996 18.3024 28.3114 18.6398C27.6232 18.9773 26.5909 18.9773 26.0747 18.6398C25.3865 18.1337 25.3865 17.4589 26.0747 17.1215Z" fill="#B7DBFF"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0.730469" y="0" width="41.051" height="39.706" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="-3" dy="3"/>
+<feGaussianBlur stdDeviation="3.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0559896 0 0 0 0 0.249417 0 0 0 0 0.5375 0 0 0 1 0"/>
+<feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter1_i" x="9.94531" y="26.134" width="26.7505" height="12.2289" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
+</filter>
+<filter id="filter2_d" x="7.51953" y="24.5818" width="30.1352" height="10.9527" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter3_d" x="8.13281" y="26.1147" width="28.3497" height="6.95861" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter4_i" x="16.1133" y="9.61035" width="12.7142" height="10.2825" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.377083 0 0 0 0 0.754167 0 0 0 0.3 0"/>
+<feBlend mode="multiply" in2="shape" result="effect1_innerShadow"/>
+</filter>
+<linearGradient id="paint0_linear" x1="20.3899" y1="7.28125" x2="20.3899" y2="38.4566" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2451B9"/>
+<stop offset="1" stop-color="#2F78F5"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="3" y1="18.7813" x2="8.79664" y2="18.7813" gradientUnits="userSpaceOnUse">
+<stop offset="0.328125" stop-color="#2454BC"/>
+<stop offset="1" stop-color="#578BFC"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="10.0404" y1="4.87884" x2="31.5108" y2="32.1214" gradientUnits="userSpaceOnUse">
+<stop stop-color="#317CFD"/>
+<stop offset="0.878027" stop-color="#2149AC"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="6.03626" y1="24.5098" x2="40.264" y2="24.5098" gradientUnits="userSpaceOnUse">
+<stop stop-color="#97BEFF"/>
+<stop offset="1" stop-color="#0D5DE3"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/app/svgs/ui/help.svg b/app/svgs/ui/help.svg
index 9cc2aa2815..9f7b363b52 100644
--- a/app/svgs/ui/help.svg
+++ b/app/svgs/ui/help.svg
@@ -1,5 +1,3 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>help</title>
-<path d="M16 0.667c8.468 0 15.333 6.865 15.333 15.333s-6.865 15.333-15.333 15.333c-8.468 0-15.333-6.865-15.333-15.333s6.865-15.333 15.333-15.333zM16 2c-7.732 0-14 6.268-14 14s6.268 14 14 14c7.732 0 14-6.268 14-14s-6.268-14-14-14zM15.88 23.131c0.373 0 0.672 0.117 0.896 0.35s0.336 0.537 0.336 0.91c0 0.373-0.112 0.677-0.336 0.91s-0.523 0.35-0.896 0.35c-0.373 0-0.677-0.117-0.91-0.35s-0.35-0.537-0.35-0.91c0-0.373 0.117-0.677 0.35-0.91s0.537-0.35 0.91-0.35zM16.244 6.667c1.717 0 3.108 0.429 4.172 1.288s1.596 2.016 1.596 3.472c0 3.005-1.801 4.881-5.404 5.628v0 3.304h-1.428v-4.060l0.411-0.098c1.744-0.434 2.993-0.985 3.747-1.652 0.812-0.719 1.218-1.713 1.218-2.982 0-1.12-0.392-2.002-1.176-2.646s-1.857-0.966-3.22-0.966c-1.456 0-2.599 0.359-3.43 1.078s-1.33 1.741-1.498 3.066v0l-1.232-0.672 0.072-0.339c0.313-1.332 0.957-2.386 1.931-3.161 1.055-0.84 2.469-1.26 4.242-1.26z"></path>
+<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.84722 0.822039C6.11558 0.274013 5.19655 0 4.09012 0C3.24875 0 2.5383 0.192676 1.96134 0.578694C1.04551 1.18272 0.559044 2.20877 0.5 3.6555H2.62237C2.62237 3.23348 2.7411 2.8288 2.97728 2.43678C3.21409 2.0461 3.61585 1.85075 4.18254 1.85075C4.75886 1.85075 5.15612 2.00943 5.3724 2.32611C5.58997 2.64412 5.69843 2.99547 5.69843 3.38083C5.69843 3.71684 5.5367 4.02419 5.34095 4.30287C5.2243 4.47587 5.08097 4.6277 4.91674 4.75222C4.91674 4.75222 3.76602 5.51893 3.26094 6.13495C2.96829 6.49164 2.94198 7.027 2.91566 7.7937C2.91438 7.84837 2.93428 7.96171 3.11783 7.96171H4.76784C4.93214 7.96171 4.96615 7.8357 4.96808 7.77903C4.97963 7.50035 5.00915 7.35701 5.05857 7.19567C5.15099 6.89099 5.40385 6.62564 5.68687 6.3963L6.2709 5.97828C6.79844 5.55093 7.21881 5.20091 7.40492 4.92623C7.72196 4.47554 7.9453 3.91952 7.9453 3.25949C7.94466 2.18277 7.57885 1.3714 6.84722 0.822039ZM4.05611 9.2831C3.32512 9.25977 2.72185 9.78579 2.69874 10.6098C2.67628 11.4325 3.24939 11.9772 3.98102 11.9992C4.7441 12.0226 5.33133 11.5145 5.35507 10.6905C5.37689 9.86646 4.81983 9.30644 4.05611 9.2831Z" fill="#37393D"/>
 </svg>
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
index 3ce96fdb67..774c36045b 100644
--- a/app/tailwind.config.js
+++ b/app/tailwind.config.js
@@ -525,8 +525,15 @@ module.exports = {
         },
       },
       pulse: {
-        '50%': {
-          opacity: '.5',
+        '0%': {
+          transform: 'scale(0.75)',
+          boxShadow: '0 0 0 0 rgba(0, 191, 255, 0)',
+          opacity: 1,
+        },
+        '100%': {
+          transform: 'scale(1.25)',
+          boxShadow: '0 0 0 10px rgba(0, 191, 255, 0.9)',
+          opacity: 0,
         },
       },
       bounce: {
diff --git a/app/yarn.lock b/app/yarn.lock
index 23070a118b..97c9efed86 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -4432,6 +4432,11 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/resize-observer-browser@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.5.tgz#36d897708172ac2380cd486da7a3daf1161c1e23"
+  integrity sha512-8k/67Z95Goa6Lznuykxkfhq9YU3l1Qe6LNZmwde1u7802a3x8v44oq0j91DICclxatTr0rNnhXx7+VTIetSrSQ==
+
 "@types/sinonjs__fake-timers@^6.0.1":
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.2.tgz#3a84cf5ec3249439015e14049bd3161419bf9eae"
@@ -7294,6 +7299,11 @@ dedent@^0.7.0:
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
 
+deep-diff@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-1.0.2.tgz#afd3d1f749115be965e89c63edc7abb1506b9c26"
+  integrity sha512-aWS3UIVH+NPGCD1kki+DCU9Dua032iSsO43LqQpcs4R3+dVv7tX0qBGjiVHJHjplsoUM2XRO/KB92glqc68awg==
+
 deep-extend@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
@@ -8279,7 +8289,7 @@ executable@^4.1.1:
   dependencies:
     pify "^2.2.0"
 
-exenv@^1.2.0:
+exenv@^1.2.0, exenv@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
   integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
@@ -10016,6 +10026,16 @@ is-installed-globally@^0.3.2:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
+is-lite@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/is-lite/-/is-lite-0.6.0.tgz#806b7c967f1d75b5f4121d6ce93107c427b542eb"
+  integrity sha512-kJ16DuwOhtZg7RimZOf+zK86XOlPeNGGy20MhAfjN/zozuetECxOEtUDUAtzC5n21Yd2lVx6LqZvO1Zvd5DYhw==
+
+is-lite@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/is-lite/-/is-lite-0.8.0.tgz#0b8c169efbbe0c9005f60a55747a5acd21394410"
+  integrity sha512-w/+euF/pELyAgLA6Pai8Vp3l2EMJygQx1wGkKf/Gu7/qTWxZvYFKrdVF4qbi9YdVmISzB/jE4Q7yO9alrHQa8A==
+
 is-map@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
@@ -11525,6 +11545,16 @@ nested-error-stacks@^2.0.0, nested-error-stacks@^2.1.0:
   resolved "https://registry.yarnpkg.com/nested-error-stacks/-/nested-error-stacks-2.1.0.tgz#0fbdcf3e13fe4994781280524f8b96b0cdff9c61"
   integrity sha512-AO81vsIO1k1sM4Zrd6Hu7regmJN1NSiAja10gc4bX3F0wd+9rQmcuHQaHVQCYIEC8iFXnE+mavh23GOt7wBgug==
 
+nested-property@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/nested-property/-/nested-property-1.0.1.tgz#2001105b5c69413411b876bba9b86f4316af613f"
+  integrity sha512-BnBBoo/8bBNRdAnJc7+m79oWk7dXwW1+vCesaEQhfDGVwXGLMvmI4NwYgLTW94R/x+R2s/yr2g/hB/4w/YSAvA==
+
+nested-property@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/nested-property/-/nested-property-4.0.0.tgz#a67b5a31991e701e03cdbaa6453bc5b1011bb88d"
+  integrity sha512-yFehXNWRs4cM0+dz7QxCd06hTbWbSkV0ISsqBfkntU6TOY4Qm3Q88fRRLOddkGh2Qq6dZvnKVAahfhjcUvLnyA==
+
 next-auth@^3.13.3:
   version "3.13.3"
   resolved "https://registry.yarnpkg.com/next-auth/-/next-auth-3.13.3.tgz#d684f30e91e37416af4b250201dd3e216e493433"
@@ -12511,6 +12541,11 @@ popmotion@9.3.1:
     style-value-types "4.1.1"
     tslib "^1.10.0"
 
+popper.js@^1.16.0:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -13272,6 +13307,18 @@ react-final-form@^6.5.2:
   dependencies:
     "@babel/runtime" "^7.12.1"
 
+react-floater@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/react-floater/-/react-floater-0.7.2.tgz#c0c7ddab18a955b1c4a3934890fa804b3d2a4801"
+  integrity sha512-YKixUNXdySMqo4gh6ZGVLI/h7cI59MFQKOG38jAdBJl7XVC///w+sa7dmz+o2xWe4oUSey3z2vmg+AtX7A7Kug==
+  dependencies:
+    deepmerge "^4.2.2"
+    exenv "^1.2.2"
+    is-lite "^0.6.0"
+    popper.js "^1.16.0"
+    react-proptype-conditional-require "^1.0.4"
+    tree-changes "^0.5.1"
+
 react-helmet-async@^1.0.7:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.9.tgz#5b9ed2059de6b4aab47f769532f9fbcbce16c5ca"
@@ -13307,6 +13354,22 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
+react-joyride@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-joyride/-/react-joyride-2.3.0.tgz#d18f7af8f6e7d4c7409426d43e5f6513d70b3e00"
+  integrity sha512-aY7+dgmBKbgGoMjN828qXnMAqeA6QvwvSWxj/fyvxIIIx0iu3wNVT/A5NZ0wHxiVDav+Df9YZuL412Q6C0l7gw==
+  dependencies:
+    deep-diff "^1.0.2"
+    deepmerge "^4.2.2"
+    exenv "^1.2.2"
+    is-lite "^0.8.0"
+    nested-property "^4.0.0"
+    react-floater "^0.7.2"
+    react-is "^16.13.1"
+    scroll "^3.0.1"
+    scrollparent "^2.0.1"
+    tree-changes "^0.6.1"
+
 react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -13366,6 +13429,11 @@ react-popper@^2.2.4:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
+react-proptype-conditional-require@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz#69c2d5741e6df5e08f230f36bbc2944ee1222555"
+  integrity sha1-acLVdB5t9eCPIw82u8KUTuEiJVU=
+
 react-query@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.6.0.tgz#3da307a4a4cb6ea95f9c95b7e50b5281d5244e4d"
@@ -13390,6 +13458,16 @@ react-refresh@0.8.3, react-refresh@^0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-resize-detector@^6.7.3:
+  version "6.7.3"
+  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-6.7.3.tgz#4715486b2c9fc9bdcf549d65934fad100c32c9c0"
+  integrity sha512-SBliAp+WeSyTc59Yj06Inw8TewrLvTLiK/2+NydxQpVWdI8Qjw23s5hC+eFUkrw0Q/lxsM0CNcnBA6Pnv8VSHg==
+  dependencies:
+    "@types/resize-observer-browser" "^0.1.5"
+    lodash.debounce "^4.0.8"
+    lodash.throttle "^4.1.1"
+    resize-observer-polyfill "^1.5.1"
+
 react-sizeme@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-3.0.1.tgz#4d12f4244e0e6a0fb97253e7af0314dc7c83a5a0"
@@ -13420,18 +13498,18 @@ react-textarea-autosize@^8.3.0:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
-react@^17.0.1:
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
-  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
+"react@^16.8.0 || ^17.0.0", react@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
+  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -14048,6 +14126,16 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+scroll@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/scroll/-/scroll-3.0.1.tgz#d5afb59fb3592ee3df31c89743e78b39e4cd8a26"
+  integrity sha512-pz7y517OVls1maEzlirKO5nPYle9AXsFzTMNJrRGmT951mzpIBy7sNHOg5o/0MQd/NqliCiWnAi0kZneMPFLcg==
+
+scrollparent@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/scrollparent/-/scrollparent-2.0.1.tgz#715d5b9cc57760fb22bdccc3befb5bfe06b1a317"
+  integrity sha1-cV1bnMV3YPsivczDvvtb/gaxoxc=
+
 seer@^0.2.4:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/seer/-/seer-0.2.5.tgz#f0975153741f4d1c3916a144eef4738458bcb05a"
@@ -15236,6 +15324,24 @@ traverse@0.6.6, traverse@^0.6.6:
   resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
   integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=
 
+tree-changes@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/tree-changes/-/tree-changes-0.5.1.tgz#e31cc8a0f56c8c401f0a88243d9165dbea4f570c"
+  integrity sha512-O873xzV2xRZ6N059Mn06QzmGKEE21LlvIPbsk2G+GS9ZX5OCur6PIwuuh0rWpAPvLWQZPj0XObyG27zZyLHUzw==
+  dependencies:
+    deep-diff "^1.0.2"
+    nested-property "1.0.1"
+
+tree-changes@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/tree-changes/-/tree-changes-0.6.1.tgz#64fc8ba2499c2b1245840f841bb2fc9227d0bb16"
+  integrity sha512-J+eb7K2hHq8BexW71U5jPHr8RGtd7270plLBjz2a5ubsMpEhInH14k2kafHoCL+bncYS3ixGidToVwpzwC8kug==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    is-lite "^0.8.0"
+  optionalDependencies:
+    react "^16.8.0 || ^17.0.0"
+
 trim-trailing-lines@^1.0.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz#bd4abbec7cc880462f10b2c8b5ce1d8d1ec7c2c0"