diff --git a/lib/interviewer/containers/SlidesForm/SlidesForm.js b/lib/interviewer/containers/SlidesForm/SlidesForm.js
index 87eabba4..40c4b6dd 100644
--- a/lib/interviewer/containers/SlidesForm/SlidesForm.js
+++ b/lib/interviewer/containers/SlidesForm/SlidesForm.js
@@ -1,9 +1,4 @@
-import React, {
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-} from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import cx from 'classnames';
 import { v4 as uuid } from 'uuid';
@@ -19,7 +14,8 @@ import useReadyForNextStage from '../../hooks/useReadyForNextStage';
 const confirmDialog = {
   type: 'Confirm',
   title: 'Discard changes?',
-  message: 'This form contains invalid data, so it cannot be saved. If you continue it will be reset, and your changes will be lost. Do you want to discard your changes?',
+  message:
+    'This form contains invalid data, so it cannot be saved. If you continue it will be reset, and your changes will be lost. Do you want to discard your changes?',
   confirmLabel: 'Discard changes',
 };
 
@@ -51,8 +47,14 @@ const SlidesForm = (props) => {
   } = props;
 
   const dispatch = useDispatch();
-  const openDialog = useCallback((dialog) => dispatch(dialogActions.openDialog(dialog)), [dispatch]);
-  const submitFormRedux = useCallback((formName) => dispatch(submit(formName)), [dispatch]);
+  const openDialog = useCallback(
+    (dialog) => dispatch(dialogActions.openDialog(dialog)),
+    [dispatch],
+  );
+  const submitFormRedux = useCallback(
+    (formName) => dispatch(submit(formName)),
+    [dispatch],
+  );
 
   const [activeIndex, setActiveIndex] = useState(0);
   const [scrollProgress, setScrollProgress] = useState(0);
@@ -63,14 +65,26 @@ const SlidesForm = (props) => {
 
   const getItemIndex = useCallback(() => activeIndex - 1, [activeIndex]);
   const isIntroScreen = useCallback(() => activeIndex === 0, [activeIndex]);
-  const isLastItem = useCallback(() => activeIndex >= items.length, [activeIndex, items.length]);
+  const isLastItem = useCallback(
+    () => activeIndex >= items.length,
+    [activeIndex, items.length],
+  );
 
-  const previousItem = useCallback(() => setActiveIndex(getItemIndex()), [getItemIndex]);
-  const nextItem = useCallback(() => setActiveIndex(activeIndex + 1), [activeIndex]);
+  const previousItem = useCallback(
+    () => setActiveIndex(getItemIndex()),
+    [getItemIndex],
+  );
+  const nextItem = useCallback(
+    () => setActiveIndex(activeIndex + 1),
+    [activeIndex],
+  );
 
   // Submit the form of whatever slide is currently active.
   // Get the form name based on the index of the slide.
-  const submitCurrentForm = useCallback(() => submitFormRedux(getFormName(getItemIndex())), [submitFormRedux, getFormName, getItemIndex]);
+  const submitCurrentForm = useCallback(
+    () => submitFormRedux(getFormName(getItemIndex())),
+    [submitFormRedux, getFormName, getItemIndex],
+  );
 
   // Ref to hold the current slide form state
   const formState = useRef({
@@ -79,24 +93,34 @@ const SlidesForm = (props) => {
   });
 
   // Helpers for accessing form state
-  const getIsFormValid = useCallback(() => (formState.current.isFormValid[getItemIndex()]), [getItemIndex]);
-  const getIsFormDirty = useCallback(() => (formState.current.isFormDirty[getItemIndex()]), [getItemIndex]);
+  const getIsFormValid = useCallback(
+    () => formState.current.isFormValid[getItemIndex()],
+    [getItemIndex],
+  );
+  const getIsFormDirty = useCallback(
+    () => formState.current.isFormDirty[getItemIndex()],
+    [getItemIndex],
+  );
 
   // Update the navigation button to glow when the current form is valid
-  // And we are scrolled to the bottom.
   useEffect(() => {
     formState.current = {
       isFormValid,
       isFormDirty,
     };
+  }, [isFormValid, isFormDirty]);
 
+  // And we are scrolled to the bottom.
+  useEffect(() => {
     const readyForNext = getIsFormValid() && scrollProgress === 1;
     setIsReadyForNext(readyForNext);
-  }, [isFormValid, isFormDirty, setIsReadyForNext, scrollProgress, getIsFormValid]);
+  }, [setIsReadyForNext, scrollProgress, getIsFormValid]);
 
   // Show a confirmation dialog if the form is dirty and invalid.
   const confirmIfChanged = useCallback(() => {
-    if (!getIsFormDirty()) { return Promise.resolve(true); }
+    if (!getIsFormDirty()) {
+      return Promise.resolve(true);
+    }
     return openDialog(confirmDialog);
   }, [getIsFormDirty, openDialog]);
 
