diff --git a/ui/v2.5/src/components/Setup/Setup.tsx b/ui/v2.5/src/components/Setup/Setup.tsx
index 916890794..1f8ec4614 100644
--- a/ui/v2.5/src/components/Setup/Setup.tsx
+++ b/ui/v2.5/src/components/Setup/Setup.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from "react";
+import React, { useState, useContext, useCallback } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import {
   Alert,
@@ -29,45 +29,55 @@ import {
 import { releaseNotes } from "src/docs/en/ReleaseNotes";
 import { ExternalLink } from "../Shared/ExternalLink";
 
-export const Setup: React.FC = () => {
-  const { configuration, loading: configLoading } =
-    useContext(ConfigurationContext);
-  const [saveUI] = useConfigureUI();
+interface ISetupContextState {
+  configuration: GQL.ConfigDataFragment;
+  systemStatus: GQL.SystemStatusQuery;
 
-  const [step, setStep] = useState(0);
-  const [setupInWorkDir, setSetupInWorkDir] = useState(false);
-  const [stashes, setStashes] = useState<GQL.StashConfig[]>([]);
-  const [showStashAlert, setShowStashAlert] = useState(false);
-  const [databaseFile, setDatabaseFile] = useState("");
-  const [generatedLocation, setGeneratedLocation] = useState("");
-  const [cacheLocation, setCacheLocation] = useState("");
-  const [storeBlobsInDatabase, setStoreBlobsInDatabase] = useState(false);
-  const [blobsLocation, setBlobsLocation] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [setupError, setSetupError] = useState<string>();
-  const [downloadFFmpeg, setDownloadFFmpeg] = useState(true);
+  setupState: Partial<GQL.SetupInput>;
+  setupError: string | undefined;
 
-  const intl = useIntl();
-  const history = useHistory();
+  pathJoin: (...paths: string[]) => string;
+  pathDir(path: string): string;
 
-  const [showGeneratedSelectDialog, setShowGeneratedSelectDialog] =
-    useState(false);
-  const [showCacheSelectDialog, setShowCacheSelectDialog] = useState(false);
-  const [showBlobsDialog, setShowBlobsDialog] = useState(false);
+  homeDir: string;
+  windows: boolean;
+  macApp: boolean;
+  homeDirPath: string;
+  pwd: string;
+  workingDir: string;
+}
 
-  const { data: systemStatus, loading: statusLoading } = useSystemStatus();
+const SetupStateContext = React.createContext<ISetupContextState | null>(null);
+
+const useSetupContext = () => {
+  const context = React.useContext(SetupStateContext);
+
+  if (context === null) {
+    throw new Error("useSettings must be used within a SettingsContext");
+  }
+
+  return context;
+};
+
+const SetupContext: React.FC<{
+  setupState: Partial<GQL.SetupInput>;
+  setupError: string | undefined;
+  systemStatus: GQL.SystemStatusQuery;
+  configuration: GQL.ConfigDataFragment;
+}> = ({ setupState, setupError, systemStatus, configuration, children }) => {
   const status = systemStatus?.systemStatus;
 
-  const [mutateDownloadFFMpeg] = GQL.useDownloadFfMpegMutation();
-
   const windows = status?.os === "windows";
   const pathSep = windows ? "\\" : "/";
   const homeDir = windows ? "%USERPROFILE%" : "$HOME";
   const pwd = windows ? "%CD%" : "$PWD";
 
-  function pathJoin(...paths: string[]) {
-    return paths.join(pathSep);
-  }
+  const pathJoin = useCallback(
+    (...paths: string[]) => {
+      return paths.join(pathSep);
+    },
+    [pathSep]
+  );
 
   // simply returns everything preceding the last path separator
   function pathDir(path: string) {
@@ -83,528 +93,877 @@ export const Setup: React.FC = () => {
   // so in this situation disallow setting up in the working directory.
   const macApp = status?.os === "darwin" && workingDir === "/";
 
+  const homeDirPath = pathJoin(status?.homeDir ?? homeDir, ".stash");
+
+  const state: ISetupContextState = {
+    systemStatus,
+    configuration,
+    windows,
+    macApp,
+    pathJoin,
+    pathDir,
+    homeDir,
+    homeDirPath,
+    pwd,
+    workingDir,
+    setupState,
+    setupError,
+  };
+
+  return (
+    <SetupStateContext.Provider value={state}>
+      {children}
+    </SetupStateContext.Provider>
+  );
+};
+
+interface IWizardStep {
+  next: (input?: Partial<GQL.SetupInput>) => void;
+  goBack: () => void;
+}
+
+const WelcomeSpecificConfig: React.FC<IWizardStep> = ({ next }) => {
+  const { systemStatus } = useSetupContext();
+  const status = systemStatus?.systemStatus;
+  const overrideConfig = status?.configPath;
+
+  function onNext() {
+    next({ configLocation: overrideConfig! });
+  }
+
+  return (
+    <>
+      <section>
+        <h2 className="mb-5">
+          <FormattedMessage id="setup.welcome_to_stash" />
+        </h2>
+        <p className="lead text-center">
+          <FormattedMessage id="setup.welcome_specific_config.unable_to_locate_specified_config" />
+        </p>
+        <p>
+          <FormattedMessage
+            id="setup.welcome_specific_config.config_path"
+            values={{
+              path: overrideConfig,
+              code: (chunks: string) => <code>{chunks}</code>,
+            }}
+          />
+        </p>
+        <p>
+          <FormattedMessage id="setup.welcome_specific_config.next_step" />
+        </p>
+      </section>
+
+      <section className="mt-5">
+        <div className="d-flex justify-content-center">
+          <Button variant="primary mx-2 p-5" onClick={() => onNext()}>
+            <FormattedMessage id="actions.next_action" />
+          </Button>
+        </div>
+      </section>
+    </>
+  );
+};
+
+const DefaultWelcomeStep: React.FC<IWizardStep> = ({ next }) => {
+  const { pathJoin, homeDir, macApp, homeDirPath, pwd, workingDir } =
+    useSetupContext();
+
   const fallbackStashDir = pathJoin(homeDir, ".stash");
   const fallbackConfigPath = pathJoin(fallbackStashDir, "config.yml");
 
+  function onConfigLocationChosen(inWorkingDir: boolean) {
+    const configLocation = inWorkingDir ? "config.yml" : "";
+    next({ configLocation });
+  }
+
+  return (
+    <>
+      <section>
+        <h2 className="mb-5">
+          <FormattedMessage id="setup.welcome_to_stash" />
+        </h2>
+        <p className="lead text-center">
+          <FormattedMessage id="setup.welcome.unable_to_locate_config" />
+        </p>
+        <p>
+          <FormattedMessage
+            id="setup.welcome.config_path_logic_explained"
+            values={{
+              code: (chunks: string) => <code>{chunks}</code>,
+              fallback_path: fallbackConfigPath,
+            }}
+          />
+        </p>
+        <Alert variant="info text-center">
+          <FormattedMessage
+            id="setup.welcome.unexpected_explained"
+            values={{
+              code: (chunks: string) => <code>{chunks}</code>,
+            }}
+          />
+        </Alert>
+        <p>
+          <FormattedMessage id="setup.welcome.next_step" />
+        </p>
+      </section>
+
+      <section className="mt-5">
+        <h3 className="text-center mb-5">
+          <FormattedMessage id="setup.welcome.store_stash_config" />
+        </h3>
+
+        <div className="d-flex justify-content-center">
+          <Button
+            variant="secondary mx-2 p-5"
+            onClick={() => onConfigLocationChosen(false)}
+          >
+            <FormattedMessage
+              id="setup.welcome.in_current_stash_directory"
+              values={{
+                code: (chunks: string) => <code>{chunks}</code>,
+                path: fallbackStashDir,
+              }}
+            />
+            <br />
+            <code>{homeDirPath}</code>
+          </Button>
+          <Button
+            variant="secondary mx-2 p-5"
+            onClick={() => onConfigLocationChosen(true)}
+            disabled={macApp}
+          >
+            {macApp ? (
+              <>
+                <FormattedMessage
+                  id="setup.welcome.in_the_current_working_directory_disabled"
+                  values={{
+                    code: (chunks: string) => <code>{chunks}</code>,
+                    path: pwd,
+                  }}
+                />
+                <br />
+                <b>
+                  <FormattedMessage
+                    id="setup.welcome.in_the_current_working_directory_disabled_macos"
+                    values={{
+                      code: (chunks: string) => <code>{chunks}</code>,
+                      br: () => <br />,
+                    }}
+                  />
+                </b>
+              </>
+            ) : (
+              <>
+                <FormattedMessage
+                  id="setup.welcome.in_the_current_working_directory"
+                  values={{
+                    code: (chunks: string) => <code>{chunks}</code>,
+                    path: pwd,
+                  }}
+                />
+                <br />
+                <code>{workingDir}</code>
+              </>
+            )}
+          </Button>
+        </div>
+      </section>
+    </>
+  );
+};
+
+const WelcomeStep: React.FC<IWizardStep> = (props) => {
+  const { systemStatus } = useSetupContext();
+  const status = systemStatus?.systemStatus;
   const overrideConfig = status?.configPath;
+
+  return overrideConfig ? (
+    <WelcomeSpecificConfig {...props} />
+  ) : (
+    <DefaultWelcomeStep {...props} />
+  );
+};
+
+const StashAlert: React.FC<{ close: (confirm: boolean) => void }> = ({
+  close,
+}) => {
+  const intl = useIntl();
+
+  return (
+    <ModalComponent
+      show
+      icon={faExclamationTriangle}
+      accept={{
+        text: intl.formatMessage({ id: "actions.confirm" }),
+        variant: "danger",
+        onClick: () => close(true),
+      }}
+      cancel={{ onClick: () => close(false) }}
+    >
+      <p>
+        <FormattedMessage id="setup.paths.stash_alert" />
+      </p>
+    </ModalComponent>
+  );
+};
+
+const DatabaseSection: React.FC<{
+  databaseFile: string;
+  setDatabaseFile: React.Dispatch<React.SetStateAction<string>>;
+}> = ({ databaseFile, setDatabaseFile }) => {
+  const intl = useIntl();
+
+  return (
+    <Form.Group id="database">
+      <h3>
+        <FormattedMessage id="setup.paths.where_can_stash_store_its_database" />
+      </h3>
+      <p>
+        <FormattedMessage
+          id="setup.paths.where_can_stash_store_its_database_description"
+          values={{
+            code: (chunks: string) => <code>{chunks}</code>,
+          }}
+        />
+        <br />
+        <FormattedMessage
+          id="setup.paths.where_can_stash_store_its_database_warning"
+          values={{
+            strong: (chunks: string) => <strong>{chunks}</strong>,
+          }}
+        />
+      </p>
+      <Form.Control
+        className="text-input"
+        defaultValue={databaseFile}
+        placeholder={intl.formatMessage({
+          id: "setup.paths.database_filename_empty_for_default",
+        })}
+        onChange={(e) => setDatabaseFile(e.currentTarget.value)}
+      />
+    </Form.Group>
+  );
+};
+
+const DirectorySelector: React.FC<{
+  value: string;
+  setValue: React.Dispatch<React.SetStateAction<string>>;
+  placeholder: string;
+  disabled?: boolean;
+}> = ({ value, setValue, placeholder, disabled = false }) => {
+  const [showSelectDialog, setShowSelectDialog] = useState(false);
+
+  function onSelectClosed(dir?: string) {
+    if (dir) {
+      setValue(dir);
+    }
+    setShowSelectDialog(false);
+  }
+
+  return (
+    <>
+      {showSelectDialog ? (
+        <FolderSelectDialog onClose={onSelectClosed} />
+      ) : null}
+      <InputGroup>
+        <Form.Control
+          className="text-input"
+          value={disabled ? "" : value}
+          placeholder={placeholder}
+          onChange={(e) => setValue(e.currentTarget.value)}
+          disabled={disabled}
+        />
+        <InputGroup.Append>
+          <Button
+            variant="secondary"
+            className="text-input"
+            onClick={() => setShowSelectDialog(true)}
+            disabled={disabled}
+          >
+            <Icon icon={faEllipsisH} />
+          </Button>
+        </InputGroup.Append>
+      </InputGroup>
+    </>
+  );
+};
+
+const GeneratedSection: React.FC<{
+  generatedLocation: string;
+  setGeneratedLocation: React.Dispatch<React.SetStateAction<string>>;
+}> = ({ generatedLocation, setGeneratedLocation }) => {
+  const intl = useIntl();
+
+  return (
+    <Form.Group id="generated">
+      <h3>
+        <FormattedMessage id="setup.paths.where_can_stash_store_its_generated_content" />
+      </h3>
+      <p>
+        <FormattedMessage
+          id="setup.paths.where_can_stash_store_its_generated_content_description"
+          values={{
+            code: (chunks: string) => <code>{chunks}</code>,
+          }}
+        />
+      </p>
+      <DirectorySelector
+        value={generatedLocation}
+        setValue={setGeneratedLocation}
+        placeholder={intl.formatMessage({
+          id: "setup.paths.path_to_generated_directory_empty_for_default",
+        })}
+      />
+    </Form.Group>
+  );
+};
+
+const CacheSection: React.FC<{
+  cacheLocation: string;
+  setCacheLocation: React.Dispatch<React.SetStateAction<string>>;
+}> = ({ cacheLocation, setCacheLocation }) => {
+  const intl = useIntl();
+
+  return (
+    <Form.Group id="cache">
+      <h3>
+        <FormattedMessage id="setup.paths.where_can_stash_store_cache_files" />
+      </h3>
+      <p>
+        <FormattedMessage
+          id="setup.paths.where_can_stash_store_cache_files_description"
+          values={{
+            code: (chunks: string) => <code>{chunks}</code>,
+          }}
+        />
+      </p>
+      <DirectorySelector
+        value={cacheLocation}
+        setValue={setCacheLocation}
+        placeholder={intl.formatMessage({
+          id: "setup.paths.path_to_cache_directory_empty_for_default",
+        })}
+      />
+    </Form.Group>
+  );
+};
+
+const BlobsSection: React.FC<{
+  blobsLocation: string;
+  setBlobsLocation: React.Dispatch<React.SetStateAction<string>>;
+  storeBlobsInDatabase: boolean;
+  setStoreBlobsInDatabase: React.Dispatch<React.SetStateAction<boolean>>;
+}> = ({
+  blobsLocation,
+  setBlobsLocation,
+  storeBlobsInDatabase,
+  setStoreBlobsInDatabase,
+}) => {
+  const intl = useIntl();
+
+  return (
+    <Form.Group id="blobs">
+      <h3>
+        <FormattedMessage id="setup.paths.where_can_stash_store_blobs" />
+      </h3>
+      <p>
+        <FormattedMessage
+          id="setup.paths.where_can_stash_store_blobs_description"
+          values={{
+            code: (chunks: string) => <code>{chunks}</code>,
+          }}
+        />
+      </p>
+      <p>
+        <FormattedMessage
+          id="setup.paths.where_can_stash_store_blobs_description_addendum"
+          values={{
+            code: (chunks: string) => <code>{chunks}</code>,
+            strong: (chunks: string) => <strong>{chunks}</strong>,
+          }}
+        />
+      </p>
+
+      <div>
+        <Form.Check
+          id="store-blobs-in-database"
+          checked={storeBlobsInDatabase}
+          label={intl.formatMessage({
+            id: "setup.paths.store_blobs_in_database",
+          })}
+          onChange={() => setStoreBlobsInDatabase(!storeBlobsInDatabase)}
+        />
+      </div>
+
+      <div>
+        <DirectorySelector
+          value={blobsLocation}
+          setValue={setBlobsLocation}
+          placeholder={intl.formatMessage({
+            id: "setup.paths.path_to_blobs_directory_empty_for_default",
+          })}
+          disabled={storeBlobsInDatabase}
+        />
+      </div>
+    </Form.Group>
+  );
+};
+
+const SetPathsStep: React.FC<IWizardStep> = ({ goBack, next }) => {
+  const { configuration } = useSetupContext();
+
+  const [showStashAlert, setShowStashAlert] = useState(false);
+
+  const [stashes, setStashes] = useState<GQL.StashConfig[]>([]);
+  const [databaseFile, setDatabaseFile] = useState("");
+  const [generatedLocation, setGeneratedLocation] = useState("");
+  const [cacheLocation, setCacheLocation] = useState("");
+  const [storeBlobsInDatabase, setStoreBlobsInDatabase] = useState(false);
+  const [blobsLocation, setBlobsLocation] = useState("");
+
+  const overrideDatabase = configuration?.general.databasePath;
   const overrideGenerated = configuration?.general.generatedPath;
   const overrideCache = configuration?.general.cachePath;
   const overrideBlobs = configuration?.general.blobsPath;
-  const overrideDatabase = configuration?.general.databasePath;
 
-  useEffect(() => {
-    if (configuration) {
-      const configStashes = configuration.general.stashes;
-      if (configStashes.length > 0) {
-        setStashes(
-          configStashes.map((s) => {
-            const { __typename, ...withoutTypename } = s;
-            return withoutTypename;
-          })
-        );
-      }
+  function preNext() {
+    if (stashes.length === 0) {
+      setShowStashAlert(true);
+    } else {
+      onNext();
     }
-  }, [configuration]);
-
-  const discordLink = (
-    <ExternalLink href="https://discord.gg/2TsNFKt">Discord</ExternalLink>
-  );
-  const githubLink = (
-    <ExternalLink href="https://github.com/stashapp/stash/issues">
-      <FormattedMessage id="setup.github_repository" />
-    </ExternalLink>
-  );
-
-  function onConfigLocationChosen(inWorkDir: boolean) {
-    setSetupInWorkDir(inWorkDir);
-    next();
   }
 
-  function goBack(n?: number) {
-    let dec = n;
-    if (!dec) {
-      dec = 1;
-    }
-    setStep(Math.max(0, step - dec));
+  function onNext() {
+    const input: Partial<GQL.SetupInput> = {
+      stashes,
+      databaseFile,
+      generatedLocation,
+      cacheLocation,
+      blobsLocation: storeBlobsInDatabase ? "" : blobsLocation,
+      storeBlobsInDatabase,
+    };
+    next(input);
   }
 
-  function next() {
-    setStep(step + 1);
-  }
-
-  function confirmPaths() {
-    if (stashes.length > 0) {
-      next();
-      return;
-    }
-
-    setShowStashAlert(true);
-  }
-
-  function maybeRenderStashAlert() {
-    if (!showStashAlert) {
-      return;
-    }
-
-    return (
-      <ModalComponent
-        show
-        icon={faExclamationTriangle}
-        accept={{
-          text: intl.formatMessage({ id: "actions.confirm" }),
-          variant: "danger",
-          onClick: () => {
+  return (
+    <>
+      {showStashAlert ? (
+        <StashAlert
+          close={(confirm) => {
             setShowStashAlert(false);
-            next();
-          },
-        }}
-        cancel={{ onClick: () => setShowStashAlert(false) }}
-      >
+            if (confirm) {
+              onNext();
+            }
+          }}
+        />
+      ) : null}
+      <section>
+        <h2 className="mb-3">
+          <FormattedMessage id="setup.paths.set_up_your_paths" />
+        </h2>
         <p>
-          <FormattedMessage id="setup.paths.stash_alert" />
+          <FormattedMessage id="setup.paths.description" />
         </p>
-      </ModalComponent>
-    );
+      </section>
+      <section>
+        <Form.Group id="stashes">
+          <h3>
+            <FormattedMessage id="setup.paths.where_is_your_porn_located" />
+          </h3>
+          <p>
+            <FormattedMessage id="setup.paths.where_is_your_porn_located_description" />
+          </p>
+          <Card>
+            <StashConfiguration
+              stashes={stashes}
+              setStashes={(s) => setStashes(s)}
+            />
+          </Card>
+        </Form.Group>
+        {overrideDatabase ? null : (
+          <DatabaseSection
+            databaseFile={databaseFile}
+            setDatabaseFile={setDatabaseFile}
+          />
+        )}
+        {overrideGenerated ? null : (
+          <GeneratedSection
+            generatedLocation={generatedLocation}
+            setGeneratedLocation={setGeneratedLocation}
+          />
+        )}
+        {overrideCache ? null : (
+          <CacheSection
+            cacheLocation={cacheLocation}
+            setCacheLocation={setCacheLocation}
+          />
+        )}
+        {overrideBlobs ? null : (
+          <BlobsSection
+            blobsLocation={blobsLocation}
+            setBlobsLocation={setBlobsLocation}
+            storeBlobsInDatabase={storeBlobsInDatabase}
+            setStoreBlobsInDatabase={setStoreBlobsInDatabase}
+          />
+        )}
+      </section>
+      <section className="mt-5">
+        <div className="d-flex justify-content-center">
+          <Button variant="secondary mx-2 p-5" onClick={() => goBack()}>
+            <FormattedMessage id="actions.previous_action" />
+          </Button>
+          <Button variant="primary mx-2 p-5" onClick={() => preNext()}>
+            <FormattedMessage id="actions.next_action" />
+          </Button>
+        </div>
+      </section>
+    </>
+  );
+};
+
+const StashExclusions: React.FC<{ stash: GQL.StashConfig }> = ({ stash }) => {
+  if (!stash.excludeImage && !stash.excludeVideo) {
+    return null;
   }
 
-  const WelcomeSpecificConfig = () => {
-    return (
-      <>
-        <section>
-          <h2 className="mb-5">
-            <FormattedMessage id="setup.welcome_to_stash" />
-          </h2>
-          <p className="lead text-center">
-            <FormattedMessage id="setup.welcome_specific_config.unable_to_locate_specified_config" />
-          </p>
-          <p>
-            <FormattedMessage
-              id="setup.welcome_specific_config.config_path"
-              values={{
-                path: overrideConfig,
-                code: (chunks: string) => <code>{chunks}</code>,
-              }}
-            />
-          </p>
-          <p>
-            <FormattedMessage id="setup.welcome_specific_config.next_step" />
-          </p>
-        </section>
+  const excludes = [];
+  if (stash.excludeVideo) {
+    excludes.push("videos");
+  }
+  if (stash.excludeImage) {
+    excludes.push("images");
+  }
 
-        <section className="mt-5">
-          <div className="d-flex justify-content-center">
-            <Button variant="primary mx-2 p-5" onClick={() => next()}>
-              <FormattedMessage id="actions.next_action" />
-            </Button>
-          </div>
-        </section>
-      </>
-    );
-  };
+  return <span>{`(excludes ${excludes.join(" and ")})`}</span>;
+};
 
-  function DefaultWelcomeStep() {
-    const homeDirPath = pathJoin(status?.homeDir ?? homeDir, ".stash");
+const ConfirmStep: React.FC<IWizardStep> = ({ goBack, next }) => {
+  const { configuration, pathDir, pathJoin, pwd, setupState } =
+    useSetupContext();
 
-    return (
-      <>
-        <section>
-          <h2 className="mb-5">
-            <FormattedMessage id="setup.welcome_to_stash" />
-          </h2>
-          <p className="lead text-center">
-            <FormattedMessage id="setup.welcome.unable_to_locate_config" />
-          </p>
-          <p>
-            <FormattedMessage
-              id="setup.welcome.config_path_logic_explained"
-              values={{
-                code: (chunks: string) => <code>{chunks}</code>,
-                fallback_path: fallbackConfigPath,
-              }}
-            />
-          </p>
-          <Alert variant="info text-center">
-            <FormattedMessage
-              id="setup.welcome.unexpected_explained"
-              values={{
-                code: (chunks: string) => <code>{chunks}</code>,
-              }}
-            />
-          </Alert>
-          <p>
-            <FormattedMessage id="setup.welcome.next_step" />
-          </p>
-        </section>
+  const cfgFile = setupState.configLocation
+    ? setupState.configLocation
+    : pathJoin(pwd, "config.yml");
+  const cfgDir = pathDir(cfgFile);
+  const stashes = setupState.stashes ?? [];
+  const {
+    databaseFile,
+    generatedLocation,
+    cacheLocation,
+    blobsLocation,
+    storeBlobsInDatabase,
+  } = setupState;
 
-        <section className="mt-5">
-          <h3 className="text-center mb-5">
-            <FormattedMessage id="setup.welcome.store_stash_config" />
-          </h3>
+  const overrideDatabase = configuration?.general.databasePath;
+  const overrideGenerated = configuration?.general.generatedPath;
+  const overrideCache = configuration?.general.cachePath;
+  const overrideBlobs = configuration?.general.blobsPath;
 
-          <div className="d-flex justify-content-center">
-            <Button
-              variant="secondary mx-2 p-5"
-              onClick={() => onConfigLocationChosen(false)}
-            >
+  function joinCfgDir(path: string) {
+    if (cfgDir) {
+      return pathJoin(cfgDir, path);
+    } else {
+      return path;
+    }
+  }
+
+  return (
+    <>
+      <section>
+        <h2 className="mb-3">
+          <FormattedMessage id="setup.confirm.nearly_there" />
+        </h2>
+        <p>
+          <FormattedMessage id="setup.confirm.almost_ready" />
+        </p>
+        <dl>
+          <dt>
+            <FormattedMessage id="setup.confirm.configuration_file_location" />
+          </dt>
+          <dd>
+            <code>{cfgFile}</code>
+          </dd>
+        </dl>
+        <dl>
+          <dt>
+            <FormattedMessage id="setup.confirm.stash_library_directories" />
+          </dt>
+          <dd>
+            <ul>
+              {stashes.map((s) => (
+                <li key={s.path}>
+                  <code>{s.path} </code>
+                  <StashExclusions stash={s} />
+                </li>
+              ))}
+            </ul>
+          </dd>
+        </dl>
+        {!overrideDatabase && (
+          <dl>
+            <dt>
+              <FormattedMessage id="setup.confirm.database_file_path" />
+            </dt>
+            <dd>
+              <code>{databaseFile || joinCfgDir("stash-go.sqlite")}</code>
+            </dd>
+          </dl>
+        )}
+        {!overrideGenerated && (
+          <dl>
+            <dt>
+              <FormattedMessage id="setup.confirm.generated_directory" />
+            </dt>
+            <dd>
+              <code>{generatedLocation || joinCfgDir("generated")}</code>
+            </dd>
+          </dl>
+        )}
+        {!overrideCache && (
+          <dl>
+            <dt>
+              <FormattedMessage id="setup.confirm.cache_directory" />
+            </dt>
+            <dd>
+              <code>{cacheLocation || joinCfgDir("cache")}</code>
+            </dd>
+          </dl>
+        )}
+        {!overrideBlobs && (
+          <dl>
+            <dt>
+              <FormattedMessage id="setup.confirm.blobs_directory" />
+            </dt>
+            <dd>
+              <code>
+                {storeBlobsInDatabase ? (
+                  <FormattedMessage id="setup.confirm.blobs_use_database" />
+                ) : (
+                  blobsLocation || joinCfgDir("blobs")
+                )}
+              </code>
+            </dd>
+          </dl>
+        )}
+      </section>
+      <section className="mt-5">
+        <div className="d-flex justify-content-center">
+          <Button variant="secondary mx-2 p-5" onClick={() => goBack()}>
+            <FormattedMessage id="actions.previous_action" />
+          </Button>
+          <Button variant="success mx-2 p-5" onClick={() => next()}>
+            <FormattedMessage id="actions.confirm" />
+          </Button>
+        </div>
+      </section>
+    </>
+  );
+};
+
+const DiscordLink = (
+  <ExternalLink href="https://discord.gg/2TsNFKt">Discord</ExternalLink>
+);
+const GithubLink = (
+  <ExternalLink href="https://github.com/stashapp/stash/issues">
+    <FormattedMessage id="setup.github_repository" />
+  </ExternalLink>
+);
+
+const ErrorStep: React.FC<{ error: string; goBack: () => void }> = ({
+  error,
+  goBack,
+}) => {
+  return (
+    <>
+      <section>
+        <h2>
+          <FormattedMessage id="setup.errors.something_went_wrong" />
+        </h2>
+        <p>
+          <FormattedMessage
+            id="setup.errors.something_went_wrong_while_setting_up_your_system"
+            values={{ error: <pre>{error}</pre> }}
+          />
+        </p>
+        <p>
+          <FormattedMessage
+            id="setup.errors.something_went_wrong_description"
+            values={{ GithubLink, DiscordLink }}
+          />
+        </p>
+      </section>
+      <section className="mt-5">
+        <div className="d-flex justify-content-center">
+          <Button variant="secondary mx-2 p-5" onClick={goBack}>
+            <FormattedMessage id="actions.previous_action" />
+          </Button>
+        </div>
+      </section>
+    </>
+  );
+};
+
+const SuccessStep: React.FC<{}> = () => {
+  const intl = useIntl();
+  const history = useHistory();
+
+  const [mutateDownloadFFMpeg] = GQL.useDownloadFfMpegMutation();
+
+  const [downloadFFmpeg, setDownloadFFmpeg] = useState(true);
+
+  const { systemStatus } = useSetupContext();
+  const status = systemStatus?.systemStatus;
+
+  function onFinishClick() {
+    if ((!status?.ffmpegPath || !status?.ffprobePath) && downloadFFmpeg) {
+      mutateDownloadFFMpeg();
+    }
+
+    history.push("/settings?tab=library");
+  }
+
+  return (
+    <>
+      <section>
+        <h2>
+          <FormattedMessage id="setup.success.your_system_has_been_created" />
+        </h2>
+        <p>
+          <FormattedMessage id="setup.success.next_config_step_one" />
+        </p>
+        <p>
+          <FormattedMessage
+            id="setup.success.next_config_step_two"
+            values={{
+              code: (chunks: string) => <code>{chunks}</code>,
+              localized_task: intl.formatMessage({
+                id: "config.categories.tasks",
+              }),
+              localized_scan: intl.formatMessage({ id: "actions.scan" }),
+            }}
+          />
+        </p>
+        {!status?.ffmpegPath || !status?.ffprobePath ? (
+          <>
+            <Alert variant="warning text-center">
               <FormattedMessage
-                id="setup.welcome.in_current_stash_directory"
+                id="setup.success.missing_ffmpeg"
                 values={{
                   code: (chunks: string) => <code>{chunks}</code>,
-                  path: fallbackStashDir,
                 }}
               />
-              <br />
-              <code>{homeDirPath}</code>
-            </Button>
-            <Button
-              variant="secondary mx-2 p-5"
-              onClick={() => onConfigLocationChosen(true)}
-              disabled={macApp}
-            >
-              {macApp ? (
-                <>
-                  <FormattedMessage
-                    id="setup.welcome.in_the_current_working_directory_disabled"
-                    values={{
-                      code: (chunks: string) => <code>{chunks}</code>,
-                      path: pwd,
-                    }}
-                  />
-                  <br />
-                  <b>
-                    <FormattedMessage
-                      id="setup.welcome.in_the_current_working_directory_disabled_macos"
-                      values={{
-                        code: (chunks: string) => <code>{chunks}</code>,
-                        br: () => <br />,
-                      }}
-                    />
-                  </b>
-                </>
-              ) : (
-                <>
-                  <FormattedMessage
-                    id="setup.welcome.in_the_current_working_directory"
-                    values={{
-                      code: (chunks: string) => <code>{chunks}</code>,
-                      path: pwd,
-                    }}
-                  />
-                  <br />
-                  <code>{workingDir}</code>
-                </>
-              )}
-            </Button>
-          </div>
-        </section>
-      </>
-    );
-  }
-
-  function onGeneratedSelectClosed(d?: string) {
-    if (d) {
-      setGeneratedLocation(d);
-    }
-
-    setShowGeneratedSelectDialog(false);
-  }
-
-  function maybeRenderGeneratedSelectDialog() {
-    if (!showGeneratedSelectDialog) {
-      return;
-    }
-
-    return <FolderSelectDialog onClose={onGeneratedSelectClosed} />;
-  }
-
-  function onBlobsClosed(d?: string) {
-    if (d) {
-      setBlobsLocation(d);
-    }
-
-    setShowBlobsDialog(false);
-  }
-
-  function maybeRenderBlobsSelectDialog() {
-    if (!showBlobsDialog) {
-      return;
-    }
-
-    return <FolderSelectDialog onClose={onBlobsClosed} />;
-  }
-
-  function maybeRenderDatabase() {
-    if (overrideDatabase) return;
-
-    return (
-      <Form.Group id="database">
-        <h3>
-          <FormattedMessage id="setup.paths.where_can_stash_store_its_database" />
-        </h3>
-        <p>
-          <FormattedMessage
-            id="setup.paths.where_can_stash_store_its_database_description"
-            values={{
-              code: (chunks: string) => <code>{chunks}</code>,
-            }}
-          />
-          <br />
-          <FormattedMessage
-            id="setup.paths.where_can_stash_store_its_database_warning"
-            values={{
-              strong: (chunks: string) => <strong>{chunks}</strong>,
-            }}
-          />
-        </p>
-        <Form.Control
-          className="text-input"
-          defaultValue={databaseFile}
-          placeholder={intl.formatMessage({
-            id: "setup.paths.database_filename_empty_for_default",
-          })}
-          onChange={(e) => setDatabaseFile(e.currentTarget.value)}
-        />
-      </Form.Group>
-    );
-  }
-
-  function maybeRenderGenerated() {
-    if (overrideGenerated) return;
-
-    return (
-      <Form.Group id="generated">
-        <h3>
-          <FormattedMessage id="setup.paths.where_can_stash_store_its_generated_content" />
-        </h3>
-        <p>
-          <FormattedMessage
-            id="setup.paths.where_can_stash_store_its_generated_content_description"
-            values={{
-              code: (chunks: string) => <code>{chunks}</code>,
-            }}
-          />
-        </p>
-        <InputGroup>
-          <Form.Control
-            className="text-input"
-            value={generatedLocation}
-            placeholder={intl.formatMessage({
-              id: "setup.paths.path_to_generated_directory_empty_for_default",
-            })}
-            onChange={(e) => setGeneratedLocation(e.currentTarget.value)}
-          />
-          <InputGroup.Append>
-            <Button
-              variant="secondary"
-              className="text-input"
-              onClick={() => setShowGeneratedSelectDialog(true)}
-            >
-              <Icon icon={faEllipsisH} />
-            </Button>
-          </InputGroup.Append>
-        </InputGroup>
-      </Form.Group>
-    );
-  }
-
-  function onCacheSelectClosed(d?: string) {
-    if (d) {
-      setCacheLocation(d);
-    }
-
-    setShowCacheSelectDialog(false);
-  }
-
-  function maybeRenderCacheSelectDialog() {
-    if (!showCacheSelectDialog) {
-      return;
-    }
-
-    return <FolderSelectDialog onClose={onCacheSelectClosed} />;
-  }
-
-  function maybeRenderCache() {
-    if (overrideCache) return;
-
-    return (
-      <Form.Group id="cache">
-        <h3>
-          <FormattedMessage id="setup.paths.where_can_stash_store_cache_files" />
-        </h3>
-        <p>
-          <FormattedMessage
-            id="setup.paths.where_can_stash_store_cache_files_description"
-            values={{
-              code: (chunks: string) => <code>{chunks}</code>,
-            }}
-          />
-        </p>
-        <InputGroup>
-          <Form.Control
-            className="text-input"
-            value={cacheLocation}
-            placeholder={intl.formatMessage({
-              id: "setup.paths.path_to_cache_directory_empty_for_default",
-            })}
-            onChange={(e) => setCacheLocation(e.currentTarget.value)}
-          />
-          <InputGroup.Append>
-            <Button
-              variant="secondary"
-              className="text-input"
-              onClick={() => setShowCacheSelectDialog(true)}
-            >
-              <Icon icon={faEllipsisH} />
-            </Button>
-          </InputGroup.Append>
-        </InputGroup>
-      </Form.Group>
-    );
-  }
-
-  function maybeRenderBlobs() {
-    if (overrideBlobs) return;
-
-    return (
-      <Form.Group id="blobs">
-        <h3>
-          <FormattedMessage id="setup.paths.where_can_stash_store_blobs" />
-        </h3>
-        <p>
-          <FormattedMessage
-            id="setup.paths.where_can_stash_store_blobs_description"
-            values={{
-              code: (chunks: string) => <code>{chunks}</code>,
-            }}
-          />
-        </p>
-        <p>
-          <FormattedMessage
-            id="setup.paths.where_can_stash_store_blobs_description_addendum"
-            values={{
-              code: (chunks: string) => <code>{chunks}</code>,
-              strong: (chunks: string) => <strong>{chunks}</strong>,
-            }}
-          />
-        </p>
-
-        <p>
-          <Form.Check
-            id="store-blobs-in-database"
-            checked={storeBlobsInDatabase}
-            label={intl.formatMessage({
-              id: "setup.paths.store_blobs_in_database",
-            })}
-            onChange={() => setStoreBlobsInDatabase(!storeBlobsInDatabase)}
-          />
-        </p>
-
-        {!storeBlobsInDatabase && (
-          <InputGroup>
-            <Form.Control
-              className="text-input"
-              value={blobsLocation}
-              placeholder={intl.formatMessage({
-                id: "setup.paths.path_to_blobs_directory_empty_for_default",
-              })}
-              onChange={(e) => setBlobsLocation(e.currentTarget.value)}
-              disabled={storeBlobsInDatabase}
-            />
-            <InputGroup.Append>
-              <Button
-                variant="secondary"
-                className="text-input"
-                onClick={() => setShowBlobsDialog(true)}
-                disabled={storeBlobsInDatabase}
-              >
-                <Icon icon={faEllipsisH} />
-              </Button>
-            </InputGroup.Append>
-          </InputGroup>
-        )}
-      </Form.Group>
-    );
-  }
-
-  function SetPathsStep() {
-    return (
-      <>
-        {maybeRenderStashAlert()}
-        <section>
-          <h2 className="mb-3">
-            <FormattedMessage id="setup.paths.set_up_your_paths" />
-          </h2>
-          <p>
-            <FormattedMessage id="setup.paths.description" />
-          </p>
-        </section>
-        <section>
-          <Form.Group id="stashes">
-            <h3>
-              <FormattedMessage id="setup.paths.where_is_your_porn_located" />
-            </h3>
+            </Alert>
             <p>
-              <FormattedMessage id="setup.paths.where_is_your_porn_located_description" />
-            </p>
-            <Card>
-              <StashConfiguration
-                stashes={stashes}
-                setStashes={(s) => setStashes(s)}
+              <Form.Check
+                id="download-ffmpeg"
+                checked={downloadFFmpeg}
+                label={intl.formatMessage({
+                  id: "setup.success.download_ffmpeg",
+                })}
+                onChange={() => setDownloadFFmpeg(!downloadFFmpeg)}
               />
-            </Card>
-          </Form.Group>
-          {maybeRenderDatabase()}
-          {maybeRenderGenerated()}
-          {maybeRenderCache()}
-          {maybeRenderBlobs()}
-        </section>
-        <section className="mt-5">
-          <div className="d-flex justify-content-center">
-            <Button variant="secondary mx-2 p-5" onClick={() => goBack()}>
-              <FormattedMessage id="actions.previous_action" />
-            </Button>
-            <Button variant="primary mx-2 p-5" onClick={() => confirmPaths()}>
-              <FormattedMessage id="actions.next_action" />
-            </Button>
-          </div>
-        </section>
-      </>
-    );
+            </p>
+          </>
+        ) : null}
+      </section>
+      <section>
+        <h3>
+          <FormattedMessage id="setup.success.getting_help" />
+        </h3>
+        <p>
+          <FormattedMessage
+            id="setup.success.in_app_manual_explained"
+            values={{ icon: <Icon icon={faQuestionCircle} /> }}
+          />
+        </p>
+        <p>
+          <FormattedMessage
+            id="setup.success.help_links"
+            values={{ DiscordLink, GithubLink }}
+          />
+        </p>
+      </section>
+      <section>
+        <h3>
+          <FormattedMessage id="setup.success.support_us" />
+        </h3>
+        <p>
+          <FormattedMessage
+            id="setup.success.open_collective"
+            values={{
+              open_collective_link: (
+                <ExternalLink href="https://opencollective.com/stashapp">
+                  Open Collective
+                </ExternalLink>
+              ),
+            }}
+          />
+        </p>
+        <p>
+          <FormattedMessage id="setup.success.welcome_contrib" />
+        </p>
+      </section>
+      <section>
+        <p className="lead text-center">
+          <FormattedMessage id="setup.success.thanks_for_trying_stash" />
+        </p>
+      </section>
+      <section className="mt-5">
+        <div className="d-flex justify-content-center">
+          <Button variant="success mx-2 p-5" onClick={() => onFinishClick()}>
+            <FormattedMessage id="actions.finish" />
+          </Button>
+        </div>
+      </section>
+    </>
+  );
+};
+
+const FinishStep: React.FC<IWizardStep> = ({ goBack }) => {
+  const { setupError } = useSetupContext();
+
+  if (setupError !== undefined) {
+    return <ErrorStep error={setupError} goBack={goBack} />;
   }
 
-  function maybeRenderExclusions(s: GQL.StashConfig) {
-    if (!s.excludeImage && !s.excludeVideo) {
-      return;
-    }
+  return <SuccessStep />;
+};
 
-    const excludes = [];
-    if (s.excludeVideo) {
-      excludes.push("videos");
-    }
-    if (s.excludeImage) {
-      excludes.push("images");
-    }
+export const Setup: React.FC = () => {
+  const intl = useIntl();
+  const { configuration, loading: configLoading } =
+    useContext(ConfigurationContext);
 
-    return `(excludes ${excludes.join(" and ")})`;
-  }
+  const [saveUI] = useConfigureUI();
 
-  async function onSave() {
-    let configLocation = overrideConfig;
-    if (!configLocation) {
-      configLocation = setupInWorkDir ? "config.yml" : "";
-    }
+  const {
+    data: systemStatus,
+    loading: statusLoading,
+    error: statusError,
+  } = useSystemStatus();
 
+  const [step, setStep] = useState(0);
+  const [setupInput, setSetupInput] = useState<Partial<GQL.SetupInput>>({});
+  const [creating, setCreating] = useState(false);
+  const [setupError, setSetupError] = useState<string | undefined>(undefined);
+
+  const history = useHistory();
+
+  const steps: React.FC<IWizardStep>[] = [
+    WelcomeStep,
+    SetPathsStep,
+    ConfirmStep,
+    FinishStep,
+  ];
+  const Step = steps[step];
+
+  async function createSystem() {
     try {
-      setLoading(true);
-      await mutateSetup({
-        configLocation,
-        databaseFile,
-        generatedLocation,
-        cacheLocation,
-        storeBlobsInDatabase,
-        blobsLocation,
-        stashes,
-      });
+      setCreating(true);
+      setSetupError(undefined);
+      await mutateSetup(setupInput as GQL.SetupInput);
       // Set lastNoteSeen to hide release notes dialog
       await saveUI({
         variables: {
@@ -621,318 +980,95 @@ export const Setup: React.FC = () => {
         setSetupError(String(e));
       }
     } finally {
-      setLoading(false);
-      next();
+      setCreating(false);
+      setStep(step + 1);
     }
   }
 
-  function ConfirmStep() {
-    let cfgDir: string;
-    let config: string;
-    if (overrideConfig) {
-      cfgDir = pathDir(overrideConfig);
-      config = overrideConfig;
+  function next(input?: Partial<GQL.SetupInput>) {
+    setSetupInput({ ...setupInput, ...input });
+
+    if (Step === ConfirmStep) {
+      // create the system
+      createSystem();
     } else {
-      cfgDir = setupInWorkDir ? pwd : fallbackStashDir;
-      config = pathJoin(cfgDir, "config.yml");
+      setStep(step + 1);
     }
-
-    function joinCfgDir(path: string) {
-      if (cfgDir) {
-        return pathJoin(cfgDir, path);
-      } else {
-        return path;
-      }
-    }
-
-    return (
-      <>
-        <section>
-          <h2 className="mb-3">
-            <FormattedMessage id="setup.confirm.nearly_there" />
-          </h2>
-          <p>
-            <FormattedMessage id="setup.confirm.almost_ready" />
-          </p>
-          <dl>
-            <dt>
-              <FormattedMessage id="setup.confirm.configuration_file_location" />
-            </dt>
-            <dd>
-              <code>{config}</code>
-            </dd>
-          </dl>
-          <dl>
-            <dt>
-              <FormattedMessage id="setup.confirm.stash_library_directories" />
-            </dt>
-            <dd>
-              <ul>
-                {stashes.map((s) => (
-                  <li key={s.path}>
-                    <code>{s.path} </code>
-                    {maybeRenderExclusions(s)}
-                  </li>
-                ))}
-              </ul>
-            </dd>
-          </dl>
-          {!overrideDatabase && (
-            <dl>
-              <dt>
-                <FormattedMessage id="setup.confirm.database_file_path" />
-              </dt>
-              <dd>
-                <code>{databaseFile || joinCfgDir("stash-go.sqlite")}</code>
-              </dd>
-            </dl>
-          )}
-          {!overrideGenerated && (
-            <dl>
-              <dt>
-                <FormattedMessage id="setup.confirm.generated_directory" />
-              </dt>
-              <dd>
-                <code>{generatedLocation || joinCfgDir("generated")}</code>
-              </dd>
-            </dl>
-          )}
-          {!overrideCache && (
-            <dl>
-              <dt>
-                <FormattedMessage id="setup.confirm.cache_directory" />
-              </dt>
-              <dd>
-                <code>{cacheLocation || joinCfgDir("cache")}</code>
-              </dd>
-            </dl>
-          )}
-          {!overrideBlobs && (
-            <dl>
-              <dt>
-                <FormattedMessage id="setup.confirm.blobs_directory" />
-              </dt>
-              <dd>
-                <code>
-                  {storeBlobsInDatabase ? (
-                    <FormattedMessage id="setup.confirm.blobs_use_database" />
-                  ) : (
-                    blobsLocation || joinCfgDir("blobs")
-                  )}
-                </code>
-              </dd>
-            </dl>
-          )}
-        </section>
-        <section className="mt-5">
-          <div className="d-flex justify-content-center">
-            <Button variant="secondary mx-2 p-5" onClick={() => goBack()}>
-              <FormattedMessage id="actions.previous_action" />
-            </Button>
-            <Button variant="success mx-2 p-5" onClick={() => onSave()}>
-              <FormattedMessage id="actions.confirm" />
-            </Button>
-          </div>
-        </section>
-      </>
-    );
   }
 
-  function ErrorStep() {
-    function onBackClick() {
-      setSetupError(undefined);
-      goBack(2);
+  function goBack() {
+    if (Step === FinishStep) {
+      // go back to the step before ConfirmStep
+      setStep(step - 2);
+    } else {
+      setStep(step - 1);
     }
-
-    return (
-      <>
-        <section>
-          <h2>
-            <FormattedMessage id="setup.errors.something_went_wrong" />
-          </h2>
-          <p>
-            <FormattedMessage
-              id="setup.errors.something_went_wrong_while_setting_up_your_system"
-              values={{ error: <pre>{setupError}</pre> }}
-            />
-          </p>
-          <p>
-            <FormattedMessage
-              id="setup.errors.something_went_wrong_description"
-              values={{ githubLink, discordLink }}
-            />
-          </p>
-        </section>
-        <section className="mt-5">
-          <div className="d-flex justify-content-center">
-            <Button variant="secondary mx-2 p-5" onClick={onBackClick}>
-              <FormattedMessage id="actions.previous_action" />
-            </Button>
-          </div>
-        </section>
-      </>
-    );
   }
 
-  function onFinishClick() {
-    if ((!status?.ffmpegPath || !status?.ffprobePath) && downloadFFmpeg) {
-      mutateDownloadFFMpeg();
-    }
-
-    history.push("/settings?tab=library");
-  }
-
-  function SuccessStep() {
-    return (
-      <>
-        <section>
-          <h2>
-            <FormattedMessage id="setup.success.your_system_has_been_created" />
-          </h2>
-          <p>
-            <FormattedMessage id="setup.success.next_config_step_one" />
-          </p>
-          <p>
-            <FormattedMessage
-              id="setup.success.next_config_step_two"
-              values={{
-                code: (chunks: string) => <code>{chunks}</code>,
-                localized_task: intl.formatMessage({
-                  id: "config.categories.tasks",
-                }),
-                localized_scan: intl.formatMessage({ id: "actions.scan" }),
-              }}
-            />
-          </p>
-          {!status?.ffmpegPath || !status?.ffprobePath ? (
-            <>
-              <Alert variant="warning text-center">
-                <FormattedMessage
-                  id="setup.success.missing_ffmpeg"
-                  values={{
-                    code: (chunks: string) => <code>{chunks}</code>,
-                  }}
-                />
-              </Alert>
-              <p>
-                <Form.Check
-                  id="download-ffmpeg"
-                  checked={downloadFFmpeg}
-                  label={intl.formatMessage({
-                    id: "setup.success.download_ffmpeg",
-                  })}
-                  onChange={() => setDownloadFFmpeg(!downloadFFmpeg)}
-                />
-              </p>
-            </>
-          ) : null}
-        </section>
-        <section>
-          <h3>
-            <FormattedMessage id="setup.success.getting_help" />
-          </h3>
-          <p>
-            <FormattedMessage
-              id="setup.success.in_app_manual_explained"
-              values={{ icon: <Icon icon={faQuestionCircle} /> }}
-            />
-          </p>
-          <p>
-            <FormattedMessage
-              id="setup.success.help_links"
-              values={{ discordLink, githubLink }}
-            />
-          </p>
-        </section>
-        <section>
-          <h3>
-            <FormattedMessage id="setup.success.support_us" />
-          </h3>
-          <p>
-            <FormattedMessage
-              id="setup.success.open_collective"
-              values={{
-                open_collective_link: (
-                  <ExternalLink href="https://opencollective.com/stashapp">
-                    Open Collective
-                  </ExternalLink>
-                ),
-              }}
-            />
-          </p>
-          <p>
-            <FormattedMessage id="setup.success.welcome_contrib" />
-          </p>
-        </section>
-        <section>
-          <p className="lead text-center">
-            <FormattedMessage id="setup.success.thanks_for_trying_stash" />
-          </p>
-        </section>
-        <section className="mt-5">
-          <div className="d-flex justify-content-center">
-            <Button variant="success mx-2 p-5" onClick={() => onFinishClick()}>
-              <FormattedMessage id="actions.finish" />
-            </Button>
-          </div>
-        </section>
-      </>
-    );
-  }
-
-  function FinishStep() {
-    if (setupError !== undefined) {
-      return <ErrorStep />;
-    }
-
-    return <SuccessStep />;
-  }
-
-  // only display setup wizard if system is not setup
-  if (statusLoading || configLoading) {
+  if (configLoading || statusLoading) {
     return <LoadingIndicator />;
   }
 
-  if (step === 0 && status && status.status !== GQL.SystemStatusEnum.Setup) {
+  if (
+    step === 0 &&
+    systemStatus &&
+    systemStatus.systemStatus.status !== GQL.SystemStatusEnum.Setup
+  ) {
     // redirect to main page
     history.push("/");
     return <LoadingIndicator />;
   }
 
-  const WelcomeStep = overrideConfig
-    ? WelcomeSpecificConfig
-    : DefaultWelcomeStep;
-  const steps = [WelcomeStep, SetPathsStep, ConfirmStep, FinishStep];
-  const Step = steps[step];
-
-  function renderCreating() {
+  if (statusError) {
     return (
-      <Card>
-        <LoadingIndicator
-          message={intl.formatMessage({
-            id: "setup.creating.creating_your_system",
-          })}
-        />
-      </Card>
+      <Container>
+        <Alert variant="danger">
+          <FormattedMessage
+            id="setup.errors.unable_to_retrieve_system_status"
+            values={{ error: statusError.message }}
+          />
+        </Alert>
+      </Container>
+    );
+  }
+
+  if (!configuration || !systemStatus) {
+    return (
+      <Container>
+        <Alert variant="danger">
+          <FormattedMessage
+            id="setup.errors.unable_to_retrieve_configuration"
+            values={{ error: "configuration or systemStatus === undefined" }}
+          />
+        </Alert>
+      </Container>
     );
   }
 
   return (
-    <Container>
-      {maybeRenderGeneratedSelectDialog()}
-      {maybeRenderCacheSelectDialog()}
-      {maybeRenderBlobsSelectDialog()}
-      <h1 className="text-center">
-        <FormattedMessage id="setup.stash_setup_wizard" />
-      </h1>
-      {loading ? (
-        renderCreating()
-      ) : (
+    <SetupContext
+      setupState={setupInput}
+      setupError={setupError}
+      configuration={configuration}
+      systemStatus={systemStatus}
+    >
+      <Container className="setup-wizard">
+        <h1 className="text-center">
+          <FormattedMessage id="setup.stash_setup_wizard" />
+        </h1>
         <Card>
-          <Step />
+          {creating ? (
+            <LoadingIndicator
+              message={intl.formatMessage({
+                id: "setup.creating.creating_your_system",
+              })}
+            />
+          ) : (
+            <Step next={next} goBack={goBack} />
+          )}
         </Card>
-      )}
-    </Container>
+      </Container>
+    </SetupContext>
   );
 };
 
diff --git a/ui/v2.5/src/components/Setup/styles.scss b/ui/v2.5/src/components/Setup/styles.scss
index 36db2798a..0eceeb8e5 100644
--- a/ui/v2.5/src/components/Setup/styles.scss
+++ b/ui/v2.5/src/components/Setup/styles.scss
@@ -24,3 +24,10 @@
     margin-left: 0.5rem;
   }
 }
+
+.setup-wizard {
+  #blobs > div {
+    margin-bottom: 1rem;
+    margin-top: 0;
+  }
+}
diff --git a/ui/v2.5/src/locales/en-GB.json b/ui/v2.5/src/locales/en-GB.json
index edad1c8e7..784579c95 100644
--- a/ui/v2.5/src/locales/en-GB.json
+++ b/ui/v2.5/src/locales/en-GB.json
@@ -1298,7 +1298,9 @@
     "errors": {
       "something_went_wrong": "Oh no! Something went wrong!",
       "something_went_wrong_description": "If this looks like a problem with your inputs, go ahead and click back to fix them up. Otherwise, raise a bug on the {githubLink} or seek help in the {discordLink}.",
-      "something_went_wrong_while_setting_up_your_system": "Something went wrong while setting up your system. Here is the error we received: {error}"
+      "something_went_wrong_while_setting_up_your_system": "Something went wrong while setting up your system. Here is the error we received: {error}",
+      "unable_to_retrieve_system_status": "Unable to retrieve system status: {error}",
+      "unexpected_error": "An unexpected error occurred: {error}"
     },
     "folder": {
       "file_path": "File path",