diff --git a/app/actions/DaemonActions.js b/app/actions/DaemonActions.js
index 764fef237d..abae592043 100644
--- a/app/actions/DaemonActions.js
+++ b/app/actions/DaemonActions.js
@@ -28,6 +28,7 @@ import { STANDARD_EXTERNAL_REQUESTS } from "constants";
 import { DIFF_CONNECTION_ERROR, LOCALE, TESTNET } from "constants";
 import * as cfgConstants from "constants/config";
 import { CSPP_URL, CSPP_URL_LEGACY } from "constants";
+import { preDefinedGradients } from "helpers";
 
 export const DECREDITON_VERSION = "DECREDITON_VERSION";
 export const SELECT_LANGUAGE = "SELECT_LANGUAGE";
@@ -770,3 +771,42 @@ export const getDexLogs = () => (dispatch, getState) =>
       .then((logs) => resolve(logs))
       .catch((err) => reject(err));
   });
+
+export const generateRandomGradient = () => {
+  const randomColor = Math.floor(Math.random() * 16777215).toString(16);
+  const invertedColor = (Number(`0x1${randomColor}`) ^ 0xffffff)
+    .toString(16)
+    .substr(1);
+  return `linear-gradient(#${randomColor} 0%, #${invertedColor} 100%)`;
+};
+
+export const checkDisplayWalletGradients = (availableWallets) => (
+  dispatch,
+  getState
+) => {
+  const missingGradientWallets = [];
+  let availableGradients = [...preDefinedGradients];
+  availableWallets
+    .sort((a, b) => b.lastAccess - a.lastAccess)
+    .forEach(({ wallet, displayWalletGradient }) => {
+      if (!displayWalletGradient) {
+        missingGradientWallets.push(wallet);
+      } else {
+        availableGradients = availableGradients.filter(
+          (gradient) => gradient != displayWalletGradient
+        );
+      }
+    });
+
+  // set missing gradients
+  if (missingGradientWallets.length > 0) {
+    availableGradients.reverse();
+    missingGradientWallets.forEach((walletName) => {
+      const gradient = availableGradients.pop() ?? generateRandomGradient();
+      const config = wallet.getWalletCfg(isTestNet(getState()), walletName);
+      config.set(cfgConstants.DISPLAY_WALLET_GRADIENT, gradient);
+    });
+
+    dispatch(getAvailableWallets());
+  }
+};
diff --git a/app/actions/SettingsActions.js b/app/actions/SettingsActions.js
index e02eefc958..e76bee83ec 100644
--- a/app/actions/SettingsActions.js
+++ b/app/actions/SettingsActions.js
@@ -52,6 +52,10 @@ export const saveSettings = (settings) => async (dispatch, getState) => {
   config.set(configConstants.NETWORK, settings.network);
   config.set(configConstants.THEME, settings.theme);
   config.set(configConstants.UI_ANIMATIONS, settings.uiAnimations);
+  config.set(
+    configConstants.AUTO_WALLET_LAUNCHING,
+    settings.autoWalletLaunching
+  );
 
   if (walletName) {
     const walletConfig = wallet.getWalletCfg(isTestNet(getState()), walletName);
@@ -62,7 +66,10 @@ export const saveSettings = (settings) => async (dispatch, getState) => {
   }
 
   if (
-    !equalElements(oldAllowedExternalRequests, settings.allowedExternalRequests)
+    !equalElements(
+      oldAllowedExternalRequests ?? [],
+      settings.allowedExternalRequests
+    )
   ) {
     wallet.reloadAllowedExternalRequests();
   }
diff --git a/app/actions/WalletLoaderActions.js b/app/actions/WalletLoaderActions.js
index e240375272..84c250c01c 100644
--- a/app/actions/WalletLoaderActions.js
+++ b/app/actions/WalletLoaderActions.js
@@ -28,6 +28,7 @@ import * as cfgConstants from "constants/config";
 import { RESCAN_PROGRESS } from "./ControlActions";
 import { stopAccountMixer } from "./AccountMixerActions";
 import { TRZ_WALLET_CLOSED } from "actions/TrezorActions";
+import { saveSettings, updateStateSettingsChanged } from "./SettingsActions";
 
 const { SyncNotificationType } = api;
 
@@ -717,3 +718,25 @@ export const acceptStakingWarning = () => (dispatch, getState) => {
     showStakingWarning: false
   });
 };