@@ -107,49 +131,48 @@ const SlidesForm = (props) => {
    * navigation will be blocked until `onComplete()` is
    * called, which allows async events to happen such as form submission.
    */
-  const beforeNext = useCallback((direction, index = -1) => {
-    setPendingDirection(direction);
-    const isPendingStageChange = (index !== -1);
-
-    // If we are about to change stage...
-    if (isPendingStageChange) {
-      // ... if the form has been changed and is valid, submit  it
-      if (getIsFormValid() && getIsFormDirty()) {
-        setPendingStage(index);
-        submitCurrentForm(); // submit and handleUpdate will complete
-      } else {
-        // ... otherwise, prompt the user to confirm lost changes
-        confirmIfChanged()
-          .then((confirmed) => {
+  const beforeNext = useCallback(
+    (direction, index = -1) => {
+      setPendingDirection(direction);
+      const isPendingStageChange = index !== -1;
+
+      // If we are about to change stage...
+      if (isPendingStageChange) {
+        // ... if the form has been changed and is valid, submit  it
+        if (getIsFormValid() && getIsFormDirty()) {
+          setPendingStage(index);
+          submitCurrentForm(); // submit and handleUpdate will complete
+        } else {
+          // ... otherwise, prompt the user to confirm lost changes
+          confirmIfChanged().then((confirmed) => {
             if (confirmed) {
               onComplete(direction); // show next stage and lose changes
               return;
             }
             submitCurrentForm(); // submit so errors will display
           });
+        }
+        return;
       }
-      return;
-    }
 
-    setPendingStage(index);
+      setPendingStage(index);
 
-    // Leave the stage if there are no items or if we are on the intro and
-    // moving backwards
-    if (items.length === 0 || (isIntroScreen() && direction === -1)) {
-      onComplete(direction);
-      return;
-    }
+      // Leave the stage if there are no items or if we are on the intro and
+      // moving backwards
+      if (items.length === 0 || (isIntroScreen() && direction === -1)) {
+        onComplete(direction);
+        return;
+      }
 
-    // If we are on the intro and moving forwards, move to the next item
-    if (isIntroScreen() && direction === 1) {
-      nextItem();
-      return;
-    }
+      // If we are on the intro and moving forwards, move to the next item
+      if (isIntroScreen() && direction === 1) {
+        nextItem();
+        return;
+      }
 
-    // If we are moving backward and the current form is not valid...
-    if (direction === -1 && !getIsFormValid()) {
-      confirmIfChanged()
-        .then((confirmed) => {
+      // If we are moving backward and the current form is not valid...
+      if (direction === -1 && !getIsFormValid()) {
+        confirmIfChanged().then((confirmed) => {
           if (confirmed) {
             previousItem();
             return;
@@ -158,61 +181,97 @@ const SlidesForm = (props) => {
           submitCurrentForm();
         });
 
-      return;
-    }
-
-    setPendingStage(index);
-    submitCurrentForm();
-  }, [getIsFormValid, getIsFormDirty, onComplete, submitCurrentForm, items.length, isIntroScreen, nextItem, previousItem, confirmIfChanged]);
+        return;
+      }
 
-  const parentClasses = cx(
-    'alter-form',
-    parentClass,
+      setPendingStage(index);
+      submitCurrentForm();
+    },
+    [
+      getIsFormValid,
+      getIsFormDirty,
+      onComplete,
+      submitCurrentForm,
+      items.length,
+      isIntroScreen,
+      nextItem,
+      previousItem,
+      confirmIfChanged,
+    ],
   );
 
-  const isComplete = useCallback((direction, currentStep) => {
-    if (isIntroScreen() && direction === -1) { return true; }
-    if (isLastItem() && direction === 1) { return true; }
-    if (currentStep !== -1) { return true; }
-    return false;
-  }, [isIntroScreen, isLastItem]);
+  const parentClasses = cx('alter-form', parentClass);
+
+  const isComplete = useCallback(
+    (direction, currentStep) => {
+      if (isIntroScreen() && direction === -1) {
+        return true;
+      }
+      if (isLastItem() && direction === 1) {
+        return true;
+      }
+      if (currentStep !== -1) {
+        return true;
+      }
+      return false;
+    },
+    [isIntroScreen, isLastItem],
+  );
 
-  const handleScroll = useCallback(() => debounce((_, progress) => {
-    setScrollProgress(progress);
-    const nextIsReady = getIsFormValid() && progress === 1;
+  const handleScroll = useCallback(
+    () =>
+      debounce((_, progress) => {
+        setScrollProgress(progress);
+        const nextIsReady = getIsFormValid() && progress === 1;
 
-    setIsReadyForNext(nextIsReady);
-  }, 200), [setIsReadyForNext, setScrollProgress, getIsFormValid]);
+        setIsReadyForNext(nextIsReady);
+      }, 200),
+    [setIsReadyForNext, setScrollProgress, getIsFormValid],
+  );
 
   useEffect(() => {
     setIsReadyForNext(false);
   }, [activeIndex, setIsReadyForNext]);
 
-  const handleUpdate = useCallback((...update) => {
-    updateItem(...update);
+  const handleUpdate = useCallback(
+    (...update) => {
+      updateItem(...update);
 
-    if (isComplete(pendingDirection, pendingStage)) {
-      onComplete(pendingDirection);
-      return;
-    }
+      if (isComplete(pendingDirection, pendingStage)) {
+        onComplete(pendingDirection);
+        return;
+      }
 
-    if (pendingDirection === -1) {
-      previousItem();
-      return;
-    }
+      if (pendingDirection === -1) {
+        previousItem();
+        return;
+      }
 
-    nextItem();
-  }, [updateItem, onComplete, pendingDirection, pendingStage, previousItem, nextItem, isComplete]);
+      nextItem();
+    },
+    [
+      updateItem,
+      onComplete,
+      pendingDirection,
+      pendingStage,
+      previousItem,
+      nextItem,
+      isComplete,
+    ],
+  );
 
   useEffect(() => {
     registerBeforeNext(beforeNext);
   }, [beforeNext, registerBeforeNext]);
 
   // enter key should always move forward, and needs to process using beforeNext
-  const handleEnterSubmit = useCallback((e) => {
-    beforeNext(1);
-    e.preventDefault();
-  }, [beforeNext]);
+  const handleEnterSubmit = useCallback(
+    (e) => {
+      beforeNext(1);
+      e.preventDefault();
+    },
+    [beforeNext],
+  );
 
   const renderActiveSlide = useCallback(() => {
     const itemIndex = getItemIndex();
@@ -240,32 +299,54 @@ const SlidesForm = (props) => {
           onUpdate={handleUpdate}
           onScroll={handleScroll}
           form={slideForm}
-          submitButton={<button type="submit" key="submit" aria-label="Submit" hidden onClick={handleEnterSubmit} />}
+          submitButton={
+            <button
+              type="submit"
+              key="submit"
+              aria-label="Submit"
+              hidden
+              onClick={handleEnterSubmit}
+            />
+          }
         />
       </motion.div>
     );
-  }, [items, getFormName, form, stage.subject, pendingDirection, handleUpdate, handleScroll, SlideForm, handleEnterSubmit, getItemIndex]);
-
-  const renderIntroSlide = useCallback(() => (
-    <motion.div
-      key="introduction-wrapper"
-      className="introduction-wrapper"
-      variants={slideVariants}
-      animate="show"
-      initial={pendingDirection === 1 ? 'hideBottom' : 'hideTop'}
-      exit="hideTop"
-      transition={{ easing: 'easeInOutQuad', duration: 0.5 }}
-    >
-      <div
-        className="alter-form__introduction"
+  }, [
+    items,
+    getFormName,
+    form,
+    stage.subject,
+    pendingDirection,
+    handleUpdate,
+    handleScroll,
+    SlideForm,
+    handleEnterSubmit,
+    getItemIndex,
+  ]);
+
+  const renderIntroSlide = useCallback(
+    () => (
+      <motion.div
+        key="introduction-wrapper"
+        className="introduction-wrapper"
+        variants={slideVariants}
+        animate="show"
+        initial={pendingDirection === 1 ? 'hideBottom' : 'hideTop'}
+        exit="hideTop"
+        transition={{ easing: 'easeInOutQuad', duration: 0.5 }}
       >
-        <h1>{stage.introductionPanel.title}</h1>
-        <Markdown
-          label={stage.introductionPanel.text}
-        />
-      </div>
-    </motion.div>
-  ), [pendingDirection, stage.introductionPanel.title, stage.introductionPanel.text]);
+        <div className="alter-form__introduction">
+          <h1>{stage.introductionPanel.title}</h1>
+          <Markdown label={stage.introductionPanel.text} />
+        </div>
+      </motion.div>
+    ),
+    [
+      pendingDirection,
+      stage.introductionPanel.title,
+      stage.introductionPanel.text,
+    ],
+  );
 
   return (
     <div className={parentClasses}>
@@ -280,17 +361,21 @@ const SlidesForm = (props) => {
             className="progress-container"
             key="progress-container"
             initial={{ opacity: 0, y: 100 }}
-            animate={{ opacity: 1, y: 0, transition: { delay: 0.5, duration: 0.5 } }}
+            animate={{
+              opacity: 1,
+              y: 0,
+              transition: { delay: 0.5, duration: 0.5 },
+            }}
             exit={{ opacity: 0, y: 100 }}
           >
             <h6 className="progress-container__status-text">
-              <strong>{activeIndex}</strong>
-              {' '}
-              of
-              {' '}
-              <strong>{items.length}</strong>
+              <strong>{activeIndex}</strong> of <strong>{items.length}</strong>
             </h6>
-            <ProgressBar orientation="horizontal" percentProgress={(activeIndex / items.length) * 100} nudge={false} />
+            <ProgressBar
+              orientation="horizontal"
+              percentProgress={(activeIndex / items.length) * 100}
+              nudge={false}
+            />
           </motion.div>
         )}
       </AnimatePresence>
@@ -310,15 +395,16 @@ SlidesForm.propTypes = {
 const makeMapStateToProps = () => {
   const formPrefix = uuid();
 
-  const getFormName = (formId) => (formId ? `${formPrefix}_${formId}` : formPrefix);
+  const getFormName = (formId) =>
+    formId ? `${formPrefix}_${formId}` : formPrefix;
 
   return (state, props) => {
-    const isFormValid = props.items.map(
-      (_, index) => isValid(getFormName(index))(state),
+    const isFormValid = props.items.map((_, index) =>
+      isValid(getFormName(index))(state),
     );
 
-    const isFormDirty = props.items.map(
-      (_, index) => isDirty(getFormName(index))(state),
+    const isFormDirty = props.items.map((_, index) =>
+      isDirty(getFormName(index))(state),
     );
 
     return {