+
+export const STOP_UNFINISHED_WALLET_FAILED = "STOP_UNFINISHED_WALLET_FAILED";
+export const stopUnfinishedWallet = () => async (dispatch) => {
+  try {
+    await wallet.stopWallet();
+    dispatch(setSelectedWallet(null));
+  } catch (err) {
+    dispatch({ error: err, type: STOP_UNFINISHED_WALLET_FAILED });
+  }
+};
+
+export const setAutoWalletLaunching = (autoWalletLaunching) => async (
+  dispatch,
+  getState
+) => {
+  dispatch(updateStateSettingsChanged({ autoWalletLaunching }, true));
+  const tempSettings = getState().settings.tempSettings;
+  const config = wallet.getGlobalCfg();
+  config.set(cfgConstants.AUTO_WALLET_LAUNCHING, autoWalletLaunching);
+
+  await dispatch(saveSettings(tempSettings));
+};
diff --git a/app/components/indicators/AnimatedLinearProgressFull/AnimatedLinearProgressFull.jsx b/app/components/indicators/AnimatedLinearProgressFull/AnimatedLinearProgressFull.jsx
new file mode 100644
index 0000000000..91680ae036
--- /dev/null
+++ b/app/components/indicators/AnimatedLinearProgressFull/AnimatedLinearProgressFull.jsx
@@ -0,0 +1,233 @@
+import { useState, useCallback } from "react";
+import { useDaemonStartup, useMountEffect } from "hooks";
+import { HeaderTimeMsg } from "views/GetStartedPage/messages";
+import { FormattedRelative } from "shared";
+import { FormattedMessage as T } from "react-intl";
+import ReactTimeout from "react-timeout";
+import { classNames, Tooltip } from "pi-ui";
+import styles from "./AnimatedLinearProgressFull.module.css";
+import { useRescan } from "hooks";
+import { KeyBlueButton } from "buttons";
+import { AutoWalletLaunchingModal } from "modals";
+
+const AnimatedLinearProgressFull = ({
+  setInterval,
+  min,
+  error,
+  text,
+  animationType,
+  initialAnimationType,
+  hideTextBlock,
+  onCancelLoadingWallet,
+  onContinueOpeningWallet,
+  onSaveAndContinueOpeningWallet,
+  nextStateAfterWalletLoading,
+  hideOpenWalletButton
+}) => {
+  const {
+    isSPV,
+    getNeededBlocks,
+    getEstimatedTimeLeft,
+    selectedWalletSelector,
+    getCurrentBlockCount,
+    syncFetchHeadersLastHeaderTime,
+    syncFetchHeadersFirstHeaderTime,
+    getDcrwalletLogs,
+    getDaemonSynced,
+    onGetDcrdLogs,
+    syncRescanAttempt,
+    startWalletServiceAttempt,
+    synced
+  } = useDaemonStartup();
+  const { rescanEndBlock, rescanStartBlock, rescanCurrentBlock } = useRescan();
+  const [lastDcrwalletLogLine, setLogLine] = useState("");
+  const [lastDcrdLogLine, setDcrdLogLine] = useState("");
+  const [
+    isAutoWalletLaunchingModalVisible,
+    setIsAutoWalletLaunchingModalVisible
+  ] = useState(false);
+  const showAutoWalletLaunchingModalVisible = useCallback(
+    () => setIsAutoWalletLaunchingModalVisible(true),
+    [setIsAutoWalletLaunchingModalVisible]
+  );
+
+  useMountEffect(() => {
+    setInterval(async () => {
+      try {
+        const lastDcrwalletLogLine = await getDcrwalletLogs();
+        setLogLine(lastDcrwalletLogLine);
+      } catch (err) {
+        console.log(err);
+      }
+    }, 2000);
+    setInterval(async () => {
+      try {
+        const lastDcrdLogLine = await onGetDcrdLogs();
+        setDcrdLogLine(lastDcrdLogLine);
+      } catch (err) {
+        console.log(err);
+      }
+    }, 2000);
+  }, [setInterval, getDcrwalletLogs, onGetDcrdLogs]);
+
+  const now = Date.now();
+  let perComplete;
+  if (!getDaemonSynced && getCurrentBlockCount) {
+    perComplete = (getCurrentBlockCount - min) / (getNeededBlocks - min);
+  } else if (syncRescanAttempt && rescanCurrentBlock) {
+    perComplete =
+      (rescanCurrentBlock - rescanStartBlock) /
+      (rescanEndBlock - rescanStartBlock);
+  } else if (syncFetchHeadersLastHeaderTime) {
+    const syncFetchHeadersLastHeaderTimeTs = new Date(
+      syncFetchHeadersLastHeaderTime
+    ).getTime();
+    const syncFetchHeadersFirstHeaderTimeTs = new Date(
+      syncFetchHeadersFirstHeaderTime
+    ).getTime();
+    perComplete =
+      (syncFetchHeadersLastHeaderTimeTs - syncFetchHeadersFirstHeaderTimeTs) /
+      (now - syncFetchHeadersFirstHeaderTimeTs);
+  }
+
+  const leftStartingPoint = perComplete ? perComplete * 100 : 0;
+  let finishDateEstimation = null;
+  if (getEstimatedTimeLeft !== null) {
+    finishDateEstimation = new Date();
+    finishDateEstimation.setSeconds(
+      finishDateEstimation.getSeconds() + getEstimatedTimeLeft
+    );
+  }
+
+  return (
+    <div className={styles.linearProgress}>
+      <div>
+        {perComplete > 0 && (
+          <div
+            className={classNames(
+              styles.linearProgressBar,
+              error && styles.error
+            )}
+            style={
+              error || !perComplete
+                ? {}
+                : { width: `${perComplete * 100}` + "%" }
+            }
+          />
+        )}
+        <div className={classNames(styles.linearProgressText)}>
+          {selectedWalletSelector?.value?.wallet &&
+            `${selectedWalletSelector.value.wallet} - `}
+          {text}
+        </div>
+        {getCurrentBlockCount && !getDaemonSynced && (
+          <div className={styles.loaderBarEstimation}>
+            <T
+              id="getStarted.chainLoading.syncEstimation"
+              m="Blockchain download estimated complete: "
+            />
+            <span className={styles.bold}>
+              {finishDateEstimation && (
+                <FormattedRelative value={finishDateEstimation} />
+              )}
+              ({getCurrentBlockCount} / {getNeededBlocks})
+            </span>
+          </div>
+        )}
+        {syncRescanAttempt && rescanCurrentBlock ? (
+          <div className={styles.loaderBarEstimation}>
+            <T
+              id="getStarted.walletRescan.progress"
+              m="Rescan Progress ({rescanCurrentBlock} / {rescanEndBlock})"
+              values={{
+                rescanCurrentBlock:
+                  rescanCurrentBlock > rescanStartBlock
+                    ? rescanCurrentBlock
+                    : rescanStartBlock,
+                rescanEndBlock: rescanEndBlock
+              }}
+            />
+          </div>
+        ) : startWalletServiceAttempt ? (
+          <div className={styles.loaderBarEstimation}>
+            <T id="getStarted.startwalletservice" m="Start wallet services" />
+          </div>
+        ) : (
+          selectedWalletSelector &&
+          !synced &&
+          syncFetchHeadersLastHeaderTime && (
+            <div className={styles.loaderBarEstimation}>
+              <HeaderTimeMsg />
+              <span className={styles.bold}>
+                <FormattedRelative value={syncFetchHeadersLastHeaderTime} />
+              </span>
+            </div>
+          )
+        )}
+      </div>
+      <div className={styles.icons}>
+        {isSPV && (
+          <div>
+            <Tooltip
+              placement="top"
+              content={<T id="getstarted.spvMode" m="SPV Mode" />}>
+              <div className={styles.spvIcon} />
+            </Tooltip>
+          </div>
+        )}
+        <div
+          className={classNames(
+            styles.icon,
+            animationType ?? animationType,
+            leftStartingPoint == 0 && initialAnimationType,
+            leftStartingPoint == 0 && styles.initial
+          )}
+        />
+      </div>
+      <div>
+        {!hideOpenWalletButton &&
+          selectedWalletSelector &&
+          (nextStateAfterWalletLoading ? (
+            <>
+              <KeyBlueButton
+                onClick={showAutoWalletLaunchingModalVisible}
+                className={styles.openWalletButton}>
+                <T id="getstarted.openWallet" m="Open Wallet" />
+              </KeyBlueButton>
+              <AutoWalletLaunchingModal
+                {...{
+                  show: isAutoWalletLaunchingModalVisible,
+                  onSubmit: onSaveAndContinueOpeningWallet,
+                  onCancelModal: onContinueOpeningWallet
+                }}
+              />
+            </>
+          ) : (
+            !startWalletServiceAttempt && (
+              <KeyBlueButton
+                onClick={onCancelLoadingWallet}
+                className={styles.cancelLoadingButton}>
+                <T id="getstarted.cancelLoading" m="Cancel Loading" />
+              </KeyBlueButton>
+            )
+          ))}
+      </div>
+      {!hideTextBlock && (
+        <div>
+          {!getDaemonSynced && lastDcrdLogLine && !selectedWalletSelector && (
+            <div className={styles.lastLogLines}>
+              <div>{lastDcrdLogLine}</div>
+            </div>
+          )}
+          {selectedWalletSelector && lastDcrwalletLogLine && (
+            <div className={styles.lastLogLines}>
+              <div>{lastDcrwalletLogLine}</div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ReactTimeout(AnimatedLinearProgressFull);
diff --git a/app/components/indicators/AnimatedLinearProgressFull/AnimatedLinearProgressFull.module.css b/app/components/indicators/AnimatedLinearProgressFull/AnimatedLinearProgressFull.module.css
new file mode 100644
index 0000000000..821e8cb274
--- /dev/null
+++ b/app/components/indicators/AnimatedLinearProgressFull/AnimatedLinearProgressFull.module.css
@@ -0,0 +1,98 @@
+.linearProgress {
+  height: 9.4rem;
+  width: 100%;
+  background-color: var(--loader-bg);
+  position: relative;
+  display: grid;
+
+  grid-template-columns: max-content auto;
+  padding: 1.7rem 4rem 2.2rem 4rem;
+  color: var(--main-dark-blue);
+  z-index: 9999;
+}
+
+.linearProgressBar {
+  top: 0;
+  left: 0;
+  background: linear-gradient(
+    270deg,
+    var(--display-wallet-gradient-selected-right),
+    var(--input-color)
+  );
+  border-radius: 0 0.25rem 0.25rem 0;
+  height: 0.5rem;
+  box-shadow: 0px 5px 13px var(--input-color-blue-shadow);
+  transition: width 0.3s linear 0ms;
+  position: absolute;
+}
+
+.linearProgressBar.error {
+  background-color: var(--error-text-color);
+}
+
+.linearProgressText {
+  font-family: var(--font-family-regular);
+
+  font-size: 1.1rem;
+  font-weight: 700;
+  line-height: 1.4rem;
+}
+
+.icons {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.icon {
+  background-image: var(--blockchain-default);
+  background-repeat: no-repeat;
+  background-size: 3rem;
+  width: 3rem;
+  height: 3rem;
+}
+
+.icon.initial {
+  background-image: var(--blockchain-initial);
+  background-size: 2.5rem;
+}
+
+.loaderBarEstimation {
+  font-size: 1.1rem;
+  font-weight: 400;
+  line-height: 1.4rem;
+}
+
+.loaderBarEstimation .bold {
+  font-weight: 700;
+}
+
+.lastLogLines {
+  font-size: 0.9rem;
+  text-align: right;
+  margin-top: 0.5rem;
+}
+
+.openWalletButton,
+.cancelLoadingButton {
+  line-height: 1.6rem !important;
+  padding: 0.6rem 1rem !important;
+  margin-top: 0.5rem;
+}
+
+.cancelLoadingButton {
+  background-color: var(--grey-7) !important;
+}
+
+.spvIcon {
+  background-image: var(--menu-spvon-icon);
+  height: 3rem;
+  width: 3rem;
+  background-size: 3rem;
+  margin-right: 1.5rem;
+}
+
+@media screen and (max-width: 768px) {
+  .loaderBarEstimation {
+    display: none;
+  }
+}
diff --git a/app/components/indicators/AnimatedLinearProgressFull/index.js b/app/components/indicators/AnimatedLinearProgressFull/index.js
new file mode 100644
index 0000000000..4262b5ecfb
--- /dev/null
+++ b/app/components/indicators/AnimatedLinearProgressFull/index.js
@@ -0,0 +1 @@
+export { default } from "./AnimatedLinearProgressFull";
diff --git a/app/components/indicators/LinearProgress/AnimatedLinearProgressFull.jsx b/app/components/indicators/LinearProgress/AnimatedLinearProgressFull.jsx
deleted file mode 100644
index 0246a4d014..0000000000
--- a/app/components/indicators/LinearProgress/AnimatedLinearProgressFull.jsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import { useState } from "react";
-import { useDaemonStartup, useMountEffect } from "hooks";
-import { HeaderTimeMsg } from "views/GetStartedPage/messages";
-import { FormattedRelative } from "shared";
-import { FormattedMessage as T } from "react-intl";
-import ReactTimeout from "react-timeout";
-import { classNames } from "pi-ui";
-import styles from "./LinearProgress.module.css";
-
-const AnimatedLinearProgressFull = ({
-  setInterval,
-  min,
-  error,
-  text,
-  animationType,
-  initialAnimationType,
-  hideTextBlock
-}) => {
-  const {
-    isSPV,
-    getNeededBlocks,
-    getEstimatedTimeLeft,
-    selectedWalletSelector,
-    getCurrentBlockCount,
-    syncFetchHeadersLastHeaderTime,
-    getDcrwalletLogs,
-    getDaemonSynced,
-    onGetDcrdLogs
-  } = useDaemonStartup();
-  const [lastDcrwalletLogLine, setLogLine] = useState("");
-  const [lastDcrdLogLine, setDcrdLogLine] = useState("");
-
-  useMountEffect(() => {
-    setInterval(async () => {
-      try {
-        const lastDcrwalletLogLine = await getDcrwalletLogs();
-        setLogLine(lastDcrwalletLogLine);
-      } catch (err) {
-        console.log(err);
-      }
-    }, 2000);
-    setInterval(async () => {
-      try {
-        const lastDcrdLogLine = await onGetDcrdLogs();
-        setDcrdLogLine(lastDcrdLogLine);
-      } catch (err) {
-        console.log(err);
-      }
-    }, 2000);
-  }, [setInterval, getDcrwalletLogs, onGetDcrdLogs]);
-
-  const perComplete = (getCurrentBlockCount - min) / (getNeededBlocks - min);
-  const leftStartingPoint = perComplete ? perComplete * 100 : 0;
-  let finishDateEstimation = null;
-  if (getEstimatedTimeLeft !== null) {
-    finishDateEstimation = new Date();
-    finishDateEstimation.setSeconds(
-      finishDateEstimation.getSeconds() + getEstimatedTimeLeft
-    );
-  }
-  return (
-    <>
-      <div className={classNames(styles.linearProgress)}>
-        {getDaemonSynced || isSPV ? (
-          <>
-            <div
-              className={classNames(
-                styles.linearProgressBar,
-                error && styles.error
-              )}
-              style={
-                error || getDaemonSynced || !perComplete
-                  ? {}
-                  : { width: `${perComplete * 100}` + "%" }
-              }></div>
-            <div
-              className={classNames(
-                styles.linearProgressText,
-                animationType && animationType
-              )}>
-              {text}
-            </div>
-          </>
-        ) : (
-          <>
-            <div
-              className={classNames(
-                styles.linearProgressBar,
-                error && styles.error
-              )}
-              style={{ width: `${leftStartingPoint}%` }}></div>
-            <div className={styles.isRow}>
-              {perComplete > 0.1 && perComplete < 1 && (
-                <div
-                  className={classNames(styles.linearProgressBox, styles.one)}
-                  style={{ left: leftStartingPoint }}
-                />
-              )}
-              {perComplete > 0.25 && perComplete < 1 && (
-                <div
-                  className={classNames(styles.linearProgressBox, styles.two)}
-                  style={{ left: leftStartingPoint + 200 }}
-                />
-              )}
-              {perComplete > 0.4 && perComplete < 1 && (
-                <div
-                  className={classNames(styles.linearProgressBox, styles.three)}
-                  style={{ left: leftStartingPoint + 200 }}
-                />
-              )}
-              {perComplete > 0.6 && perComplete < 1 && (
-                <div
-                  className={classNames(styles.linearProgressBox, styles.four)}
-                  style={{ left: leftStartingPoint + 200 }}
-                />
-              )}
-              {perComplete > 0.75 && perComplete < 1 && (
-                <div
-                  className={classNames(styles.linearProgressBox, styles.five)}
-                  style={{ left: leftStartingPoint + 200 }}
-                />
-              )}
-              {perComplete > 0.9 && perComplete < 1 && (
-                <div
-                  className={classNames(styles.linearProgressBox, styles.six)}
-                  style={{ left: leftStartingPoint + 200 }}
-                />
-              )}
-            </div>
-            <div
-              className={classNames(
-                styles.linearProgressText,
-                animationType ?? animationType,
-                leftStartingPoint == 0 && initialAnimationType,
-                leftStartingPoint == 0 && styles.initial
-              )}>
-              {text}
-            </div>
-          </>
-        )}
-      </div>
-      {!hideTextBlock && (
-        <div>
-          {getCurrentBlockCount && !getDaemonSynced && (
-            <div className={styles.loaderBarEstimation}>
-              <T
-                id="getStarted.chainLoading.syncEstimation"
-                m="Blockchain download estimated complete: "
-              />
-              <span className={styles.bold}>
-                {finishDateEstimation && (
-                  <FormattedRelative value={finishDateEstimation} />
-                )}
-                ({getCurrentBlockCount} / {getNeededBlocks})
-              </span>
-            </div>
-          )}
-          {selectedWalletSelector && syncFetchHeadersLastHeaderTime && (
-            <div className={styles.loaderBarEstimation}>
-              <HeaderTimeMsg />
-              <span className={styles.bold}>
-                <FormattedRelative value={syncFetchHeadersLastHeaderTime} />
-              </span>
-            </div>
-          )}
-          {!getDaemonSynced && lastDcrdLogLine && !selectedWalletSelector && (
-            <div className={styles.lastLogLines}>
-              <div>{lastDcrdLogLine}</div>
-            </div>
-          )}
-          {selectedWalletSelector && lastDcrwalletLogLine && (
-            <div className={styles.lastLogLines}>
-              <div>{lastDcrwalletLogLine}</div>
-            </div>
-          )}
-        </div>
-      )}
-    </>
-  );
-};
-
-export default ReactTimeout(AnimatedLinearProgressFull);
diff --git a/app/components/indicators/LinearProgress/LinearProgress.module.css b/app/components/indicators/LinearProgress/LinearProgress.module.css
index 8ac76f32b2..6c4bfa8fb1 100644
--- a/app/components/indicators/LinearProgress/LinearProgress.module.css
+++ b/app/components/indicators/LinearProgress/LinearProgress.module.css
@@ -26,88 +26,3 @@
 .linearProgressBar.error {
   background-color: var(--error-text-color);
 }
-@keyframes slide {
-  0% {
-    opacity: 0.01;
-  }
-
-  25% {
-    opacity: 0.08;
-  }
-
-  75% {
-    opacity: 0.08;
-  }
-
-  100% {
-    left: 59px;
-  }
-}
-.linearProgressBox {
-  position: absolute;
-  margin-top: 7px;
-  height: 41px;
-  width: 41px;
-  border-radius: 3px;
-  opacity: 0;
-  background-color: var(--background-back-color);
-  animation: slide 3s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
-}
-.linearProgressBox.one {
-  animation-delay: 0s;
-}
-.linearProgressBox.two {
-  animation-delay: 0.5s;
-}
-.linearProgressBox.three {
-  animation-delay: 1s;
-}
-.linearProgressBox.four {
-  animation-delay: 1.5s;
-}
-.linearProgressBox.five {
-  animation-delay: 2s;
-}
-.linearProgressBox.six {
-  animation-delay: 2.5s;
-}
-.linearProgressText {
-  height: 100%;
-  text-align: left;
-  color: var(--linear-progress-text-default);
-  font-size: 11px;
-  font-weight: 600;
-  padding-left: 46px;
-  padding-top: 19px;
-  font-family: var(--font-family-regular);
-  background-image: var(--blockchain-default);
-  background-repeat: no-repeat;
-  background-position: 20px 20px;
-  background-size: 16px;
-  position: absolute;
-  width: 100%;
-}
-.linearProgressText.initial {
-  color: var(--linear-progress-text-initial);
-  background-image: var(--blockchain-initial);
-}
-.isRow {
-  display: flex;
-  flex-direction: row;
-}
-.loaderBarEstimation {
-  text-align: left;
-  font-size: 9px;
-}
-.loaderBarEstimation .bold {
-  opacity: 1;
-  font-weight: 700;
-}
-.lastLogLines {
-  font-size: 9px;
-}
-@media (--sm-viewport) {
-  .loaderBarEstimation {
-    display: none;
-  }
-}
diff --git a/app/components/indicators/index.js b/app/components/indicators/index.js
index 372a71050e..e48f9504da 100644
--- a/app/components/indicators/index.js
+++ b/app/components/indicators/index.js
@@ -8,7 +8,7 @@ export { default as NoTicketsIndicator } from "./NoMoreIndicators/NoTickets";
 export { default as DecredLoading } from "./DecredLoading/DecredLoading";
 export { default as SimpleLoading } from "./SimpleLoading/SimpleLoading";
 export { default as RescanProgress } from "./RescanProgress/RescanProgress";
-export { default as AnimatedLinearProgressFull } from "./LinearProgress/AnimatedLinearProgressFull";
+export { default as AnimatedLinearProgressFull } from "./AnimatedLinearProgressFull";
 export { default as LinearProgressSmall } from "./LinearProgress/LinearProgressSmall";
 export { default as LoaderBarBottom } from "./LoaderBarBottom";
 export { default as NoStats } from "./NoMoreIndicators/NoStats";
diff --git a/app/components/modals/AutoWalletLaunchingModal/AutoWalletLaunchingModal.jsx b/app/components/modals/AutoWalletLaunchingModal/AutoWalletLaunchingModal.jsx
new file mode 100644
index 0000000000..e3fc53dbd6
--- /dev/null
+++ b/app/components/modals/AutoWalletLaunchingModal/AutoWalletLaunchingModal.jsx
@@ -0,0 +1,49 @@
+import { FormattedMessage as T } from "react-intl";
+import Modal from "../Modal";
+import styles from "./AutoWalletLaunchingModal.module.css";
+import { PiUiButton, InvisiblePiUiButton } from "buttons";
+import { useState } from "react";
+import { Checkbox } from "pi-ui";
+
+const AutoWalletLaunchingModal = ({ onCancelModal, onSubmit, show }) => {
+  const [autoOpenWallet, setAutoOpeningWallet] = useState(true);
+  return (
+    <Modal className={styles.modal} {...{ show, onCancelModal }}>
+      <div className={styles.title}>
+        <T id="autoWalletLaunching.title" m="Automatic Wallet Launching" />
+      </div>
+      <Checkbox
+        label={
+          <T
+            id="autoWalletLaunching.checkboxLabel"
+            m="Launch wallet immediately after loading completes"
+          />
+        }
+        id="autostart"
+        description={
+          <T
+            id="autoWalletLaunching.checkboxDesc"
+            m="You’ll be able to change this later in Settings."
+          />
+        }
+        checked={autoOpenWallet}
+        onChange={() => setAutoOpeningWallet(!autoOpenWallet)}
+      />
+      <button
+        aria-label="Close"
+        className={styles.infoCloseButtonTop}
+        onClick={() => onCancelModal()}
+      />
+      <div className={styles.buttons}>
+        <InvisiblePiUiButton onClick={() => onCancelModal()}>
+          <T id="autoWalletLaunching.askMeLater" m="Ask me later" />
+        </InvisiblePiUiButton>
+        <PiUiButton onClick={() => onSubmit(autoOpenWallet)}>
+          <T id="autoWalletLaunching.save" m="Save" />
+        </PiUiButton>
+      </div>
+    </Modal>
+  );
+};
+
+export default AutoWalletLaunchingModal;
diff --git a/app/components/modals/AutoWalletLaunchingModal/AutoWalletLaunchingModal.module.css b/app/components/modals/AutoWalletLaunchingModal/AutoWalletLaunchingModal.module.css
new file mode 100644
index 0000000000..e023a0f383
--- /dev/null
+++ b/app/components/modals/AutoWalletLaunchingModal/AutoWalletLaunchingModal.module.css
@@ -0,0 +1,50 @@
+.modal {
+  background-image: none;
+  padding: 30px 40px 20px 40px;
+  min-width: 52.1rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.title {
+  font-size: 28px;
+  line-height: 35px;
+  color: var(--grey-7);
+  margin-bottom: 20px;
+}
+.infoCloseButtonTop {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  height: 10px;
+  width: 10px;
+  background-image: var(--x-grey);
+  background-size: 10px 10px;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  outline: none;
+}
+
+.infoCloseButtonTop:hover {
+  opacity: 0.7;
+}
+.buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-top: 30px;
+}
+
+@media screen and (max-width: 1179px) {
+  .modal {
+    width: 421px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .modal {
+    width: 355px;
+  }
+}
diff --git a/app/components/modals/AutoWalletLaunchingModal/index.js b/app/components/modals/AutoWalletLaunchingModal/index.js
new file mode 100644
index 0000000000..f09f56cb9d
--- /dev/null
+++ b/app/components/modals/AutoWalletLaunchingModal/index.js
@@ -0,0 +1 @@
+export { default } from "./AutoWalletLaunchingModal";
diff --git a/app/components/modals/index.js b/app/components/modals/index.js
index 22f8fa37d2..0358d3e8cb 100644
--- a/app/components/modals/index.js
+++ b/app/components/modals/index.js
@@ -25,3 +25,4 @@ export { default as LNPaymentModal } from "./LNPaymentModal";
 export { default as LNChannelModal } from "./LNChannelModal";
 export { default as DiscoverUsageModal } from "./DiscoverUsageModal";
 export { default as SearchForNodesModal } from "./SearchForNodesModal";
+export { default as AutoWalletLaunchingModal } from "./AutoWalletLaunchingModal";
diff --git a/app/components/views/GetStartedPage/AdvancedStartup/Form/Form.jsx b/app/components/views/GetStartedPage/AdvancedStartup/Form/Form.jsx
index 28e3096a86..8860d1ae9b 100644
--- a/app/components/views/GetStartedPage/AdvancedStartup/Form/Form.jsx
+++ b/app/components/views/GetStartedPage/AdvancedStartup/Form/Form.jsx
@@ -5,7 +5,8 @@ import { KeyBlueButton, InvisibleButton } from "buttons";
 import RemoteDaemonForm from "../RemoteDaemonForm";
 import AppDataForm from "../AppDataForm";
 import styles from "./Form.module.css";
-import { FormContainer, ButtonsBar } from "../../helpers";
+import { FormContainer, ButtonsBar, ContentContainer } from "../../helpers";
+import { LoaderTitleMsg } from "../../messages";
 
 const AdvancedBodyBase = ({
   onShowRemote,
@@ -43,6 +44,11 @@ const AdvancedBodyBase = ({
 
   return (
     <>
+      <ContentContainer>
+        <div>
+          <LoaderTitleMsg />
+        </div>
+      </ContentContainer>
       <div className={styles.advancedDesc}>
         <T
           id="login.form.advanced.desc"
diff --git a/app/components/views/GetStartedPage/GetStarted.module.css b/app/components/views/GetStartedPage/GetStarted.module.css
index 1f6ffd7a00..63f72e2689 100644
--- a/app/components/views/GetStartedPage/GetStarted.module.css
+++ b/app/components/views/GetStartedPage/GetStarted.module.css
@@ -1,6 +1,6 @@
 .container {
   color: var(--title-text-and-button-background);
-  padding-top: 57px;
+  padding: 8.3rem 0 0 0;
   position: relative;
 }
 
@@ -13,17 +13,11 @@
 }
 
 .blockchainSyncing {
-  padding-left: 56px;
   background-image: var(--loader-animation-blockchain-syncing) !important;
-  background-position: 15px 15px;
-  background-size: 30px;
 }
 
 .daemonWaiting {
-  padding-left: 56px;
   background-image: var(--loader-animation-daemon-waiting) !important;
-  background-position: 15px 15px;
-  background-size: 30px;
 }
 
 .daemonWaiting.initial {
@@ -31,38 +25,23 @@
 }
 
 .discoveringAddresses {
-  padding-left: 56px;
   background-image: var(--loader-animation-discovering-addresses) !important;
-  background-position: 15px 15px;
-  background-size: 30px;
 }
 
 .establishingRpc {
-  padding-left: 56px;
   background-image: var(--loader-animation-establishing-rpc) !important;
-  background-position: 15px 15px;
-  background-size: 30px;
 }
 
 .fetchingHeaders {
-  padding-left: 56px;
   background-image: var(--loader-animation-fetching-headers) !important;
-  background-position: 15px 15px;
-  background-size: 30px;
 }
 
 .finalizingSetup {
-  padding-left: 56px;
   background-image: var(--loader-animation-finalizing-setup) !important;
-  background-position: 15px 15px;
-  background-size: 30px;
 }
 
 .scanningBlocks {
-  padding-left: 56px;
   background-image: var(--loader-animation-scanning-blocks) !important;
-  background-position: 15px 15px;
-  background-size: 30px;
 }
 
 .updateAvailableLink {
@@ -81,6 +60,14 @@
   text-align: center;
 }
 
+.invisibleButton {
+  padding: 1.2rem 1.5rem 1.4rem 1.5rem;
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 2rem;
+  color: var(--launcher-link-color);
+}
+
 @media (--sm-viewport) {
   .container {
     padding-top: 23px;
@@ -88,6 +75,12 @@
   }
 
   .topLinks {
-    right: -30px !important;
+    top: -4rem;
+    right: -1rem;
+  }
+
+  .tutorialButton,
+  .releaseNotesButton {
+    display: none;
   }
 }
diff --git a/app/components/views/GetStartedPage/GetStartedMachinePage/GetStartedMachinePage.jsx b/app/components/views/GetStartedPage/GetStartedMachinePage/GetStartedMachinePage.jsx
index 8cbe00dc6c..6e7ab178cb 100644
--- a/app/components/views/GetStartedPage/GetStartedMachinePage/GetStartedMachinePage.jsx
+++ b/app/components/views/GetStartedPage/GetStartedMachinePage/GetStartedMachinePage.jsx
@@ -1,66 +1,68 @@
 import { classNames } from "pi-ui";
 import { AnimatedLinearProgressFull } from "indicators";
 import styles from "./GetStartedMachinePage.module.css";
-import { Header } from "../helpers";
 
 export default ({
   StateComponent,
-  getDaemonSynced,
   error,
   availableWalletsError,
   text,
-  getCurrentBlockCount,
   animationType,
-  getNeededBlocks,
-  getDaemonStarted,
-  getEstimatedTimeLeft,
-  lastDcrwalletLogLine,
-  isSPV,
-  onShowReleaseNotes,
-  onShowTutorial,
-  appVersion,
   daemonWarning,
+  loaderBarContainer,
+  hideTextBlock,
+  showLoaderBar,
+  onCancelLoadingWallet,
+  onContinueOpeningWallet,
+  onSaveAndContinueOpeningWallet,
+  nextStateAfterWalletLoading,
   ...props
-}) => (
-  <>
-    <Header {...{ onShowTutorial, onShowReleaseNotes, appVersion }} />
-    <div className={styles.loaderBar}>
-      <AnimatedLinearProgressFull
-        {...{
-          getDaemonStarted,
-          getDaemonSynced,
-          isSPV,
-          text,
-          getCurrentBlockCount,
-          animationType,
-          initialAnimationType: styles.initial,
-          min: 0,
-          max: getNeededBlocks,
-          getEstimatedTimeLeft,
-          lastDcrwalletLogLine,
-          disabled: false
-        }}
-      />
-    </div>
-    {error && (
-      <div className={classNames(styles.error, styles.launchError)}>
-        {error}
-      </div>
-    )}
-    {availableWalletsError && (
-      <div className={classNames(styles.error, styles.launchError)}>
-        {availableWalletsError}
-      </div>
-    )}
-    {daemonWarning && (
-      <div className={classNames(styles.daemonWarning)}>{daemonWarning}</div>
-    )}
+}) => {
+  const loaderBar = (
+    <AnimatedLinearProgressFull
+      {...{
+        setInterval,
+        min: 0,
+        error,
+        text,
+        animationType,
+        initialAnimationType: styles.initial,
+        hideTextBlock,
+        onCancelLoadingWallet,
+        onContinueOpeningWallet,
+        onSaveAndContinueOpeningWallet,
+        nextStateAfterWalletLoading
+      }}
+    />
+  );
 
-    {StateComponent &&
-      (React.isValidElement(StateComponent) ? (
-        StateComponent
-      ) : (
-        <StateComponent {...{ ...props }} />
-      ))}
-  </>
-);
+  return (
+    <>
+      {showLoaderBar &&
+        (loaderBarContainer ? (
+          React.createElement(loaderBarContainer, { loaderBar }, null)
+        ) : (
+          <div className={styles.loaderBar}>{loaderBar}</div>
+        ))}
+      {error && (
+        <div className={classNames(styles.error, styles.launchError)}>
+          {error}
+        </div>
+      )}
+      {availableWalletsError && (
+        <div className={classNames(styles.error, styles.launchError)}>
+          {availableWalletsError}
+        </div>
+      )}
+      {daemonWarning && (
+        <div className={classNames(styles.daemonWarning)}>{daemonWarning}</div>
+      )}
+      {StateComponent &&
+        (React.isValidElement(StateComponent) ? (
+          StateComponent
+        ) : (
+          <StateComponent {...{ ...props }} />
+        ))}
+    </>
+  );
+};
diff --git a/app/components/views/GetStartedPage/GetStartedMachinePage/GetStartedMachinePage.module.css b/app/components/views/GetStartedPage/GetStartedMachinePage/GetStartedMachinePage.module.css
index 9e803979ef..81a4ddcc2c 100644
--- a/app/components/views/GetStartedPage/GetStartedMachinePage/GetStartedMachinePage.module.css
+++ b/app/components/views/GetStartedPage/GetStartedMachinePage/GetStartedMachinePage.module.css
@@ -11,7 +11,8 @@
 }
 
 .daemonWarning {
-  padding: 10px;
+  color: var(--error-text-color);
+  padding-bottom: 0.1rem;
   white-space: pre-line;
 }
 
diff --git a/app/components/views/GetStartedPage/GetStartedPage.jsx b/app/components/views/GetStartedPage/GetStartedPage.jsx
index b67359ed9c..1d290d54cb 100644
--- a/app/components/views/GetStartedPage/GetStartedPage.jsx
+++ b/app/components/views/GetStartedPage/GetStartedPage.jsx
@@ -5,7 +5,8 @@ import {
   LogsLinkMsg,
   SettingsLinkMsg,
   UpdateAvailableLink,
-  AboutModalButton
+  LearnBasicsMsg,
+  ReleaseInfoMsg
 } from "./messages";
 import { PageBody } from "layout";
 import { LoaderBarBottom } from "indicators";
@@ -15,8 +16,7 @@ import styles from "./GetStarted.module.css";
 const GetStarted = ({
   getCurrentBlockCount,
   getNeededBlocks,
-  getEstimatedTimeLeft,
-  appVersion
+  getEstimatedTimeLeft
 }) => {
   const {
     onShowLogs,
@@ -24,7 +24,9 @@ const GetStarted = ({
     updateAvailable,
     isTestNet,
     PageComponent,
-    showNavLinks
+    showNavLinks,
+    onShowTutorial,
+    onShowReleaseNotes
   } = useGetStarted();
 
   return (
@@ -41,13 +43,32 @@ const GetStarted = ({
               tooltipClassName={styles.updateAvailableTooltip}
             />
           )}
-          <AboutModalButton {...{ appVersion, updateAvailable }} />
           {showNavLinks && (
             <>
-              <InvisibleButton onClick={onShowSettings}>
+              <InvisibleButton
+                onClick={onShowTutorial}
+                className={classNames(
+                  styles.invisibleButton,
+                  styles.tutorialButton
+                )}>
+                <LearnBasicsMsg />
+              </InvisibleButton>
+              <InvisibleButton
+                onClick={onShowReleaseNotes}
+                className={classNames(
+                  styles.invisibleButton,
+                  styles.releaseNotesButton
+                )}>
+                <ReleaseInfoMsg />
+              </InvisibleButton>
+              <InvisibleButton
+                onClick={onShowSettings}
+                className={styles.invisibleButton}>
                 <SettingsLinkMsg />
               </InvisibleButton>
-              <InvisibleButton onClick={onShowLogs}>
+              <InvisibleButton
+                onClick={onShowLogs}
+                className={styles.invisibleButton}>
                 <LogsLinkMsg />
               </InvisibleButton>
             </>
diff --git a/app/components/views/GetStartedPage/LoadingPage/LoadingPage.jsx b/app/components/views/GetStartedPage/LoadingPage/LoadingPage.jsx
new file mode 100644
index 0000000000..acea74c5cf
--- /dev/null
+++ b/app/components/views/GetStartedPage/LoadingPage/LoadingPage.jsx
@@ -0,0 +1,47 @@
+import {
+  TutorialOverview,
+  tutorials
+} from "../../SettingsPage/TutorialsTab/helpers";
+import { Subtitle } from "shared";
+import { FormattedMessage as T } from "react-intl";
+import styles from "./LoadingPage.module.css";
+
+const LoadingPage = ({ onShowOnboardingTutorial }) => {
+  return (
+    <div className={styles.container}>
+      <Subtitle
+        className={styles.subtitle}
+        title={
+          <T
+            id="getstarted.loadingpage.learnAboutDecred"
+            m="Learn about decred"
+          />
+        }
+      />
+      {[
+        "decredIntro",
+        "ln",
+        "consensusCode",
+        "powPos",
+        "tickets",
+        "staking",
+        "lifecycle",
+        "consensusVoting",
+        "blocks",
+        "identity"
+      ].map((name) => (
+        <TutorialOverview
+          {...{
+            key: name,
+            name,
+            tutorials,
+            viewTutorialHandler: onShowOnboardingTutorial,
+            showProgressBar: false
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default LoadingPage;
diff --git a/app/components/views/GetStartedPage/LoadingPage/LoadingPage.module.css b/app/components/views/GetStartedPage/LoadingPage/LoadingPage.module.css
new file mode 100644
index 0000000000..23fe68a39f
--- /dev/null
+++ b/app/components/views/GetStartedPage/LoadingPage/LoadingPage.module.css
@@ -0,0 +1,19 @@
+.container {
+  width: 106rem;
+}
+
+.subtitle {
+  padding-top: 3rem;
+}
+
+@media screen and (max-width: 1180px) {
+  .container {
+    width: 63.4rem;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .container {
+    width: 31.5rem;
+  }
+}
diff --git a/app/components/views/GetStartedPage/LoadingPage/index.js b/app/components/views/GetStartedPage/LoadingPage/index.js
new file mode 100644
index 0000000000..a583868d3d
--- /dev/null
+++ b/app/components/views/GetStartedPage/LoadingPage/index.js
@@ -0,0 +1 @@
+export { default } from "./LoadingPage";
diff --git a/app/components/views/GetStartedPage/OnboardingTutorialPage/OnboardingTutorialPage.jsx b/app/components/views/GetStartedPage/OnboardingTutorialPage/OnboardingTutorialPage.jsx
new file mode 100644
index 0000000000..af7e5f7870
--- /dev/null
+++ b/app/components/views/GetStartedPage/OnboardingTutorialPage/OnboardingTutorialPage.jsx
@@ -0,0 +1,43 @@
+import {
+  TutorialPage,
+  tutorials
+} from "../../SettingsPage/TutorialsTab/helpers";
+import styles from "./OnboardingTutorialPage.module.css";
+import { useOnboardingTutorials } from "./hooks";
+
+const OnboardingTutorialPage = ({ goBackHistory, currentTutorial }) => {
+  const {
+    visitedTutorialTabs,
+    setVisitedTutorialTabs,
+    activeTabIndexes,
+    setActiveTabIndexes
+  } = useOnboardingTutorials();
+
+  return (
+    <div className={styles.container}>
+      <TutorialPage
+        {...{
+          name: currentTutorial,
+          tutorials,
+          goBackHistory,
+          visitedTabs: visitedTutorialTabs[currentTutorial],
+          setVisitedTabs: (newCheckedTabs) =>
+            setVisitedTutorialTabs({
+              ...visitedTutorialTabs,
+              [currentTutorial]: newCheckedTabs
+            }),
+          activeTabIndex: activeTabIndexes[currentTutorial],
+          setActiveTabIndex: (newActiveTabIndex) =>
+            setActiveTabIndexes({
+              ...activeTabIndexes,
+              [currentTutorial]: newActiveTabIndex
+            }),
+          pagedTutorialClassname: styles.pagedTutorial,
+          tabContentWrapperClassName: styles.tabContentWrapper
+        }}
+      />
+    </div>
+  );
+};
+
+export default OnboardingTutorialPage;
diff --git a/app/components/views/GetStartedPage/OnboardingTutorialPage/OnboardingTutorialPage.module.css b/app/components/views/GetStartedPage/OnboardingTutorialPage/OnboardingTutorialPage.module.css
new file mode 100644
index 0000000000..6f4da78e69
--- /dev/null
+++ b/app/components/views/GetStartedPage/OnboardingTutorialPage/OnboardingTutorialPage.module.css
@@ -0,0 +1,21 @@
+.pagedTutorial,
+.tabContentWrapper,
+.container {
+  width: 106rem;
+}
+
+@media screen and (max-width: 1180px) {
+  .pagedTutorial,
+  .tabContentWrapper,
+  .container {
+    width: 63.4rem;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .pagedTutorial,
+  .tabContentWrapper,
+  .container {
+    width: 31.5rem;
+  }
+}
diff --git a/app/components/views/GetStartedPage/OnboardingTutorialPage/hooks.js b/app/components/views/GetStartedPage/OnboardingTutorialPage/hooks.js
new file mode 100644
index 0000000000..ca05fd3371
--- /dev/null
+++ b/app/components/views/GetStartedPage/OnboardingTutorialPage/hooks.js
@@ -0,0 +1,22 @@
+import { useCallback, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import * as sel from "selectors";
+import * as da from "actions/DaemonActions";
+
+export const useOnboardingTutorials = () => {
+  const visitedTutorialTabs = useSelector(sel.visitedTutorialTabs) ?? {};
+  const [activeTabIndexes, setActiveTabIndexes] = useState({});
+
+  const dispatch = useDispatch();
+  const setVisitedTutorialTabs = useCallback(
+    (visitedTabs) => dispatch(da.setVisitedTutorialTabs(visitedTabs)),
+    [dispatch]
+  );
+
+  return {
+    visitedTutorialTabs,
+    setVisitedTutorialTabs,
+    activeTabIndexes,
+    setActiveTabIndexes
+  };
+};
diff --git a/app/components/views/GetStartedPage/OnboardingTutorialPage/index.js b/app/components/views/GetStartedPage/OnboardingTutorialPage/index.js
new file mode 100644
index 0000000000..cff2151477
--- /dev/null
+++ b/app/components/views/GetStartedPage/OnboardingTutorialPage/index.js
@@ -0,0 +1 @@
+export { default } from "./OnboardingTutorialPage";
diff --git a/app/components/views/GetStartedPage/PreCreateWallet/CreateWalletForm/CreateWalletForm.jsx b/app/components/views/GetStartedPage/PreCreateWallet/CreateWalletForm/CreateWalletForm.jsx
index 4806a105d8..b322e91ef1 100644
--- a/app/components/views/GetStartedPage/PreCreateWallet/CreateWalletForm/CreateWalletForm.jsx
+++ b/app/components/views/GetStartedPage/PreCreateWallet/CreateWalletForm/CreateWalletForm.jsx
@@ -1,55 +1,12 @@
-import { FormattedMessage as T, defineMessages } from "react-intl";
+import { FormattedMessage as T } from "react-intl";
 import { classNames, Checkbox, Tooltip } from "pi-ui";
 import { TextInput, IntegerInput } from "inputs";
 import { KeyBlueButton, InvisibleButton } from "buttons";
 import { Collapse, ExternalLink } from "shared";
-import { NewSeedTabMsg, RestoreTabMsg } from "../../messages";
-import { Label, Input, Row } from "../../helpers";
+import { LoaderTitleMsg, messages } from "../../messages";
+import { Label, Input, Row, ContentContainer } from "../../helpers";
 import styles from "./CreateWalletForm.module.css";
 
-const messages = defineMessages({
-  messageWalletNamePlaceholder: {
-    id: "createwallet.walletname.placehlder",
-    defaultMessage: "Choose a Name"
-  },
-  messageWalletNameTooltip: {
-    id: "createwallet.walletname.tooltip",
-    defaultMessage:
-      "The name is used to identify your wallet. Restoring a wallet does not require the name to match the previous wallet name."
-  },
-  messageWalletWatchOnlyDescription: {
-    id: "createwallet.watchonly.description",
-    defaultMessage:
-      "A watch-only wallet has limited functionality. It can only be used to view the balance and monitor transaction history. You won't be able to spend any DCR associated with this wallet."
-  },
-  messageWalletTrezorDescription: {
-    id: "createwallet.trezor.description",
-    defaultMessage:
-      "Trezor is a hardware wallet. For more information, visit {link}"
-  },
-  messageWalletMasterPubKey: {
-    id: "createwallet.walletpubkey.placeholder",
-    defaultMessage: "Master Pub Key"
-  },
-  messageWalletMasterPubkeyError: {
-    id: "createwallet.walletWatchOnly.error",
-    defaultMessage: "Invalid Master Pubkey"
-  },
-  messageWalletDupeNameError: {
-    id: "createwallet.dupeWalletName.error",
-    defaultMessage: "Please choose an unused wallet name"
-  },
-  messageDisablecointypeupgrades: {
-    id: "createwallet.disablecointypeupgrades.description",
-    defaultMessage: "Never upgrade from legacy to SLIP0044 coin type keys"
-  },
-  messageGapLimit: {
-    id: "createwallet.gaplimit.description",
-    defaultMessage:
-      "Allowed unused address gap between used addresses of accounts"
-  }
-});
-
 const CreateWalletForm = ({
   createWallet,
   hideCreateWalletForm,
@@ -75,18 +32,23 @@ const CreateWalletForm = ({
   setGapLimit
 }) => (
   <>
+    <ContentContainer>
+      <div>
+        <LoaderTitleMsg />
+      </div>
+    </ContentContainer>
     {isCreateNewWallet ? (
       <div className={styles.titleArea}>
         <div className={classNames(styles.iconSmall, styles.new)} />
         <div className={styles.title}>
-          <NewSeedTabMsg />
+          {intl.formatMessage(messages.newSeedTabMsg)}
         </div>
       </div>
     ) : (
       <div className={styles.titleArea}>
         <div className={classNames(styles.iconSmall, styles.restore)} />
         <div className={styles.title}>
-          <RestoreTabMsg />
+          {intl.formatMessage(messages.restoreTabMsg)}
         </div>
       </div>
     )}
diff --git a/app/components/views/GetStartedPage/RescanWallet/RescanWallet.jsx b/app/components/views/GetStartedPage/RescanWallet/RescanWallet.jsx
deleted file mode 100644
index 736e33551b..0000000000
--- a/app/components/views/GetStartedPage/RescanWallet/RescanWallet.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { LinearProgressSmall } from "indicators";
-import { FormattedMessage as T } from "react-intl";
-import { useRescan } from "hooks";
-
-const RescanWalletFormBody = () => {
-  const { rescanEndBlock, rescanStartBlock, rescanCurrentBlock } = useRescan();
-  return (
-    <>
-      <LinearProgressSmall
-        min={rescanStartBlock}
-        max={rescanEndBlock}
-        value={rescanCurrentBlock}
-      />
-      <T
-        id="getStarted.walletRescan.progress"
-        m="Rescan Progress ({rescanCurrentBlock} / {rescanEndBlock})"
-        values={{
-          rescanCurrentBlock:
-            rescanCurrentBlock > rescanStartBlock
-              ? rescanCurrentBlock
-              : rescanStartBlock,
-          rescanEndBlock: rescanEndBlock
-        }}
-      />
-    </>
-  );
-};
-
-export default RescanWalletFormBody;
diff --git a/app/components/views/GetStartedPage/Settings/Settings.module.css b/app/components/views/GetStartedPage/Settings/Settings.module.css
index b323aeaeeb..6b570ed8ce 100644
--- a/app/components/views/GetStartedPage/Settings/Settings.module.css
+++ b/app/components/views/GetStartedPage/Settings/Settings.module.css
@@ -1,6 +1,6 @@
 .tabsContainer {
   height: calc(100vh - 17rem);
-  margin: -2rem -4rem 0 -4rem;
+  margin: -2rem -4rem;
 }
 
 .tabs {
diff --git a/app/components/views/GetStartedPage/SetupWallet/ProcessManagedTickets/ProcessManagedTickets.jsx b/app/components/views/GetStartedPage/SetupWallet/ProcessManagedTickets/ProcessManagedTickets.jsx
index 90bed7fca2..177a1c1b69 100644
--- a/app/components/views/GetStartedPage/SetupWallet/ProcessManagedTickets/ProcessManagedTickets.jsx
+++ b/app/components/views/GetStartedPage/SetupWallet/ProcessManagedTickets/ProcessManagedTickets.jsx
@@ -1,10 +1,7 @@
 import { useState, useEffect } from "react";
-import { Tooltip } from "pi-ui";
 import { Subtitle } from "shared";
-import { GoBackMsg } from "../../messages";
 import { FormattedMessage as T } from "react-intl";
 import { PassphraseModalButton, InvisibleButton } from "buttons";
-import { BackButton, BackButtonArea } from "../../helpers";
 import styles from "./ProcessUnmanagedTickets.module.css";
 import { VSPSelect } from "inputs";
 
@@ -43,13 +40,6 @@ export default ({
 
   return (
     <div className={styles.content}>
-      <BackButtonArea>
-        {!isProcessingManaged && (
-          <Tooltip content={<GoBackMsg />}>
-            <BackButton onClick={cancel} />
-          </Tooltip>
-        )}
-      </BackButtonArea>
       <Subtitle className={styles.subtitle} title={title} />
       <div className={styles.description}>{description}</div>
       {!noVspSelection && (
diff --git a/app/components/views/GetStartedPage/SetupWallet/ProcessUnmanagedTickets/ProcessUnmanagedTickets.jsx b/app/components/views/GetStartedPage/SetupWallet/ProcessUnmanagedTickets/ProcessUnmanagedTickets.jsx
index 2f98b1ad92..9706ef6c7d 100644
--- a/app/components/views/GetStartedPage/SetupWallet/ProcessUnmanagedTickets/ProcessUnmanagedTickets.jsx
+++ b/app/components/views/GetStartedPage/SetupWallet/ProcessUnmanagedTickets/ProcessUnmanagedTickets.jsx
@@ -1,11 +1,8 @@
 import { useState, useEffect } from "react";
-import { Tooltip } from "pi-ui";
 import { Subtitle } from "shared";
-import { GoBackMsg } from "../../messages";
 import { FormattedMessage as T } from "react-intl";
 import { PassphraseModalButton, InvisibleButton } from "buttons";
 import styles from "./ProcessUnmanagedTickets.module.css";
-import { BackButton, BackButtonArea } from "../../helpers";
 import { VSPSelect } from "inputs";
 
 export default ({
@@ -42,13 +39,6 @@ export default ({
 
   return (
     <div className={styles.content}>
-      <BackButtonArea>
-        {isProcessingUnmanaged && (
-          <Tooltip content={<GoBackMsg />}>
-            <BackButton onClick={cancel} />
-          </Tooltip>
-        )}
-      </BackButtonArea>
       <Subtitle className={styles.subtitle} title={title} />
       <div className={styles.description}>{description}</div>
       {!noVspSelection && (
diff --git a/app/components/views/GetStartedPage/SetupWallet/SetMixedAcctPage/SetMixedAcctPage.jsx b/app/components/views/GetStartedPage/SetupWallet/SetMixedAcctPage/SetMixedAcctPage.jsx
index f45dd13288..b44dd91f6c 100644
--- a/app/components/views/GetStartedPage/SetupWallet/SetMixedAcctPage/SetMixedAcctPage.jsx
+++ b/app/components/views/GetStartedPage/SetupWallet/SetMixedAcctPage/SetMixedAcctPage.jsx
@@ -1,15 +1,13 @@
 import { useState, useEffect } from "react";
 import { FormattedMessage as T } from "react-intl";
-import { classNames, Checkbox, Tooltip } from "pi-ui";
+import { classNames, Checkbox } from "pi-ui";
 import { Subtitle } from "shared";
 import { KeyBlueButton } from "buttons";
 import { MIXED_ACCOUNT, CHANGE_ACCOUNT } from "constants";
-import { GoBackMsg } from "../../messages";
 import { useDaemonStartup, useMountEffect, useAccounts } from "hooks";
-import { BackButton, BackButtonArea } from "../../helpers";
 import styles from "./SetMixedAcctPage.module.css";
 
-export default ({ cancel, onSendContinue }) => {
+export default ({ onSendContinue }) => {
   const { getCoinjoinOutputspByAcct, setCoinjoinCfg } = useDaemonStartup();
   const { onRenameAccount } = useAccounts();
   const [coinjoinSumByAcct, setCjSumByAcct] = useState(null);
@@ -58,11 +56,6 @@ export default ({ cancel, onSendContinue }) => {
 
   return (
     <div className={styles.content}>
-      <BackButtonArea>
-        <Tooltip content={<GoBackMsg />}>
-          <BackButton onClick={cancel} />
-        </Tooltip>
-      </BackButtonArea>
       <Subtitle
         className={styles.subtitle}
         title={<T id="getstarted.setAccount.title" m="Set Mixed Account" />}
diff --git a/app/components/views/GetStartedPage/SetupWallet/SetupWallet.jsx b/app/components/views/GetStartedPage/SetupWallet/SetupWallet.jsx
index 434ec6c938..0466840147 100644
--- a/app/components/views/GetStartedPage/SetupWallet/SetupWallet.jsx
+++ b/app/components/views/GetStartedPage/SetupWallet/SetupWallet.jsx
@@ -4,14 +4,13 @@ import { useEffect } from "react";
 import { useWalletSetup } from "./hooks";
 import { FormattedMessage as T } from "react-intl";
 import { AnimatedLinearProgressFull } from "indicators";
-import { Header } from "../helpers";
 import styles from "./SetupWallet.module.css";
+import { LoaderBarContainer } from "../helpers";
 
 const SetupWallet = ({
-  settingUpWalletRef,
-  appVersion,
-  onShowTutorial,
-  onShowReleaseNotes
+  NavlinkComponent,
+  LoadingPageComponent,
+  settingUpWalletRef
 }) => {
   const { getStateComponent, StateComponent } = useWalletSetup(
     settingUpWalletRef
@@ -23,22 +22,26 @@ const SetupWallet = ({
 
   return (
     <div>
-      {StateComponent && React.isValidElement(StateComponent) ? (
-        StateComponent
-      ) : (
-        <>
-          <Header {...{ onShowTutorial, onShowReleaseNotes, appVersion }} />
-          <div className={styles.loaderBar}>
-            <AnimatedLinearProgressFull
-              {...{
-                text: <T id="setupwallet.progressLabel" m="Setup Wallet" />,
-                animationType: styles.setupWallet,
-                hideTextBlock: true
-              }}
-            />
-          </div>
-        </>
-      )}
+      {NavlinkComponent && React.isValidElement(NavlinkComponent)
+        ? NavlinkComponent
+        : StateComponent && React.isValidElement(StateComponent)
+        ? StateComponent
+        : LoadingPageComponent &&
+          React.isValidElement(LoadingPageComponent) &&
+          LoadingPageComponent}
+      <LoaderBarContainer
+        className={styles.loaderBar}
+        loaderBar={
+          <AnimatedLinearProgressFull
+            {...{
+              text: <T id="setupwallet.progressLabel" m="Setup Wallet" />,
+              animationType: styles.setupWallet,
+              hideTextBlock: true,
+              hideOpenWalletButton: true
+            }}
+          />
+        }
+      />
     </div>
   );
 };
diff --git a/app/components/views/GetStartedPage/SetupWallet/SetupWallet.module.css b/app/components/views/GetStartedPage/SetupWallet/SetupWallet.module.css
index b375606947..cc500e70e2 100644
--- a/app/components/views/GetStartedPage/SetupWallet/SetupWallet.module.css
+++ b/app/components/views/GetStartedPage/SetupWallet/SetupWallet.module.css
@@ -1,21 +1,6 @@
 .loaderBar {
-  float: left;
-  width: 100%;
-  margin-bottom: 20px;
+  height: 6rem;
 }
 .setupWallet {
-  padding-left: 56px;
   background-image: var(--loader-animation-finalizing-setup) !important;
-  background-position: 15px 15px;
-  background-size: 30px;
-}
-@media (--sm-viewport) {
-  .loaderBar {
-    margin-bottom: 0;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-  }
 }
diff --git a/app/components/views/GetStartedPage/SetupWallet/hooks.js b/app/components/views/GetStartedPage/SetupWallet/hooks.js
index a5e92ff9ff..35ee1e5e60 100644
--- a/app/components/views/GetStartedPage/SetupWallet/hooks.js
+++ b/app/components/views/GetStartedPage/SetupWallet/hooks.js
@@ -185,7 +185,6 @@ export const useWalletSetup = (settingUpWalletRef) => {
             sendContinue();
           } else {
             component = h(SettingMixedAccount, {
-              cancel: sendContinue,
               onSendContinue: sendContinue
             });
           }
diff --git a/app/components/views/GetStartedPage/TutorialPage/TutorialPage.jsx b/app/components/views/GetStartedPage/TutorialPage/TutorialPage.jsx
index 7271d9f38c..8bb8775e01 100644
--- a/app/components/views/GetStartedPage/TutorialPage/TutorialPage.jsx
+++ b/app/components/views/GetStartedPage/TutorialPage/TutorialPage.jsx
@@ -2,7 +2,7 @@ import { useState, useCallback } from "react";
 import TutorialPage from "./Page";
 import { useDaemonStartup } from "hooks";
 
-const Tutorial = () => {
+const Tutorial = ({ onSendBack }) => {
   const { finishTutorial } = useDaemonStartup();
   const [tutorialStep, setTutorialStep] = useState(0);
 
@@ -18,7 +18,7 @@ const Tutorial = () => {
         tutorialStep,
         onNextTutorialStep,
         onGoToStep: setTutorialStep,
-        finishTutorial
+        finishTutorial: onSendBack ?? finishTutorial
       }}
     />
   );
diff --git a/app/components/views/GetStartedPage/WalletSelection/Form/Form.jsx b/app/components/views/GetStartedPage/WalletSelection/Form/Form.jsx
index a5b7bfca7c..efa572cef8 100644
--- a/app/components/views/GetStartedPage/WalletSelection/Form/Form.jsx
+++ b/app/components/views/GetStartedPage/WalletSelection/Form/Form.jsx
@@ -1,190 +1,293 @@
 import { FormattedMessage as T } from "react-intl";
-import { classNames, Tooltip } from "pi-ui";
+import { useIntl } from "react-intl";
+import {
+  classNames,
+  Tooltip,
+  Icon,
+  useTheme,
+  getThemeProperty,
+  ButtonIcon
+} from "pi-ui";
 import { RemoveWalletButton } from "buttons";
-import { FormattedRelative } from "shared";
-import { NewSeedTabMsg, RestoreTabMsg } from "../../messages";
-import { FormContainer, Row } from "../../helpers";
+import { FormattedRelative, Subtitle } from "shared";
+import { FormContainer, ContentContainer /* , Row */ } from "../../helpers";
 import styles from "./Form.module.css";
-
-const CreateRestoreButtons = ({ showCreateWalletForm }) => (
-  <>
-    <div
-      className={classNames(styles.displayWallet, styles.new)}
-      onClick={() => showCreateWalletForm(true)}>
-      <div className={classNames(styles.walletIcon, styles.createnew)} />
-      <div className={styles.displayWalletName}>
-        <NewSeedTabMsg />
-      </div>
-    </div>
-    <div
-      className={classNames(styles.displayWallet, styles.new)}
-      onClick={() => showCreateWalletForm(false)}>
-      <div className={classNames(styles.walletIcon, styles.restore)} />
-      <div className={styles.displayWalletName}>
-        <RestoreTabMsg />
-      </div>
-    </div>
-  </>
-);
-
-const WalletTypeLabel = ({ isWatchingOnly, finished, isTrezor, isPrivacy }) => {
-  if (isPrivacy) return <T id="walletselection.privacy" m="Privacy" />;
-  if (isTrezor) return <T id="walletselection.trezor" m="Trezor" />;
-  if (isWatchingOnly)
-    return <T id="walletselection.watchOnly" m="Watch Only" />;
-  if (!finished)
-    return <T id="walletselection.setupIncomplete" m="Setup incomplete" />;
-  return null;
-};
+import {
+  TutorialOverview,
+  tutorials
+} from "../../../SettingsPage/TutorialsTab/helpers";
+import {
+  LoaderTitleMsg,
+  LoaderTitleMsgChooseTheWalletToAccess,
+  messages
+} from "../../messages";
 
 const WalletSelectionForm = ({
   availableWallets,
   showCreateWalletForm,
   onRemoveWallet,
-  selectedWallet,
-  onChangeAvailableWallets,
   onToggleEditWallet,
   editWallets,
-  submitChosenWallet
-}) => (
-  <div>
-    <FormContainer>
-      <Row>
-        {availableWallets.map((wallet) => {
-          const selected =
-            selectedWallet &&
-            selectedWallet.value.wallet === wallet.value.wallet &&
-            wallet.network === selectedWallet.network;
-          return (
-            <div
-              className={
-                selected && !editWallets
-                  ? classNames(styles.displayWallet, styles.selected)
-                  : styles.displayWallet
-              }
-              key={wallet.label}
-              onClick={
-                !editWallets ? () => onChangeAvailableWallets(wallet) : null
-              }>
-              {editWallets && (
-                <div className={styles.displayWalletButtons}>
-                  <Tooltip
-                    content={
-                      <T
-                        id="walletselection.removeWalletButton"
-                        m="Remove Wallet"
-                      />
-                    }>
-                    <RemoveWalletButton
-                      className={classNames(
-                        styles.displayWalletButton,
-                        styles.remove
-                      )}
-                      modalTitle={
-                        <T
-                          id="walletselection.removeConfirmModal.title"
-                          m="Remove {wallet}"
-                          values={{
-                            wallet: (
-                              <span className="mono">
-                                {wallet.value.wallet}
-                              </span>
-                            )
-                          }}
-                        />
-                      }
-                      modalContent={
-                        <T
-                          id="walletselection.removeConfirmModal.content"
-                          m="Warning this action is permanent! Please make sure you have backed up your wallet's seed before proceeding."
-                        />
-                      }
-                      onSubmit={() => onRemoveWallet(wallet)}
-                    />
-                  </Tooltip>
-                </div>
-              )}
-              <div
-                className={
-                  selected && !editWallets
-                    ? classNames(styles.displayWalletComplete, styles.selected)
-                    : styles.displayWalletComplete
-                }>
-                <WalletTypeLabel
-                  isWatchingOnly={wallet.isWatchingOnly}
-                  isTrezor={wallet.value.isTrezor}
-                  finished={wallet.finished}
-                  isPrivacy={wallet.value.isPrivacy}
-                />
-              </div>
-              <div
-                className={
-                  selected && !editWallets
-                    ? classNames(styles.walletIcon, styles.selected)
-                    : classNames(styles.walletIcon, styles.wallet)
-                }
-              />
-              <div
-                className={
-                  selected && !editWallets
-                    ? classNames(styles.displayWalletName, styles.selected)
-                    : styles.displayWalletName
-                }>
-                {wallet.value.wallet}
-              </div>
-              <div
-                className={
-                  selected && !editWallets
-                    ? classNames(
-                        styles.displayWalletLastAccess,
-                        styles.selected
-                      )
-                    : styles.displayWalletLastAccess
-                }>
-                {wallet.lastAccess && (
+  submitChosenWallet,
+  onShowOnboardingTutorial
+}) => {
+  const { theme } = useTheme();
+  const intl = useIntl();
+  const trezorIconColor = getThemeProperty(theme, "light-blue");
+  const accentBlue = getThemeProperty(theme, "accent-blue");
+  const green = getThemeProperty(theme, "green-2");
+  const lightGreen = getThemeProperty(theme, "light-green");
+  const closeButtonColor = getThemeProperty(theme, "background-back-color");
+
+  const CreateButton = (props) => (
+    <ButtonIcon
+      type="create"
+      onClick={() => showCreateWalletForm(true)}
+      text={intl.formatMessage(messages.newSeedTabMsg)}
+      iconColor={accentBlue}
+      {...props}
+    />
+  );
+
+  const RestoreButton = (props) => (
+    <ButtonIcon
+      type="restore"
+      onClick={() => showCreateWalletForm(false)}
+      text={intl.formatMessage(messages.restoreTabMsg)}
+      iconColor={green}
+      iconBackgroundColor={lightGreen}
+      {...props}
+    />
+  );
+
+  const TrezorButton = (props) => (
+    <ButtonIcon
+      type="trezor"
+      onClick={() => {
+        /* TODO */
+      }}
+      text={intl.formatMessage(messages.trezorTabMsg)}
+      iconColor={trezorIconColor}
+      {...props}
+    />
+  );
+
+  return (
+    <div className={styles.container}>
+      <ContentContainer>
+        <div>
+          <LoaderTitleMsg />,
+        </div>
+        <div>
+          <LoaderTitleMsgChooseTheWalletToAccess />
+        </div>
+      </ContentContainer>
+
+      <FormContainer>
+        <div className={styles.displayWalletContainer}>
+          {availableWallets.length > 0 ? (
+            <>
+              <div className={classNames(styles.buttons, "flex-row")}>
+                {editWallets ? (
+                  <ButtonIcon
+                    type="cancel"
+                    className={styles.close}
+                    onClick={onToggleEditWallet}
+                    iconColor={closeButtonColor}
+                    text={intl.formatMessage(messages.closeEditWallets)}
+                  />
+                ) : (
                   <>
-                    <T id="walletselection.lastAccess" m="Last accessed" />:{" "}
-                    <FormattedRelative
-                      value={wallet.lastAccess}
-                      updateInterval={1 * 1000}
+                    <CreateButton />
+                    <RestoreButton />
+                    <TrezorButton />
+                    <ButtonIcon
+                      type="edit"
+                      onClick={onToggleEditWallet}
+                      text={intl.formatMessage(messages.editWallets)}
                     />
                   </>
                 )}
               </div>
-              {!editWallets && selected && (
-                <>
+              {availableWallets.map((wallet) => {
+                return (
                   <div
-                    className={styles.displayWalletLaunch}
-                    onClick={() => submitChosenWallet({ selectedWallet })}>
-                    <T id="walletselection.launchWallet" m="Launch Wallet " />
+                    className={styles.displayWallet}
+                    key={wallet.label}
+                    onClick={
+                      !editWallets
+                        ? () => submitChosenWallet({ selectedWallet: wallet })
+                        : null
+                    }>
+                    <div
+                      style={
+                        wallet.displayWalletGradient && {
+                          background: wallet.displayWalletGradient
+                        }
+                      }
+                      className={styles.gradient}
+                    />
+                    <Icon
+                      type="wallet"
+                      size={38}
+                      className={styles.walletIcon}
+                    />
+                    <div className={styles.displayWalletName}>
+                      {wallet.value.wallet}
+                    </div>
+                    <div
+                      className={classNames(
+                        "flex-row",
+                        "justify-end",
+                        styles.walletTypeIcons
+                      )}>
+                      {editWallets ? (
+                        <div>
+                          <Tooltip
+                            content={
+                              <T
+                                id="walletselection.removeWalletButton"
+                                m="Remove Wallet"
+                              />
+                            }>
+                            <RemoveWalletButton
+                              className={classNames(
+                                styles.displayWalletButton,
+                                styles.remove
+                              )}
+                              modalTitle={
+                                <T
+                                  id="walletselection.removeConfirmModal.title"
+                                  m="Remove {wallet}"
+                                  values={{
+                                    wallet: (
+                                      <span className="mono">
+                                        {wallet.value.wallet}
+                                      </span>
+                                    )
+                                  }}
+                                />
+                              }
+                              modalContent={
+                                <T
+                                  id="walletselection.removeConfirmModal.content"
+                                  m="Warning this action is permanent! Please make sure you have backed up your wallet's seed before proceeding."
+                                />
+                              }
+                              onSubmit={() => onRemoveWallet(wallet)}
+                            />
+                          </Tooltip>
+                        </div>
+                      ) : (
+                        <>
+                          {wallet.value.isPrivacy && (
+                            <div>
+                              <Tooltip
+                                content={
+                                  <T id="walletselection.privacy" m="Privacy" />
+                                }>
+                                <Icon type="privacy" size={21} />
+                              </Tooltip>
+                            </div>
+                          )}
+                          {wallet.value.isLN && (
+                            <div>
+                              <Tooltip
+                                content={
+                                  <T id="walletselection.ln" m="Lightning" />
+                                }>
+                                <Icon type="ln" size={21} />
+                              </Tooltip>
+                            </div>
+                          )}
+                          {wallet.value.isTrezor && (
+                            <div>
+                              <Tooltip
+                                content={
+                                  <T id="walletselection.trezor" m="Trezor" />
+                                }>
+                                <Icon
+                                  type="trezor"
+                                  size={21}
+                                  iconColor={trezorIconColor}
+                                />
+                              </Tooltip>
+                            </div>
+                          )}
+                          {wallet.isWatchingOnly && (
+                            <div>
+                              <Tooltip
+                                content={
+                                  <T
+                                    id="walletselection.watchOnly"
+                                    m="Watch Only"
+                                  />
+                                }>
+                                <Icon type="watchOnly" size={21} />
+                              </Tooltip>
+                            </div>
+                          )}
+                        </>
+                      )}
+                    </div>
+                    <div className={styles.displayWalletLastAccess}>
+                      {!wallet.finished ? (
+                        <T
+                          id="walletselection.setupIncomplete"
+                          m="Setup incomplete"
+                        />
+                      ) : (
+                        wallet.lastAccess && (
+                          <>
+                            <T
+                              id="walletselection.lastAccess"
+                              m="Last accessed"
+                            />
+                            :{" "}
+                            <FormattedRelative
+                              value={wallet.lastAccess}
+                              updateInterval={1 * 1000}
+                            />
+                          </>
+                        )
+                      )}
+                    </div>
                   </div>
-                  <span className={styles.launchArrowBounce}>&#8594;</span>
-                </>
-              )}
-            </div>
-          );
-        })}
-        <CreateRestoreButtons {...{ showCreateWalletForm }} />
-        {editWallets ? (
-          <Tooltip
-            content={<T id="walletselection.closeEditWallets" m="Close" />}>
-            <div
-              className={classNames(styles.editWalletsButton, styles.close)}
-              onClick={onToggleEditWallet}
-            />
-          </Tooltip>
-        ) : (
-          <Tooltip
-            content={<T id="walletselection.editWallets" m="Edit Wallets" />}>
-            <div
-              className={styles.editWalletsButton}
-              onClick={onToggleEditWallet}
-            />
-          </Tooltip>
-        )}
-      </Row>
-    </FormContainer>
-  </div>
-);
+                );
+              })}
+            </>
+          ) : (
+            <>
+              <CreateButton className={styles.largeButtonIcon} />
+              <RestoreButton className={styles.largeButtonIcon} />
+              <TrezorButton className={styles.largeButtonIcon} />
+            </>
+          )}
+        </div>
+      </FormContainer>
+
+      <Subtitle
+        className={styles.subtitle}
+        title={
+          <T
+            id="getstarted.tutorials.learnAboutDecred"
+            m="Learn about decred"
+          />
+        }
+      />
+      {["decredIntro", "powPos", "lifecycle", "blocks"].map((name) => (
+        <TutorialOverview
+          {...{
+            key: name,
+            name,
+            tutorials,
+            viewTutorialHandler: onShowOnboardingTutorial,
+            showProgressBar: false
+          }}
+        />
+      ))}
+    </div>
+  );
+};
 
 export default WalletSelectionForm;
diff --git a/app/components/views/GetStartedPage/WalletSelection/Form/Form.module.css b/app/components/views/GetStartedPage/WalletSelection/Form/Form.module.css
index 01409a7236..595995cf5b 100644
--- a/app/components/views/GetStartedPage/WalletSelection/Form/Form.module.css
+++ b/app/components/views/GetStartedPage/WalletSelection/Form/Form.module.css
@@ -1,51 +1,59 @@
+.container {
+  width: 106rem;
+}
+
+.displayWalletContainer {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 2rem;
+  width: 106rem;
+}
+
 .displayWallet {
-  margin: 5px 10px 5px 0px;
-  float: left;
-  height: 161px;
-  width: 168px;
-  border-radius: 5px;
-  border: 1px solid var(--background-container);
-  background: var(--display-wallet-bg);
+  padding: 1.6rem 1rem 1.6rem 2rem;
+  height: 7.6rem;
+  border-radius: 0.5rem;
+  background-color: var(--background-back-color);
   font-size: 15px;
+  box-shadow: 0px 2px 8px var(--icons-shadow);
+
+  display: grid;
+  grid-template-columns: min-content auto min-content;
+  grid-template-rows: repeat(2, 1fr);
+  position: relative;
 }
 
 .displayWallet:hover {
   cursor: pointer;
+  box-shadow: 0px 2px 8px var(--icons-shadow-hover);
 }
 
-.displayWallet.new {
-  background: none;
-  background-color: var(--background-back-color);
+.walletIcon {
+  grid-row: 1/3;
+  align-self: center;
+  margin-right: 2rem;
 }
 
-.displayWallet.new .displayWalletName {
-  color: var(--new-wallet-label);
-  margin-top: 20px;
+.walletTypeIcons {
+  height: 2.1rem;
 }
 
-.walletIcon {
-  margin-left: 54px;
-  height: 62px;
-  width: 62px;
-  background-repeat: no-repeat;
-  background-size: 45px 45px;
-  background-position: 8px 10px;
+.walletTypeIcons > div {
+  margin-right: 1rem;
 }
 
-.displayWalletButtons {
-  text-align: center;
-  margin-top: 5px;
-  margin-right: 10px;
-  float: right;
+.walletTypeIcons > div:last-of-type {
+  margin: 0;
 }
 
 .displayWalletButton {
-  height: 20px;
-  width: 20px;
   border-radius: 3px;
   background-repeat: no-repeat;
   background-size: 14px;
   background-position: 50% 50%;
+  width: 2.1rem;
+  height: 2.1rem;
 }
 
 .displayWalletButton.remove {
@@ -61,24 +69,6 @@
   box-shadow: 0px 1px 3px var(--title-text-and-button-background-drop-shadow);
 }
 
-.displayWallet:hover:not(.selected) {
-  border: 1px solid var(--disabled-color);
-}
-
-.displayWallet.selected {
-  background: linear-gradient(
-    45deg,
-    var(--input-color),
-    var(--display-wallet-gradient-selected-right)
-  );
-  box-shadow: 0px 5px 21px var(--title-text-and-button-background-drop-shadow);
-  border: 1px solid var(--input-color);
-}
-
-.displayWallet.selected .displayWalletName {
-  color: var(--selected_wallet-label);
-}
-
 .displayWalletComplete {
   color: var(--title-text-and-button-background);
   margin-top: 5px;
@@ -89,15 +79,16 @@
 }
 
 .displayWalletName {
-  color: var(--wallet-label);
-  text-align: center;
+  font-size: 1.9rem;
+  line-height: 2.4rem;
+  color: var(--main-dark-blue);
 }
 
 .displayWalletLastAccess {
-  height: 11px;
-  color: var(--button-text);
-  text-align: center;
-  font-size: 11px;
+  font-size: 1.3rem;
+  line-height: 1.6rem;
+  color: var(--main-dark-blue);
+  grid-column: 2/4;
 }
 
 .displayWalletCancelChanges {
@@ -132,50 +123,49 @@
   color: var(--wallet-desc);
 }
 
-.walletIcon.wallet {
-  background-image: var(--wallet-gray-icon);
+.close {
+  background-color: var(--disabled-color) !important;
+  color: var(--background-back-color) !important;
 }
 
-.walletIcon.selected {
-  background-image: var(--wallet-blue-icon);
+.gradient {
+  position: absolute;
+  height: 100%;
+  width: 0.7rem;
+  top: 0;
+  left: 0;
+  border-radius: 0.5rem 0 0 0.5rem;
 }
 
-.walletIcon.createnew {
-  margin-top: 25px;
-  background-size: 58px 58px;
-  background-position: 0px 5px;
-  background-image: var(--create-wallet-icon);
+.buttons {
+  position: absolute;
+  right: 0;
+  top: -5.5rem;
 }
 
-.walletIcon.restore {
-  margin-top: 25px;
-  background-size: 58px 58px;
-  background-position: 0px 5px;
-  background-image: var(--restore-wallet-icon);
+.buttons > button {
+  margin-left: 1rem;
 }
 
-.editWalletsButton {
-  margin: 5px;
-  float: left;
-  height: 36px;
-  width: 36px;
-  border-radius: 5px;
-  background-color: var(--background-back-color);
-  background-repeat: no-repeat;
-  background-size: 20px 20px;
-  background-position: 50% 50%;
-  background-image: var(--launcher-edit-wallets);
-  cursor: pointer;
+.largeButtonIcon {
+  height: 5.2rem !important;
+  width: auto !important;
 }
 
-.editWalletsButton:hover {
-  background-image: var(--launcher-edit-wallets-hover);
+.largeButtonIcon svg {
+  width: 2.1rem;
+  height: 2.1rem;
 }
 
-.editWalletsButton.close {
-  background-color: var(--disabled-color);
-  background-size: 12px 12px;
-  background-image: var(--x-white-icon);
+.largeButtonIcon span {
+  font-size: 1.9rem !important;
+  line-height: 2.4rem !important;
+  display: inline !important;
+  margin-left: 1.2rem !important;
+}
+
+.subtitle {
+  padding-top: 6rem;
 }
 
 @keyframes bounce {
@@ -200,6 +190,19 @@
 }
 
 @media (--sm-viewport) {
+  .container,
+  .displayWalletContainer {
+    width: 31.5rem;
+  }
+
+  .displayWalletContainer {
+    grid-template-columns: 1fr;
+  }
+
+  .largeButtonIcon span {
+    font-size: 1.9rem !important;
+  }
+
   .editWalletsButton {
     margin: 5px 0;
   }
diff --git a/app/components/views/GetStartedPage/WalletSelection/WalletSelection.jsx b/app/components/views/GetStartedPage/WalletSelection/WalletSelection.jsx
index 27c610b955..057808c2e4 100644
--- a/app/components/views/GetStartedPage/WalletSelection/WalletSelection.jsx
+++ b/app/components/views/GetStartedPage/WalletSelection/WalletSelection.jsx
@@ -1,8 +1,12 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback } from "react";
 import WalletSelectionForm from "./Form";
 import { useDaemonStartup } from "hooks";
 
-const WalletSelectionBody = ({ submitChosenWallet, onSendCreateWallet }) => {
+const WalletSelectionBody = ({
+  submitChosenWallet,
+  onSendCreateWallet,
+  onShowOnboardingTutorial
+}) => {
   const {
     isSPV,
     availableWallets,
@@ -11,12 +15,6 @@ const WalletSelectionBody = ({ submitChosenWallet, onSendCreateWallet }) => {
     creatingWallet
   } = useDaemonStartup();
   const [editWallets, setEditWallets] = useState(false);
-  const [selectedWallet, setSelectedWallet] = useState(null);
-
-  useEffect(() => {
-    setSelectedWallet(availableWallets[0]);
-  }, [availableWallets]);
-
   const onToggleEditWallet = useCallback(() => {
     setEditWallets(!editWallets);
   }, [editWallets]);
@@ -28,15 +26,9 @@ const WalletSelectionBody = ({ submitChosenWallet, onSendCreateWallet }) => {
     [onSendCreateWallet]
   );
 
-  const onChangeAvailableWallets = useCallback(
-    (selectedWallet) => setSelectedWallet(selectedWallet),
-    [setSelectedWallet]
-  );
-
   return (
     <WalletSelectionForm
       {...{
-        selectedWallet,
         submitChosenWallet,
         availableWallets,
         editWallets,
@@ -46,7 +38,7 @@ const WalletSelectionBody = ({ submitChosenWallet, onSendCreateWallet }) => {
         creatingWallet,
         onToggleEditWallet,
         showCreateWalletForm,
-        onChangeAvailableWallets
+        onShowOnboardingTutorial
       }}
     />
   );
diff --git a/app/components/views/GetStartedPage/helpers/ContentContainer/ContentContainer.module.css b/app/components/views/GetStartedPage/helpers/ContentContainer/ContentContainer.module.css
index 14177034ee..2ce5f2f3dc 100644
--- a/app/components/views/GetStartedPage/helpers/ContentContainer/ContentContainer.module.css
+++ b/app/components/views/GetStartedPage/helpers/ContentContainer/ContentContainer.module.css
@@ -1,9 +1,10 @@
 .contentContainer {
-  font-size: 27px;
-  line-height: 34px;
-  margin-bottom: 13px;
+  margin-bottom: 3rem;
   width: 100%;
-  float: left;
+  font-size: 2.8rem;
+  font-weight: 400;
+  line-height: 3.5rem;
+  color: var(--grey-7);
 }
 
 @media (--sm-viewport) {
diff --git a/app/components/views/GetStartedPage/helpers/Header/Header.jsx b/app/components/views/GetStartedPage/helpers/Header/Header.jsx
deleted file mode 100644
index 40771cba4c..0000000000
--- a/app/components/views/GetStartedPage/helpers/Header/Header.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import styles from "./Header.module.css";
-import ContentContainer from "../ContentContainer";
-import { SlateGrayButton } from "buttons";
-import { LearnBasicsMsg, WhatsNewLink, LoaderTitleMsg } from "../../messages";
-
-const Header = ({ appVersion, onShowTutorial, onShowReleaseNotes }) => (
-  <>
-    <ContentContainer>
-      <LoaderTitleMsg />
-    </ContentContainer>
-    <div className={styles.loaderButtons}>
-      <SlateGrayButton
-        onClick={onShowTutorial}
-        className={styles.tutorialButton}>
-        <LearnBasicsMsg />
-      </SlateGrayButton>
-      <WhatsNewLink {...{ onShowReleaseNotes, appVersion }} />
-    </div>
-  </>
-);
-export default Header;
diff --git a/app/components/views/GetStartedPage/helpers/Header/Header.module.css b/app/components/views/GetStartedPage/helpers/Header/Header.module.css
deleted file mode 100644
index 6c6a7b1562..0000000000
--- a/app/components/views/GetStartedPage/helpers/Header/Header.module.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.loaderButtons {
-  float: left;
-  margin-bottom: 90px;
-  width: 100%;
-}
-.tutorialButton {
-  background-color: var(--info-modal-button-bg);
-  color: var(--back-button-dark-text);
-}
-.tutorialButton:hover {
-  background-color: var(--title-text-and-button-background-hovered);
-}
-@media (--sm-viewport) {
-  .loaderButtons {
-    margin-bottom: 50px;
-  }
-}
diff --git a/app/components/views/GetStartedPage/helpers/Header/index.js b/app/components/views/GetStartedPage/helpers/Header/index.js
deleted file mode 100644
index 2764567d96..0000000000
--- a/app/components/views/GetStartedPage/helpers/Header/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Header";
diff --git a/app/components/views/GetStartedPage/helpers/LoaderBarContainer/LoaderBarContainer.jsx b/app/components/views/GetStartedPage/helpers/LoaderBarContainer/LoaderBarContainer.jsx
new file mode 100644
index 0000000000..63dd0d8b46
--- /dev/null
+++ b/app/components/views/GetStartedPage/helpers/LoaderBarContainer/LoaderBarContainer.jsx
@@ -0,0 +1,10 @@
+import styles from "./LoaderBarContainer.module.css";
+import { classNames } from "pi-ui";
+
+const LoaderBarContainer = ({ loaderBar, className }) => (
+  <div className={classNames(styles.loaderBarContainer, className)}>
+    <div className={styles.loaderBar}>{loaderBar}</div>
+  </div>
+);
+
+export default LoaderBarContainer;
diff --git a/app/components/views/GetStartedPage/helpers/LoaderBarContainer/LoaderBarContainer.module.css b/app/components/views/GetStartedPage/helpers/LoaderBarContainer/LoaderBarContainer.module.css
new file mode 100644
index 0000000000..942bdd8faf
--- /dev/null
+++ b/app/components/views/GetStartedPage/helpers/LoaderBarContainer/LoaderBarContainer.module.css
@@ -0,0 +1,8 @@
+.loaderBarContainer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.1);
+  z-index: 9999;
+}
diff --git a/app/components/views/GetStartedPage/helpers/LoaderBarContainer/index.js b/app/components/views/GetStartedPage/helpers/LoaderBarContainer/index.js
new file mode 100644
index 0000000000..c4269aef3e
--- /dev/null
+++ b/app/components/views/GetStartedPage/helpers/LoaderBarContainer/index.js
@@ -0,0 +1 @@
+export { default } from "./LoaderBarContainer";
diff --git a/app/components/views/GetStartedPage/helpers/index.js b/app/components/views/GetStartedPage/helpers/index.js
index 5b216269f3..fcaf596ce2 100644
--- a/app/components/views/GetStartedPage/helpers/index.js
+++ b/app/components/views/GetStartedPage/helpers/index.js
@@ -9,4 +9,4 @@ export { default as Content } from "./Content";
 export { default as Title } from "./Title";
 export { default as SubTitle } from "./SubTitle";
 export { default as ContentContainer } from "./ContentContainer";
-export { default as Header } from "./Header";
+export { default as LoaderBarContainer } from "./LoaderBarContainer";
diff --git a/app/components/views/GetStartedPage/hooks.js b/app/components/views/GetStartedPage/hooks.js
index becb79129a..f9870b9b00 100644
--- a/app/components/views/GetStartedPage/hooks.js
+++ b/app/components/views/GetStartedPage/hooks.js
@@ -8,10 +8,11 @@ import { createElement as h } from "react";
 import GetStartedMachinePage from "./GetStartedMachinePage";
 import TrezorConfig from "./TrezorConfig/TrezorConfig";
 import PreCreateWalletForm from "./PreCreateWallet/PreCreateWallet";
-import RescanWalletBody from "./RescanWallet/RescanWallet";
 import WalletPubpassInput from "./OpenWallet/OpenWallet";
 import DiscoverAccounts from "./OpenWallet/DiscoverAccounts";
 import ReleaseNotes from "./ReleaseNotes/ReleaseNotes";
+import OnboardingTutorialPage from "./OnboardingTutorialPage";
+import LoadingPage from "./LoadingPage";
 import {
   OPENWALLET_INPUT,
   OPENWALLET_INPUTPRIVPASS
@@ -21,9 +22,11 @@ import { useDaemonStartup } from "hooks";
 import { useMachine } from "@xstate/react";
 import { getStartedMachine } from "stateMachines/GetStartedStateMachine";
 import { AdvancedStartupBody } from "./AdvancedStartup/AdvancedStartup";
+import { TutorialPage } from "components/views/GetStartedPage";
 import styles from "./GetStarted.module.css";
 import { isObject } from "lodash";
 import { wallet } from "wallet-preload-shim";
+import { LoaderBarContainer } from "./helpers";
 
 export const useGetStarted = () => {
   const {
@@ -47,16 +50,25 @@ export const useGetStarted = () => {
     checkNetworkMatch,
     onConnectDaemon,
     onStartWallet,
+    onCloseWallet,
     syncDaemon,
     onOpenWallet,
-    onShowTutorial,
     appVersion,
     syncAttemptRequest,
     onGetDcrdLogs,
-    daemonWarning
+    daemonWarning,
+    checkDisplayWalletGradients,
+    setAutoWalletLaunching,
+    autoWalletLaunching
   } = useDaemonStartup();
   const [PageComponent, setPageComponent] = useState(null);
   const [showNavLinks, setShowNavLinks] = useState(true);
+  const [NavlinkComponent, setNavlinkComponent] = useState(null);
+  const [
+    nextStateAfterWalletLoading,
+    setNextStateAfterWalletLoading
+  ] = useState(null);
+
   const [state, send] = useMachine(getStartedMachine, {
     actions: {
       isAtPreStart: () => {
@@ -104,8 +116,8 @@ export const useGetStarted = () => {
           .catch((error) => {
             if (
               !error.connected &&
-              error.error.includes &&
-              error.error.includes("SSLV3_ALERT_HANDSHAKE_FAILURE")
+              error.error?.includes &&
+              error.error?.includes("SSLV3_ALERT_HANDSHAKE_FAILURE")
             ) {
               error = (
                 <T
@@ -143,7 +155,10 @@ export const useGetStarted = () => {
           return;
         }
         onGetAvailableWallets()
-          .then((w) => send({ type: "CHOOSE_WALLET", payload: { w } }))
+          .then((w) => {
+            checkDisplayWalletGradients(w.availableWallets);
+            send({ type: "CHOOSE_WALLET", payload: { w } });
+          })
           .catch((error) => send({ type: "AVAILABLE_WALLET_ERROR", error }));
 
         setShowNavLinks(true);
@@ -194,6 +209,7 @@ export const useGetStarted = () => {
           });
       },
       isSyncingRPC: async (context) => {
+        setNextStateAfterWalletLoading(null);
         const { passPhrase, isSPV } = context;
         if (syncAttemptRequest) {
           return;
@@ -202,17 +218,20 @@ export const useGetStarted = () => {
         // if synced, it means that the wallet is finished to sync and we can
         // push decrediton to home view.
         if (synced === true) {
-          send({ type: "SHOW_SETTING_UP_WALLET" });
+          setNextStateAfterWalletLoading({ type: "SHOW_SETTING_UP_WALLET" });
         }
         if (isSPV) {
           return startSPVSync(passPhrase)
-            .then(() => send({ type: "SHOW_SETTING_UP_WALLET" }))
+            .then(() => {
+              onNextStateAfterWalletLoading({ type: "SHOW_SETTING_UP_WALLET" });
+            })
             .catch((error) => {
               // If the error is OPENWALLET_INPUTPRIVPASS, the wallet needs the
               // private passphrase to discover accounts and the user typed a wrong
               // one.
               if (error == OPENWALLET_INPUTPRIVPASS) {
                 send({ type: "WALLET_DISCOVERACCOUNTS_PASS" });
+                return;
               }
               send({ type: "ERROR_SYNCING_WALLET", payload: { error } });
             });
@@ -225,15 +244,34 @@ export const useGetStarted = () => {
               send({ type: "WALLET_DISCOVERACCOUNTS_PASS" });
               return;
             }
+            if (error.includes("wallet is loaded")) {
+              onNextStateAfterWalletLoading({ type: "SHOW_SETTING_UP_WALLET" });
+              return;
+            }
             throw error;
           }
-          send({ type: "SHOW_SETTING_UP_WALLET" });
+          onNextStateAfterWalletLoading({ type: "SHOW_SETTING_UP_WALLET" });
         } catch (error) {
           send({ type: "ERROR_SYNCING_WALLET", payload: { error } });
         }
       }
     }
   });
+
+  const onNextStateAfterWalletLoading = useCallback(
+    (nextState) => {
+      if (autoWalletLaunching) {
+        send({
+          type: "SHOW_SETTING_UP_WALLET"
+        });
+        setNextStateAfterWalletLoading(null);
+      } else {
+        setNextStateAfterWalletLoading(nextState);
+      }
+    },
+    [setNextStateAfterWalletLoading, autoWalletLaunching, send]
+  );
+
   const getError = useCallback((serviceError) => {
     if (!serviceError) return;
 
@@ -350,6 +388,27 @@ export const useGetStarted = () => {
     [send]
   );
 
+  const onCancelLoadingWallet = useCallback(
+    () => onCloseWallet().then(() => send({ type: "CANCEL_SYNCING_WALLET" })),
+    [send, onCloseWallet]
+  );
+
+  const onContinueOpeningWallet = useCallback(() => {
+    const nextState = nextStateAfterWalletLoading ?? {
+      type: "SHOW_SETTING_UP_WALLET"
+    };
+    send(nextState);
+    setNextStateAfterWalletLoading(null);
+  }, [send, setNextStateAfterWalletLoading, nextStateAfterWalletLoading]);
+
+  const onSaveAndContinueOpeningWallet = useCallback(
+    (autoOpeningWallet) => {
+      setAutoWalletLaunching(autoOpeningWallet);
+      onContinueOpeningWallet();
+    },
+    [onContinueOpeningWallet, setAutoWalletLaunching]
+  );
+
   const onShowCreateWallet = useCallback(
     ({ isNew, walletMasterPubKey, isTrezor }) =>
       send({
@@ -361,9 +420,47 @@ export const useGetStarted = () => {
     [send]
   );
 
+  const onShowSettings = useCallback(
+    () =>
+      setNavlinkComponent(
+        h(Settings, { onSendBack: () => setNavlinkComponent(null) })
+      ),
+    [setNavlinkComponent]
+  );
+
+  const onShowLogs = useCallback(
+    () =>
+      setNavlinkComponent(
+        h(Logs, { onSendBack: () => setNavlinkComponent(null) })
+      ),
+    [setNavlinkComponent]
+  );
+
   const onShowReleaseNotes = useCallback(
-    () => send({ type: "SHOW_RELEASE_NOTES" }),
-    [send]
+    () =>
+      setNavlinkComponent(
+        h(ReleaseNotes, { onSendBack: () => setNavlinkComponent(null) })
+      ),
+    [setNavlinkComponent]
+  );
+
+  const onShowTutorial = useCallback(
+    () =>
+      setNavlinkComponent(
+        h(TutorialPage, { onSendBack: () => setNavlinkComponent(null) })
+      ),
+    [setNavlinkComponent]
+  );
+
+  const onShowOnboardingTutorial = useCallback(
+    (currentOnboardingTutorial) =>
+      setNavlinkComponent(
+        h(OnboardingTutorialPage, {
+          goBackHistory: () => setNavlinkComponent(null),
+          currentTutorial: currentOnboardingTutorial
+        })
+      ),
+    [setNavlinkComponent]
   );
 
   const submitChosenWallet = useCallback(
@@ -392,7 +489,7 @@ export const useGetStarted = () => {
   );
 
   const getStateComponent = useCallback(
-    (updatedText, updatedAnimationType, updatedComponent) => {
+    (updatedText, updatedAnimationType) => {
       const {
         isCreateNewWallet,
         isSPV,
@@ -402,6 +499,8 @@ export const useGetStarted = () => {
       let component, text, animationType, PageComponent;
 
       const key = Object.keys(state.value)[0];
+      const loaderBarContainer = LoaderBarContainer;
+      let showLoaderBar = true;
       if (key === "startMachine") {
         switch (state.value[key]) {
           case "startAdvancedDaemon":
@@ -414,17 +513,15 @@ export const useGetStarted = () => {
                 }}
               />
             );
-            text = (
-              <T
-                id="loaderBar.WaitingDaemon"
-                m="Waiting for daemon connection..."
-              />
-            );
+            showLoaderBar = false;
             break;
           case "connectingDaemon":
             text = (
-              <T id="loaderBar.WaitingConnection" m="connecting to daemon..." />
+              <T id="loaderBar.WaitingConnection" m="Connecting to daemon..." />
             );
+            component = h(LoadingPage, {
+              onShowOnboardingTutorial
+            });
             break;
           case "checkingNetworkMatch":
             text = (
@@ -433,39 +530,34 @@ export const useGetStarted = () => {
                 m="Checking if network matches..."
               />
             );
+            component = h(LoadingPage, {
+              onShowOnboardingTutorial
+            });
             break;
           case "startingDaemon":
             animationType = styles.daemonWaiting;
             text = <T id="loaderBar.StartingDaemon" m="Starting Daemon..." />;
+            component = h(LoadingPage, {
+              onShowOnboardingTutorial
+            });
             break;
           case "syncingDaemon":
             animationType = styles.blockchainSyncing;
             text = <T id="loaderBar.syncingDaemon" m="Syncing Daemon..." />;
+            component = h(LoadingPage, {
+              onShowOnboardingTutorial
+            });
             break;
           case "choosingWallet":
-            text = isSPV ? (
-              <T
-                id="loaderBar.choosingWalletSPV"
-                m="Choose a wallet to open in SPV mode"
-              />
-            ) : (
-              <T id="loaderBar.choosingWallet" m="Choose a wallet to open" />
-            );
+            showLoaderBar = false;
             component = h(WalletSelection, {
               onSendCreateWallet,
               submitChosenWallet,
-              isSPV
+              isSPV,
+              onShowOnboardingTutorial
             });
             break;
           case "preCreateWallet":
-            text = isCreateNewWallet ? (
-              <T id="loaderBar.preCreateWalletCreate" m="Create a wallet..." />
-            ) : (
-              <T
-                id="loaderBar.preCreateWalletRestore"
-                m="Restore a Wallet..."
-              />
-            );
             component = h(PreCreateWalletForm, {
               onShowCreateWallet,
               onSendContinue,
@@ -475,6 +567,7 @@ export const useGetStarted = () => {
               isCreateNewWallet,
               error
             });
+            showLoaderBar = false;
             break;
           case "walletPubpassInput":
             text = <T id="loaderBar.walletPubPass" m="Insert your pubkey" />;
@@ -500,23 +593,26 @@ export const useGetStarted = () => {
             break;
           case "startingWallet":
             text = <T id="loaderBar.startingWallet" m="Starting wallet..." />;
+            component = h(LoadingPage, {
+              onShowOnboardingTutorial
+            });
             break;
           case "syncingRPC":
             animationType = styles.establishingRpc;
             text = (
               <T id="loaderBar.syncingRPC" m="Syncing RPC connection..." />
             );
+            component = h(LoadingPage, {
+              onShowOnboardingTutorial
+            });
             break;
         }
+
         PageComponent = h(GetStartedMachinePage, {
           submitRemoteCredentials,
           submitAppdata,
           error,
           availableWalletsError,
-          isSPV,
-          onShowReleaseNotes,
-          onShowTutorial,
-          appVersion,
           onGetDcrdLogs,
           daemonWarning,
 
@@ -525,21 +621,19 @@ export const useGetStarted = () => {
           animationType: updatedAnimationType
             ? updatedAnimationType
             : animationType,
-          StateComponent: updatedComponent ? updatedComponent : component
+          StateComponent: NavlinkComponent ?? component,
+          loaderBarContainer,
+          showLoaderBar,
+          onCancelLoadingWallet,
+          onContinueOpeningWallet,
+          onSaveAndContinueOpeningWallet,
+          nextStateAfterWalletLoading
         });
       }
-      if (key === "settings") {
-        PageComponent = h(Settings, { onSendBack });
-      }
-      if (key === "logs") {
-        PageComponent = h(Logs, { onSendBack });
-      }
+
       if (key === "trezorConfig") {
         PageComponent = h(TrezorConfig, { onSendBack });
       }
-      if (key === "releaseNotes") {
-        PageComponent = h(ReleaseNotes, { onSendBack });
-      }
       if (key === "creatingWallet") {
         PageComponent = h(CreateWalletMachine, {
           createWalletRef,
@@ -552,7 +646,11 @@ export const useGetStarted = () => {
           settingUpWalletRef,
           appVersion,
           onShowTutorial,
-          onShowReleaseNotes
+          onShowReleaseNotes,
+          NavlinkComponent: NavlinkComponent,
+          LoadingPageComponent: h(LoadingPage, {
+            onShowOnboardingTutorial
+          })
         });
       }
 
@@ -579,13 +677,19 @@ export const useGetStarted = () => {
       onSendSetPassphrase,
       error,
       availableWalletsError,
-      daemonWarning
+      daemonWarning,
+      onShowOnboardingTutorial,
+      NavlinkComponent,
+      nextStateAfterWalletLoading,
+      onCancelLoadingWallet,
+      onContinueOpeningWallet,
+      onSaveAndContinueOpeningWallet
     ]
   );
 
   const machineStateValue = state && state.value;
   useEffect(() => {
-    let text, animationType, component;
+    let text, animationType;
     if (syncFetchMissingCfiltersAttempt) {
       animationType = styles.daemonWaiting;
       text = (
@@ -618,7 +722,6 @@ export const useGetStarted = () => {
           m="Scanning blocks for transactions"
         />
       );
-      component = RescanWalletBody;
     } else if (synced) {
       animationType = styles.finalizingSetup;
       text = (
@@ -628,7 +731,7 @@ export const useGetStarted = () => {
         />
       );
     }
-    getStateComponent(text, animationType, component);
+    getStateComponent(text, animationType);
   }, [
     syncFetchMissingCfiltersAttempt,
     syncFetchHeadersAttempt,
@@ -639,18 +742,14 @@ export const useGetStarted = () => {
     machineStateValue
   ]);
 
-  const onShowSettings = useCallback(() => send({ type: "SHOW_SETTINGS" }), [
-    send
-  ]);
-
-  const onShowLogs = useCallback(() => send({ type: "SHOW_LOGS" }), [send]);
-
   return {
     onShowLogs,
     onShowSettings,
     updateAvailable,
     isTestNet,
     PageComponent,
-    showNavLinks
+    showNavLinks,
+    onShowTutorial,
+    onShowReleaseNotes
   };
 };
diff --git a/app/components/views/GetStartedPage/messages/messages.jsx b/app/components/views/GetStartedPage/messages/messages.jsx
index 2d190d9a09..df9a250106 100644
--- a/app/components/views/GetStartedPage/messages/messages.jsx
+++ b/app/components/views/GetStartedPage/messages/messages.jsx
@@ -24,7 +24,10 @@ export const DiscoverLabelMsg = () => (
   <T id="getStarted.discover.label" m="Scan for accounts" />
 );
 export const LoaderTitleMsg = () => (
-  <T id="loader.title" m={"Welcome to Decrediton Wallet"} />
+  <T id="loader.title" m={"Welcome To Decrediton"} />
+);
+export const LoaderTitleMsgChooseTheWalletToAccess = () => (
+  <T id="loader.title.chooseTheWallet" m={"Choose The Wallet To Access"} />
 );
 export const DiscoverAccountsInfoMsg = () => (
   <T
@@ -42,11 +45,8 @@ export const ScanBtnMsg = () => (
 export const LearnBasicsMsg = () => (
   <T id="getStarted.learnBasics" m="Learn the Basics" />
 );
-export const NewSeedTabMsg = () => (
-  <T id="getStarted.newSeedTab" m="Create a New Wallet" />
-);
-export const RestoreTabMsg = () => (
-  <T id="getStarted.restore" m="Restore Existing Wallet" />
+export const ReleaseInfoMsg = () => (
+  <T id="getStarted.releaseInfo" m="Release Info" />
 );
 export const CreateWalletMsg = () => (
   <T id="createWallet.createWalletBtn" m="Create Wallet" />
@@ -68,6 +68,66 @@ export const messages = defineMessages({
   confirmSeedEnterAllWordsError: {
     id: "getStarted.confirmSeed.enterAllWords",
     defaultMessage: "*Please enter all words"
+  },
+  newSeedTabMsg: {
+    id: "getStarted.newSeedTab",
+    defaultMessage: "Create a New Wallet"
+  },
+  restoreTabMsg: {
+    id: "getStarted.restore",
+    defaultMessage: "Restore Existing Wallet"
+  },
+  trezorTabMsg: {
+    id: "getStarted.trezor",
+    defaultMessage: "Setup a Trezor Wallet"
+  },
+  closeEditWallets: {
+    id: "getStarted.closeEditWallets",
+    defaultMessage: "Close"
+  },
+  editWallets: {
+    id: "getStarted.editWallets",
+    defaultMessage: "Edit Wallets"
+  },
+  messageWalletNamePlaceholder: {
+    id: "createwallet.walletname.placehlder",
+    defaultMessage: "Choose a Name"
+  },
+  messageWalletNameTooltip: {
+    id: "createwallet.walletname.tooltip",
+    defaultMessage:
+      "The name is used to identify your wallet. Restoring a wallet does not require the name to match the previous wallet name."
+  },
+  messageWalletWatchOnlyDescription: {
+    id: "createwallet.watchonly.description",
+    defaultMessage:
+      "A watch-only wallet has limited functionality. It can only be used to view the balance and monitor transaction history. You won't be able to spend any DCR associated with this wallet."
+  },
+  messageWalletTrezorDescription: {
+    id: "createwallet.trezor.description",
+    defaultMessage:
+      "Trezor is a hardware wallet. For more information, visit {link}"
+  },
+  messageWalletMasterPubKey: {
+    id: "createwallet.walletpubkey.placeholder",
+    defaultMessage: "Master Pub Key"
+  },
+  messageWalletMasterPubkeyError: {
+    id: "createwallet.walletWatchOnly.error",
+    defaultMessage: "Invalid Master Pubkey"
+  },
+  messageWalletDupeNameError: {
+    id: "createwallet.dupeWalletName.error",
+    defaultMessage: "Please choose an unused wallet name"
+  },
+  messageDisablecointypeupgrades: {
+    id: "createwallet.disablecointypeupgrades.description",
+    defaultMessage: "Never upgrade from legacy to SLIP0044 coin type keys"
+  },
+  messageGapLimit: {
+    id: "createwallet.gaplimit.description",
+    defaultMessage:
+      "Allowed unused address gap between used addresses of accounts"
   }
 });
 
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.jsx b/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.jsx
index 07b6292174..cd39353c2a 100644
--- a/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.jsx
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.jsx
@@ -2,6 +2,7 @@ import { FormattedMessage as T } from "react-intl";
 import UISettings from "./UISettings";
 import MiscSettings from "./MiscSettings";
 import TimezoneSettings from "./TimezoneSettings";
+import LauncherSettings from "./LauncherSettings";
 import { Subtitle } from "shared";
 import styles from "./GeneralSettings.module.css";
 import { Wrapper, Group } from "../helpers";
@@ -19,6 +20,15 @@ const GeneralSettings = ({
   timezoneBoxClassName
 }) => (
   <Wrapper className={classNames(styles.wrapper, wrapperClassName)}>
+    <Group>
+      <Subtitle
+        className={styles.subtitle}
+        title={
+          <T id="settings.getstartpage.group-title.launcher" m="Launcher" />
+        }
+      />
+      <LauncherSettings {...{ tempSettings, onChangeTempSettings }} />
+    </Group>
     <Group>
       <Subtitle
         className={styles.subtitle}
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/LauncherSettings/LauncherSettings.jsx b/app/components/views/SettingsPage/GeneralSettingsTab/LauncherSettings/LauncherSettings.jsx
new file mode 100644
index 0000000000..73477687a0
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/LauncherSettings/LauncherSettings.jsx
@@ -0,0 +1,36 @@
+import { FormattedMessage as T } from "react-intl";
+import { Checkbox } from "pi-ui";
+import styles from "./LauncherSettings.module.css";
+import { Box } from "../../helpers";
+
+const LauncherSettings = ({ tempSettings, onChangeTempSettings }) => {
+  return (
+    <Box>
+      <Checkbox
+        label={
+          <T
+            id="launcherSettings.checkboxLabel"
+            m="Launch wallet immediately after loading completes"
+          />
+        }
+        id="autostart"
+        description={
+          <T id="launcherSettings.checkboxDesc" m="Open wallet automatically" />
+        }
+        checked={tempSettings.autoWalletLaunching}
+        className={styles.checkbox}
+        onChange={() =>
+          onChangeTempSettings({
+            autoWalletLaunching: !tempSettings.autoWalletLaunching
+          })
+        }
+      />
+    </Box>
+  );
+};
+
+LauncherSettings.propTypes = {
+  tempSettings: PropTypes.object.isRequired,
+  onChangeTempSettings: PropTypes.func.isRequired
+};
+export default LauncherSettings;
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/LauncherSettings/LauncherSettings.module.css b/app/components/views/SettingsPage/GeneralSettingsTab/LauncherSettings/LauncherSettings.module.css
new file mode 100644
index 0000000000..1c3008be20
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/LauncherSettings/LauncherSettings.module.css
@@ -0,0 +1,10 @@
+.checkbox > span:first-of-type {
+  margin: 0;
+  padding-left: 0.8rem;
+}
+
+.checkbox > span:last-of-type {
+  font-size: 1.6rem;
+  line-height: 2rem;
+  margin-left: 1rem;
+}
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/LauncherSettings/index.js b/app/components/views/SettingsPage/GeneralSettingsTab/LauncherSettings/index.js
new file mode 100644
index 0000000000..17be3e1536
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/LauncherSettings/index.js
@@ -0,0 +1 @@
+export { default } from "./LauncherSettings";
diff --git a/app/components/views/SettingsPage/TutorialsTab/TutorialsTab.jsx b/app/components/views/SettingsPage/TutorialsTab/TutorialsTab.jsx
index 8991d6b254..664d96a396 100644
--- a/app/components/views/SettingsPage/TutorialsTab/TutorialsTab.jsx
+++ b/app/components/views/SettingsPage/TutorialsTab/TutorialsTab.jsx
@@ -2,6 +2,7 @@ import { FormattedMessage as T } from "react-intl";
 import { Subtitle } from "shared";
 import { TutorialOverview, TutorialPage, tutorials } from "./helpers";
 import { useTutorialsTab } from "./hooks";
+import styles from "./TutorialsTab.module.css";
 
 const TutorialsTab = () => {
   const {
@@ -35,7 +36,7 @@ const TutorialsTab = () => {
       }}
     />
   ) : (
-    <>
+    <div className={styles.container}>
       <Subtitle
         title={<T id="tutorials.learnAboutDecred" m="Learn about decred" />}
       />
@@ -62,7 +63,7 @@ const TutorialsTab = () => {
           }}
         />
       ))}
-    </>
+    </div>
   );
 };
 
diff --git a/app/components/views/SettingsPage/TutorialsTab/TutorialsTab.module.css b/app/components/views/SettingsPage/TutorialsTab/TutorialsTab.module.css
new file mode 100644
index 0000000000..bbb2d4fdc5
--- /dev/null
+++ b/app/components/views/SettingsPage/TutorialsTab/TutorialsTab.module.css
@@ -0,0 +1,15 @@
+.container {
+  width: 72.4rem;
+}
+
+@media screen and (max-width: 1180px) {
+  .container {
+    width: 63.4rem;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .container {
+    width: 31.5rem;
+  }
+}
diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/PagedTutorial.jsx b/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/PagedTutorial.jsx
index c40e7a3709..eeb5b2e64d 100644
--- a/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/PagedTutorial.jsx
+++ b/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/PagedTutorial.jsx
@@ -13,6 +13,8 @@ const PagedTutorial = ({
   setVisitedTabs,
   activeTabIndex,
   setActiveTabIndex,
+  className,
+  tabContentWrapperClassName,
   onFinish
 }) => {
   useMountEffect(() => {
@@ -65,7 +67,7 @@ const PagedTutorial = ({
   const spaceEvenly = slides.length < 4;
 
   return (
-    <div className={styles.tabsContainer}>
+    <div className={classNames(styles.tabsContainer, className)}>
       <button
         aria-label="Previous"
         className={classNames(
@@ -96,7 +98,11 @@ const PagedTutorial = ({
             }
             className={styles.tab}>
             <div className={styles.tabContent}>
-              <div className={styles.tabContentWrapper}>
+              <div
+                className={classNames(
+                  styles.tabContentWrapper,
+                  tabContentWrapperClassName
+                )}>
                 <div className={styles.stepIndicator}>{`${parseInt(i) + 1}/${
                   slides.length
                 }`}</div>
@@ -152,6 +158,8 @@ PagedTutorial.propTypes = {
   setVisitedTabs: PropTypes.func.isRequired,
   activeTabIndex: PropTypes.number,
   setActiveTabIndex: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  tabContentWrapperClassName: PropTypes.string,
   onFinish: PropTypes.func
 };
 
diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.jsx b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.jsx
index a567573b75..6165763663 100644
--- a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.jsx
+++ b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.jsx
@@ -6,30 +6,38 @@ const TutorialCard = ({
   tutorials,
   visitedTabs,
   activeTabIndex,
+  showProgressBar,
   className
 }) => (
-  <div className={classNames(styles.overview, className)}>
+  <div
+    className={classNames(
+      styles.overview,
+      !showProgressBar && styles.small,
+      className
+    )}>
     <div className={styles.row}>
       <div>
         <div className={styles.title}>{tutorials[name].title}</div>
-        <div className={styles.progressBarContainer}>
-          <div className={styles.progressBar}>
-            {tutorials[name].slides.map((_, index) => (
-              <div
-                key={index + Math.random()}
-                className={classNames(
-                  index === activeTabIndex &&
-                    index < tutorials[name].slides.length - 1 &&
-                    styles.active,
-                  visitedTabs.includes(index) && styles.checked
-                )}
-              />
-            ))}
+        {showProgressBar && (
+          <div className={styles.progressBarContainer}>
+            <div className={styles.progressBar}>
+              {tutorials[name].slides.map((_, index) => (
+                <div
+                  key={index + Math.random()}
+                  className={classNames(
+                    index === activeTabIndex &&
+                      index < tutorials[name].slides.length - 1 &&
+                      styles.active,
+                    visitedTabs.includes(index) && styles.checked
+                  )}
+                />
+              ))}
+            </div>
+            <div className={styles.stepIndicator}>{`${
+              parseInt(activeTabIndex ?? 0) + 1
+            }/${tutorials[name].slides.length}`}</div>
           </div>
-          <div className={styles.stepIndicator}>{`${
-            parseInt(activeTabIndex ?? 0) + 1
-          }/${tutorials[name].slides.length}`}</div>
-        </div>
+        )}
         <div className={styles.desc}>{tutorials[name].desc}</div>
       </div>
       <div
@@ -47,11 +55,13 @@ TutorialCard.propTypes = {
   tutorials: PropTypes.object.isRequired,
   visitedTabs: PropTypes.array,
   activeTabIndex: PropTypes.number,
+  showProgressBar: PropTypes.bool,
   className: PropTypes.string
 };
 
 TutorialCard.defaultProps = {
-  visitedTabs: []
+  visitedTabs: [],
+  showProgressBar: true
 };
 
 export default TutorialCard;
diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.module.css b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.module.css
index 2d05614a96..737b91f84e 100644
--- a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.module.css
+++ b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.module.css
@@ -1,9 +1,13 @@
 .overview {
   background-color: var(--background-back-color);
-  width: 72.4rem;
+  width: 100%;
   padding: 2rem;
 }
 
+.overview.small {
+  padding: 1rem 2rem 1rem 1.5rem;
+}
+
 .row {
   display: flex;
   justify-content: space-between;
@@ -16,12 +20,23 @@
   color: var(--main-dark-blue);
 }
 
+.overview.small .title {
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 2.2rem;
+}
+
 .desc {
   font-size: 1.6rem;
   line-height: 2rem;
   color: var(--grey-5);
 }
 
+.overview.small .desc {
+  font-size: 1.3rem;
+  line-height: 1.6rem;
+}
+
 .progressBarContainer {
   display: flex;
   align-items: center;
@@ -90,6 +105,12 @@
   background-position: center;
 }
 
+.overview.small .thumbnail {
+  width: 4.6rem;
+  height: 4.6rem;
+  min-width: 4.6rem;
+}
+
 .decredIntroThumb {
   background-image: var(--tutorial-decredIntro-thumb);
 }
@@ -126,15 +147,8 @@
   background-image: var(--tutorial-lifecycle-thumb);
 }
 
-@media (--bg-viewport) {
-  .overview {
-    width: 63.4rem;
-  }
-}
-
 @media (--sm-viewport) {
   .overview {
-    width: 31.5rem;
     padding: 10px !important;
   }
 
@@ -142,7 +156,7 @@
     flex-direction: column;
   }
 
-  .image {
+  .thumbnail {
     display: none;
   }
 }
diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialOverview/TutorialOverview.jsx b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialOverview/TutorialOverview.jsx
index 9cb7d01139..1b804ffd11 100644
--- a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialOverview/TutorialOverview.jsx
+++ b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialOverview/TutorialOverview.jsx
@@ -7,17 +7,22 @@ const TutorialOverview = ({
   tutorials,
   visitedTabs,
   activeTabIndex,
-  viewTutorialHandler
+  viewTutorialHandler,
+  showProgressBar
 }) => (
   <div
     onClick={() => viewTutorialHandler(name)}
-    className={classNames(styles.cardWrapper)}>
+    className={classNames(
+      styles.cardWrapper,
+      !showProgressBar && styles.small
+    )}>
     <TutorialCard
       {...{
         name,
         tutorials,
         visitedTabs,
         activeTabIndex,
+        showProgressBar,
         className: styles.overview
       }}
     />
@@ -32,7 +37,8 @@ TutorialOverview.propTypes = {
   tutorials: PropTypes.object.isRequired,
   visitedTabs: PropTypes.array,
   activeTabIndex: PropTypes.number,
-  viewTutorialHandler: PropTypes.func.isRequired
+  viewTutorialHandler: PropTypes.func.isRequired,
+  showProgressBar: PropTypes.bool
 };
 
 export default TutorialOverview;
diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialOverview/TutorialOverview.module.css b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialOverview/TutorialOverview.module.css
index e0d5920d04..828fde88e4 100644
--- a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialOverview/TutorialOverview.module.css
+++ b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialOverview/TutorialOverview.module.css
@@ -4,6 +4,10 @@
   margin-bottom: 0.5rem;
 }
 
+.cardWrapper.small {
+  margin-bottom: 0.1rem;
+}
+
 .cardWrapper:hover {
   filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.16));
 }
@@ -36,3 +40,7 @@
 .overview {
   padding-left: 4rem !important;
 }
+
+.cardWrapper.small .overview {
+  padding-left: 1.5rem !important;
+}
diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialPage/TutorialPage.jsx b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialPage/TutorialPage.jsx
index 99fe8ecc9a..be901cc98f 100644
--- a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialPage/TutorialPage.jsx
+++ b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialPage/TutorialPage.jsx
@@ -1,4 +1,5 @@
-import { classNames } from "pi-ui";
+import { FormattedMessage as T } from "react-intl";
+import { classNames, Tooltip } from "pi-ui";
 import styles from "./TutorialPage.module.css";
 import TutorialCard from "../TutorialCard";
 import PagedTutorial from "../PagedTutorial";
@@ -10,16 +11,22 @@ const TutorialPage = ({
   visitedTabs,
   setVisitedTabs,
   activeTabIndex,
-  setActiveTabIndex
+  setActiveTabIndex,
+  pagedTutorialClassname,
+  tabContentWrapperClassName
 }) => {
   return (
     <div>
       <div className={classNames(styles.cardWrapper)}>
-        <div
-          className={classNames(styles.backButton, "flex-centralize")}
-          onClick={goBackHistory}>
-          <div className={styles.backArrow}></div>
-        </div>
+        <Tooltip
+          content={<T id="tutorialpage.back" m="Back" />}
+          className={styles.backTooltip}>
+          <div
+            onClick={goBackHistory}
+            className={classNames(styles.backButton, "flex-centralize")}>
+            <div className={styles.backArrow}></div>
+          </div>
+        </Tooltip>
         <TutorialCard
           {...{
             name,
@@ -36,6 +43,8 @@ const TutorialPage = ({
           slides: tutorials[name].slides,
           activeTabIndex,
           setActiveTabIndex,
+          className: pagedTutorialClassname,
+          tabContentWrapperClassName,
           onFinish: goBackHistory
         }}
       />
@@ -50,7 +59,9 @@ TutorialPage.propTypes = {
   visitedTabs: PropTypes.array,
   setVisitedTabs: PropTypes.func.isRequired,
   activeTabIndex: PropTypes.number,
-  setActiveTabIndex: PropTypes.func.isRequired
+  setActiveTabIndex: PropTypes.func.isRequired,
+  pagedTutorialClassname: PropTypes.string,
+  tabContentWrapperClassName: PropTypes.string
 };
 
 export default TutorialPage;
diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialPage/TutorialPage.module.css b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialPage/TutorialPage.module.css
index eea55b9f86..c62888c888 100644
--- a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialPage/TutorialPage.module.css
+++ b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialPage/TutorialPage.module.css
@@ -3,10 +3,14 @@
   margin-bottom: 0.5rem;
 }
 
+.backTooltip {
+  display: flex !important;
+}
+
 .backButton {
   width: 4rem;
-  background-color: var(--governance-nav-button-bg);
   cursor: pointer;
+  background-color: var(--governance-nav-button-bg);
 }
 
 .backButton:hover {
@@ -17,7 +21,7 @@
   height: 1rem;
   width: 1rem;
   background-image: var(--menu-arrow-up);
-  background-position: 50% 5px;
+  background-position: 50% 0.4rem;
   background-repeat: no-repeat;
   transform: rotate(-90deg);
 }
diff --git a/app/components/views/WalletError/WalletError.jsx b/app/components/views/WalletError/WalletError.jsx
index 86c0590933..e7853abe08 100644
--- a/app/components/views/WalletError/WalletError.jsx
+++ b/app/components/views/WalletError/WalletError.jsx
@@ -4,8 +4,8 @@ import styles from "./WalletError.module.css";
 const WalletError = () => {
   const { getNetworkError } = useWalletError();
   return (
-    <div style={styles.view}>
-      <div style={styles.content}>
+    <div className={styles.view}>
+      <div className={styles.content}>
         {getNetworkError ? (
           <p>
             {getNetworkError} Please verify that your dcrd is configured
@@ -13,9 +13,8 @@ const WalletError = () => {
           </p>
         ) : (
           <p>
-            {" "}
             We have detected that your wallet has disconnected. Please reload
-            Decrediton to fix this problem.{" "}
+            Decrediton to fix this problem.
           </p>
         )}
       </div>
diff --git a/app/constants/config.js b/app/constants/config.js
index b4960d0c0e..ee5d66fbd2 100644
--- a/app/constants/config.js
+++ b/app/constants/config.js
@@ -25,6 +25,7 @@ export const DISABLE_HARDWARE_ACCEL = "disable_hardware_accel";
 export const LN_ENABLED = "ln_enabled";
 export const TREZOR_DEBUG = "trezor_debug";
 export const UPGD_ELECTRON8 = "is_electron8";
+export const AUTO_WALLET_LAUNCHING = "auto_wallet_launching";
 
 // advanced daemon configs
 export const RPCUSER = "rpc_user";
@@ -93,6 +94,7 @@ export const ASK_DEX_BTC_SPV = "ask_dex_use_btc_spv";
 export const CONFIRM_DEX_SEED = "confirm_dex_seed";
 export const WALLET_CREATED_AS_NEW = "wallet_created_as_new";
 export const SHOW_STAKING_WARNING = "show_staking_warning";
+export const DISPLAY_WALLET_GRADIENT = "display_wallet_gradient";
 
 export const WALLET_INITIAL_VALUE = {
   [ENABLE_TICKET_BUYER]: false,
@@ -170,5 +172,6 @@ export const INITIAL_VALUES = {
   [TREZOR_DEBUG]: false,
   [DISABLE_HARDWARE_ACCEL]: false,
   [LN_ENABLED]: false,
-  [UPGD_ELECTRON8]: false
+  [UPGD_ELECTRON8]: false,
+  [AUTO_WALLET_LAUNCHING]: false
 };
diff --git a/app/helpers/displayWalletGradients.js b/app/helpers/displayWalletGradients.js
new file mode 100644
index 0000000000..8f12aeff2e
--- /dev/null
+++ b/app/helpers/displayWalletGradients.js
@@ -0,0 +1,13 @@
+export const preDefinedGradients = [
+  "linear-gradient(180deg, #3871f6 0%, #9b68e8 11.87%, #d15fd2 23.73%, #f45db8 35.6%, #ff669d 47.47%, #ff7785 59.34%, #ff8d71 71.2%, #ffa565 83.07%, #ffbc63 94.94%)",
+  "linear-gradient(180deg, #d45941 0%, #dc673f 10.55%, #e3763d 21.1%, #e9843c 31.65%, #ee933b 42.19%, #f2a23c 52.74%, #f4b23e 63.29%, #f5c142 73.84%, #f5d048 84.39%), #f4e051 94.94%",
+  "linear-gradient(180deg, #69d5a6 0%, #00cbf0 31.65%, #00aaff 63.29%, #df53f7 94.94%)",
+  "linear-gradient(180deg, #1239FE 0%, #0052FF 5.93%, #0066FF 11.87%, #0077FF 17.8%, #0086FF 23.73%, #0093FF 29.67%, #00A0FF 35.6%, #00ACFF 41.53%, #00B7FF 47.47%, #00C2FF 53.4%, #00CCF0 59.34%, #00D6DF 65.27%, #00DFCF 71.2%, #00E8BE 77.14%, #00F0AE 83.07%, #00F8A0 89%, #19FF94 94.94%)",
+  "linear-gradient(360deg, #FE2BD4 3.8%, #FF1ABC 9.81%, #FF1AA3 15.82%, #FF2D8A 21.84%, #FF4472 27.85%, #FF5B5B 33.86%, #FF7145 39.87%, #FF862E 45.89%, #FF9911 51.9%, #F8AB00 57.91%, #E5BB00 63.92%, #D1C900 69.94%, #BAD710 75.95%, #A0E236 81.96%, #83ED55 87.97%, #5EF674 93.99%, #19FF94 100%)",
+  "linear-gradient(180deg, #000878 0%, #001D89 5.93%, #002E99 11.87%, #003DA7 17.8%, #004DB4 23.73%, #005CC0 29.67%, #006BCA 35.6%, #007AD2 41.53%, #0089DA 47.47%, #0098E0 53.4%, #00A7E5 59.34%, #00B6EA 65.27%, #00C4ED 71.2%, #00D3F0 77.14%, #00E2F3 83.07%, #00F1F6 89%, #33FFF8 94.94%)",
+  "linear-gradient(180deg, rgba(254, 53, 247, 0.66) 0%, rgba(252, 58, 249, 0.663266) 5.66%, rgba(245, 71, 255, 0.67294) 11.31%, rgba(234, 88, 255, 0.68865) 16.97%, rgba(217, 106, 255, 0.709792) 22.63%, rgba(195, 124, 255, 0.735553) 28.28%, rgba(169, 141, 255, 0.764944) 33.94%, rgba(139, 157, 255, 0.796835) 39.6%, rgba(107, 170, 255, 0.83) 45.25%, rgba(76, 182, 255, 0.863165) 50.91%, rgba(47, 191, 255, 0.895056) 56.57%, rgba(31, 198, 255, 0.924447) 62.22%, rgba(35, 203, 255, 0.950208) 67.88%, rgba(49, 207, 255, 0.97135) 73.54%, rgba(61, 210, 255, 0.98706) 79.19%, rgba(68, 212, 255, 0.996733) 84.85%)",
+  "linear-gradient(180deg, #0AFF1B 0%, #18FF1A 6.01%, #2EFF15 12.03%, #45FF0D 18.04%, #5AFF00 24.05%, #6EFF00 30.06%, #82FF00 36.08%, #94FF00 42.09%, #A5FF00 48.1%, #B5FF00 54.11%, #C4FF00 60.13%, #D0FF00 66.14%, #DBFF00 72.15%, #E3FF00 78.16%, #E9FF00 84.18%, #EDFF01 90.19%, #EEFF03 96.2%)",
+  "linear-gradient(180deg, #A71CBD 0%, #C200B5 5.85%, #DA00AA 11.71%, #EF009E 17.56%, #FF0091 23.42%, #FF0083 29.27%, #FF2975 35.13%, #FF4466 40.98%, #FF5C57 46.84%, #FF7347 52.69%, #FF8937 58.54%, #FF9E23 64.4%, #FFB303 70.25%, #FFC700 76.11%, #FFDA00 81.96%, #FEED00 87.82%, #EEFF03 93.67%)",
+  "linear-gradient(180deg, #FFDD00 0%, #FADE00 5.97%, #EAE000 11.95%, #D1E30F 17.92%, #ADE52A 23.89%, #7FE647 29.87%, #34E468 35.84%, #00E08C 41.81%, #00D9AF 47.78%, #00D0CF 53.76%, #00C6E9 59.73%, #00BCF9 65.7%, #00B1FF 71.68%, #00A8FF 77.65%, #00A0FF 83.62%, #009CFF 89.6%, #039AFF 95.57%)",
+  "linear-gradient(180deg, #BBD2C5 0%, #536976 46.84%, #292E49 93.67%)"
+];
diff --git a/app/helpers/index.js b/app/helpers/index.js
index d0e8fc08b3..473af5d97e 100644
--- a/app/helpers/index.js
+++ b/app/helpers/index.js
@@ -10,6 +10,7 @@ export * from "./msgTx";
 export * from "./politeia";
 export * from "./scripts";
 export * from "./tickets";
+export * from "./displayWalletGradients";
 
 // kidCheck takes a component and returns a component that only renders if it
 // has children.
diff --git a/app/hooks/useDaemonStartup.js b/app/hooks/useDaemonStartup.js
index 7edc7072db..dcb642ba41 100644
--- a/app/hooks/useDaemonStartup.js
+++ b/app/hooks/useDaemonStartup.js
@@ -71,6 +71,9 @@ const useDaemonStartup = () => {
   );
   const syncFetchHeadersAttempt = useSelector(sel.syncFetchHeadersAttempt);
   const syncFetchHeadersCount = useSelector(sel.syncFetchHeadersCount);
+  const syncFetchHeadersFirstHeaderTime = useSelector(
+    sel.syncFetchHeadersFirstHeaderTime
+  );
   const syncFetchHeadersLastHeaderTime = useSelector(
     sel.syncFetchHeadersLastHeaderTime
   );
@@ -81,6 +84,8 @@ const useDaemonStartup = () => {
   const syncFetchHeadersComplete = useSelector(sel.syncFetchHeadersComplete);
   const syncFetchTimeStart = useSelector(sel.syncFetchTimeStart);
   const selectedWalletSelector = useSelector(sel.getSelectedWallet);
+  const startWalletServiceAttempt = useSelector(sel.startWalletServiceAttempt);
+  const autoWalletLaunching = useSelector(sel.autoWalletLaunching);
 
   // general methods
   // Methods for showing positions when first starting decrediton
@@ -174,6 +179,9 @@ const useDaemonStartup = () => {
     (selectedWallet) => dispatch(da.startWallet(selectedWallet)),
     [dispatch]
   );
+  const onCloseWallet = useCallback(() => dispatch(wla.closeWalletRequest()), [
+    dispatch
+  ]);
   const onRemoveWallet = useCallback(
     (selectedWallet) => dispatch(da.removeWallet(selectedWallet)),
     [dispatch]
@@ -233,6 +241,23 @@ const useDaemonStartup = () => {
     [dispatch]
   );
 
+  const stopUnfinishedWallet = useCallback(
+    () => dispatch(wla.stopUnfinishedWallet()),
+    [dispatch]
+  );
+
+  const checkDisplayWalletGradients = useCallback(
+    (availableWallets) =>
+      dispatch(da.checkDisplayWalletGradients(availableWallets)),
+    [dispatch]
+  );
+
+  const setAutoWalletLaunching = useCallback(
+    (autoWalletLaunching) =>
+      dispatch(wla.setAutoWalletLaunching(autoWalletLaunching)),
+    [dispatch]
+  );
+
   return {
     onShowTutorial,
     validateMasterPubKey,
@@ -246,6 +271,7 @@ const useDaemonStartup = () => {
     goToErrorPage,
     onRemoveWallet,
     onStartWallet,
+    onCloseWallet,
     onGetAvailableWallets,
     syncDaemon,
     checkNetworkMatch,
@@ -293,12 +319,15 @@ const useDaemonStartup = () => {
     syncFetchMissingCfiltersEnd,
     syncFetchHeadersAttempt,
     syncFetchHeadersCount,
+    syncFetchHeadersFirstHeaderTime,
     syncFetchHeadersLastHeaderTime,
     syncDiscoverAddressesAttempt,
     syncRescanAttempt,
     syncFetchHeadersComplete,
     syncFetchTimeStart,
     selectedWalletSelector,
+    startWalletServiceAttempt,
+    autoWalletLaunching,
     goToHome,
     setCoinjoinCfg,
     onGetDcrdLogs,
@@ -311,7 +340,10 @@ const useDaemonStartup = () => {
     isProcessingManaged,
     isProcessingUnmanaged,
     needsProcessManagedTickets,
-    isSettingAccountsPassphrase
+    stopUnfinishedWallet,
+    isSettingAccountsPassphrase,
+    checkDisplayWalletGradients,
+    setAutoWalletLaunching
   };
 };
 
diff --git a/app/index.js b/app/index.js
index 08d1b30334..66350d2ea0 100644
--- a/app/index.js
+++ b/app/index.js
@@ -76,7 +76,8 @@ const currentSettings = {
   network: hasCliOption("network") || globalCfg.get(NETWORK),
   networkFromCli: !!hasCliOption("network"),
   theme: globalCfg.get(THEME),
-  uiAnimations: globalCfg.get(cfgConstants.UI_ANIMATIONS)
+  uiAnimations: globalCfg.get(cfgConstants.UI_ANIMATIONS),
+  autoWalletLaunching: globalCfg.get(cfgConstants.AUTO_WALLET_LAUNCHING)
 };
 const initialState = {
   settings: {
diff --git a/app/main_dev/ipc.js b/app/main_dev/ipc.js
index 6d5b24e80b..0c666de091 100644
--- a/app/main_dev/ipc.js
+++ b/app/main_dev/ipc.js
@@ -61,6 +61,8 @@ export const getAvailableWallets = (network) => {
     const isPrivacy = cfg.get(cfgConstants.MIXED_ACCOUNT_CFG);
     const walletDbFilePath = getWalletDb(isTestNet, wallet);
     const finished = fs.existsSync(walletDbFilePath);
+    const isLN = cfg.get(cfgConstants.LN_WALLET_EXISTS);
+    const displayWalletGradient = cfg.get(cfgConstants.DISPLAY_WALLET_GRADIENT);
     availableWallets.push({
       network,
       wallet,
@@ -68,7 +70,9 @@ export const getAvailableWallets = (network) => {
       lastAccess,
       isWatchingOnly,
       isTrezor,
-      isPrivacy
+      isPrivacy,
+      isLN,
+      displayWalletGradient
     });
   });
 
diff --git a/app/reducers/walletLoader.js b/app/reducers/walletLoader.js
index f4a68e1dd1..fe711e146a 100644
--- a/app/reducers/walletLoader.js
+++ b/app/reducers/walletLoader.js
@@ -80,7 +80,8 @@ export default function walletLoader(state = {}, action) {
       return {
         ...state,
         isWatchingOnly: action.isWatchingOnly,
-        needsPassPhrase: false
+        needsPassPhrase: false,
+        syncRescanAttempt: false
       };
     case CLOSEWALLET_FAILED:
       return {
@@ -104,7 +105,8 @@ export default function walletLoader(state = {}, action) {
         syncError: null,
         synced: false,
         syncLastFetchedHeaderTime: null,
-        needsPassPhrase: false
+        needsPassPhrase: false,
+        syncRescanAttempt: false
       };
     case UPDATEDISCOVERACCOUNTS:
       return { ...state, discoverAccountsComplete: action.complete };
@@ -202,13 +204,17 @@ export default function walletLoader(state = {}, action) {
       return {
         ...state,
         syncFetchTimeStart: action.fetchTimeStart,
-        syncFetchHeadersAttempt: true
+        syncFetchHeadersAttempt: true,
+        syncFirstFetchedHeaderTime: null
       };
     case SYNC_FETCHED_HEADERS_PROGRESS:
       return {
         ...state,
         syncFetchHeadersCount: action.fetchHeadersCount,
-        syncLastFetchedHeaderTime: action.lastFetchedHeaderTime
+        syncLastFetchedHeaderTime: action.lastFetchedHeaderTime,
+        syncFirstFetchedHeaderTime: state.syncFirstFetchedHeaderTime
+          ? state.syncFirstFetchedHeaderTime
+          : action.lastFetchedHeaderTime
       };
     case SYNC_FETCHED_HEADERS_FINISHED:
       return {
diff --git a/app/selectors.js b/app/selectors.js
index 53eb743cb0..cb7216e954 100644
--- a/app/selectors.js
+++ b/app/selectors.js
@@ -122,6 +122,10 @@ export const syncFetchHeadersCount = get([
   "walletLoader",
   "syncFetchHeadersCount"
 ]);
+export const syncFetchHeadersFirstHeaderTime = get([
+  "walletLoader",
+  "syncFirstFetchedHeaderTime"
+]);
 export const syncFetchHeadersLastHeaderTime = get([
   "walletLoader",
   "syncLastFetchedHeaderTime"
@@ -177,7 +181,8 @@ const availableWalletsSelect = createSelector([availableWallets], (wallets) =>
       network: wallet.network,
       finished: wallet.finished,
       isWatchingOnly: wallet.isWatchingOnly,
-      lastAccess: wallet.lastAccess ? new Date(wallet.lastAccess) : null
+      lastAccess: wallet.lastAccess ? new Date(wallet.lastAccess) : null,
+      displayWalletGradient: wallet.displayWalletGradient
     }),
     wallets
   )
@@ -346,6 +351,11 @@ export const unitDivisor = compose(
 );
 export const currentLocaleName = get(["settings", "currentSettings", "locale"]);
 export const timezone = get(["settings", "currentSettings", "timezone"]);
+export const autoWalletLaunching = get([
+  "settings",
+  "currentSettings",
+  "autoWalletLaunching"
+]);
 export const defaultLocaleName = createSelector(
   [currentLocaleName],
   (currentLocaleName) => {
@@ -977,6 +987,10 @@ export const notifiedBlockHeight = get(["notifications", "currentHeight"]);
 
 export const currentBlockHeight = get(["grpc", "currentBlockHeight"]);
 export const getNoMoreLiveTickets = get(["grpc", "noMoreLiveTickets"]);
+export const startWalletServiceAttempt = get([
+  "grpc",
+  "startWalletServiceAttempt"
+]);
 
 export const rescanEndBlock = currentBlockHeight;
 export const rescanStartBlock = compose(
diff --git a/app/stateMachines/GetStartedStateMachine.js b/app/stateMachines/GetStartedStateMachine.js
index 75d7150247..e270aacb11 100644
--- a/app/stateMachines/GetStartedStateMachine.js
+++ b/app/stateMachines/GetStartedStateMachine.js
@@ -26,10 +26,7 @@ export const getStartedMachine = Machine({
     startMachine: {
       initial: "preStart",
       on: {
-        SHOW_SETTINGS: "settings",
-        SHOW_LOGS: "logs",
         SHOW_TREZOR_CONFIG: "trezorConfig",
-        SHOW_RELEASE_NOTES: "releaseNotes",
         SHOW_CREATE_WALLET: "creatingWallet",
         SHOW_SETTING_UP_WALLET: "settingUpWallet"
       },
@@ -283,6 +280,13 @@ export const getStartedMachine = Machine({
           onEntry: "isSyncingRPC",
           on: {
             WALLET_DISCOVERACCOUNTS_PASS: "walletDiscoverAccountsPassInput",
+            CANCEL_SYNCING_WALLET: {
+              target: "choosingWallet",
+              actions: assign({
+                selectedWallet: () => null,
+                passPhrase: () => null
+              })
+            },
             ERROR_SYNCING_WALLET: {
               target: "choosingWallet",
               actions: assign({
@@ -382,15 +386,6 @@ export const getStartedMachine = Machine({
         }
       }
     },
-    releaseNotes: {
-      initial: "releaseNotes",
-      states: {
-        releaseNotes: {}
-      },
-      on: {
-        BACK: "startMachine.hist"
-      }
-    },
     trezorConfig: {
       initial: "trezorConfig",
       states: {
@@ -400,26 +395,6 @@ export const getStartedMachine = Machine({
         BACK: "startMachine.hist",
         SHOW_TREZOR_CONFIG: "trezorConfig"
       }
-    },
-    settings: {
-      initial: "settings",
-      states: {
-        settings: {}
-      },
-      on: {
-        BACK: "startMachine.hist",
-        SHOW_LOGS: "logs"
-      }
-    },
-    logs: {
-      initial: "logs",
-      states: {
-        logs: {}
-      },
-      on: {
-        BACK: "startMachine.hist",
-        SHOW_SETTINGS: "settings"
-      }
     }
   }
 });
diff --git a/app/style/icons/blockchainInitial.svg b/app/style/icons/blockchainInitial.svg
index c262732325..5b824f67f0 100644
--- a/app/style/icons/blockchainInitial.svg
+++ b/app/style/icons/blockchainInitial.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="15917.16 378 16 16"><defs><style>.a{fill:#f7f8f9;}.b{fill:#fff;}</style></defs><g transform="translate(15795)"><rect class="a" width="7.52" height="1" transform="translate(122.16 383.72)"/><path class="b" d="M7.52,170.516V168H0v3.52H7.52Z" transform="translate(122.16 216.72)"/><rect class="a" width="7.48" height="1" transform="translate(130.68 383.72)"/><path class="b" d="M220.48,170.516V168H213v3.52h7.48Z" transform="translate(-82.32 216.72)"/><rect class="a" width="7.52" height="1" transform="translate(122.16 389.48)"/><path class="b" d="M0,314.508v1.012H7.52V312H0Z" transform="translate(122.16 78.48)"/><rect class="a" width="7.48" height="1" transform="translate(130.68 389.48)"/><path class="b" d="M220.48,314.508V312H213v3.52h7.48Z" transform="translate(-82.32 78.48)"/><path class="a" d="M16,1V0H0V1H16Z" transform="translate(122.16 378)"/><path class="b" d="M16,27.488V25H0v3.48H16Z" transform="translate(122.16 354)"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="15917.16 378 16 16"><defs><style>.a{fill:#D1D5DB;}.b{fill:#D1D5DB;}</style></defs><g transform="translate(15795)"><rect class="a" width="7.52" height="1" transform="translate(122.16 383.72)"/><path class="b" d="M7.52,170.516V168H0v3.52H7.52Z" transform="translate(122.16 216.72)"/><rect class="a" width="7.48" height="1" transform="translate(130.68 383.72)"/><path class="b" d="M220.48,170.516V168H213v3.52h7.48Z" transform="translate(-82.32 216.72)"/><rect class="a" width="7.52" height="1" transform="translate(122.16 389.48)"/><path class="b" d="M0,314.508v1.012H7.52V312H0Z" transform="translate(122.16 78.48)"/><rect class="a" width="7.48" height="1" transform="translate(130.68 389.48)"/><path class="b" d="M220.48,314.508V312H213v3.52h7.48Z" transform="translate(-82.32 78.48)"/><path class="a" d="M16,1V0H0V1H16Z" transform="translate(122.16 378)"/><path class="b" d="M16,27.488V25H0v3.48H16Z" transform="translate(122.16 354)"/></g></svg>
diff --git a/app/style/icons/blockchain_syncing_loader.gif b/app/style/icons/blockchain_syncing_loader.gif
index 737af756ea..24ccf62e15 100644
Binary files a/app/style/icons/blockchain_syncing_loader.gif and b/app/style/icons/blockchain_syncing_loader.gif differ
diff --git a/app/style/icons/closeWhite.svg b/app/style/icons/closeWhite.svg
deleted file mode 100644
index d96f036f59..0000000000
--- a/app/style/icons/closeWhite.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="22855.646 10126.646 10.707 10.707">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: none;
-        stroke: #fff;
-        stroke-miterlimit: 10;
-      }
-    </style>
-  </defs>
-  <g id="Symbol_53_3" data-name="Symbol 53 – 3" transform="translate(22028 9639)">
-    <g id="Group_1174" data-name="Group 1174" transform="translate(354.4 429.1)">
-      <line id="Line_31" data-name="Line 31" class="cls-1" y1="10" x2="10" transform="translate(473.6 58.9)"/>
-      <line id="Line_32" data-name="Line 32" class="cls-1" x2="10" y2="10" transform="translate(473.6 58.9)"/>
-    </g>
-  </g>
-</svg>
diff --git a/app/style/icons/daemon_waiting_loader.gif b/app/style/icons/daemon_waiting_loader.gif
index e97c1da82b..644ce5d6a3 100644
Binary files a/app/style/icons/daemon_waiting_loader.gif and b/app/style/icons/daemon_waiting_loader.gif differ
diff --git a/app/style/icons/discovering_addresses_loader.gif b/app/style/icons/discovering_addresses_loader.gif
index 049e9e222e..2d046a08f3 100644
Binary files a/app/style/icons/discovering_addresses_loader.gif and b/app/style/icons/discovering_addresses_loader.gif differ
diff --git a/app/style/icons/editDefault.svg b/app/style/icons/editDefault.svg
deleted file mode 100644
index 6701ce409a..0000000000
--- a/app/style/icons/editDefault.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="22850 9283 20 20"><defs><style>.a{fill:#d1d5db;}.b{fill:#48566e;}</style></defs><g transform="translate(22028 8800)"><path class="a" d="M16.566,53.861H1.38V38.68H10.7l1.38-1.38H0V55.241H17.946V43.151l-1.38,1.38Z" transform="translate(822 447.759)"/><path class="a" d="M99.744.977,98.767,0,88.477,10.29,87.5,15.17l.513-2.567,2.054,2.054L87.5,15.17l4.88-.977-2.926-2.926Z" transform="translate(739.331 483)"/><rect class="b" width="14.551" height="4.14" transform="translate(828.784 494.265) rotate(-45)"/><path class="b" d="M88.013,228.3l-.513,2.567,2.567-.513Z" transform="translate(739.331 267.303)"/></g></svg>
\ No newline at end of file
diff --git a/app/style/icons/editDefaultDark.svg b/app/style/icons/editDefaultDark.svg
deleted file mode 100755
index 27a137081b..0000000000
--- a/app/style/icons/editDefaultDark.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-  <g id="rename" transform="translate(-822 -483)">
-    <path id="Path_464" data-name="Path 464" d="M16.566,53.861H1.38V38.68H10.7l1.38-1.38H0V55.241H17.946V43.151l-1.38,1.38Z" transform="translate(822 447.759)" fill="#769ecf"/>
-    <path id="Path_465" data-name="Path 465" d="M99.744.977,98.767,0,88.477,10.29,87.5,15.17l.513-2.567,2.054,2.054L87.5,15.17l4.88-.977-2.926-2.926Z" transform="translate(739.331 483)" fill="#769ecf"/>
-    <rect id="Rectangle_911" data-name="Rectangle 911" width="14.551" height="4.14" transform="translate(828.784 494.265) rotate(-45)" fill="#b7deee"/>
-    <path id="Path_466" data-name="Path 466" d="M88.013,228.3l-.513,2.567,2.567-.513Z" transform="translate(739.331 267.303)" fill="#b7deee"/>
-  </g>
-</svg>
diff --git a/app/style/icons/editHover.svg b/app/style/icons/editHover.svg
deleted file mode 100644
index ebd8daec07..0000000000
--- a/app/style/icons/editHover.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="22889 9283 20 20"><defs><style>.a{fill:#959dac;}.b{fill:#091440;}</style></defs><g transform="translate(22028 8800)"><path class="a" d="M16.566,53.861H1.38V38.68H10.7l1.38-1.38H0V55.241H17.946V43.151l-1.38,1.38Z" transform="translate(861 447.759)"/><path class="a" d="M99.744.977,98.767,0,88.477,10.29,87.5,15.17l.513-2.567,2.054,2.054L87.5,15.17l4.88-.977-2.926-2.926Z" transform="translate(778.331 483)"/><rect class="b" width="14.551" height="4.14" transform="translate(867.784 494.265) rotate(-45)"/><path class="b" d="M88.013,228.3l-.513,2.567,2.567-.513Z" transform="translate(778.331 267.303)"/></g></svg>
\ No newline at end of file
diff --git a/app/style/icons/editHoverDark.svg b/app/style/icons/editHoverDark.svg
deleted file mode 100644
index 8671c4e79c..0000000000
--- a/app/style/icons/editHoverDark.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-  <g id="rename" transform="translate(-822 -483)">
-    <path id="Path_464" data-name="Path 464" d="M16.566,53.861H1.38V38.68H10.7l1.38-1.38H0V55.241H17.946V43.151l-1.38,1.38Z" transform="translate(822 447.759)" fill="#608ACE"/>
-    <path id="Path_465" data-name="Path 465" d="M99.744.977,98.767,0,88.477,10.29,87.5,15.17l.513-2.567,2.054,2.054L87.5,15.17l4.88-.977-2.926-2.926Z" transform="translate(739.331 483)" fill="#608ACE"/>
-    <rect id="Rectangle_911" data-name="Rectangle 911" width="14.551" height="4.14" transform="translate(828.784 494.265) rotate(-45)" fill="#091440"/>
-    <path id="Path_466" data-name="Path 466" d="M88.013,228.3l-.513,2.567,2.567-.513Z" transform="translate(739.331 267.303)" fill="#091440"/>
-  </g>
-</svg>
diff --git a/app/style/icons/establishing_rpc_loader.gif b/app/style/icons/establishing_rpc_loader.gif
index 8e9acb9ca3..275d832f79 100644
Binary files a/app/style/icons/establishing_rpc_loader.gif and b/app/style/icons/establishing_rpc_loader.gif differ
diff --git a/app/style/icons/fetching_headers_loader.gif b/app/style/icons/fetching_headers_loader.gif
index 590cef4c50..0f99880e79 100644
Binary files a/app/style/icons/fetching_headers_loader.gif and b/app/style/icons/fetching_headers_loader.gif differ
diff --git a/app/style/icons/finalizing_setup_loader.gif b/app/style/icons/finalizing_setup_loader.gif
index 29e0048860..3d39c8601b 100644
Binary files a/app/style/icons/finalizing_setup_loader.gif and b/app/style/icons/finalizing_setup_loader.gif differ
diff --git a/app/style/icons/scanning_blocks_loader.gif b/app/style/icons/scanning_blocks_loader.gif
index cb4c1fc4ca..6de71313c0 100644
Binary files a/app/style/icons/scanning_blocks_loader.gif and b/app/style/icons/scanning_blocks_loader.gif differ
diff --git a/app/style/themes/darkTheme.js b/app/style/themes/darkTheme.js
index f46a8e04f9..baa58f8335 100644
--- a/app/style/themes/darkTheme.js
+++ b/app/style/themes/darkTheme.js
@@ -101,13 +101,10 @@ const darkTheme = {
   "menutab-hover": "#7DA7D9",
   "tooltip-container": "#1F325F",
   "loader-bg": "#223767",
-  "display-wallet-bg": "#152042",
   "select-border": "#608ACE",
   "transaction-account-name-bg": "#2F4D8C",
   "account-row-hover": "#1F325F",
   "chart-cursor-color": "#36579E",
-  "linear-progress-text-default": "#fff",
-  "linear-progress-text-initial": "#7DA7D9",
   "onboard-toolbar-shadow": "rgba(9,20,64,0.13)",
   "onboard-toolbar-background": "#152042",
   "background-copy-color": "#e9f8ff",
@@ -122,6 +119,7 @@ const darkTheme = {
   "proposal-text-markdown": "var(--background-container)",
   "background-address-copy-color": "#2F4D8C",
   "icons-shadow": "#09144036",
+  "icons-shadow-hover": "#09144036",
   "no-more-tickets-indicator-bg": "#2F4D8C",
   "input-copy-hover-color": "#78d9f8",
   "coinjoin-sum-color": "#7DA7D9",
@@ -138,6 +136,8 @@ const darkTheme = {
   "grey-5": "#3c62b0",
   "grey-6": "#B7DEEE",
   "grey-7": "#608ace",
+  "light-green": "#C6ECCB",
+  "green-2": "#2ED8A3",
   orange: "#ED6D47",
   "main-dark-blue": "#e9f8fe0",
   "light-blue": "#D4F0FD",
@@ -190,8 +190,7 @@ const darkTheme = {
   "seedword-button-text": "var(--info-modal-button-text)",
   "seedword-button-invalid-bg": "#f0b3a1",
 
-  "button-icon-color-1": "#99C1E3",
-  "button-icon-color-2": "#436EC3",
+  "launcher-link-color": "var(--disabled-color",
 
   "alert-icon-bg-color": "#feb8a5",
 
@@ -221,13 +220,10 @@ const darkTheme = {
   "testnet-logo": url(require("style/icons/testnetLogoDark.svg")),
   "mainnet-logo": url(require("style/icons/decredLogoDark.svg")),
   "create-wallet-icon": url(require("style/icons/createnewwalletDark.svg")),
-  "wallet-blue-icon": url(require("style/icons/walletBlueDark.svg")),
   "wallet-gray-icon": url(require("style/icons/walletGrayDark.svg")),
   blockchain: url(require("style/icons/blockchainDark.svg")),
   "blockchain-default": url(require("style/icons/blockchainDefaultDark.svg")),
   "blockchain-initial": url(require("style/icons/blockchainInitialDark.svg")),
-  "launcher-edit-wallets": url(require("style/icons/editDefaultDark.svg")),
-  "launcher-edit-wallets-hover": url(require("style/icons/editHoverDark.svg")),
   "onboarding-checkcircle": url(
     require("style/icons/onboardingCheckcircleDark.svg")
   ),
diff --git a/app/style/themes/icons.js b/app/style/themes/icons.js
index 4232cae216..6b2a803041 100644
--- a/app/style/themes/icons.js
+++ b/app/style/themes/icons.js
@@ -129,7 +129,6 @@ const icons = {
   ),
   "what-is-staking-icon": url(require("style/icons/what-is-staking.svg")),
   "watch-only-icon": url(require("style/icons/watchOnlyNav.svg")),
-  "x-white-icon": url(require("style/icons/closeWhite.svg")),
   "show-pubkey-icon": url(require("style/icons/accountShowWhite.svg")),
   "hide-pubkey-icon": url(require("style/icons/accountHideWhite.svg")),
   "loader-animation-blockchain-syncing": url(
diff --git a/app/style/themes/lightTheme.js b/app/style/themes/lightTheme.js
index f2c32b0d16..9d315cd0c8 100644
--- a/app/style/themes/lightTheme.js
+++ b/app/style/themes/lightTheme.js
@@ -3,7 +3,7 @@ const url = (s) => `url('${s}')`;
 
 const lightTheme = {
   "background-back-color": "#fff",
-  "background-container": "#f3f5f6",
+  "background-container": "#F3F5F6",
   "background-container-opaque": "rgba(243, 245, 246, 0.895)",
   "background-container-hover": "#f0f4f4",
   "background-hovered": "#e9f8fe",
@@ -100,15 +100,11 @@ const lightTheme = {
   "filter-menu-bg-hover": "#596d81",
   "menutab-hover": "#596d81",
   "tooltip-container": "#f3f5f6",
-  "loader-bg": "#d1d5db",
-  "display-wallet-bg":
-    "linear-gradient(225deg, var(--white-border), var(--display-wallet-gradient-right))",
+  "loader-bg": "#F9FAFA",
   "select-border": "#e7eaed",
   "transaction-account-name-bg": "#E9F8FE",
   "account-row-hover": "#f0f4f4",
   "chart-cursor-color": "#e9f8fe",
-  "linear-progress-text-default": "#fff",
-  "linear-progress-text-initial": "#fff",
   "onboard-toolbar-shadow": "rgba(9,20,64,0.13)",
   "onboard-toolbar-background": "#fff",
   "background-copy-color": "#e9f8ff",
@@ -123,6 +119,7 @@ const lightTheme = {
   "proposal-text-markdown": "#f6f8fa",
   "background-address-copy-color": "#e9f8ff",
   "icons-shadow": "rgba(0, 0, 0, 0.12)",
+  "icons-shadow-hover": "rgba(0, 0, 0, 0.32)",
   "no-more-tickets-indicator-bg": "#E6EAED",
   "ease-in-out-quart": "cubic-bezier(0.77, 0, 0.175, 1)",
   "input-copy-hover-color": "#78d9f8",
@@ -140,6 +137,8 @@ const lightTheme = {
   "grey-5": "#8997A5",
   "grey-6": "#596D81",
   "grey-7": "#3D5873",
+  "light-green": "#C6ECCB",
+  "green-2": "#2ED8A3",
   orange: "#ED6D47",
   "light-blue": "#D4F0FD",
   "main-dark-blue": "#091440",
@@ -193,6 +192,7 @@ const lightTheme = {
   "seedword-button-text": "var(--main-dark-blue)",
   "seedword-button-invalid-bg": "#f0b3a1",
 
+  "launcher-link-color": "#536076",
   "alert-icon-bg-color": "#feb8a5",
 
   /* icons */
@@ -219,13 +219,10 @@ const lightTheme = {
   "testnet-logo": url(require("style/icons/testnet-logo.svg")),
   "mainnet-logo": url(require("style/icons/decred-logo.svg")),
   "create-wallet-icon": url(require("style/icons/createnewwallet.svg")),
-  "wallet-blue-icon": url(require("style/icons/wallet-blue.svg")),
   "wallet-gray-icon": url(require("style/icons/wallet-gray.svg")),
   blockchain: url(require("style/icons/blockchain.svg")),
   "blockchain-default": url(require("style/icons/blockchainDefault.svg")),
   "blockchain-initial": url(require("style/icons/blockchainInitial.svg")),
-  "launcher-edit-wallets": url(require("style/icons/editDefault.svg")),
-  "launcher-edit-wallets-hover": url(require("style/icons/editHover.svg")),
   "onboarding-checkcircle": url(
     require("style/icons/onboarding-checkcircle.svg")
   ),
diff --git a/test/unit/actions/DaemonActions.spec.js b/test/unit/actions/DaemonActions.spec.js
new file mode 100644
index 0000000000..285aa81947
--- /dev/null
+++ b/test/unit/actions/DaemonActions.spec.js
@@ -0,0 +1,130 @@
+import * as da from "actions/DaemonActions";
+import { createStore } from "test-utils.js";
+import * as wal from "wallet";
+import { preDefinedGradients } from "helpers";
+
+const daemonActions = da;
+const wallet = wal;
+
+let mockAvailableWallets = [
+  {
+    wallet: "wallet1",
+    displayWalletGradient: preDefinedGradients[0],
+    lastAccess: 10
+  },
+  {
+    wallet: "wallet2",
+    displayWalletGradient: preDefinedGradients[1],
+    lastAccess: 9
+  },
+  {
+    wallet: "missing-gradient-wallet",
+    lastAccess: 8
+  },
+  {
+    wallet: "wallet4",
+    displayWalletGradient: preDefinedGradients[3],
+    lastAccess: 11
+  },
+  {
+    wallet: "missing-gradient-wallet222222222222",
+    lastAccess: 12
+  },
+  {
+    wallet: "wallet5",
+    displayWalletGradient: preDefinedGradients[5]
+  },
+  {
+    wallet: "wallet6",
+    displayWalletGradient: preDefinedGradients[6]
+  },
+  {
+    wallet: "wallet7",
+    displayWalletGradient: preDefinedGradients[7]
+  },
+  {
+    wallet: "wallet8",
+    displayWalletGradient: preDefinedGradients[8]
+  },
+  {
+    wallet: "wallet9",
+    displayWalletGradient: preDefinedGradients[9]
+  },
+  {
+    wallet: "wallet10",
+    displayWalletGradient: preDefinedGradients[10]
+  },
+  {
+    wallet: "needto-generate-random-gradient-wallet"
+  }
+];
+
+const mockConfigSet = jest.fn(() => {});
+let mockGetAvailableWallets;
+
+beforeEach(() => {
+  wallet.getWalletCfg = jest.fn(() => ({
+    set: mockConfigSet
+  }));
+  mockGetAvailableWallets = wallet.getAvailableWallets = jest.fn(() => ({
+    availableWallets: mockAvailableWallets
+  }));
+});
+
+test("test checkDisplayWalletGradients", () => {
+  const store = createStore({
+    settings: { currentSettings: { network: "testnet" } }
+  });
+
+  store.dispatch(
+    daemonActions.checkDisplayWalletGradients(mockAvailableWallets)
+  );
+
+  expect(mockConfigSet).toHaveBeenNthCalledWith(
+    1,
+    "display_wallet_gradient",
+    preDefinedGradients[2]
+  );
+  expect(mockConfigSet).toHaveBeenNthCalledWith(
+    2,
+    "display_wallet_gradient",
+    preDefinedGradients[4]
+  );
+  expect(mockConfigSet).toHaveBeenCalledTimes(3);
+
+  expect(mockGetAvailableWallets).toHaveBeenCalledTimes(1);
+});
+
+test("checkDisplayWalletGradients (no missing gradient)", () => {
+  mockAvailableWallets = [
+    {
+      wallet: "wallet1",
+      displayWalletGradient: preDefinedGradients[0],
+      lastAccess: 10
+    },
+    {
+      wallet: "wallet2",
+      displayWalletGradient: preDefinedGradients[1],
+      lastAccess: 9
+    },
+    {
+      wallet: "wallet4",
+      displayWalletGradient: preDefinedGradients[3],
+      lastAccess: 11
+    }
+  ];
+  mockGetAvailableWallets = wallet.getAvailableWallets = jest.fn(() => ({
+    availableWallets: mockAvailableWallets
+  }));
+
+  const store = createStore({
+    settings: { currentSettings: { network: "testnet" } }
+  });
+
+  store.dispatch(
+    daemonActions.checkDisplayWalletGradients(mockAvailableWallets)
+  );
+
+  expect(mockConfigSet).not.toHaveBeenCalled();
+  expect(mockGetAvailableWallets).not.toHaveBeenCalled();
+});
diff --git a/test/unit/components/indicators/AnimatedLinearProgressFull.spec.js b/test/unit/components/indicators/AnimatedLinearProgressFull.spec.js
index c100fac306..87979cb78d 100644
--- a/test/unit/components/indicators/AnimatedLinearProgressFull.spec.js
+++ b/test/unit/components/indicators/AnimatedLinearProgressFull.spec.js
@@ -1,4 +1,4 @@
-import AnimatedLinearProgressFull from "components/indicators/LinearProgress/AnimatedLinearProgressFull";
+import AnimatedLinearProgressFull from "components/indicators/AnimatedLinearProgressFull";
 import { render } from "test-utils.js";
 import { screen } from "@testing-library/react";
 import * as sel from "selectors";
@@ -45,7 +45,7 @@ test("tests default AnimatedLinearProgressFull", () => {
     () => 3113
   ));
 
-  const checkLinearProgressBoxes = (expectedWidth, expectedBoxCount) => {
+  const checkLinearProgressBar = (expectedWidth) => {
     mockGetCurrentBlockCount = selectors.getCurrentBlockCount = jest.fn(
       () => testCurrentBlockCount
     );
@@ -58,13 +58,13 @@ test("tests default AnimatedLinearProgressFull", () => {
         )
       ).toBeInTheDocument();
     }
-    const textElement = screen.getByText(testProps.text);
-    expect(textElement.previousSibling.childNodes.length).toBe(
-      expectedBoxCount
-    );
-    const linearProgressBar = textElement.previousSibling.previousSibling;
-    expect(linearProgressBar).toHaveClass("linearProgressBar");
-    expect(linearProgressBar).toHaveStyle(`width: ${expectedWidth}%;`);
+
+    if (expectedWidth > 0) {
+      const textElement = screen.getByText(testProps.text);
+      const linearProgressBar = textElement.previousSibling;
+      expect(linearProgressBar).toHaveClass("linearProgressBar");
+      expect(linearProgressBar).toHaveStyle(`width: ${expectedWidth}%;`);
+    }
   };
 
   const { rerender } = render(<AnimatedLinearProgressFull {...testProps} />);
@@ -82,44 +82,45 @@ test("tests default AnimatedLinearProgressFull", () => {
     screen.getByText(/2 hours ago/i).closest("div.loaderBarEstimation")
       .textContent
   ).toBe("Time from last fetched header: 2 hours ago");
-  expect(screen.getByText(testProps.text)).toHaveClass(
-    `linearProgressText ${testProps.animationType}`
-  );
-  checkLinearProgressBoxes(0, 0);
+
+  expect(
+    screen.getByText(testProps.text).parentNode.nextSibling.firstChild
+  ).toHaveClass(`icon ${testProps.animationType}`);
+  checkLinearProgressBar(0);
 
   /* increase current block count */
   testCurrentBlockCount = 100267;
-  checkLinearProgressBoxes(20.653976323535773, 1);
+  checkLinearProgressBar(20.653976323535773);
 
   /* increase current block count */
   testCurrentBlockCount = 190267;
-  checkLinearProgressBoxes(39.19305567285529, 2);
+  checkLinearProgressBar(39.19305567285529);
 
   /* increase current block count */
   testCurrentBlockCount = 290267;
-  checkLinearProgressBoxes(59.79203272765474, 3);
+  checkLinearProgressBar(59.79203272765474);
 
   /* increase current block count */
   testCurrentBlockCount = 350267;
-  checkLinearProgressBoxes(72.15141896053441, 4);
+  checkLinearProgressBar(72.15141896053441);
 
   /* increase current block count */
   testCurrentBlockCount = 400267;
-  checkLinearProgressBoxes(82.45090748793415, 5);
+  checkLinearProgressBar(82.45090748793415);
 
   /* increase current block count */
   testCurrentBlockCount = 460267;
-  checkLinearProgressBoxes(94.81029372081382, 6);
+  checkLinearProgressBar(94.81029372081382);
 
   /* increase current block count */
   testCurrentBlockCount = testNeededBlocks;
-  checkLinearProgressBoxes(100, 0);
+  checkLinearProgressBar(100);
 
   // test error mode
   rerender(<AnimatedLinearProgressFull error={true} {...testProps} />);
-  expect(
-    screen.getByText(testProps.text).previousSibling.previousSibling
-  ).toHaveClass("linearProgressBar error");
+  expect(screen.getByText(testProps.text).previousSibling).toHaveClass(
+    "linearProgressBar error"
+  );
 
   mockIsSPV.mockRestore();
   mockGetNeededBlocks.mockRestore();
@@ -189,23 +190,20 @@ test("dcrwallet log line is shown or log the error to console", async () => {
 
 test("tests when deamon is synced", () => {
   const mockIsSPV = (selectors.isSPV = jest.fn(() => false));
+  const mockStakeTransactions = (selectors.stakeTransactions = jest.fn(
+    () => []
+  ));
   const mockGetDaemonSynced = (selectors.getDaemonSynced = jest.fn(() => true));
-  const { rerender } = render(<AnimatedLinearProgressFull {...testProps} />);
+  render(<AnimatedLinearProgressFull {...testProps} />);
 
   const textElement = screen.getByText(testProps.text);
-  expect(textElement).toHaveClass(
-    `linearProgressText ${testProps.animationType}`
-  );
-  expect(textElement.previousSibling).toHaveStyle("");
-  expect(textElement.previousSibling).toHaveClass("linearProgressBar");
-
-  // test error mode
-  rerender(<AnimatedLinearProgressFull error={true} {...testProps} />);
-  expect(screen.getByText(testProps.text).previousSibling).toHaveClass(
-    "linearProgressBar error"
-  );
+  expect(
+    screen.getByText(testProps.text).parentNode.nextSibling.firstChild
+  ).toHaveClass(`icon ${testProps.animationType}`);
+  expect(textElement.previousSibling).toBe(null);
 
   mockIsSPV.mockRestore();
+  mockStakeTransactions.mockRestore();
   mockGetDaemonSynced.mockRestore();
 });
 
@@ -214,23 +212,21 @@ test("tests when isSPV is true", () => {
   const mockGetDaemonSynced = (selectors.getDaemonSynced = jest.fn(
     () => false
   ));
-
-  const { rerender } = render(<AnimatedLinearProgressFull {...testProps} />);
+  const mockStakeTransactions = (selectors.stakeTransactions = jest.fn(
+    () => []
+  ));
+  render(<AnimatedLinearProgressFull {...testProps} />);
 
   const textElement = screen.getByText(testProps.text);
-  expect(textElement).toHaveClass(
-    `linearProgressText ${testProps.animationType}`
+  expect(textElement.parentNode.nextSibling.firstChild.nextSibling).toHaveClass(
+    `icon ${testProps.animationType}`
   );
-  expect(textElement.previousSibling).toHaveStyle("");
-  expect(textElement.previousSibling).toHaveClass("linearProgressBar");
-
-  // test error mode
-  rerender(<AnimatedLinearProgressFull error={true} {...testProps} />);
-  expect(screen.getByText(testProps.text).previousSibling).toHaveClass(
-    "linearProgressBar error"
+  expect(textElement.parentNode.nextSibling.firstChild.textContent).toMatch(
+    /spv mode/i
   );
 
   mockIsSPV.mockRestore();
+  mockStakeTransactions.mockRestore();
   mockGetDaemonSynced.mockRestore();
 });
 
diff --git a/test/unit/components/views/GetStaredPage/AdvancedStartup.spec.js b/test/unit/components/views/GetStaredPage/AdvancedStartup.spec.js
index 4a5a332153..ab97306ed4 100644
--- a/test/unit/components/views/GetStaredPage/AdvancedStartup.spec.js
+++ b/test/unit/components/views/GetStaredPage/AdvancedStartup.spec.js
@@ -55,14 +55,11 @@ beforeEach(() => {
 
 test("test remote daemon form", async () => {
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 
   expect(mockIsAdvancedDaemon).toHaveBeenCalled();
   expect(mockGetRemoteCredentials).toHaveBeenCalled();
   expect(mockGetAppdataPath).toHaveBeenCalled();
-  expect(
-    screen.getByText(/waiting for daemon connection.../i)
-  ).toBeInTheDocument();
   expect(
     screen.getByText(/complete one of the following/i).textContent
   ).toMatchInlineSnapshot(
@@ -123,7 +120,7 @@ test("test remote daemon form", async () => {
 
 test("test local daemon form", async () => {
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 
   user.click(screen.getByTestId("switch"));
   expect(screen.getByText("Daemon Data Directory:")).toBeInTheDocument();
@@ -146,7 +143,7 @@ test("test local daemon form", async () => {
 
 test("test skip link", async () => {
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 
   user.click(screen.getByText(/skip/i));
   await wait(() => screen.getByText(testStartDaemonErrorMsg));
diff --git a/test/unit/components/views/GetStaredPage/CreateWallet.spec.js b/test/unit/components/views/GetStaredPage/CreateWallet.spec.js
index dccd884556..8a034d145d 100644
--- a/test/unit/components/views/GetStaredPage/CreateWallet.spec.js
+++ b/test/unit/components/views/GetStaredPage/CreateWallet.spec.js
@@ -93,7 +93,7 @@ beforeEach(() => {
 
 const goToCopySeedView = async () => {
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
   user.click(screen.getByText(/create a new wallet/i));
   await wait(() => screen.getByText("Wallet Name"));
   user.type(screen.getByPlaceholderText(/choose a name/i), testWalletName);
@@ -110,8 +110,8 @@ const goToConfirmView = async () => {
 
 const goToRestoreView = async () => {
   render(<GetStartedPage />);
-  await wait(() => screen.getByText("Welcome to Decrediton Wallet"));
-  user.click(screen.getByText("Restore Existing Wallet"));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
+  user.click(screen.getByText(/restore existing wallet/i));
   await wait(() => screen.getByText("Wallet Name"));
   user.type(screen.getByPlaceholderText("Choose a Name"), testWalletName);
 };
@@ -375,7 +375,7 @@ test("pasting valid seed words on existing seed view and receive create wallet r
   // expect to jump back to the wallet choose view, and display
   // the error msg received from createWalletRequest
   await wait(() => screen.getByText(testCreateWalletRequestErrorMsg));
-  screen.getByText(/choose a wallet to open/i);
+  screen.getByText(/choose the wallet to access/i);
 });
 
 test("pasting valid seed words on existing seed view and successfully create wallet", async () => {
@@ -412,7 +412,7 @@ test("pasting valid seed words on existing seed view and successfully create wal
   expect(mockCreateWallet).toHaveBeenCalled();
   expect(mockCreateWalletRequest).toHaveBeenCalled();
   await wait(() =>
-    expect(screen.getByText(/choose a wallet to open/i)).toBeInTheDocument()
+    expect(screen.getByText(/choose the wallet to access/i)).toBeInTheDocument()
   );
 });
 
@@ -707,7 +707,7 @@ test("test cancel button on existing seed view", async () => {
   user.click(screen.getByText("Cancel"));
   await wait(() => expect(mockCancelCreateWallet).toHaveBeenCalled());
   await wait(() =>
-    expect(screen.getByText(/choose a wallet to open/i)).toBeInTheDocument()
+    expect(screen.getByText(/choose the wallet to access/i)).toBeInTheDocument()
   );
 });
 
@@ -717,7 +717,7 @@ test("test cancel button on copy seed view", async () => {
   user.click(screen.getByText("Cancel"));
   await wait(() => expect(mockCancelCreateWallet).toHaveBeenCalled());
   await wait(() =>
-    expect(screen.getByText(/choose a wallet to open/i)).toBeInTheDocument()
+    expect(screen.getByText(/choose the wallet to access/i)).toBeInTheDocument()
   );
 });
 
@@ -733,7 +733,7 @@ test("test go back button on existing seed view", async () => {
 
   user.click(screen.getByText(/go back/i).nextElementSibling);
   await wait(() =>
-    expect(screen.getByText(/choose a wallet to open/i)).toBeInTheDocument()
+    expect(screen.getByText(/choose the wallet to access/i)).toBeInTheDocument()
   );
 });
 
@@ -742,7 +742,7 @@ test("test go back button on copy seed view", async () => {
 
   user.click(screen.getByText(/go back/i).nextElementSibling);
   await wait(() =>
-    expect(screen.getByText(/choose a wallet to open/i)).toBeInTheDocument()
+    expect(screen.getByText(/choose the wallet to access/i)).toBeInTheDocument()
   );
 });
 
diff --git a/test/unit/components/views/GetStaredPage/GetStartedPage.spec.js b/test/unit/components/views/GetStaredPage/GetStartedPage.spec.js
index 7d0db7afaa..c7210fa616 100644
--- a/test/unit/components/views/GetStaredPage/GetStartedPage.spec.js
+++ b/test/unit/components/views/GetStaredPage/GetStartedPage.spec.js
@@ -78,24 +78,43 @@ beforeEach(() => {
 
 test("render empty wallet chooser view", async () => {
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 
   expect(screen.getByText(/logs/i)).toBeInTheDocument();
   expect(screen.getByText(/settings/i)).toBeInTheDocument();
-  expect(
-    screen.getByText(`What's New in v${testAppVersion}`)
-  ).toBeInTheDocument();
+  expect(screen.getByText("Release Info")).toBeInTheDocument();
   expect(screen.getByText(/create a new wallet/i)).toBeInTheDocument();
   expect(screen.getByText(/restore existing wallet/i)).toBeInTheDocument();
-  expect(screen.getByText(/about decrediton/i)).toBeInTheDocument();
-  expect(screen.getByText(/choose a wallet to open/i)).toBeInTheDocument();
-  expect(screen.getByText(/learn the basics/i)).toBeInTheDocument();
-  expect(screen.getByText(/edit wallets/i)).toBeInTheDocument();
+  expect(screen.getByText(/choose the wallet to access/i)).toBeInTheDocument();
   expect(screen.getByTestId("getstarted-pagebody").className).not.toMatch(
     /testnetBody/
   );
-  expect(screen.getByText(/update available/i)).toBeInTheDocument();
-  expect(screen.getByText(/new version available/i)).toBeInTheDocument();
+
+  // check tutorials
+  expect(screen.getByText(/learn about decred/i)).toBeInTheDocument();
+  user.click(screen.getByText("Decred Intro"));
+  await wait(() => screen.getByText("Back"));
+  // go back
+  user.click(screen.getByText("Back").nextElementSibling);
+  await wait(() => screen.getByText(/welcome to decrediton/i));
+
+  // open onboard tutorial again and go back by finishing it
+  user.click(screen.getByText("Decred Intro"));
+  await wait(() => screen.getByText("Back"));
+  // step forward
+  const nextButton = screen.getByRole("button", { name: "Next" });
+  user.click(nextButton);
+  expect(screen.getAllByText("Governance systems").length).toBeTruthy();
+  // finish
+  user.click(nextButton);
+  await wait(() => screen.getByText(/welcome to decrediton/i));
+
+  // check learn the basics
+  user.click(screen.getByRole("button", { name: "Learn the Basics" }));
+  await wait(() => screen.getByText("Skip"));
+  // go back
+  user.click(screen.getByText("Skip"));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 
   expect(mockGetDaemonSynced).toHaveBeenCalled();
   expect(mockIsSPV).toHaveBeenCalled();
@@ -106,22 +125,11 @@ test("render empty wallet chooser view", async () => {
   expect(mockUpdateAvailable).toHaveBeenCalled();
 });
 
-test("render empty wallet chooser view in SPV mode", async () => {
-  mockIsSPV = selectors.isSPV = jest.fn(() => true);
-
-  render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
-
-  expect(
-    screen.getByText(/choose a wallet to open in spv mode/i)
-  ).toBeInTheDocument();
-});
-
 test("render empty wallet chooser view in testnet mode", async () => {
   mockIsTestNet = selectors.isTestNet = jest.fn(() => true);
 
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
   expect(screen.getByTestId("getstarted-pagebody").className).toMatch(
     /testnetBody/
   );
@@ -135,9 +143,9 @@ test("render empty wallet chooser view and click-on&test release notes", async (
 
   const oldestVersionNumber = 130;
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 
-  user.click(screen.getByText(/what's new in/i));
+  user.click(screen.getByText(/Release Info/i));
   await wait(() => screen.getByText(/newer version/i));
   const header = screen.getByText(/Decrediton (.*) Released/i);
   expect(header).toBeInTheDocument();
@@ -174,31 +182,35 @@ test("render empty wallet chooser view and click-on&test release notes", async (
 
   // go back to the wallet chooser view
   user.click(screen.getByText(/go back/i).nextElementSibling);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 });
 
 test("click on settings link and go back", async () => {
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 
   user.click(screen.getByText(/settings/i));
-  await wait(() => screen.getByText(/connectivity/i));
+  await wait(() => screen.getByText("Connectivity"));
 
   // go back
-  user.click(screen.getByText(/go back/i));
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  user.click(
+    screen.getByRole("button", {
+      name: "Go back"
+    })
+  );
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 });
 
 test("click on logs view", async () => {
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 
   user.click(screen.getByText(/logs/i));
   await wait(() => screen.queryByText(/system logs/i));
 
   // go back
   user.click(screen.getByText(/go back/i).nextElementSibling);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 });
 
 test("test if app receive daemon connection data from cli", async () => {
@@ -246,7 +258,7 @@ test("start regular daemon and not receive available wallet", async () => {
   mockIsSPV = selectors.isSPV = jest.fn(() => false);
 
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
   expect(mockStartDaemon).toHaveBeenCalled();
   expect(mockSyncDaemon).toHaveBeenCalled();
   expect(mockCheckNetworkMatch).toHaveBeenCalled();
@@ -260,7 +272,7 @@ test("start regular daemon and receive sync daemon error", async () => {
       rpcPresent: false
     };
   });
-  const testSyncErrorMsg = "sync-error-msg";
+  const testSyncErrorMsg = { error: "sync-error-msg" };
   mockSyncDaemon = daemonActions.syncDaemon = jest.fn(() => () =>
     Promise.reject(testSyncErrorMsg)
   );
@@ -268,9 +280,10 @@ test("start regular daemon and receive sync daemon error", async () => {
   mockIsSPV = selectors.isSPV = jest.fn(() => false);
 
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  expect(screen.getByText("Starting Daemon...")).toBeInTheDocument();
+  await wait(() => expect(mockSyncDaemon).toHaveBeenCalled());
+  expect(screen.queryByText(/Learn about decred/i)).not.toBeInTheDocument();
   expect(mockStartDaemon).toHaveBeenCalled();
-  expect(mockSyncDaemon).toHaveBeenCalled();
   expect(mockCheckNetworkMatch).not.toHaveBeenCalled();
   wl.getCLIOptions.mockRestore();
 });
@@ -289,9 +302,9 @@ test("start regular daemon and receive network match error", async () => {
   mockIsSPV = selectors.isSPV = jest.fn(() => false);
 
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => expect(mockSyncDaemon).toHaveBeenCalled());
+  expect(screen.queryByText(/Learn about decred/i)).not.toBeInTheDocument();
   expect(mockStartDaemon).toHaveBeenCalled();
-  expect(mockSyncDaemon).toHaveBeenCalled();
   expect(mockCheckNetworkMatch).toHaveBeenCalled();
   wl.getCLIOptions.mockRestore();
 });
diff --git a/test/unit/components/views/GetStaredPage/LanguageSelectPage.spec.js b/test/unit/components/views/GetStaredPage/LanguageSelectPage.spec.js
index 9215dde9fa..2619dcf9eb 100644
--- a/test/unit/components/views/GetStaredPage/LanguageSelectPage.spec.js
+++ b/test/unit/components/views/GetStaredPage/LanguageSelectPage.spec.js
@@ -31,7 +31,7 @@ beforeEach(() => {
 
 test("render language select page", () => {
   render(<LanguageSelectPage />);
-  expect(screen.getByText(/welcome to decrediton wallet/i)).toBeInTheDocument();
+  expect(screen.getByText(/welcome to decrediton/i)).toBeInTheDocument();
   expect(screen.getByText(/choose your language/i)).toBeInTheDocument();
   expect(screen.getByText(testLocalesArray[0].description)).toBeInTheDocument();
   expect(screen.getByTestId("getstarted-pagebody").className).not.toMatch(
diff --git a/test/unit/components/views/GetStaredPage/PreCreateWallet.spec.js b/test/unit/components/views/GetStaredPage/PreCreateWallet.spec.js
index 5439159219..9ed0823cfe 100644
--- a/test/unit/components/views/GetStaredPage/PreCreateWallet.spec.js
+++ b/test/unit/components/views/GetStaredPage/PreCreateWallet.spec.js
@@ -91,7 +91,7 @@ beforeEach(() => {
 
 const goToGetStartedView = async () => {
   render(<GetStartedPage />);
-  return await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  return await wait(() => screen.getByText(/welcome to decrediton/i));
 };
 
 const goToCreateNewWalletView = async () => {
@@ -115,7 +115,7 @@ test("test when createWallet has been rejected", async () => {
   expect(mockCreateWallet).toHaveBeenCalledWith(testSelectedWallet);
 
   user.click(screen.getByText(/cancel/i));
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 });
 
 test("daemon response success through createWallet function and createWalletPage has been reached", async () => {
@@ -333,7 +333,7 @@ test("trezor device is connected", async () => {
       trezor: { device: { connected: true } }
     }
   });
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
   user.click(screen.getByText(/restore existing wallet/i));
   await wait(() => screen.getByText("Wallet Name"));
   user.click(screen.getByText("Advanced Options"));
@@ -378,7 +378,7 @@ test("trezor has to auto-disable when step back from restore view", async () =>
   expect(mockEnableTrezor).toHaveBeenCalled();
 
   user.click(screen.getByText(/cancel/i));
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
   expect(mockDisableTrezor).toHaveBeenCalled();
 });
 
diff --git a/test/unit/components/views/GetStaredPage/PrivacyPage.spec.js b/test/unit/components/views/GetStaredPage/PrivacyPage.spec.js
index d6cd71810f..49146867bb 100644
--- a/test/unit/components/views/GetStaredPage/PrivacyPage.spec.js
+++ b/test/unit/components/views/GetStaredPage/PrivacyPage.spec.js
@@ -1,4 +1,4 @@
-import PrivacyPage from "components/views/GetStartedPage/PrivacyPage/PrivacyPage";
+import { PrivacyPage } from "components/views/GetStartedPage";
 import { render } from "test-utils.js";
 import { screen } from "@testing-library/react";
 import user from "@testing-library/user-event";
diff --git a/test/unit/components/views/GetStaredPage/RescanWallet.spec.js b/test/unit/components/views/GetStaredPage/RescanWallet.spec.js
deleted file mode 100644
index 2c0d9bdcf7..0000000000
--- a/test/unit/components/views/GetStaredPage/RescanWallet.spec.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import RescanWallet from "components/views/GetStartedPage/RescanWallet/RescanWallet";
-import { render } from "test-utils.js";
-import * as sel from "selectors";
-import { screen } from "@testing-library/react";
-
-const testStartBlock = 22;
-const testEndBlock = 66;
-const testCurrentBlock = 55;
-const selectors = sel;
-
-let mockRescanStartBlock;
-let mockRescanEndBlock;
-let mockRescanCurrentBlock;
-
-beforeEach(() => {
-  mockRescanStartBlock = selectors.rescanStartBlock = jest.fn(
-    () => testStartBlock
-  );
-  mockRescanEndBlock = selectors.rescanEndBlock = jest.fn(() => testEndBlock);
-  mockRescanCurrentBlock = selectors.rescanCurrentBlock = jest.fn(
-    () => testCurrentBlock
-  );
-});
-
-test("test RescanWallet", () => {
-  render(<RescanWallet />);
-  expect(mockRescanStartBlock).toHaveBeenCalled();
-  expect(mockRescanEndBlock).toHaveBeenCalled();
-  expect(mockRescanCurrentBlock).toHaveBeenCalled();
-
-  expect(screen.getByText(/rescan progress/i).textContent).toBe(
-    `Rescan Progress (${testCurrentBlock} / ${testEndBlock})`
-  );
-});
-
-test("test if startBlock is larger than currentBlock", () => {
-  const testLargerStartBlock = 56;
-  mockRescanStartBlock = selectors.rescanStartBlock = jest.fn(
-    () => testLargerStartBlock
-  );
-  render(<RescanWallet />);
-
-  expect(screen.getByText(/rescan progress/i).textContent).toBe(
-    `Rescan Progress (${testLargerStartBlock} / ${testEndBlock})`
-  );
-});
diff --git a/test/unit/components/views/GetStaredPage/WalletSelection.spec.js b/test/unit/components/views/GetStaredPage/WalletSelection.spec.js
index 1c2357a158..6778bbcd55 100644
--- a/test/unit/components/views/GetStaredPage/WalletSelection.spec.js
+++ b/test/unit/components/views/GetStaredPage/WalletSelection.spec.js
@@ -21,6 +21,8 @@ let mockSetSelectedWallet;
 let mockOpenWalletAttempt;
 let mockStartRpcRequestFunc;
 let mockGetSelectedWallet;
+let mockGetSelectedWalletSelector;
+let mockSetAutoWalletLaunching;
 let testAvailableWallets;
 
 const selectors = sel;
@@ -95,6 +97,9 @@ beforeEach(() => {
   mockStartRpcRequestFunc = wlActions.startRpcRequestFunc = jest.fn(() => () =>
     Promise.reject()
   );
+  mockSetAutoWalletLaunching = wlActions.setAutoWalletLaunching = jest.fn(
+    () => () => {}
+  );
   mockStartWallet = daemonActions.startWallet = jest.fn(() => () =>
     Promise.resolve()
   );
@@ -104,11 +109,15 @@ beforeEach(() => {
   selectors.isSPV = jest.fn(() => false);
   clientActions.goToHomePage = jest.fn(() => {});
   selectors.stakeTransactions = jest.fn(() => []);
+  mockGetSelectedWalletSelector = selectors.getSelectedWallet = jest.fn(
+    () => () => null
+  );
+  selectors.autoWalletLaunching = jest.fn(() => undefined);
 });
 
 test("render wallet chooser view", async () => {
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 
   expect(mockSortedAvailableWallets).toHaveBeenCalled();
   expect(mockGetSelectedWallet).toHaveBeenCalled();
@@ -116,11 +125,8 @@ test("render wallet chooser view", async () => {
   // check regular wallet
   const regularWallet = screen.getByText(testAvailableWallets[0].value.wallet);
   expect(regularWallet).toBeInTheDocument();
-  expect(regularWallet.nextSibling.textContent).toMatch(
-    /last accessed: 1 hour ago/i
-  );
   expect(regularWallet.nextSibling.nextSibling.textContent).toMatch(
-    /launch wallet/i
+    /last accessed: 1 hour ago/i
   );
 
   // check unfinished wallet
@@ -128,35 +134,26 @@ test("render wallet chooser view", async () => {
     testAvailableWallets[1].value.wallet
   );
   expect(unfinishedWallet).toBeInTheDocument();
-  expect(unfinishedWallet.nextSibling.textContent).toMatch(
-    /last accessed: yesterday/i
-  );
-  expect(unfinishedWallet.previousSibling.previousSibling.textContent).toMatch(
+  expect(unfinishedWallet.nextSibling.nextSibling.textContent).toMatch(
     /setup incomplete/i
   );
 
   // check trezor wallet
   const trezorWallet = screen.getByText(testAvailableWallets[2].value.wallet);
   expect(trezorWallet).toBeInTheDocument();
-  expect(trezorWallet.previousSibling.previousSibling.textContent).toMatch(
-    /trezor/i
-  );
+  expect(trezorWallet.nextSibling.textContent).toMatch(/trezor/i);
 
   // check privacy wallet
   const privacyWallet = screen.getByText(testAvailableWallets[3].value.wallet);
   expect(privacyWallet).toBeInTheDocument();
-  expect(privacyWallet.previousSibling.previousSibling.textContent).toMatch(
-    /privacy/i
-  );
+  expect(privacyWallet.nextSibling.textContent).toMatch(/privacy/i);
 
   // check watching only wallet
   const watchOnlyWallet = screen.getByText(
     testAvailableWallets[4].value.wallet
   );
   expect(watchOnlyWallet).toBeInTheDocument();
-  expect(watchOnlyWallet.previousSibling.previousSibling.textContent).toMatch(
-    /watch only/i
-  );
+  expect(watchOnlyWallet.nextSibling.textContent).toMatch(/watch only/i);
 
   expect(screen.getByText("Create a New Wallet")).toBeInTheDocument();
   expect(screen.getByText("Restore Existing Wallet")).toBeInTheDocument();
@@ -164,9 +161,9 @@ test("render wallet chooser view", async () => {
 
 test("test editing wallets", async () => {
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 
-  user.click(screen.getByText(/edit wallets/i).nextElementSibling);
+  user.click(screen.getByText(/edit wallets/i));
   expect(screen.getByText("Close")).toBeInTheDocument();
   expect(screen.getAllByText(/remove wallet/i).length).toBe(
     testAvailableWallets.length
@@ -188,33 +185,118 @@ test("test editing wallets", async () => {
   expect(mockRemoveWallet).toHaveBeenCalledWith(testAvailableWallets[0]);
 
   expect(screen.queryByText(/warning this action/i)).not.toBeInTheDocument();
-  user.click(screen.getByText("Close").nextElementSibling);
+  user.click(screen.getByText("Close"));
   expect(screen.queryByText("Close")).not.toBeInTheDocument();
   expect(screen.getByText(/edit wallets/i)).toBeInTheDocument();
 });
 
-test("launch a wallet", async () => {
+const sleep = (ms) => new Promise((ok) => setTimeout(ok, ms));
+const launchWallet = async (ms) => {
+  mockStartWallet = daemonActions.startWallet = jest.fn(() => () =>
+    Promise.resolve(true)
+  );
+  mockStartRpcRequestFunc = wlActions.startRpcRequestFunc = jest.fn(
+    () => async (dispatch) => {
+      if (ms) {
+        await sleep(ms);
+      }
+      dispatch({ type: wlActions.SYNC_SYNCED });
+      Promise.resolve();
+    }
+  );
+  mockGetSelectedWalletSelector = selectors.getSelectedWallet = jest.fn(
+    () => () => ({
+      value: "mock-wallet"
+    })
+  );
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 
   const wallet = screen.getByText(testAvailableWallets[1].value.wallet);
   user.click(wallet);
-  expect(wallet.nextSibling.nextSibling.textContent).toMatch(/launch wallet/i);
-  user.click(screen.getByText(/launch wallet/i));
   await wait(() =>
     expect(mockStartWallet).toHaveBeenCalledWith(testAvailableWallets[1])
   );
+};
+
+test("launch a wallet and click on Save button on Auto Wallet launching modal", async () => {
+  await launchWallet();
+  await wait(() => screen.getByText("Finishing to load wallet"));
+
+  user.click(screen.getByRole("button", { name: "Open Wallet" }));
+  user.click(screen.getByRole("button", { name: "Save" }));
+  await wait(() => screen.queryByText("Automatic Wallet Launching"));
+
+  expect(screen.getByText("Setup Wallet")).toBeInTheDocument();
+
   expect(mockSetSelectedWallet).toHaveBeenCalled();
+  expect(mockStartWallet).toHaveBeenCalled();
+  expect(mockStartRpcRequestFunc).toHaveBeenCalled();
+  expect(mockGetSelectedWalletSelector).toHaveBeenCalled();
+  expect(mockSetAutoWalletLaunching).toHaveBeenCalledWith(true);
+});
+
+test("launch a wallet and click on checkbox, then the Save button on Auto Wallet launching modal", async () => {
+  await launchWallet();
+  await wait(() => screen.getByText("Finishing to load wallet"));
+
+  user.click(screen.getByRole("button", { name: "Open Wallet" }));
+  user.click(screen.getByRole("checkbox"));
+  user.click(screen.getByRole("button", { name: "Save" }));
+  await wait(() => screen.queryByText("Automatic Wallet Launching"));
+
+  expect(screen.getByText("Setup Wallet")).toBeInTheDocument();
+  expect(mockSetAutoWalletLaunching).toHaveBeenCalledWith(false);
+});
+
+test("launch a wallet and click on Ask me later button on Auto Wallet launching modal", async () => {
+  await launchWallet();
+  await wait(() => screen.getByText("Finishing to load wallet"));
+
+  user.click(screen.getByRole("button", { name: "Open Wallet" }));
+  user.click(screen.getByRole("button", { name: "Ask me later" }));
+  await wait(() => screen.queryByText("Automatic Wallet Launching"));
+
+  expect(screen.getByText("Setup Wallet")).toBeInTheDocument();
+  expect(mockSetAutoWalletLaunching).not.toHaveBeenCalled();
+});
+
+test("launch a wallet and close Auto Wallet launching modal", async () => {
+  await launchWallet();
+  await wait(() => screen.getByText("Finishing to load wallet"));
+
+  user.click(screen.getByRole("button", { name: "Open Wallet" }));
+  user.click(screen.getByRole("button", { name: "Close" }));
+  await wait(() => screen.queryByText("Automatic Wallet Launching"));
+
+  expect(screen.getByText("Setup Wallet")).toBeInTheDocument();
+  expect(mockSetAutoWalletLaunching).not.toHaveBeenCalled();
+});
+
+test("launch a wallet and open wallet automatically ", async () => {
+  selectors.autoWalletLaunching = jest.fn(() => true);
+  await launchWallet();
+
+  expect(screen.getByText("Setup Wallet")).toBeInTheDocument();
+  expect(mockSetAutoWalletLaunching).not.toHaveBeenCalled();
+});
+
+test("launch a wallet and cancel loading", async () => {
+  await launchWallet(1000);
+  await wait(() => screen.getByText("Cancel Loading"));
+  user.click(screen.getByText("Cancel Loading"));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
+  expect(mockSetAutoWalletLaunching).not.toHaveBeenCalled();
 });
 
 test("launch an encrypted wallet", async () => {
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 
   mockStartWallet = daemonActions.startWallet = jest.fn(() => () =>
     Promise.reject(OPENWALLET_INPUT)
   );
-  user.click(screen.getByText(/launch wallet/i));
+  user.click(screen.getByText(testAvailableWallets[0].value.wallet));
   await wait(() => expect(mockStartWallet).toHaveBeenCalled());
   expect(screen.getByText(/insert your pubkey/i)).toBeInTheDocument();
   expect(screen.getByText(/decrypt wallet/i)).toBeInTheDocument();
@@ -279,7 +361,7 @@ test("launch an encrypted wallet", async () => {
 
 test("ask for passphrase if account discovery is needed", async () => {
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 
   mockStartWallet = daemonActions.startWallet = jest.fn(() => () =>
     Promise.reject(OPENWALLET_INPUTPRIVPASS)
@@ -290,7 +372,7 @@ test("ask for passphrase if account discovery is needed", async () => {
       return Promise.reject(OPENWALLET_INPUTPRIVPASS);
     }
   );
-  user.click(screen.getByText(/launch wallet/i));
+  user.click(screen.getByText(testAvailableWallets[0].value.wallet));
   await wait(() => expect(mockStartWallet).toHaveBeenCalled());
   let privatePassphraseInput = screen.getByPlaceholderText(
     /private passphrase/i
@@ -341,7 +423,7 @@ test("ask for passphrase if account discovery is needed", async () => {
 
 test("launch an encrypted wallet and ask private passphrase too if account discovery is needed", async () => {
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 
   mockStartWallet = daemonActions.startWallet = jest.fn(() => () =>
     Promise.reject(OPENWALLET_INPUT)
@@ -349,8 +431,10 @@ test("launch an encrypted wallet and ask private passphrase too if account disco
   mockOpenWalletAttempt = wlActions.openWalletAttempt = jest.fn(() => () =>
     Promise.reject(OPENWALLET_INPUTPRIVPASS)
   );
-  user.click(screen.getByText(/launch wallet/i));
+
+  user.click(screen.getByText(testAvailableWallets[0].value.wallet));
   await wait(() => expect(mockStartWallet).toHaveBeenCalled());
+
   const publicPassphraseInput = screen.getByPlaceholderText(
     /public passphrase/i
   );
@@ -373,5 +457,5 @@ test("test isSyncingRPC in SPV mode and receive error from SPV sync", async () =
   selectors.isSPV = jest.fn(() => true);
   wlActions.spvSyncAttempt = jest.fn(() => () => Promise.reject());
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
+  await wait(() => screen.getByText(/welcome to decrediton/i));
 });
diff --git a/test/unit/components/views/SettingsPage/SettingsPage.spec.js b/test/unit/components/views/SettingsPage/SettingsPage.spec.js
index b062b056bb..0f08dec1e1 100644
--- a/test/unit/components/views/SettingsPage/SettingsPage.spec.js
+++ b/test/unit/components/views/SettingsPage/SettingsPage.spec.js
@@ -60,6 +60,7 @@ const testDefaultAllowedExternalRequests = [
 ];
 const testDefaultUIAnimationsLabel = "Enabled";
 const testUIAnimationsLabel = "Disabled";
+const testDefaultAutoWalletLaunching = false;
 
 const testCurrentSettings = {
   locale: testDefaultLocale.key,
@@ -75,7 +76,8 @@ const testCurrentSettings = {
   gapLimit: testDefaultGapLimit,
   timezone: testDefaultTimezone,
   uiAnimations: testDefaultUIAnimationsLabel,
-  allowedExternalRequests: testDefaultAllowedExternalRequests
+  allowedExternalRequests: testDefaultAllowedExternalRequests,
+  autoWalletLaunching: testDefaultAutoWalletLaunching
 };
 const testSettings = {
   currentSettings: testCurrentSettings,
@@ -557,7 +559,7 @@ test.each([
   ]
 ])("test '%s' RadioButtonGroup", testRadioButtonGroupInput);
 
-const testCheckBoxInput = (label, configKey) => {
+const testCheckBoxInputOnPrivacy = (label, configKey) => {
   render(<SettingsPage />, {
     initialState: {
       settings: testSettings
@@ -594,7 +596,31 @@ test.each([
   ["Update Check", EXTERNALREQUEST_UPDATE_CHECK],
   ["Politeia", EXTERNALREQUEST_POLITEIA],
   ["Decred Block Explorer", EXTERNALREQUEST_DCRDATA]
-])("test '%s' Checkbox", testCheckBoxInput);
+])("test '%s' Checkbox", testCheckBoxInputOnPrivacy);
+
+test("test launcer CheckBox", () => {
+  render(<SettingsPage />, {
+    initialState: {
+      settings: testSettings
+    }
+  });
+  user.click(screen.getByText("General"));
+
+  const checkbox = screen.getByLabelText(
+    "Launch wallet immediately after loading completes"
+  );
+  expect(checkbox.checked).toBe(testDefaultAutoWalletLaunching);
+
+  user.click(checkbox);
+  expect(checkbox.checked).toBe(!testDefaultAutoWalletLaunching);
+
+  const expectedChange = {
+    ...testCurrentSettings,
+    autoWalletLaunching: !testDefaultAutoWalletLaunching
+  };
+
+  expect(mockSaveSettings).toHaveBeenCalledWith(expectedChange);
+});
 
 const getFieldRequiredErrorCount = () => {
   const inputErrorString = "This field is required";