diff --git a/app/actions/ControlActions.js b/app/actions/ControlActions.js
index a2d3b9c2f8..e35a105bb3 100644
--- a/app/actions/ControlActions.js
+++ b/app/actions/ControlActions.js
@@ -924,3 +924,17 @@ export const getPeerInfo = () => (dispatch, getState) => {
     })
     .catch((error) => dispatch({ type: GETPEERINFO_FAILED, error }));
 };
+
+export const SAVE_LEGACY_AUTOBUYER_SETTINGS = "SAVE_LEGACY_AUTOBUYER_SETTINGS ";
+export const saveLegacyAutoBuyerSettings = ({
+  balanceToMaintain,
+  account,
+  vsp
+}) => (dispatch) => {
+  dispatch({
+    type: SAVE_LEGACY_AUTOBUYER_SETTINGS,
+    balanceToMaintain,
+    account,
+    vsp
+  });
+};
diff --git a/app/actions/VSPActions.js b/app/actions/VSPActions.js
index 9ca2720d9a..258cb84a8d 100644
--- a/app/actions/VSPActions.js
+++ b/app/actions/VSPActions.js
@@ -773,3 +773,15 @@ export const setVSPDVoteChoices = (passphrase) => async (
     dispatch({ type: SETVSPDVOTECHOICE_FAILED, error });
   }
 };
+
+export const SAVE_AUTOBUYER_SETTINGS = "SAVE_AUTOBUYER_SETTINGS";
+export const saveAutoBuyerSettings = ({ balanceToMaintain, account, vsp }) => (
+  dispatch
+) => {
+  dispatch({
+    type: SAVE_AUTOBUYER_SETTINGS,
+    balanceToMaintain,
+    account,
+    vsp
+  });
+};
diff --git a/app/components/buttons/AutoBuyerSwitch.jsx b/app/components/buttons/AutoBuyerSwitch.jsx
index 526e943f18..90ca46a04e 100644
--- a/app/components/buttons/AutoBuyerSwitch.jsx
+++ b/app/components/buttons/AutoBuyerSwitch.jsx
@@ -1,11 +1,12 @@
 import { ToggleSwitch } from "buttons";
 import { FormattedMessage as T } from "react-intl";
 
-const AutoBuyerSwitch = ({ enabled, onClick, disabled }) => (
+const AutoBuyerSwitch = ({ enabled, onClick, disabled, className }) => (
   <ToggleSwitch
     enabled={enabled}
     onClick={onClick}
     disabled={disabled}
+    className={className}
     enabledText={<T id="autobuyer.enabled" m="Turn off auto buyer" />}
     notEnabledText={<T id="autobuyer.disabled" m="Turn on auto buyer" />}
   />
diff --git a/app/components/buttons/InvisiblePiUiButton/InvisiblePiUiButton.jsx b/app/components/buttons/InvisiblePiUiButton/InvisiblePiUiButton.jsx
new file mode 100644
index 0000000000..e0c3207a92
--- /dev/null
+++ b/app/components/buttons/InvisiblePiUiButton/InvisiblePiUiButton.jsx
@@ -0,0 +1,9 @@
+import styles from "./InvisiblePiUiButton.module.css";
+import { classNames } from "pi-ui";
+import { PiUiButton } from "buttons";
+
+const InvisiblePiUiButton = ({ className, ...props }) => (
+  <PiUiButton className={classNames(styles.button, className)} {...props} />
+);
+
+export default InvisiblePiUiButton;
diff --git a/app/components/buttons/InvisiblePiUiButton/InvisiblePiUiButton.module.css b/app/components/buttons/InvisiblePiUiButton/InvisiblePiUiButton.module.css
new file mode 100644
index 0000000000..25136aaa43
--- /dev/null
+++ b/app/components/buttons/InvisiblePiUiButton/InvisiblePiUiButton.module.css
@@ -0,0 +1,11 @@
+.button {
+  color: var(--disabled-color) !important;
+}
+.button:hover {
+  color: var(--stroke-color-hovered) !important;
+}
+.button,
+.button:hover {
+  background-color: transparent !important;
+  border: none !important;
+}
diff --git a/app/components/buttons/InvisiblePiUiButton/index.js b/app/components/buttons/InvisiblePiUiButton/index.js
new file mode 100644
index 0000000000..62da0e177c
--- /dev/null
+++ b/app/components/buttons/InvisiblePiUiButton/index.js
@@ -0,0 +1 @@
+export { default } from "./InvisiblePiUiButton";
diff --git a/app/components/buttons/PiUiButton/PiUiButton.jsx b/app/components/buttons/PiUiButton/PiUiButton.jsx
new file mode 100644
index 0000000000..e9afa9a3b6
--- /dev/null
+++ b/app/components/buttons/PiUiButton/PiUiButton.jsx
@@ -0,0 +1,23 @@
+import styles from "./PiUiButton.module.css";
+import { classNames, Button } from "pi-ui";
+
+const PiUiButton = ({
+  className,
+  kind,
+  disabled,
+  loading,
+  onClick,
+  children
+}) => (
+  <Button
+    kind={disabled ? "disabled" : kind}
+    className={classNames(styles.button, styles[kind], className)}
+    {...{
+      onClick,
+      loading,
+      children
+    }}
+  />
+);
+
+export default PiUiButton;
diff --git a/app/components/buttons/PiUiButton/PiUiButton.module.css b/app/components/buttons/PiUiButton/PiUiButton.module.css
new file mode 100644
index 0000000000..879a790103
--- /dev/null
+++ b/app/components/buttons/PiUiButton/PiUiButton.module.css
@@ -0,0 +1,9 @@
+.button {
+  font-family: var(--font-family-regular);
+}
+.button.secondary {
+  background-color: var(--secondary-piui-button-bg);
+}
+.button.secondary:hover {
+  opacity: 0.7;
+}
diff --git a/app/components/buttons/PiUiButton/index.js b/app/components/buttons/PiUiButton/index.js
new file mode 100644
index 0000000000..e3ef5d20c4
--- /dev/null
+++ b/app/components/buttons/PiUiButton/index.js
@@ -0,0 +1 @@
+export { default } from "./PiUiButton";
diff --git a/app/components/buttons/ToggleSwitch/ToggleSwitch.jsx b/app/components/buttons/ToggleSwitch/ToggleSwitch.jsx
index c90ebb36b2..e544315aed 100644
--- a/app/components/buttons/ToggleSwitch/ToggleSwitch.jsx
+++ b/app/components/buttons/ToggleSwitch/ToggleSwitch.jsx
@@ -1,10 +1,11 @@
 import styles from "./ToggleSwitch.module.css";
-import { Tooltip } from "pi-ui";
+import { Tooltip, classNames } from "pi-ui";
 
 // enabled shows the switch as on or off.
 // disabled unable to trigger the onClick method.
 // enabledText and notEnabledText the tooltop contents when the switch is on/off.
 const ToggleSwitch = ({
+  className,
   enabled,
   onClick,
   disabled,
@@ -14,7 +15,7 @@ const ToggleSwitch = ({
   <Tooltip
     contentClassName={styles.tooltip}
     content={enabled ? enabledText : notEnabledText}>
-    <div className={styles.toggleSwitch}>
+    <div className={classNames(styles.toggleSwitch, className)}>
       <div
         data-testid="toggleSwitch"
         className={enabled ? styles.enabled : styles.disabled}
diff --git a/app/components/buttons/index.js b/app/components/buttons/index.js
index 251d9e0e68..699d91dda1 100644
--- a/app/components/buttons/index.js
+++ b/app/components/buttons/index.js
@@ -13,6 +13,8 @@ export { default as SendTransactionButton } from "./SendTransactionButton";
 export { default as ImportScriptIconButton } from "./ImportScriptIconButton";
 export { default as MixerSettingsIconButton } from "./MixerSettingsIconButton";
 export { default as ListUTXOsButton } from "./ListUTXOsButton";
+export { default as PiUiButton } from "./PiUiButton";
+export { default as InvisiblePiUiButton } from "./InvisiblePiUiButton";
 
 import ModalButton from "./ModalButton";
 import KeyBlueButton from "./KeyBlueButton";
@@ -24,6 +26,7 @@ import HelpLink from "./HelpLink/HelpLink";
 import InvisibleButton from "./InvisibleButton";
 import Button from "./Button/Button";
 import SmallButton from "./SmallButton";
+import PiUiButton from "./PiUiButton";
 export {
   ModalButton,
   ToggleSwitch,
@@ -106,6 +109,8 @@ export const InvisiblePassphraseModalButton = mbb(
   InvisibleButton
 );
 export const PassphraseModalButton = mbb(null, PassphraseModal, KeyBlueButton);
+export const RevokeModalButton = mbb(null, PassphraseModal, PiUiButton);
+export const TicketPurchaseModalButton = mbb(null, PassphraseModal, PiUiButton);
 export const AutoBuyerPassphraseModalSwitch = mbb(
   null,
   PassphraseModal,
diff --git a/app/components/inputs/DcrInput.jsx b/app/components/inputs/DcrInput.jsx
index 072947d124..bf1c1747f3 100644
--- a/app/components/inputs/DcrInput.jsx
+++ b/app/components/inputs/DcrInput.jsx
@@ -2,7 +2,7 @@ import FloatInput from "./FloatInput";
 import IntegerInput from "./IntegerInput";
 import { MAX_DCR_AMOUNT, UNIT_DIVISOR } from "constants";
 import { useSelector } from "react-redux";
-import { useEffect, useState } from "react";
+import { useState, useEffect } from "react";
 import { ATOMS } from "constants";
 import * as sel from "selectors";
 
@@ -17,7 +17,12 @@ import * as sel from "selectors";
  * and later re-displaying the value is consistent.
  */
 function DcrInput({ onChangeAmount, amount, ...props }) {
-  const [value, setValue] = useState(null);
+  const [value, setValue] = useState(() => {
+    if (amount === undefined || isNaN(amount)) {
+      return;
+    }
+    return amount;
+  });
   const currencyDisplay = useSelector(sel.currencyDisplay);
 
   useEffect(() => {
diff --git a/app/components/inputs/NumTicketsInput/NumTicketsInput.jsx b/app/components/inputs/NumTicketsInput/NumTicketsInput.jsx
index 8964f9156c..352521c297 100644
--- a/app/components/inputs/NumTicketsInput/NumTicketsInput.jsx
+++ b/app/components/inputs/NumTicketsInput/NumTicketsInput.jsx
@@ -17,9 +17,9 @@ const NumTicketsInput = ({
 }) => {
   const ticketUnitLabel =
     parseInt(numTickets) === 1 ? (
-      <T id="numTicketInput.unit" m="Ticket" />
+      <T id="numTicketsInput.ticket" m="ticket" />
     ) : (
-      <T id="numTicketsInput.unit" m="Tickets" />
+      <T id="numTicketsInput.tickets" m="tickets" />
     );
   return (
     <div className={classNames(style.container, invalid && style.error)}>
@@ -39,9 +39,9 @@ const NumTicketsInput = ({
           onChangeNumTickets && onChangeNumTickets(e.target.value)
         }
         data-max-width="70"
-        unit={!invalid && ticketUnitLabel}
         {...props}
       />
+      <div className={style.ticketUnitLabel}>{ticketUnitLabel}</div>
       <button
         key="less"
         aria-label="less"
diff --git a/app/components/inputs/NumTicketsInput/NumTicketsInput.module.css b/app/components/inputs/NumTicketsInput/NumTicketsInput.module.css
index 69fc5c9d16..7961a3cfe9 100644
--- a/app/components/inputs/NumTicketsInput/NumTicketsInput.module.css
+++ b/app/components/inputs/NumTicketsInput/NumTicketsInput.module.css
@@ -1,72 +1,76 @@
 .container {
   height: 24px;
-  margin-left: 6px;
-  border-bottom: 1px var(--stroke-color-default) solid;
-  width: 125px;
+  width: 183px;
   position: relative;
   display: flex;
   flex-direction: row;
 }
-.container.error {
-  border-bottom: 1px var(--error-text-color) solid;
-}
 .container.error input {
-  max-width: initial;
   color: var(--error-text-color);
 }
-.container.error::before {
+.container.error .integerInput::before {
   position: absolute;
   content: "";
   width: 18px;
   height: 22px;
   top: 0;
-  right: 43px;
+  right: 0;
   display: block;
   background-repeat: no-repeat;
   background-image: var(--warning-input-icon);
   background-size: 16px 16px;
   background-position: 0 center;
 }
-.integerInput,
+.integerInput {
+  width: 75px;
+  font-size: 16px;
+  padding-left: 0;
+  padding-bottom: 2px;
+  position: relative;
+}
+.integerInput:hover {
+  border-bottom: 1px solid var(--accent-blue);
+}
 .integerInput:hover:not(.disabled):not(.active):not(.error) {
-  border: none !important;
+  border-bottom: 1px var(--accent-blue) solid;
 }
 .integerInput input {
-  max-width: 30px;
-  height: 22px;
+  font-size: 16px;
+  line-height: 16px;
 }
-.integerInput .unitArea {
-  color: var(--tx-detail-text) !important;
+.integerInput input::placeholder {
+  font-size: 16px;
+}
+.container.error .integerInput,
+.container.error .integerInput:hover:not(.disabled):not(.active):not(.error) {
+  border-bottom: 1px var(--error-text-color) solid;
 }
 .inputError {
-  border-bottom: 0;
   background-image: none;
 }
 .inputErrorsArea {
   width: 100%;
   position: absolute;
   bottom: -13px;
-  left: 6px;
+  left: 0;
   margin: 0;
 }
 .integerInput.error:hover {
   border-bottom: 0 !important;
 }
 .icon {
-  width: 20px;
-  height: 20px;
-  background-size: 6px;
+  width: 24px;
+  height: 24px;
+  background-size: 9px;
   background-position: 50% 50%;
   background-repeat: no-repeat;
-  background-color: var(--account-text);
-  box-shadow: 0px 3px 8px var(--icons-shadow);
-  margin-left: 3px;
+  background-color: var(--accent-blue);
   border-radius: 5px;
-  position: absolute;
-  top: 0;
   border: none;
   outline: 0;
   cursor: pointer;
+  position: absolute;
+  top: 0;
 }
 .icon.more {
   background-image: var(--tickets-plus-icon);
@@ -77,8 +81,13 @@
 }
 .icon.less {
   background-image: var(--tickets-minus-icon);
-  right: 22px;
+  right: 29px;
 }
 .icon.less:hover {
   opacity: 0.7;
 }
+.ticketUnitLabel {
+  color: var(--grey-5);
+  font-size: 16px;
+  line-height: 22px;
+}
diff --git a/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.jsx b/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.jsx
new file mode 100644
index 0000000000..9aba8742b0
--- /dev/null
+++ b/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.jsx
@@ -0,0 +1,68 @@
+import { FormattedMessage as T } from "react-intl";
+import Modal from "../Modal";
+import styles from "./AutoBuyerSettingsModal.module.css";
+import { DcrInput, AccountsSelect } from "inputs";
+import { PiUiButton, InvisiblePiUiButton } from "buttons";
+import { classNames } from "pi-ui";
+
+const AutoBuyerSettingsModal = ({
+  onCancelModal,
+  onSubmit,
+  show,
+  balanceToMaintain,
+  setBalanceToMaintain,
+  account,
+  setAccount,
+  vsp,
+  notMixedAccounts,
+  isValid,
+  clicked,
+  VSPSelectControl
+}) => {
+  return (
+    <Modal className={styles.modal} {...{ show }}>
+      <div className={styles.title}>
+        <T id="autoBuyerSettings.header" m="Automatic ticket purchases" />
+      </div>
+      <div className={styles.infoCloseButtonTop} onClick={onCancelModal} />
+      <label className={styles.label}>
+        <T id="vsp.autobuyer.balanceToMaintain" m="Balance to Maintain" />
+        <DcrInput
+          amount={balanceToMaintain?.value}
+          onChangeAmount={setBalanceToMaintain}
+          className={styles.balanceToMaintainInput}
+        />
+      </label>
+      <label className={classNames(styles.label, "selectWithBigFont")}>
+        <T id="vsp.autobuyer.accountFrom" m="From" />
+        <AccountsSelect
+          {...{ account }}
+          onChange={setAccount}
+          showAccountsButton={false}
+          hideSpendable={true}
+          filterAccounts={notMixedAccounts}
+          selectClassName={styles.accountSelectInput}
+        />
+      </label>
+      <label className={classNames(styles.label, "selectWithBigFont")}>
+        <T id="vsp.autobuyer.stakePoolLabel" m="VSP" />
+        {VSPSelectControl}
+      </label>
+      {clicked && isValid === false && (
+        <div className={styles.error}>
+          <T id="autobuyer.startErr" m="Fill all fields." />
+        </div>
+      )}
+      <div className={styles.buttons}>
+        <InvisiblePiUiButton onClick={onCancelModal}>
+          <T id="autoBuyerSettings.cancel" m="Cancel" />
+        </InvisiblePiUiButton>
+        <PiUiButton onClick={() => onSubmit(balanceToMaintain, account, vsp)}>
+          <T id="autoBuyerSettings.save" m="Save" />
+        </PiUiButton>
+      </div>
+    </Modal>
+  );
+};
+
+export default AutoBuyerSettingsModal;
diff --git a/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.module.css b/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.module.css
new file mode 100644
index 0000000000..04966dbad8
--- /dev/null
+++ b/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.module.css
@@ -0,0 +1,66 @@
+.modal {
+  background-image: none;
+  padding: 30px 40px;
+  min-width: 333px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.title {
+  font-size: 28px;
+  line-height: 35px;
+  color: var(--stroke-color-hovered);
+  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;
+}
+
+.infoCloseButtonTop:hover {
+  opacity: 0.7;
+}
+.error {
+  margin-top: 20px;
+  color: var(--error-text-color);
+}
+.buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-top: 30px;
+}
+.label {
+  font-size: 13px;
+  line-height: 16px;
+  color: var(--stroke-color-hovered);
+}
+.accountSelectInput {
+  width: 332px;
+  margin-bottom: 25px;
+}
+.balanceToMaintainInput {
+  margin-bottom: 20px;
+}
+.balanceToMaintainInput input {
+  font-size: 16px;
+}
+
+@media screen and (max-width: 1179px) {
+  .modal {
+    width: 421px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .modal {
+    width: 355px;
+  }
+}
diff --git a/app/components/modals/AutoBuyerSettingsModal/index.js b/app/components/modals/AutoBuyerSettingsModal/index.js
new file mode 100644
index 0000000000..43a71683f1
--- /dev/null
+++ b/app/components/modals/AutoBuyerSettingsModal/index.js
@@ -0,0 +1 @@
+export { default } from "./AutoBuyerSettingsModal";
diff --git a/app/components/modals/index.js b/app/components/modals/index.js
index 9ad0789d98..ea0c0b87a4 100644
--- a/app/components/modals/index.js
+++ b/app/components/modals/index.js
@@ -15,3 +15,4 @@ export { default as SyncVSPFailedTickets } from "./SyncVSPFailedTickets";
 export { default as CantCloseModals } from "./CantCloseModals/CantCloseModals";
 export { default as MixerSettingsModal } from "./MixerSettingsModal";
 export { default as ListUTXOsModal } from "./ListUTXOsModal";
+export { default as AutoBuyerSettingsModal } from "./AutoBuyerSettingsModal";
diff --git a/app/components/shared/PurchaseTicketsForm/PurchaseTicketsForm.jsx b/app/components/shared/PurchaseTicketsForm/PurchaseTicketsForm.jsx
new file mode 100644
index 0000000000..40593dbad7
--- /dev/null
+++ b/app/components/shared/PurchaseTicketsForm/PurchaseTicketsForm.jsx
@@ -0,0 +1,312 @@
+import { FormattedMessage as T } from "react-intl";
+import { classNames, Checkbox, Tooltip } from "pi-ui";
+import {
+  TicketPurchaseModalButton,
+  RevokeModalButton,
+  PiUiButton,
+  TicketsCogs,
+  ImportScriptIconButton,
+  KeyBlueButton,
+  InvisibleConfirmModalButton
+} from "buttons";
+import { AccountsSelect, NumTicketsInput, VSPSelect } from "inputs";
+import {
+  TransitionMotionWrapper,
+  ShowWarning,
+  ExternalLink,
+  Balance
+} from "shared";
+import styles from "./PurchaseTicketsForm.module.css";
+
+const purchaseLabel = () => <T id="purchaseTickets.purchaseBtn" m="Purchase" />;
+export const LegacyVSPWarning = () => (
+  <T
+    id="purchase.isLegacyDescription"
+    m="Use a VSP which has not updated to vspd. Not recommended, legacy VSP support will soon be removed."
+  />
+);
+
+const LegacyCheckbox = ({ isLegacy, toggleIsLegacy }) => (
+  <Checkbox
+    label={<T id="purchase.isLegacy" m="Use Legacy VSP" />}
+    className={styles.useLegacyLabel}
+    id="box"
+    checked={isLegacy}
+    onChange={() => toggleIsLegacy(!isLegacy)}
+  />
+);
+
+const PurchaseTicketsForm = ({
+  isValid,
+  handleOnKeyDown,
+  numTicketsToBuy,
+  onChangeNumTickets,
+  onIncrementNumTickets,
+  onDecrementNumTickets,
+  setAccount,
+  account,
+  ticketPrice,
+  isWatchingOnly,
+  setVSP,
+  vsp,
+  vspFee,
+  setVspFee,
+  onPurchaseTickets,
+  onRevokeTickets,
+  availableVSPs,
+  isLoading,
+  rememberedVspHost,
+  toggleRememberVspHostCheckBox,
+  notMixedAccounts,
+  getRunningIndicator,
+  toggleIsLegacy,
+  isLegacy,
+  dismissBackupRedeemScript,
+  onDismissBackupRedeemScript,
+  isShowingAdvanced,
+  onToggleShowAdvanced,
+  getQuickBarComponent,
+  getAdvancedComponent,
+  willEnter,
+  willLeave,
+  toggleShowVsp
+}) => (
+  <>
+    <div className={classNames(styles.purchaseForm, styles.isRow)}>
+      <div className={classNames(styles.isColumn, styles.inputAddress)}>
+        <label className={styles.rowLabel}>
+          <T id="purchaseTickets.accountFrom" m="Account" />
+          <div
+            className={classNames(
+              styles.inputSelectContainer,
+              "selectWithBigFont"
+            )}>
+            <AccountsSelect
+              filterAccounts={notMixedAccounts}
+              className={styles.inputSelect}
+              selectClassName={styles.accountSelectInput}
+              {...{ account, onChange: setAccount }}
+            />
+          </div>
+        </label>
+        {!isLegacy && (
+          <label className={styles.rowLabel}>
+            <T id="purchaseTickets.vspFrom" m="VSP" />
+            <div
+              className={classNames(styles.vspContainer, "selectWithBigFont")}>
+              <VSPSelect
+                className={styles.inputSelect}
+                style={{ width: "100%", marginRight: "10px" }}
+                {...{
+                  options: availableVSPs,
+                  account,
+                  onChange: setVSP,
+                  value: vsp,
+                  isDisabled: !!rememberedVspHost,
+                  setVspFee
+                }}
+              />
+            </div>
+          </label>
+        )}
+        <div className={styles.checkboxWrapper}>
+          <div>
+            {!isLegacy ? (
+              <Tooltip
+                contentClassName={styles.useLegacyTooltip}
+                content={<LegacyVSPWarning />}>
+                <LegacyCheckbox {...{ isLegacy, toggleIsLegacy }} />
+              </Tooltip>
+            ) : (
+              <LegacyCheckbox {...{ isLegacy, toggleIsLegacy }} />
+            )}
+          </div>
+          {vsp && !isLegacy && (
+            <Checkbox
+              className={styles.rememberVspCheckBox}
+              label={
+                <T
+                  id="purchaseTickets.alwaysUseThisVSP"
+                  m="Always use this VSP"
+                />
+              }
+              id="rememberVspHost"
+              checked={!!rememberedVspHost}
+              onChange={toggleRememberVspHostCheckBox}
+            />
+          )}
+        </div>
+      </div>
+      <div className={classNames(styles.isRow, styles.inputAmount)}>
+        <div className={styles.numTicketsToBuy}>
+          <label htmlFor="numTicketsToBuy">
+            <T id="purchaseTickets.ticketAmount" m="Amount" />
+          </label>
+          <NumTicketsInput
+            required
+            invalid={account.spendable < numTicketsToBuy * ticketPrice}
+            invalidMessage={
+              <T
+                id="purchaseTickets.errors.insufficientBalance"
+                m="Not enough funds"
+              />
+            }
+            numTickets={numTicketsToBuy}
+            incrementNumTickets={onIncrementNumTickets}
+            decrementNumTickets={onDecrementNumTickets}
+            onChangeNumTickets={onChangeNumTickets}
+            onKeyDown={handleOnKeyDown}
+            id="numTicketsToBuy"
+            showErrors={true}
+          />
+        </div>
+        {isValid && (
+          <div className={styles.inputValidMessageArea}>
+            <span>
+              <T id="purchaseTickets.vspFee" m="VSP Fee" />:
+            </span>
+            <span
+              className={classNames(styles.vspFee, vsp && styles.haveVspFee)}>
+              {vsp && vspFee ? vspFee : 0} %
+            </span>
+            <T
+              id="purchaseTickets.validMsg"
+              m="Total: {amount} Remaining: {remaining}"
+              values={{
+                amount: (
+                  <Balance
+                    flat
+                    amount={numTicketsToBuy * ticketPrice}
+                    classNameWrapper={styles.validMsgBalance}
+                    classNameSecondary={styles.validMsgBalanceSecondary}
+                    classNameUnit={styles.validMsgBalanceUnit}
+                  />
+                ),
+                remaining: (
+                  <Balance
+                    flat
+                    amount={account.spendable - numTicketsToBuy * ticketPrice}
+                    classNameWrapper={styles.validMsgBalance}
+                    classNameSecondary={styles.validMsgBalanceSecondary}
+                    classNameUnit={styles.validMsgBalanceUnit}
+                  />
+                )
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+    {isLegacy && (
+      <div className={styles.info}>
+        <div className={classNames(styles.actionButtons, styles.isColumn)}>
+          <TicketsCogs
+            opened={!isShowingAdvanced}
+            onClick={onToggleShowAdvanced}
+            ariaLabel="Show advanced settings"
+          />
+          <ImportScriptIconButton />
+        </div>
+        <TransitionMotionWrapper
+          {...{
+            styles: !isShowingAdvanced
+              ? getQuickBarComponent
+              : getAdvancedComponent,
+            willEnter: !isShowingAdvanced
+              ? () => willEnter(270)
+              : () => willEnter(80),
+            willLeave
+          }}
+        />
+      </div>
+    )}
+    {!dismissBackupRedeemScript && isLegacy && (
+      <div className={styles.warningArea}>
+        <ShowWarning
+          warn={
+            <T
+              id="purchase.ticket.backup.redeem.warn"
+              m="You must backup your redeem script. More information about it can be found at {link}"
+              values={{
+                link: (
+                  <ExternalLink
+                    href={
+                      "https://docs.decred.org/wallets/decrediton/using-decrediton/#backup-redeem-script"
+                    }>
+                    <T id="purchase.ticket.decred.docs" m="Decred docs" />
+                  </ExternalLink>
+                )
+              }}
+            />
+          }
+        />
+        <div className={classNames(styles.isRow, styles.backupButtonsRowArea)}>
+          <InvisibleConfirmModalButton
+            modalTitle={<T id="purchase.ticket.modal.title" m="Dismiss" />}
+            modalContent={
+              <T
+                id="purchase.ticket.modal.desc"
+                m="Are you sure you want to dismiss this message? Make sure your redeem scripts are backed up."
+              />
+            }
+            buttonLabel={
+              <T id="purchase.ticket.dismiss.warn" m="Dismiss Message" />
+            }
+            onSubmit={() => onDismissBackupRedeemScript()}
+            className={styles.stakepoolContentSend}
+          />
+          <KeyBlueButton
+            className={styles.vspWarningBackupRedeemButton}
+            onClick={() => toggleShowVsp(true)}>
+            <T id="purchase.ticket.warn.button" m="Backup Redeem Scripts" />
+          </KeyBlueButton>
+        </div>
+      </div>
+    )}
+    <div className={styles.buttonsArea}>
+      <RevokeModalButton
+        modalTitle={
+          <T id="tickets.revokeConfirmations" m="Revoke Tickets Confirmation" />
+        }
+        className={styles.revokeButton}
+        onSubmit={onRevokeTickets}
+        kind="secondary"
+        buttonLabel={<T id="purchaseTickets.revokeBtn" m="Revoke" />}
+      />
+
+      {isWatchingOnly ? (
+        <PiUiButton disabled={!isValid} onClick={onPurchaseTickets}>
+          {purchaseLabel()}
+        </PiUiButton>
+      ) : isLoading ? (
+        <PiUiButton loading={true}>
+          <div />
+        </PiUiButton>
+      ) : getRunningIndicator ? (
+        <Tooltip
+          content={
+            <T
+              id="tickets.purchase.running"
+              m="Privacy Mixer or Autobuyer running, please shut them off before purchasing a ticket."
+            />
+          }>
+          <PiUiButton disabled={true}>{purchaseLabel()}</PiUiButton>
+        </Tooltip>
+      ) : (
+        <TicketPurchaseModalButton
+          modalTitle={
+            <T
+              id="tickets.purchaseConfirmation"
+              m="Ticket Purchase Confirmation"
+            />
+          }
+          disabled={!isValid}
+          onSubmit={onPurchaseTickets}
+          buttonLabel={purchaseLabel()}
+        />
+      )}
+    </div>
+  </>
+);
+
+export default PurchaseTicketsForm;
diff --git a/app/components/shared/PurchaseTicketsForm/PurchaseTicketsForm.module.css b/app/components/shared/PurchaseTicketsForm/PurchaseTicketsForm.module.css
new file mode 100644
index 0000000000..df076bcbfb
--- /dev/null
+++ b/app/components/shared/PurchaseTicketsForm/PurchaseTicketsForm.module.css
@@ -0,0 +1,216 @@
+.isRow {
+  display: flex;
+  flex-direction: row;
+}
+.isColumn {
+  display: flex;
+  flex-direction: column;
+}
+
+.legacyIcon {
+  margin-left: auto;
+  cursor: pointer;
+}
+
+.useLegacyTooltip {
+  font-size: 12px;
+  width: 20rem;
+}
+
+.useLegacyLabel {
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--purchase-label);
+}
+
+.infoFields strong {
+  color: var(--input-color);
+}
+
+.privacyForm {
+  background-color: var(--background-back-color);
+  border-radius: 10px;
+}
+
+.purchaseForm {
+  background-color: var(--background-back-color);
+  padding: 30px 40px;
+}
+
+.privacyArea {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 16px 19px;
+  background-color: var(--background-back-color);
+}
+
+.title {
+  font-size: 15px;
+  margin-bottom: 10px;
+}
+
+.rememberVspCheckBox {
+  grid-column: 2;
+  justify-self: right;
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--purchase-label);
+}
+
+.rowLabel {
+  font-size: 13px;
+  line-height: 16px;
+  color: var(--purchase-label);
+  align-self: flex-end;
+  width: 100%;
+}
+
+.inputAddress {
+  align-self: flex-start;
+  padding-right: 40px;
+  border-right: 1px solid var(--purchase-ticket-border);
+}
+.inputAmount {
+  flex-wrap: wrap;
+  align-self: flex-start;
+}
+.numTicketsToBuy {
+  padding-left: 40px;
+}
+.inputSelectContainer {
+  display: flex;
+  align-self: center;
+  margin-bottom: 25px;
+}
+.accountSelectInput {
+  width: 421px;
+}
+.inputValidMessageArea {
+  width: 100%;
+  position: relative;
+  display: grid;
+  grid-template-columns: max-content auto;
+  row-gap: 10px;
+  margin: 0;
+  padding: 35px 0 0 40px;
+  text-align: right;
+  font-size: 13px;
+  line-height: 16px;
+  color: var(--purchase-label);
+}
+.vspFee {
+  color: var(--main-dark-blue);
+}
+.haveVspFee {
+  color: var(--error-red);
+}
+.validMsgBalanceUnit,
+.validMsgBalance {
+  color: var(--input-color-default);
+}
+.validMsgBalanceSecondary {
+  color: var(--account-text);
+}
+.buttonsArea {
+  margin-top: 20px;
+  text-align: right;
+  display: flex;
+  width: 764px;
+  justify-content: flex-end;
+}
+.revokeButton {
+  margin-right: 10px;
+}
+.vspContainer {
+  display: flex;
+  font-size: 16px;
+}
+.error {
+  color: var(--error-text-color);
+  font-size: 13px;
+}
+.checkboxWrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 24px;
+}
+
+/* legacy */
+
+.info {
+  margin-bottom: 10px;
+  background-color: var(--transfer-details-bg);
+}
+.actionButtons {
+  float: right;
+  margin: 15px 19px 0 0;
+}
+.warningArea {
+  padding-left: 50px;
+  background-image: var(--info-warning-icon);
+  background-repeat: no-repeat;
+  background-size: 30px;
+  background-position: 5px 50%;
+  border: 1px solid var(--error-text-color);
+  border-radius: 10px;
+  margin-bottom: 10px;
+}
+.backupButtonsRowArea {
+  justify-content: flex-end;
+}
+.stakepoolContentSend {
+  margin-top: 1em;
+}
+.vspWarningBackupRedeemButton {
+  margin-top: 10px;
+  margin-right: 5px;
+  margin-bottom: 5px;
+}
+
+@media screen and (max-width: 1179px) {
+  .buttonsArea {
+    width: 667px;
+  }
+  .accountSelectInput {
+    width: 326px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .purchaseForm {
+    padding: 30px 20px;
+    padding-bottom: 0;
+    flex-direction: column !important;
+  }
+
+  .purchaseForm.isRow {
+    flex-direction: column;
+  }
+  .rowLabel {
+    font-size: 13px;
+  }
+  .inputAddress {
+    border: none;
+  }
+  .numTicketsToBuy {
+    padding-left: 0;
+  }
+  .inputAmount {
+    margin-top: 25px;
+    margin-bottom: 40px;
+  }
+  .inputAmount .rowLabel {
+    padding-left: 0;
+  }
+  .inputSelectContainer {
+    display: flex;
+  }
+  .buttonsArea {
+    width: 355px;
+    margin-bottom: 20px;
+  }
+  .accountSelectInput {
+    width: 310px;
+  }
+}
diff --git a/app/components/shared/PurchaseTicketsForm/index.js b/app/components/shared/PurchaseTicketsForm/index.js
new file mode 100644
index 0000000000..b194dd6e74
--- /dev/null
+++ b/app/components/shared/PurchaseTicketsForm/index.js
@@ -0,0 +1 @@
+export { default } from "./PurchaseTicketsForm";
diff --git a/app/components/shared/TicketAutoBuyerForm/TicketAutoBuyerForm.jsx b/app/components/shared/TicketAutoBuyerForm/TicketAutoBuyerForm.jsx
new file mode 100644
index 0000000000..21353b82df
--- /dev/null
+++ b/app/components/shared/TicketAutoBuyerForm/TicketAutoBuyerForm.jsx
@@ -0,0 +1,128 @@
+import { AutoBuyerSwitch, AutoBuyerPassphraseModalSwitch } from "buttons";
+import { AutoBuyerSettingsModal } from "modals";
+import { FormattedMessage as T } from "react-intl";
+import { Tooltip } from "pi-ui";
+import { Balance } from "shared";
+import styles from "./TicketAutoBuyerForm.module.css";
+
+const TicketAutoBuyerForm = ({
+  onStartAutoBuyer,
+  onStopAutoBuyer,
+  isRunning,
+  balanceToMaintain,
+  setBalanceToMaintain,
+  account,
+  setAccount,
+  vsp,
+  vspHost,
+  isValid,
+  clicked,
+  onClick,
+  notMixedAccounts,
+  getRunningIndicator,
+  onSaveAutoBuyerSettings,
+  isSettingsModalVisible,
+  showSettingsModal,
+  hideSettingsModal,
+  VSPSelectControl
+}) => (
+  <>
+    <div className={styles.wrapper}>
+      <div>
+        {isRunning ? (
+          <AutoBuyerSwitch
+            enabled
+            onClick={onStopAutoBuyer}
+            className={styles.toggleSwitch}
+          />
+        ) : getRunningIndicator ? (
+          <Tooltip
+            content={
+              <T
+                id="tickets.autobuyer.running"
+                m="Privacy Mixer or Purchase Ticket Attempt running, please shut them off before starting autobuyer."
+              />
+            }>
+            <AutoBuyerPassphraseModalSwitch
+              className={styles.toggleSwitch}
+              disabled={true}
+            />
+          </Tooltip>
+        ) : (
+          <AutoBuyerPassphraseModalSwitch
+            className={styles.toggleSwitch}
+            modalTitle={
+              <T
+                id="vsp.tickets.startAutoBuyerConfirmation"
+                m="Start Ticket Buyer Confirmation"
+              />
+            }
+            modalDescription={
+              <div>
+                <span className={styles.orangeWarning}>
+                  <T
+                    id="vsp.tickets.startAutoBuyerConfirmation.attention"
+                    m="Attention!"
+                  />
+                </span>
+                <T
+                  id="vsp.tickets.startAutoBuyerConfirmation.description"
+                  m="Decrediton must remain running for tickets to be automatically purchased."
+                />
+                <div>
+                  <div className={styles.isRow}>
+                    <div className={styles.confirmLabel}>
+                      <T
+                        id="vsp.autobuyer.modal.balanceToMaintain"
+                        m="Balance To Maintain"
+                      />
+                      :
+                    </div>
+                    <div>
+                      <Balance flat amount={balanceToMaintain?.atomValue} />
+                    </div>
+                  </div>
+                  <div className={styles.isRow}>
+                    <div className={styles.confirmLabel}>
+                      <T id="vsp.autobuyer.modal.stakepool" m="VSP" />:
+                    </div>
+                    <div>{vspHost && vspHost}</div>
+                  </div>
+                </div>
+              </div>
+            }
+            onSubmit={onStartAutoBuyer}
+            onClick={onClick}
+            isValid={!!isValid}
+          />
+        )}
+      </div>
+      <div className={styles.subtitle}>
+        <T id="vsp.autobuyer.subtitle" m="Automatic Ticket Purchases" />
+      </div>
+      <button
+        aria-label="Ticket Autobuyer Settings"
+        className={styles.settingsButton}
+        onClick={showSettingsModal}
+      />
+      <AutoBuyerSettingsModal
+        {...{
+          show: isSettingsModalVisible,
+          onSubmit: onSaveAutoBuyerSettings,
+          onCancelModal: hideSettingsModal,
+          balanceToMaintain,
+          setBalanceToMaintain,
+          account,
+          setAccount,
+          vsp,
+          notMixedAccounts,
+          isValid,
+          clicked,
+          VSPSelectControl
+        }}
+      />
+    </div>
+  </>
+);
+
+export default TicketAutoBuyerForm;
diff --git a/app/components/shared/TicketAutoBuyerForm/TicketAutoBuyerForm.module.css b/app/components/shared/TicketAutoBuyerForm/TicketAutoBuyerForm.module.css
new file mode 100644
index 0000000000..5aae9871c2
--- /dev/null
+++ b/app/components/shared/TicketAutoBuyerForm/TicketAutoBuyerForm.module.css
@@ -0,0 +1,47 @@
+.isRow {
+  display: flex;
+  flex-direction: row;
+}
+.wrapper {
+  background-color: var(--background-back-color);
+  padding: 20px 40px;
+  margin: 30px 0;
+
+  display: flex;
+  flex-direction: row;
+}
+.subtitle {
+  margin-left: 20px;
+  font-size: 16px;
+  line-height: 20px;
+}
+.toggleSwitch {
+  margin: 0;
+}
+.settingsButton {
+  background-repeat: no-repeat;
+  background-size: 20px;
+  background-position: center;
+  background-image: var(--tickets-cogs-opened-icon);
+  background-color: transparent;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  margin: 0 0 0 auto;
+  outline: none;
+  border: none;
+  cursor: pointer;
+}
+.orangeWarning {
+  position: inherit;
+}
+.confirmLabel {
+  display: inline-block;
+  margin-right: 0.5em;
+}
+
+@media screen and (max-width: 768px) {
+  .wrapper {
+    padding: 20px;
+  }
+}
diff --git a/app/components/shared/TicketAutoBuyerForm/index.js b/app/components/shared/TicketAutoBuyerForm/index.js
new file mode 100644
index 0000000000..544975e49a
--- /dev/null
+++ b/app/components/shared/TicketAutoBuyerForm/index.js
@@ -0,0 +1 @@
+export { default } from "./TicketAutoBuyerForm";
diff --git a/app/components/shared/index.js b/app/components/shared/index.js
index 941b2144f1..e1da1a8952 100644
--- a/app/components/shared/index.js
+++ b/app/components/shared/index.js
@@ -27,3 +27,5 @@ export { default as PrivacyForm } from "./PrivacyForm/PrivacyForm";
 export { default as Log } from "./Log/Log";
 export { default as SendTransaction } from "./SendTransaction/SendTransaction";
 export { default as Collapse } from "./Collapse";
+export { default as TicketAutoBuyerForm } from "./TicketAutoBuyerForm";
+export { default as PurchaseTicketsForm } from "./PurchaseTicketsForm";
diff --git a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/Form.jsx b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/Form.jsx
deleted file mode 100644
index 75965f5705..0000000000
--- a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/Form.jsx
+++ /dev/null
@@ -1,215 +0,0 @@
-import {
-  TicketsCogs,
-  PassphraseModalButton,
-  ImportScriptIconButton,
-  KeyBlueButton,
-  InvisibleConfirmModalButton
-} from "buttons";
-import { AccountsSelect, NumTicketsInput } from "inputs";
-import { FormattedMessage as T } from "react-intl";
-import { Tooltip, classNames } from "pi-ui";
-import {
-  TransitionMotionWrapper,
-  ShowWarning,
-  ExternalLink,
-  Balance
-} from "shared";
-
-import styles from "./PurchaseTickets.module.css";
-
-const purchaseLabel = () => (
-  <T id="purchas.legacypurchaseTickets.purchaseBtn" m="Purchase" />
-);
-
-const PurchaseTicketsForm = ({
-  isShowingAdvanced,
-  getQuickBarComponent,
-  getAdvancedComponent,
-  getIsValid,
-  handleOnKeyDown,
-  numTicketsToBuy,
-  onIncrementNumTickets,
-  onDecrementNumTickets,
-  onChangeNumTickets,
-  onChangeAccount,
-  onPurchaseTickets,
-  onRevokeTickets,
-  onToggleShowAdvanced,
-  account,
-  ticketPrice,
-  willEnter,
-  willLeave,
-  toggleShowVsp,
-  dismissBackupRedeemScript,
-  onDismissBackupRedeemScript,
-  isWatchingOnly,
-  notMixedAccounts,
-  getRunningIndicator
-}) => (
-  <>
-    <div className={classNames(styles.areaRow, styles.isRow)}>
-      <div className={classNames(styles.isRow, styles.inputAddress)}>
-        <label className={styles.rowLabel}>
-          <T id="purchaseTickets.accountFrom.legacy" m="From" />:
-        </label>
-        <AccountsSelect
-          className={styles.inputSelect}
-          filterAccounts={notMixedAccounts}
-          {...{ account, onChange: onChangeAccount }}
-        />
-        <div
-          className={classNames(styles.infoIcon, styles.accountSelectIcon)}
-        />
-      </div>
-      <div className={classNames(styles.isRow, styles.inputAmount)}>
-        <label className={styles.rowLabel} htmlFor="numTicketsToBuy">
-          <T id="purchaseTickets.ticketAmount.legacy" m="Amount" />:
-        </label>
-        <NumTicketsInput
-          required
-          invalid={!getIsValid()}
-          invalidMessage={
-            <T
-              id="purchaseTickets.errors.insufficientBalance.legacy"
-              m="Not enough funds"
-            />
-          }
-          numTickets={numTicketsToBuy}
-          incrementNumTickets={onIncrementNumTickets}
-          decrementNumTickets={onDecrementNumTickets}
-          onChangeNumTickets={onChangeNumTickets}
-          onKeyDown={handleOnKeyDown}
-          id="numTicketsToBuy"
-          showErrors={true}></NumTicketsInput>
-        {getIsValid() && (
-          <div className={styles.inputValidMessageArea}>
-            <T
-              id="purchaseTickets.validMsg.legacy"
-              m="Total: {amount} Remaining: {remaining}"
-              values={{
-                amount: <Balance flat amount={numTicketsToBuy * ticketPrice} />,
-                remaining: (
-                  <Balance
-                    flat
-                    amount={account.spendable - numTicketsToBuy * ticketPrice}
-                  />
-                )
-              }}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-    <div className={styles.info}>
-      <div className={classNames(styles.actionButtons, styles.isColumn)}>
-        <TicketsCogs
-          opened={!isShowingAdvanced}
-          onClick={onToggleShowAdvanced}
-          ariaLabel="Show advanced settings"
-        />
-        <ImportScriptIconButton />
-      </div>
-      <TransitionMotionWrapper
-        {...{
-          styles: !isShowingAdvanced
-            ? getQuickBarComponent
-            : getAdvancedComponent,
-          willEnter: !isShowingAdvanced
-            ? () => willEnter(270)
-            : () => willEnter(80),
-          willLeave
-        }}
-      />
-    </div>
-    {!dismissBackupRedeemScript && (
-      <div className={styles.warningArea}>
-        <ShowWarning
-          warn={
-            <T
-              id="purchase.ticket.backup.redeem.warn"
-              m="You must backup your redeem script. More information about it can be found at {link}"
-              values={{
-                link: (
-                  <ExternalLink
-                    href={
-                      "https://docs.decred.org/wallets/decrediton/using-decrediton/#backup-redeem-script"
-                    }>
-                    <T id="purchase.ticket.decred.docs" m="Decred docs" />
-                  </ExternalLink>
-                )
-              }}
-            />
-          }
-        />
-        <div className={classNames(styles.isRow, styles.backupButtonsRowArea)}>
-          <InvisibleConfirmModalButton
-            modalTitle={<T id="purchase.ticket.modal.title" m="Dismiss" />}
-            modalContent={
-              <T
-                id="purchase.ticket.modal.desc"
-                m="Are you sure you want to dismiss this message? Make sure your redeem scripts are backed up."
-              />
-            }
-            buttonLabel={
-              <T id="purchase.ticket.dismiss.warn" m="Dismiss Message" />
-            }
-            onSubmit={() => onDismissBackupRedeemScript()}
-            className={styles.stakepoolContentSend}
-          />
-          <KeyBlueButton
-            className={styles.vspWarningBackupRedeemButton}
-            onClick={() => toggleShowVsp(true)}>
-            <T id="purchase.ticket.warn.button" m="Backup Redeem Scripts" />
-          </KeyBlueButton>
-        </div>
-      </div>
-    )}
-    <div className={styles.buttonsArea}>
-      <PassphraseModalButton
-        modalTitle={
-          <T
-            id="tickets.revokeConfirmations.legacy"
-            m="Revoke Tickets Confirmation"
-          />
-        }
-        className={styles.revokeButton}
-        onSubmit={onRevokeTickets}
-        buttonLabel={<T id="purchaseTickets.revokeBtn.legacy" m="Revoke" />}
-      />
-      {isWatchingOnly ? (
-        <KeyBlueButton
-          disabled={getIsValid && !getIsValid()}
-          onClick={onPurchaseTickets}>
-          {purchaseLabel()}
-        </KeyBlueButton>
-      ) : getRunningIndicator ? (
-        <Tooltip
-          content={
-            <T
-              id="tickets.purchase-legacy.running"
-              m="Privacy Mixer or Autobuyer running, please shut them off before purchasing tickets."
-            />
-          }>
-          <PassphraseModalButton
-            disabled={true}
-            buttonLabel={purchaseLabel()}
-          />
-        </Tooltip>
-      ) : (
-        <PassphraseModalButton
-          modalTitle={
-            <T
-              id="tickets.purchaseConfirmation.legacy"
-              m="Ticket Purchase Confirmation"
-            />
-          }
-          disabled={getIsValid && !getIsValid()}
-          onSubmit={onPurchaseTickets}
-          buttonLabel={purchaseLabel()}
-        />
-      )}
-    </div>
-  </>
-);
-
-export default PurchaseTicketsForm;
diff --git a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTickets.module.css b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTickets.module.css
deleted file mode 100644
index ef2c73ab2a..0000000000
--- a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTickets.module.css
+++ /dev/null
@@ -1,152 +0,0 @@
-.isRow {
-  display: flex;
-  flex-direction: row;
-}
-.isColumn {
-  display: flex;
-  flex-direction: column;
-}
-.areaRow {
-  padding: 29px 0 0 20px;
-  border-bottom: 1px var(--disabled-background-color) solid;
-  background-color: var(--background-back-color);
-  padding-bottom: 40px;
-  align-content: flex-start;
-}
-.inputAddress {
-  align-self: flex-start;
-}
-.inputAddress .rowLabel {
-  width: 82px;
-  text-align: right;
-  justify-self: flex-end;
-}
-.inputAmount {
-  flex-wrap: wrap;
-  align-self: flex-start;
-}
-.inputAmount .rowLabel {
-  padding-left: 52px;
-}
-.inputSelect {
-  font-size: 16px;
-  text-align: left;
-  width: 220px;
-  margin-right: 6px;
-  margin-left: 6px;
-  margin-top: 3px;
-}
-.infoIcon {
-  background-position: 0px 50%;
-  background-size: 16px;
-  background-repeat: no-repeat;
-  padding-left: 30px;
-  width: 100%;
-  font-family: var(--font-family-monospace);
-  color: var(--header-desc-lighter-color);
-  font-size: 11px;
-  line-height: 11px;
-  display: flex;
-  align-items: center;
-  height: 25px;
-}
-.infoIcon.feeIcon {
-  background-image: var(--split-fee-icon);
-}
-.infoIcon.accountSelectIcon {
-  background-image: var(--wallet-gray-icon);
-  width: 25px;
-  background-position: 2px 5px;
-  background-size: 22px;
-  align-self: flex-end;
-}
-.inputValidMessageArea {
-  width: 200px;
-  position: relative;
-  display: grid;
-  grid-template-rows: 20px 20px;
-  grid-template-columns: 72px auto;
-  bottom: 0px;
-  left: 0px;
-  margin: 0;
-  padding-top: 10px;
-  padding-left: 72px;
-}
-.info {
-  margin-bottom: 10px;
-  background-color: var(--transfer-details-bg);
-}
-.actionButtons {
-  float: right;
-  margin: 15px 19px 0 0;
-}
-.buttonsArea {
-  text-align: right;
-  display: flex;
-  width: 740px;
-  justify-content: flex-end;
-}
-.revokeButton {
-  margin-right: 10px;
-}
-.warningArea {
-  padding-left: 50px;
-  background-image: var(--info-warning-icon);
-  background-repeat: no-repeat;
-  background-size: 30px;
-  background-position: 5px 50%;
-  border: 1px solid var(--error-text-color);
-  border-radius: 10px;
-  margin-bottom: 10px;
-}
-.backupButtonsRowArea {
-  justify-content: flex-end;
-}
-.stakepoolContentSend {
-  margin-top: 1em;
-}
-.vspWarningBackupRedeemButton {
-  margin-top: 10px;
-  margin-right: 5px;
-  margin-bottom: 5px;
-}
-
-@media screen and (max-width: 1179px) {
-  .inputSelect {
-    width: 220px;
-  }
-  .buttonsArea {
-    width: 667px;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .areaRow {
-    padding: 23px 0 0 25px;
-  }
-  .areaRow.isRow {
-    flex-direction: column;
-  }
-  .rowLabel {
-    font-size: 13px;
-  }
-  .inputAddress .rowLabel {
-    width: inherit;
-    text-align: right;
-  }
-  .inputAmount {
-    margin-top: 25px;
-    margin-bottom: 40px;
-  }
-  .inputAmount .rowLabel {
-    padding-left: 0;
-  }
-  .inputSelect {
-    margin-left: 10px;
-    align-self: flex-end;
-  }
-  .buttonsArea {
-    width: 355px;
-    margin-bottom: 20px;
-  }
-}
diff --git a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTicketsAdvanced/PurchaseTicketsAdvanced.module.css b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTicketsAdvanced/PurchaseTicketsAdvanced.module.css
index 2d9ec836b1..3615b01d35 100644
--- a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTicketsAdvanced/PurchaseTicketsAdvanced.module.css
+++ b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTicketsAdvanced/PurchaseTicketsAdvanced.module.css
@@ -1,5 +1,5 @@
 .infoGrid {
-  padding: 10px 0 0 20px;
+  padding: 10px 0 10px 20px;
   display: grid;
   grid-template-columns: repeat(6, max-content);
   align-items: center;
diff --git a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTicketsQuickBar/PurchaseTicketsQuickBar.module.css b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTicketsQuickBar/PurchaseTicketsQuickBar.module.css
index bf3feb0446..a77af1a01c 100644
--- a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTicketsQuickBar/PurchaseTicketsQuickBar.module.css
+++ b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTicketsQuickBar/PurchaseTicketsQuickBar.module.css
@@ -1,6 +1,6 @@
 .quickBar {
   padding: 14px 0 14px 18px;
-  height: 56px;
+  height: 80px;
   display: grid;
   grid-template-columns: repeat(4, max-content);
   align-items: center;
diff --git a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/index.js b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/index.js
index fad5c235ea..a681ac660b 100644
--- a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/index.js
+++ b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/index.js
@@ -1,6 +1,6 @@
 import { compose, eq, get } from "fp";
 import { spring } from "react-motion";
-import PurchaseTicketsForm from "./Form";
+import { PurchaseTicketsForm } from "shared";
 import PurchaseTicketsAdvanced from "./PurchaseTicketsAdvanced";
 import PurchaseTicketsQuickBar from "./PurchaseTicketsQuickBar";
 import { isNullOrUndefined } from "util";
@@ -9,7 +9,8 @@ import { MAX_POSSIBLE_FEE_INPUT } from "constants";
 
 const PurchaseTickets = ({
   toggleShowVsp,
-  onChangeAccount: onChangeAccountProp
+  onChangeAccount: onChangeAccountProp,
+  toggleIsLegacy
 }) => {
   const {
     ticketPrice,
@@ -214,13 +215,17 @@ const PurchaseTickets = ({
     return ticketFeeError || txFeeError || expiryError || !numTicketsToBuy;
   };
 
+  const vspFee = getStakePool().PoolFees;
+
   return (
     <PurchaseTicketsForm
       {...{
         isShowingAdvanced,
         getQuickBarComponent,
         getAdvancedComponent,
-        getIsValid,
+        vsp: getStakePool(),
+        vspFee,
+        isValid: getIsValid(),
         handleOnKeyDown,
         numTicketsToBuy,
         onIncrementNumTickets,
@@ -239,7 +244,9 @@ const PurchaseTickets = ({
         onDismissBackupRedeemScript,
         isWatchingOnly,
         notMixedAccounts,
-        getRunningIndicator
+        getRunningIndicator,
+        toggleIsLegacy,
+        isLegacy: true
       }}
     />
   );
diff --git a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_TicketAutoBuyer/Form.jsx b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_TicketAutoBuyer/Form.jsx
deleted file mode 100644
index 88afec4d22..0000000000
--- a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_TicketAutoBuyer/Form.jsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { AutoBuyerSwitch, AutoBuyerPassphraseModalSwitch } from "buttons";
-import { FormattedMessage as T } from "react-intl";
-import { DcrInput, AccountsSelect, LEGACY_StakePoolSelect } from "inputs";
-import { Tooltip, classNames } from "pi-ui";
-import { Balance, Subtitle } from "shared";
-import styles from "./TicketAutoBuyer.module.css";
-
-const TicketAutoBuyerForm = ({
-  onStartAutoBuyer,
-  onDisableTicketAutoBuyer,
-  isTicketAutoBuyerEnabled,
-  balanceToMaintain,
-  setBalanceToMaintain,
-  balanceToMaintainError,
-  account,
-  setAccount,
-  configuredStakePools,
-  stakePool,
-  setStakePool,
-  isFormValid,
-  clicked,
-  onClick,
-  notMixedAccounts,
-  getRunningIndicator
-}) => (
-  <>
-    <Subtitle
-      title={
-        <T id="automatictickets.subtitle" m="Automatic Ticket Purchases" />
-      }
-    />
-    <div className={styles.wrapper}>
-      <div className={styles.row}>
-        {isTicketAutoBuyerEnabled ? (
-          <AutoBuyerSwitch enabled onClick={onDisableTicketAutoBuyer} />
-        ) : getRunningIndicator ? (
-          <Tooltip
-            content={
-              <T
-                id="tickets.autobuyer-legacy.running"
-                m="Privacy Mixer or Purchase Ticket Attempt running, please shut them off before purchasing tickets."
-              />
-            }>
-            <AutoBuyerPassphraseModalSwitch disabled={true} />
-          </Tooltip>
-        ) : (
-          <AutoBuyerPassphraseModalSwitch
-            modalTitle={
-              <T
-                id="tickets.startAutoBuyerConfirmation"
-                m="Start Ticket Buyer Confirmation"
-              />
-            }
-            modalDescription={
-              <div>
-                <span className={styles.orangeWarning}>
-                  <T
-                    id="tickets.startAutoBuyerConfirmation.attention"
-                    m="Attention!"
-                  />
-                </span>
-                <T
-                  id="tickets.startAutoBuyerConfirmation.description"
-                  m="Decrediton must remain running for tickets to be automatically purchased."
-                />
-                <div>
-                  <div className={styles.isRow}>
-                    <div className={styles.confirmLabel}>
-                      <T
-                        id="autobuyer.modal.balanceToMaintain"
-                        m="Balance To Maintain"
-                      />
-                      :
-                    </div>
-                    <div>
-                      <Balance flat amount={balanceToMaintain} />
-                    </div>
-                  </div>
-                  <div className={styles.isRow}>
-                    <div className={styles.confirmLabel}>
-                      <T id="autobuyer.modal.stakepool" m="VSP" />:
-                    </div>
-                    <div>{stakePool && stakePool.Host}</div>
-                  </div>
-                </div>
-              </div>
-            }
-            onSubmit={onStartAutoBuyer}
-            isValid={isFormValid}
-            onClick={onClick}
-          />
-        )}
-        <div className={styles.rowPortionHalf}>
-          <label className={styles.label}>
-            <T id="autobuyer.accountFrom" m="From" />:
-          </label>
-          <div className={styles.input}>
-            <AccountsSelect
-              {...{ account }}
-              disabled={isTicketAutoBuyerEnabled}
-              onChange={setAccount}
-              showAccountsButton={false}
-              hideSpendable={true}
-              filterAccounts={notMixedAccounts}
-            />
-          </div>
-        </div>
-        <div className={classNames(styles.rowPortionHalf, styles.isRow)}>
-          <label className={styles.label}>
-            <T id="autobuyer.stakePoolLabel" m="VSP" />:
-          </label>
-          <div className={styles.input}>
-            <LEGACY_StakePoolSelect
-              options={configuredStakePools}
-              disabled={isTicketAutoBuyerEnabled}
-              value={stakePool}
-              onChange={setStakePool}
-            />
-          </div>
-        </div>
-      </div>
-      <div className={styles.row}>
-        <div className={styles.rowPortionFull}>
-          <label className={styles.label} htmlFor="balanceToMaintain">
-            <T id="autobuyer.balanceToMaintain" m="Balance to Maintain" />:
-          </label>
-          <div className={styles.input}>
-            <DcrInput
-              id="balanceToMaintain"
-              disabled={isTicketAutoBuyerEnabled}
-              amount={balanceToMaintain}
-              onChangeAmount={({ atomValue }) =>
-                setBalanceToMaintain(atomValue)
-              }
-              invalid={balanceToMaintainError}
-              invalidMessage={
-                <T
-                  id="autobuyer.balanceToMaintainError"
-                  m="Your balance to mantain is invalid"
-                />
-              }
-              showErrors
-            />
-          </div>
-        </div>
-      </div>
-      {clicked && isFormValid === false && (
-        <div className={styles.error}>
-          <T id="autobuyer.startErr" m="Fill all fields." />
-        </div>
-      )}
-    </div>
-  </>
-);
-
-export default TicketAutoBuyerForm;
diff --git a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_TicketAutoBuyer/TicketAutoBuyer.jsx b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_TicketAutoBuyer/TicketAutoBuyer.jsx
new file mode 100644
index 0000000000..8362825cb9
--- /dev/null
+++ b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_TicketAutoBuyer/TicketAutoBuyer.jsx
@@ -0,0 +1,67 @@
+import { TicketAutoBuyerForm } from "shared";
+import { useTicketAutoBuyer } from "./hooks";
+import { LEGACY_StakePoolSelect } from "inputs";
+
+const TicketAutoBuyer = () => {
+  const {
+    configuredVsps,
+    notMixedAccounts,
+    getRunningIndicator,
+    clicked,
+    vsp,
+    setVsp,
+    account,
+    setAccount,
+    balanceToMaintain,
+    setBalanceToMaintain,
+    isValid,
+    isRunning,
+    onClick,
+    onStartAutoBuyer,
+    onStopAutoBuyer,
+    onSaveAutoBuyerSettings,
+    isSettingsModalVisible,
+    showSettingsModal,
+    hideSettingsModal,
+    vspHost
+  } = useTicketAutoBuyer();
+
+  const VSPSelectControl = (
+    <LEGACY_StakePoolSelect
+      options={configuredVsps}
+      disabled={isRunning}
+      value={vsp}
+      onChange={setVsp}
+    />
+  );
+
+  return (
+    <TicketAutoBuyerForm
+      {...{
+        isValid,
+        account,
+        setAccount,
+        vsp,
+        setVsp,
+        clicked,
+        onClick,
+        onStartAutoBuyer,
+        onStopAutoBuyer,
+        isRunning,
+        balanceToMaintain,
+        setBalanceToMaintain,
+        configuredVsps,
+        notMixedAccounts,
+        getRunningIndicator,
+        onSaveAutoBuyerSettings,
+        isSettingsModalVisible,
+        showSettingsModal,
+        hideSettingsModal,
+        VSPSelectControl,
+        vspHost
+      }}
+    />
+  );
+};
+
+export default TicketAutoBuyer;
diff --git a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_TicketAutoBuyer/TicketAutoBuyer.module.css b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_TicketAutoBuyer/TicketAutoBuyer.module.css
deleted file mode 100644
index cd3237aa5a..0000000000
--- a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_TicketAutoBuyer/TicketAutoBuyer.module.css
+++ /dev/null
@@ -1,63 +0,0 @@
-.wrapper {
-  background-color: var(--background-back-color);
-  padding: 10px 20px 0px 20px;
-  flex-direction: column;
-  display: flex;
-}
-.input {
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 0.5em;
-}
-.row {
-  display: flex;
-  margin-bottom: 10px;
-  width: 100%;
-  flex-direction: row-reverse;
-}
-.rowPortionFull {
-  width: 100%;
-  text-align: center;
-}
-.rowPortionFull .input {
-  width: 100px;
-}
-.rowPortionHalf {
-  width: 50%;
-  display: flex;
-  margin-bottom: 10px;
-}
-.rowPortionHalf .input {
-  width: 230px;
-}
-.isRow {
-  display: flex;
-  flex-direction: row;
-}
-
-.label {
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 0.5em;
-
-  font-size: 16px;
-  line-height: 20px;
-}
-.orangeWarning {
-  position: inherit;
-}
-.confirmLabel {
-  display: inline-block;
-  margin-right: 0.5em;
-}
-.error {
-  color: var(--error-text-color);
-}
-@media screen and (max-width: 768px) {
-  .row {
-    flex-direction: column;
-  }
-  .rowPortionFull {
-    text-align: start;
-  }
-}
diff --git a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_TicketAutoBuyer/hooks.js b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_TicketAutoBuyer/hooks.js
index 7c5501b7ef..be267a9ec8 100644
--- a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_TicketAutoBuyer/hooks.js
+++ b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_TicketAutoBuyer/hooks.js
@@ -1,33 +1,88 @@
-import { useState, useCallback } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import * as sel from "selectors";
+import { useState, useCallback, useEffect } from "react";
+import { compose, eq, get } from "fp";
 import * as ca from "actions/ControlActions";
-import { useIntl } from "react-intl";
+import * as sel from "selectors";
 
 export const useTicketAutoBuyer = () => {
-  const configuredStakePools = useSelector(sel.configuredStakePools);
-  const defaultSpendingAccount = useSelector(sel.defaultSpendingAccount);
-  const selectedStakePool = useSelector(sel.selectedStakePool);
-  const ticketBuyerSettings = useSelector(sel.ticketBuyerConfig);
-  const intl = useIntl();
-  const notMixedAccounts = useSelector(sel.getNotMixedAccounts);
-  const getRunningIndicator = useSelector(sel.getRunningIndicator);
+  const configuredVsps = useSelector(sel.configuredStakePools);
+  const isRunning = useSelector(sel.isTicketAutoBuyerEnabled);
 
-  const [clicked, setClicked] = useState(false); // we use this bool flag so the error does not show before trying.
-  const [balanceToMaintainError] = useState(false);
-  const [stakePool, setStakePool] = useState(
-    ticketBuyerSettings ? ticketBuyerSettings.stakepool : selectedStakePool
-  );
-  const [account, setAccount] = useState(
-    ticketBuyerSettings ? ticketBuyerSettings.account : defaultSpendingAccount
+  const legacyBuyerBalanceToMaintain = useSelector(
+    sel.legacyBuyerBalanceToMaintain
   );
+  const legacyBuyerAccount = useSelector(sel.legacyBuyerAccount);
+  const legacyBuyerVSP = useSelector(sel.legacyBuyerVSP);
+
   const [balanceToMaintain, setBalanceToMaintain] = useState(
-    ticketBuyerSettings ? ticketBuyerSettings.balanceToMaintain : 0
+    legacyBuyerBalanceToMaintain
   );
+  const [account, setAccount] = useState(legacyBuyerAccount);
+  const [vsp, setVsp] = useState(legacyBuyerVSP);
 
-  // legacy ticket auto buyer selectors
-  const dispatch = useDispatch();
+  const notMixedAccounts = useSelector(sel.getNotMixedAccounts);
+  // isValid check if we can show the modal to start the auto buyer.
+  const [isValid, setIsValid] = useState(null);
+
+  const [isSettingsModalVisible, setIsSettingsModalVisible] = useState(false);
+  const showSettingsModal = () => setIsSettingsModalVisible(true);
+  const hideSettingsModal = () => {
+    resetSettingsState();
+    setIsSettingsModalVisible(false);
+  };
+  // we use this bool flag so the error does not show before trying.
+  const [clicked, setClicked] = useState(false);
+  const onStartAutoBuyer = (passphrase) => {
+    onEnableTicketAutoBuyer(
+      passphrase,
+      account,
+      balanceToMaintain?.atomValue,
+      vsp
+    );
+  };
+
+  const checkIsValid = (vsp, balanceToMaintain, account) => {
+    let isValid = true;
+    if (vsp) {
+      if (!vsp.Host) {
+        isValid = false;
+      }
+    } else {
+      isValid = false;
+    }
+    // balance to mantain can be 0.
+    return isValid && balanceToMaintain?.atomValue >= 0 && !!account;
+  };
+  const getVsp = () => {
+    return vsp ? configuredVsps.find(compose(eq(vsp.Host), get("Host"))) : null;
+  };
+
+  const onClick = () => {
+    setIsValid(checkIsValid(vsp, balanceToMaintain, account));
+    if (!isValid) {
+      setIsSettingsModalVisible(true);
+    }
+  };
+
+  useEffect(
+    // we pass those values as parameter, so we don't need to add checkIsValid
+    // into the dependecy array.
+    () => {
+      setIsValid(checkIsValid(vsp, balanceToMaintain, account));
+    },
+    [vsp, balanceToMaintain, account]
+  );
+  const getRunningIndicator = useSelector(sel.getRunningIndicator);
+
+  const resetSettingsState = () => {
+    setBalanceToMaintain(legacyBuyerBalanceToMaintain);
+    setAccount(legacyBuyerAccount);
+    setVsp(legacyBuyerVSP);
+    setClicked(false);
+  };
+  const vspHost = vsp && vsp.Host;
 
+  const dispatch = useDispatch();
   const onEnableTicketAutoBuyer = useCallback(
     (passphrase, account, balanceToMaintain, vsp) =>
       dispatch(
@@ -40,28 +95,47 @@ export const useTicketAutoBuyer = () => {
       ),
     [dispatch]
   );
-  const onDisableTicketAutoBuyer = useCallback(
+
+  const onStopAutoBuyer = useCallback(
     () => dispatch(ca.ticketBuyerV2Cancel()),
     [dispatch]
   );
-  const isTicketAutoBuyerEnabled = useSelector(sel.isTicketAutoBuyerEnabled);
 
+  const onSaveAutoBuyerSettings = (balanceToMaintain, account, vsp) => {
+    setIsValid(checkIsValid(vsp, balanceToMaintain, account));
+    if (!isValid) {
+      setClicked(true);
+    } else {
+      dispatch(
+        ca.saveLegacyAutoBuyerSettings({
+          balanceToMaintain,
+          account,
+          vsp
+        })
+      );
+      setIsSettingsModalVisible(false);
+    }
+  };
   return {
-    configuredStakePools,
-    intl,
+    balanceToMaintain,
+    setBalanceToMaintain,
+    account,
+    setAccount,
+    vsp: getVsp(),
+    setVsp,
+    configuredVsps,
+    isRunning,
     notMixedAccounts,
     getRunningIndicator,
     clicked,
-    setClicked,
-    balanceToMaintainError,
-    stakePool,
-    setStakePool,
-    account,
-    setAccount,
-    balanceToMaintain,
-    setBalanceToMaintain,
-    isTicketAutoBuyerEnabled,
-    onEnableTicketAutoBuyer,
-    onDisableTicketAutoBuyer
+    isValid,
+    isSettingsModalVisible,
+    showSettingsModal,
+    hideSettingsModal,
+    onClick,
+    onStartAutoBuyer,
+    onStopAutoBuyer,
+    onSaveAutoBuyerSettings,
+    vspHost
   };
 };
diff --git a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_TicketAutoBuyer/index.js b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_TicketAutoBuyer/index.js
index dafa550d06..d86648f3ab 100644
--- a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_TicketAutoBuyer/index.js
+++ b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_TicketAutoBuyer/index.js
@@ -1,73 +1 @@
-import { compose, eq, get } from "fp";
-import TicketAutoBuyerForm from "./Form";
-import { useTicketAutoBuyer } from "./hooks";
-
-const TicketAutoBuyer = () => {
-  const {
-    configuredStakePools,
-    intl,
-    notMixedAccounts,
-    getRunningIndicator,
-    clicked,
-    setClicked,
-    balanceToMaintainError,
-    stakePool,
-    setStakePool,
-    account,
-    setAccount,
-    balanceToMaintain,
-    setBalanceToMaintain,
-    isTicketAutoBuyerEnabled,
-    onEnableTicketAutoBuyer,
-    onDisableTicketAutoBuyer
-  } = useTicketAutoBuyer();
-
-  const getStakePool = () => {
-    return stakePool
-      ? configuredStakePools.find(compose(eq(stakePool.Host), get("Host")))
-      : null;
-  };
-
-  const onClick = () => {
-    setClicked(true);
-  };
-
-  const onStartAutoBuyer = (passphrase) => {
-    onEnableTicketAutoBuyer?.(
-      passphrase,
-      account,
-      balanceToMaintain,
-      getStakePool()
-    );
-  };
-
-  const getIsFormValid = () => {
-    return account && balanceToMaintain >= 0 && getStakePool();
-  };
-
-  return (
-    <TicketAutoBuyerForm
-      {...{
-        formatMessage: intl.formatMessage,
-        isFormValid: !!getIsFormValid(),
-        account,
-        setAccount,
-        stakePool: getStakePool(),
-        setStakePool,
-        clicked,
-        onClick,
-        onStartAutoBuyer,
-        onDisableTicketAutoBuyer,
-        isTicketAutoBuyerEnabled,
-        balanceToMaintain,
-        setBalanceToMaintain,
-        balanceToMaintainError,
-        configuredStakePools,
-        notMixedAccounts,
-        getRunningIndicator
-      }}
-    />
-  );
-};
-
-export default TicketAutoBuyer;
+export { default } from "./TicketAutoBuyer";
diff --git a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_Tickets/Tickets.jsx b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_Tickets/Tickets.jsx
index e0fbb2cf67..3248734cd0 100644
--- a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_Tickets/Tickets.jsx
+++ b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_Tickets/Tickets.jsx
@@ -6,9 +6,9 @@ import { ShowWarning, Subtitle } from "shared";
 import { InfoDocModalButton } from "buttons";
 import UnsignedTickets from "../../UnsignedTickets";
 import styles from "./Tickets.module.css";
-import { Checkbox } from "pi-ui";
+import { classNames } from "pi-ui";
 
-const getTitleIcon = ({ toggleIsLegacy }) => (
+const getTitleIcon = () => (
   <>
     <div className={styles.iconWrapper}>
       <InfoDocModalButton
@@ -17,13 +17,6 @@ const getTitleIcon = ({ toggleIsLegacy }) => (
         className={styles.infoTitleIcon}
         draggable
       />
-      <Checkbox
-        label={<T id="purchase.isLegacy.legacy" m="Use Legacy VSP" />}
-        className={styles.useLegacyLabel}
-        id="box"
-        checked={true}
-        onChange={() => toggleIsLegacy(false)}
-      />
     </div>
   </>
 );
@@ -43,8 +36,8 @@ const Tickets = ({
       <StakeInfo {...{ sidebarOnBottom }} />
       <Subtitle
         title={<T id="purchase.subtitle.legacy" m="Purchase Tickets" />}
-        children={getTitleIcon({ toggleIsLegacy })}
-        className={styles.isRow}
+        children={getTitleIcon()}
+        className={classNames(styles.isRow, styles.subtitle)}
       />
       {spvMode && blocksNumberToNextTicket === 2 ? (
         <ShowWarning
@@ -57,7 +50,12 @@ const Tickets = ({
         />
       ) : (
         <PurchaseTickets
-          {...{ ...props, notMixedAccounts, getRunningIndicator }}
+          {...{
+            ...props,
+            notMixedAccounts,
+            getRunningIndicator,
+            toggleIsLegacy
+          }}
         />
       )}
       {isWatchingOnly ? (
diff --git a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_Tickets/Tickets.module.css b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_Tickets/Tickets.module.css
index d5dd0ab462..ab804316c5 100644
--- a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_Tickets/Tickets.module.css
+++ b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_Tickets/Tickets.module.css
@@ -15,7 +15,10 @@
 }
 .purchaseTicketArea {
   -webkit-user-select: text;
-  width: 740px;
+  width: 764px;
+}
+.subtitle {
+  width: 775px;
 }
 .purchaseTicketArea .tabbedPageSubtitle {
   width: auto;
@@ -29,9 +32,15 @@
   .purchaseTicketArea {
     width: 667px;
   }
+  .subtitle {
+    width: 675px;
+  }
 }
 @media screen and (max-width: 768px) {
   .purchaseTicketArea {
     width: 355px;
   }
+  .subtitle {
+    width: 365px;
+  }
 }
diff --git a/app/components/views/TicketsPage/PurchaseTab/PurchaseTab.module.css b/app/components/views/TicketsPage/PurchaseTab/PurchaseTab.module.css
index ad722c7d5f..51bea2492b 100644
--- a/app/components/views/TicketsPage/PurchaseTab/PurchaseTab.module.css
+++ b/app/components/views/TicketsPage/PurchaseTab/PurchaseTab.module.css
@@ -1,58 +1,3 @@
-.isRow {
-  display: flex;
-  flex-direction: row;
-}
-.isColumn {
-  display: flex;
-  flex-direction: column;
-}
-.ticketForm {
-  display: grid;
-  grid-template-columns: 100px 250px;
-  grid-gap: 12px;
-}
-
-.legacyIcon {
-  margin-left: auto;
-  cursor: pointer;
-}
-
-.iconWrapper {
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-}
-
-.useLegacyTooltip {
-  font-size: 12px;
-  width: 20rem;
-}
-
-.useLegacyLabel {
-  font-size: 16px;
-}
-
-.infoFields strong {
-  color: var(--input-color);
-}
-
-.privacyForm {
-  background-color: var(--background-back-color);
-  border-radius: 10px;
-}
-
-.purchaseForm {
-  background-color: var(--background-back-color);
-  padding: 29px 20px 29px 20px;
-}
-
-.privacyArea {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  padding: 16px 19px;
-  background-color: var(--background-back-color);
-}
-
 .privacyInfo {
   background-color: var(--info-message-background);
   background-image: var(--tickets-info-icon);
@@ -65,7 +10,9 @@
   grid-row-gap: 10px;
   padding: 10px 10px 10px 40px;
 }
-
+.privacyInfo:hover {
+  cursor: pointer;
+}
 .readMoreIcon {
   background-image: var(--arrow-down-mid-blue-icon);
   background-position-x: right;
@@ -74,203 +21,32 @@
   height: 15px;
   width: 12px;
   margin-left: auto;
-  transform: rotate(180deg);
-  background-position-y: 0;
-}
-
-.readMoreIcon.active {
   background-position-y: 8px;
   transform: rotate(0);
 }
-
-.privacyInfo:hover {
-  cursor: pointer;
-}
-
-.title {
-  font-size: 15px;
-  margin-bottom: 10px;
-}
-
-.autobuyerWrapper {
-  background-color: var(--background-back-color);
-  padding: 29px 20px 29px 20px;
-}
-
-.rememberVspCheckBox {
-  grid-column: 2;
-  justify-self: right;
-}
-
-.enableVSPButton {
-  margin-bottom: 40px;
+.readMoreIcon.active {
+  transform: rotate(180deg);
+  background-position-y: 0;
 }
-
 .enableVSPWrapper {
   margin: 10px;
 }
-
 .enableVSPMessage {
   padding-bottom: 20px;
 }
-
-.rowLabel {
-  font-size: 19px;
-  color: var(--input-color-default);
-  align-self: flex-end;
-}
-
-.inputAddress {
-  align-self: flex-start;
-}
-.inputAddress .rowLabel {
-  width: 82px;
-  text-align: right;
-  justify-self: flex-end;
-}
-.inputAmount {
-  flex-wrap: wrap;
-  align-self: flex-start;
-}
-.inputAmount .rowLabel {
-  padding-left: 52px;
-}
-.inputSelectContainer {
-  display: flex;
-  align-self: center;
-}
-.inputSelect {
-  font-size: 16px;
-  text-align: left;
-  width: 220px;
-  margin-right: 6px;
-  margin-left: 6px;
-  margin-top: 3px;
-}
-.infoIcon {
-  background-position: 0px 50%;
-  background-size: 16px;
-  background-repeat: no-repeat;
-  padding-left: 30px;
-  width: 100%;
-  font-family: var(--font-family-monospace);
-  color: var(--header-desc-lighter-color);
-  font-size: 11px;
-  line-height: 11px;
-  display: flex;
-  align-items: center;
-  height: 25px;
-}
-.infoIcon.poolFeeIcon {
-  background-image: var(--pool-fee-icon);
-}
-.infoIcon.accountSelectIcon {
-  background-image: var(--wallet-gray-icon);
-  width: 25px;
-  background-position: 2px 5px;
-  background-size: 22px;
-  align-self: flex-end;
-}
-.inputValidMessageArea {
-  width: 200px;
-  position: relative;
-  display: grid;
-  grid-template-rows: 20px 20px;
-  grid-template-columns: 72px auto;
-  bottom: 0px;
-  left: 0px;
-  margin: 0;
-  padding-top: 10px;
-  padding-left: 72px;
-}
-.info {
-  margin-bottom: 10px;
-  background-color: var(--transfer-details-bg);
-}
-.actionButtons {
-  float: right;
-  margin: 15px 19px 0 0;
-}
-.buttonsArea {
-  text-align: right;
-  display: flex;
-  width: 740px;
-  justify-content: flex-end;
-}
-.revokeButton {
-  margin-right: 10px;
-}
-.vspContainer {
-  display: flex;
-}
-.vspContainer .ticketPoolFee {
-  margin-left: 10px;
-}
-.vspContainer .ticketPoolFee > div:nth-child(1) {
-  width: 50px;
+.enableVSPButton {
+  margin-bottom: 40px;
 }
 .purchaseTicketArea {
-  width: 740px;
+  width: 764px;
   -webkit-user-select: text;
 }
 .purchaseTicketArea .tabbedPageSubtitle {
   width: auto;
   justify-content: space-between;
 }
-.autoBuyerRow {
-  display: flex;
-  margin-bottom: 10px;
-  width: 100%;
-  flex-direction: row-reverse;
-}
-.autobuyerInput {
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 0.5em;
-
-  width: 200px;
-}
-.autoBuyerRowPortionFull {
-  width: 100%;
-  text-align: center;
-}
-.autoBuyerRowPortionFull .autobuyerInput {
-  width: 100px;
-}
-.autoBuyerRowPortionHalf {
-  width: 50%;
-  display: flex;
-  margin-bottom: 10px;
-}
-.autoBuyerRowPortionHalf .autobuyerInput {
-  width: 230px;
-}
-.autobuyerLabel {
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 0.5em;
-
-  font-size: 16px;
-  line-height: 20px;
-}
-.error {
-  color: var(--error-text-color);
-}
-.orangeWarning {
-  position: inherit;
-}
-.confirmLabel {
-  display: inline-block;
-  margin-right: 0.5em;
-}
 
 @media screen and (max-width: 1179px) {
-  .inputSelect {
-    width: 220px;
-  }
-  .buttonsArea {
-    width: 667px;
-  }
   .purchaseTicketArea {
     width: 667px;
   }
@@ -280,51 +56,4 @@
   .purchaseTicketArea {
     width: 355px;
   }
-  .ticketForm {
-    display: grid;
-    grid-template-columns: 50px 225px;
-    text-align: right;
-  }
-  .purchaseForm {
-    padding-bottom: 0;
-    flex-direction: column !important;
-  }
-
-  .purchaseForm.isRow {
-    flex-direction: column;
-  }
-  .rowLabel {
-    font-size: 13px;
-  }
-  .inputAddress .rowLabel {
-    width: inherit;
-    text-align: right;
-  }
-  .inputAmount {
-    margin-top: 25px;
-    margin-bottom: 40px;
-  }
-  .inputAmount .rowLabel {
-    padding-left: 0;
-  }
-  .inputSelectContainer .inputSelect {
-    width: 205px;
-  }
-  .inputSelectContainer {
-    display: flex;
-  }
-  .inputSelect {
-    margin-left: 10px;
-    align-self: flex-end;
-  }
-  .buttonsArea {
-    width: 355px;
-    margin-bottom: 20px;
-  }
-  .autoBuyerRow {
-    flex-direction: column;
-  }
-  .autoBuyerRowPortionFull {
-    text-align: start;
-  }
 }
diff --git a/app/components/views/TicketsPage/PurchaseTab/PurchaseTickets/Page.jsx b/app/components/views/TicketsPage/PurchaseTab/PurchaseTickets/Page.jsx
index 17c9662b19..06b7852dc9 100644
--- a/app/components/views/TicketsPage/PurchaseTab/PurchaseTickets/Page.jsx
+++ b/app/components/views/TicketsPage/PurchaseTab/PurchaseTickets/Page.jsx
@@ -1,20 +1,14 @@
 import { useState } from "react";
 import { FormattedMessage as T } from "react-intl";
-import { Checkbox, classNames, Tooltip } from "pi-ui";
+import { classNames } from "pi-ui";
 import UnsignedTickets from "../UnsignedTickets";
-import StakeInfo from "../StakeInfo/StakeInfo";
-import PurchaseForm from "./PurchaseForm";
+import StakeInfo from "../StakeInfo";
+
+import { PurchaseTicketsForm } from "shared";
 import { ShowWarning, Subtitle } from "shared";
 import styles from "../PurchaseTab.module.css";
 import { KeyBlueButton } from "buttons";
-import TicketAutoBuyer from "../TicketAutoBuyer/TicketAutoBuyer";
-
-export const LegacyVSPWarning = () => (
-  <T
-    id="purchase.isLegacyDescription"
-    m="Use a VSP which has not updated to vspd. Not recommended, legacy VSP support will soon be removed."
-  />
-);
+import TicketAutoBuyer from "../TicketAutoBuyer";
 
 const PrivacyInfo = () => {
   const [show, setShow] = useState(false);
@@ -35,34 +29,6 @@ const PrivacyInfo = () => {
   );
 };
 
-const TitleIcon = ({ toggleIsLegacy }) => (
-  <div className={styles.iconWrapper}>
-    {/* The div below is a placeholder for the info modal "i" icon which is not
-        displayed on the new VSP form. Including this here ensures the layout is
-        consistent and prevents things from moving then the "i" is hidden.
-        This div can be removed when the legacy VSP form is removed. */}
-    <div
-      style={{
-        width: "20px",
-        height: "20px",
-        padding: "3px",
-        margin: "4px 0 4px 0"
-      }}
-    />
-    <Tooltip
-      contentClassName={styles.useLegacyTooltip}
-      content={<LegacyVSPWarning />}>
-      <Checkbox
-        label={<T id="purchase.isLegacy" m="Use Legacy VSP" />}
-        className={styles.useLegacyLabel}
-        id="box"
-        checked={false}
-        onChange={() => toggleIsLegacy(true)}
-      />
-    </Tooltip>
-  </div>
-);
-
 const EnableVSP = ({ onEnableVSP }) => (
   <div className={styles.enableVSPWrapper}>
     <p className={styles.enableVSPMessage}>
@@ -85,9 +51,10 @@ export function PurchasePage({
   availableVSPs,
   account,
   setAccount,
-  numTickets,
+  numTicketsToBuy,
+  onIncrementNumTickets,
+  onDecrementNumTickets,
   onChangeNumTickets,
-  setNumTickets,
   handleOnKeyDown,
   ticketPrice,
   setVSP,
@@ -113,11 +80,7 @@ export function PurchasePage({
     <div className={styles.purchaseTicketArea}>
       <StakeInfo {...{ sidebarOnBottom }} />
       {!isVSPListingEnabled && <EnableVSP onEnableVSP={onEnableVSPListing} />}
-      <Subtitle
-        title={<T id="purchase.subtitle" m="Purchase Tickets" />}
-        className="flex-row">
-        <TitleIcon toggleIsLegacy={toggleIsLegacy} />
-      </Subtitle>
+      <Subtitle title={<T id="purchase.subtitle" m="Purchase Tickets" />} />
       {mixedAccount && changeAccount && <PrivacyInfo />}
       {spvMode && blocksNumberToNextTicket === 2 ? (
         <ShowWarning
@@ -129,28 +92,31 @@ export function PurchasePage({
           }
         />
       ) : (
-        <PurchaseForm
+        <PurchaseTicketsForm
           {...{
             notMixedAccounts,
             ticketPrice,
             setAccount,
-            setNumTickets,
             handleOnKeyDown,
             availableVSPs,
             account,
-            numTickets,
+            numTicketsToBuy,
+            onIncrementNumTickets,
+            onDecrementNumTickets,
             onChangeNumTickets,
             setVSP,
             vsp,
             vspFee,
             setVspFee,
             isValid,
-            onV3PurchaseTicket,
+            onPurchaseTickets: onV3PurchaseTicket,
             isLoading,
             rememberedVspHost,
             toggleRememberVspHostCheckBox,
             onRevokeTickets,
-            getRunningIndicator
+            getRunningIndicator,
+            toggleIsLegacy,
+            isLegacy: false
           }}
         />
       )}
diff --git a/app/components/views/TicketsPage/PurchaseTab/PurchaseTickets/PurchaseForm.jsx b/app/components/views/TicketsPage/PurchaseTab/PurchaseTickets/PurchaseForm.jsx
deleted file mode 100644
index 2455ecc22a..0000000000
--- a/app/components/views/TicketsPage/PurchaseTab/PurchaseTickets/PurchaseForm.jsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import { FormattedMessage as T } from "react-intl";
-import { classNames, Checkbox, Tooltip } from "pi-ui";
-import { PassphraseModalButton, KeyBlueButton } from "buttons";
-import { AccountsSelect, NumTicketsInput, VSPSelect } from "inputs";
-import { Balance } from "shared";
-import styles from "../PurchaseTab.module.css";
-
-const purchaseLabel = () => <T id="purchaseTickets.purchaseBtn" m="Purchase" />;
-
-const PurchaseTicketsForm = ({
-  isValid,
-  handleOnKeyDown,
-  numTickets,
-  onChangeNumTickets,
-  setNumTickets,
-  setAccount,
-  account,
-  ticketPrice,
-  isWatchingOnly,
-  setVSP,
-  vsp,
-  vspFee,
-  setVspFee,
-  onV3PurchaseTicket,
-  onRevokeTickets,
-  availableVSPs,
-  isLoading,
-  rememberedVspHost,
-  toggleRememberVspHostCheckBox,
-  notMixedAccounts,
-  getRunningIndicator
-}) => (
-  <>
-    <div className={classNames(styles.purchaseForm, styles.isRow)}>
-      <div className={classNames(styles.isRow, styles.inputAddress)}>
-        <div className={styles.ticketForm}>
-          <label className={styles.rowLabel}>
-            <T id="purchaseTickets.accountFrom" m="Account" />:
-          </label>
-          <div className={styles.inputSelectContainer}>
-            <AccountsSelect
-              filterAccounts={notMixedAccounts}
-              className={styles.inputSelect}
-              {...{ account, onChange: setAccount }}
-            />
-            <div
-              className={classNames(styles.infoIcon, styles.accountSelectIcon)}
-            />
-          </div>
-          <label className={styles.rowLabel}>
-            <T id="purchaseTickets.vspFrom" m="VSP" />:
-          </label>
-          <div className={styles.vspContainer}>
-            <VSPSelect
-              className={styles.inputSelect}
-              style={{ width: "100%", marginRight: "10px" }}
-              {...{
-                options: availableVSPs,
-                account,
-                onChange: setVSP,
-                value: vsp,
-                isDisabled: !!rememberedVspHost,
-                setVspFee
-              }}
-            />
-            {vsp && (
-              <Tooltip
-                content={<T id="purchaseTickets.vspFee" m="VSP Fee" />}
-                className={styles.ticketPoolFee}>
-                <div
-                  className={classNames(styles.infoIcon, styles.poolFeeIcon)}>
-                  {vspFee} %
-                </div>
-              </Tooltip>
-            )}
-          </div>
-          {vsp && (
-            <Checkbox
-              className={styles.rememberVspCheckBox}
-              label={
-                <T
-                  id="purchaseTickets.alwaysUseThisVSP"
-                  m="Always use this VSP"
-                />
-              }
-              id="rememberVspHost"
-              checked={!!rememberedVspHost}
-              onChange={toggleRememberVspHostCheckBox}
-            />
-          )}
-        </div>
-      </div>
-      <div className={classNames(styles.isRow, styles.inputAmount)}>
-        <label className={styles.rowLabel}>
-          <T id="purchaseTickets.ticketAmount" m="Amount" />:
-        </label>
-        <NumTicketsInput
-          required
-          invalid={account.spendable < numTickets * ticketPrice}
-          invalidMessage={
-            <T
-              id="purchaseTickets.errors.insufficientBalance"
-              m="Not enough funds"
-            />
-          }
-          numTickets={numTickets}
-          incrementNumTickets={() => onChangeNumTickets(true)}
-          decrementNumTickets={() => onChangeNumTickets(false)}
-          onChangeNumTickets={setNumTickets}
-          onKeyDown={handleOnKeyDown}
-          showErrors={true}
-        />
-        {account.spendable >= numTickets * ticketPrice && (
-          <div className={styles.inputValidMessageArea}>
-            <T
-              id="purchaseTickets.validMsg"
-              m="Total: {amount} Remaining: {remaining}"
-              values={{
-                amount: <Balance flat amount={numTickets * ticketPrice} />,
-                remaining: (
-                  <Balance
-                    flat
-                    amount={account.spendable - numTickets * ticketPrice}
-                  />
-                )
-              }}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-    <div className={styles.info}>
-      <div className={classNames(styles.actionButtons, styles.isColumn)} />
-      {/* ADD VSP INFO HERE */}
-    </div>
-    <div className={styles.buttonsArea}>
-      <PassphraseModalButton
-        modalTitle={
-          <T id="tickets.revokeConfirmations" m="Revoke Tickets Confirmation" />
-        }
-        className={styles.revokeButton}
-        onSubmit={onRevokeTickets}
-        buttonLabel={<T id="purchaseTickets.revokeBtn" m="Revoke" />}
-      />
-      {isWatchingOnly ? (
-        <KeyBlueButton disabled={!isValid} onClick={onV3PurchaseTicket}>
-          {purchaseLabel()}
-        </KeyBlueButton>
-      ) : isLoading ? (
-        <KeyBlueButton disabled={true} loading={true} />
-      ) : getRunningIndicator ? (
-        <Tooltip
-          content={
-            <T
-              id="tickets.purchase.running"
-              m="Privacy Mixer or Autobuyer running, please shut them off before purchasing a ticket."
-            />
-          }>
-          <PassphraseModalButton
-            disabled={true}
-            buttonLabel={purchaseLabel()}
-          />
-        </Tooltip>
-      ) : (
-        <PassphraseModalButton
-          modalTitle={
-            <T
-              id="tickets.purchaseConfirmation"
-              m="Ticket Purchase Confirmation"
-            />
-          }
-          disabled={!isValid}
-          onSubmit={onV3PurchaseTicket}
-          buttonLabel={purchaseLabel()}
-        />
-      )}
-    </div>
-  </>
-);
-
-export default PurchaseTicketsForm;
diff --git a/app/components/views/TicketsPage/PurchaseTab/PurchaseTickets/PurchaseTickets.jsx b/app/components/views/TicketsPage/PurchaseTab/PurchaseTickets/PurchaseTickets.jsx
index 8fe1e8d5b7..376bfa4043 100644
--- a/app/components/views/TicketsPage/PurchaseTab/PurchaseTickets/PurchaseTickets.jsx
+++ b/app/components/views/TicketsPage/PurchaseTab/PurchaseTickets/PurchaseTickets.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { PurchasePage } from "./Page";
 import { usePurchaseTab } from "../hooks";
+import { isEqual } from "lodash/fp";
 
 const Tickets = ({ toggleIsLegacy }) => {
   const {
@@ -25,49 +26,69 @@ const Tickets = ({ toggleIsLegacy }) => {
     notMixedAccounts,
     isVSPListingEnabled,
     onEnableVSPListing,
-    getRunningIndicator
+    getRunningIndicator,
+    visibleAccounts
   } = usePurchaseTab();
 
   const [account, setAccount] = useState(defaultSpendingAccount);
+  useEffect(() => {
+    const newAccount = visibleAccounts?.find((a) =>
+      isEqual(a.value, account?.value)
+    );
+    newAccount && setAccount(newAccount);
+  }, [visibleAccounts, account]);
+
   // todo use this vsp to buy solo tickets.
   const [vsp, setVSP] = useState(
     rememberedVspHost ? { host: rememberedVspHost.host } : null
   );
-  const [numTickets, setNumTickets] = useState(1);
+  const [numTicketsToBuy, setNumTicketsToBuy] = useState(1);
   const [isValid, setIsValid] = useState(false);
 
   const toggleRememberVspHostCheckBox = () => {
     setRememberedVspHost(!rememberedVspHost ? vsp : null);
   };
 
-  // onChangeNumTickets deals with ticket increment or decrement.
-  const onChangeNumTickets = (increment) => {
-    if (numTickets === 0 && !increment) return;
-    increment
-      ? setNumTickets(parseInt(numTickets) + 1)
-      : setNumTickets(parseInt(numTickets) - 1);
+  const handleOnKeyDown = (e) => {
+    if (e.keyCode == 38) {
+      e.preventDefault();
+      onIncrementNumTickets();
+    } else if (e.keyCode == 40) {
+      e.preventDefault();
+      onDecrementNumTickets();
+    }
+  };
+
+  const onIncrementNumTickets = () => {
+    setNumTicketsToBuy((numTicketsToBuy) =>
+      numTicketsToBuy == "" ? 1 : numTicketsToBuy + 1
+    );
+  };
+
+  const onChangeNumTickets = (numTicketsToBuy) => {
+    if (parseInt(numTicketsToBuy)) {
+      setNumTicketsToBuy(parseInt(numTicketsToBuy));
+    } else if (numTicketsToBuy == "") {
+      setNumTicketsToBuy(numTicketsToBuy);
+    }
+  };
+
+  const onDecrementNumTickets = () => {
+    setNumTicketsToBuy((numTicketsToBuy) =>
+      numTicketsToBuy <= 1 ? 1 : numTicketsToBuy - 1
+    );
   };
 
   const onV3PurchaseTicket = (passphrase) => {
-    onPurchaseTicketV3(passphrase, account, numTickets, vsp);
+    onPurchaseTicketV3(passphrase, account, numTicketsToBuy, vsp);
   };
 
   useEffect(() => {
     const { spendable } = account;
-    const canAfford = numTickets * ticketPrice <= spendable;
-    const hasTickets = numTickets > 0;
+    const canAfford = numTicketsToBuy * ticketPrice <= spendable;
+    const hasTickets = numTicketsToBuy > 0;
     setIsValid(canAfford && hasTickets && !!vsp);
-  }, [ticketPrice, numTickets, account, vsp]);
-
-  const handleOnKeyDown = (e) => {
-    if (e.keyCode == 38) {
-      e.preventDefault();
-      onChangeNumTickets(true);
-    } else if (e.keyCode == 40) {
-      e.preventDefault();
-      onChangeNumTickets(false);
-    }
-  };
+  }, [ticketPrice, numTicketsToBuy, account, vsp]);
 
   const [vspFee, setVspFee] = useState(
     availableVSPs &&
@@ -83,9 +104,10 @@ const Tickets = ({ toggleIsLegacy }) => {
         sidebarOnBottom,
         isWatchingOnly,
         account,
-        numTickets,
+        numTicketsToBuy,
+        onIncrementNumTickets,
+        onDecrementNumTickets,
         onChangeNumTickets,
-        setNumTickets,
         handleOnKeyDown,
         setAccount,
         ticketPrice,
diff --git a/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfo.module.css b/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfo.module.css
index 47e9c2afa8..24d89eccfb 100644
--- a/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfo.module.css
+++ b/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfo.module.css
@@ -1,39 +1,29 @@
 .accordion {
-  margin-bottom: 40px;
+  margin-bottom: 30px;
 }
 
 .accordionArrow {
   top: 15px;
   right: 20px;
   height: 13px;
+  transform: rotate(90deg);
+}
+.activeAccordionArrow {
+  transform: rotate(-90deg) !important;
 }
 
 .area {
   background-color: var(--background-back-color);
-  padding: 16px 19px 16px 19px;
+  padding: 30px 40px 20px 0;
   position: relative;
   display: grid;
-  grid-template-areas: "purchaseTicketsTitle purchaseTicketsTitle purchaseTicketsTitle purchaseTicketsTitle";
-}
-
-.purchaseTicketTitle {
-  box-sizing: content-box;
-  grid-area: purchaseTicketsTitle;
-  font-size: 15px;
+  grid-template-columns: repeat(4, minmax(max-content, 1fr));
 }
 
 .purchaseTicketFoot {
   border-bottom: 1px var(--tx-detail-text) solid;
 }
 
-.purchaseTicketLabel {
-  font-size: 13px;
-}
-
-.purchaseTicketCount {
-  font-size: 17px;
-}
-
 .balance {
   display: inline;
 }
@@ -43,36 +33,36 @@
 }
 
 .details {
-  height: 70px;
+  height: 100px;
   display: grid;
-  grid-template-columns: 1.2fr repeat(3, 1fr);
-  grid-template-rows: 22px 22px;
+  grid-template-columns: minmax(max-content, 1fr) minmax(max-content, 1fr) auto;
   row-gap: 11px;
-  box-sizing: content-box;
-  padding-top: 12px;
-  margin-left: 19px;
-  margin-right: 19px;
+  padding: 24px 0 30px 0;
+  margin: 0 40px;
   background-color: var(--background-back-color);
-  border-top: 1px solid;
-  border-color: var(--input-placeholder-color);
+  border-top: 1px solid var(--stakeinfo-border);
 }
 
 .stakeInfo {
-  display: grid;
-  grid-template-rows: 15px 24px 15px;
+  display: flex;
+  text-align: center;
+  flex-direction: column;
 }
 
 .label {
   vertical-align: middle;
-  line-height: 15px;
-  font-size: 11px;
+  line-height: 16px;
+  font-size: 13px;
+  color: var(--purchase-label);
+  margin-bottom: 10px;
 }
 
 .value {
   vertical-align: middle;
-  line-height: 24px;
-  font-size: 17px;
+  line-height: 22px;
+  font-size: 18px;
   font-weight: 600;
+  color: var(--stakeinfo-value);
 }
 
 .foot {
@@ -84,22 +74,26 @@
 }
 
 .detail {
-  margin-bottom: 10px;
-  display: inline-grid;
-  grid-template-columns: 22px auto 1fr;
-  vertical-align: middle;
   line-height: 22px;
   font-size: 13px;
   min-width: 0;
+  display: flex;
+  flex-direction: row;
 }
 
 .detailIcon {
   background-repeat: no-repeat;
+  width: 20px;
+  height: 20px;
+}
+
+.detail:nth-child(3),
+.detail:nth-child(6) {
+  justify-content: flex-end;
 }
 
 .detailLabel {
-  display: block;
-  padding-left: 6px;
+  padding-left: 11px;
 }
 
 .detailValue {
@@ -135,45 +129,30 @@
   background-image: var(--ticket-voted);
 }
 
-@media screen and (max-width: 1179px) {
-  .details {
-    height: 85px;
-    row-gap: 25px;
-  }
-
-  .detail {
-    grid-template-columns: 22px auto 1fr;
-  }
-}
-
 @media screen and (max-width: 768px) {
   .accordion {
     margin-bottom: 30px;
   }
 
   .area {
-    grid-template-areas:
-      "purchaseTicketsTitle purchaseTicketsTitle"
-      "purchaseTicketsTitle purchaseTicketsTitle";
-    grid-template-rows: 71px 60px;
+    grid-template-columns: repeat(2, minmax(max-content, 1fr));
+    grid-gap: 20px;
+    padding: 30px 20px;
   }
-
   .details {
-    height: 130px;
-    row-gap: 25px;
     grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: 22px 22px 22px;
+    margin: 0 15px 0 10px;
+    grid-gap: 12px;
+    height: 135px;
   }
-
-  .detail {
-    grid-template-columns: 22px auto 1fr;
+  .detail:nth-child(3),
+  .detail:nth-child(6) {
+    justify-content: flex-start;
   }
-
-  .details .detail:first-child .detailLabel {
-    width: 80px;
+  .detail:nth-child(even) {
+    justify-content: flex-end;
   }
-
-  .purchaseTicketLabel {
-    font-size: 13px;
+  .detailLabel {
+    padding-left: 2px;
   }
 }
diff --git a/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfoDetails.jsx b/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfoDetails.jsx
index 9b6558fa81..f2b20e53b0 100644
--- a/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfoDetails.jsx
+++ b/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfoDetails.jsx
@@ -1,11 +1,12 @@
 import { FormattedNumber, FormattedMessage as T } from "react-intl";
 import styles from "./StakeInfo.module.css";
+import { classNames } from "pi-ui";
 
 const StakeInfoTicketCount = ({ className, label, value }) => (
   <div className={styles.detail}>
-    <div className={`${styles.detailIcon} ${className}`}></div>
-    <span className={styles.detailLabel}>{label}</span>
-    <span className={styles.detailValue}>{value}</span>
+    <div className={classNames(styles.detailIcon, className)}></div>
+    <div className={styles.detailLabel}>{label}</div>
+    <div className={styles.detailValue}>{value}</div>
   </div>
 );
 
@@ -24,26 +25,26 @@ const StakeInfoDisplay = ({
         label={<T id="stakeSPV.votedTickets" m="Own Mempool Tickets:" />}
         value={<FormattedNumber value={ownMempoolTicketsCount} />}
       />
-      <StakeInfoTicketCount
-        className={styles.detailIconImmature}
-        label={<T id="stakeSPV.expiredTickets" m="Immature Tickets:" />}
-        value={<FormattedNumber value={immatureTicketsCount} />}
-      />
       <StakeInfoTicketCount
         className={styles.detailIconLive}
         label={<T id="stakeSPV.revokedTickets" m="Live Tickets:" />}
         value={<FormattedNumber value={liveTicketsCount} />}
       />
-      <StakeInfoTicketCount
-        className={styles.detailIconVoted}
-        label={<T id="stake.mempoolTickets" m="Voted Tickets:" />}
-        value={<FormattedNumber value={votedTicketsCount} />}
-      />
       <StakeInfoTicketCount
         className={styles.detailIconExpired}
         label={<T id="stake.poolSize" m="Expired Tickets:" />}
         value={<FormattedNumber value={expiredTicketsCount} />}
       />
+      <StakeInfoTicketCount
+        className={styles.detailIconImmature}
+        label={<T id="stakeSPV.expiredTickets" m="Immature Tickets:" />}
+        value={<FormattedNumber value={immatureTicketsCount} />}
+      />
+      <StakeInfoTicketCount
+        className={styles.detailIconVoted}
+        label={<T id="stake.mempoolTickets" m="Voted Tickets:" />}
+        value={<FormattedNumber value={votedTicketsCount} />}
+      />
       <StakeInfoTicketCount
         className={styles.detailIconRevoked}
         label={<T id="stake.missedTickets" m="Revoked Tickets:" />}
diff --git a/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfoDisplay.jsx b/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfoDisplay.jsx
index c193172bfb..cf361168ba 100644
--- a/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfoDisplay.jsx
+++ b/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfoDisplay.jsx
@@ -18,20 +18,7 @@ const StakeInfoDisplayItem = ({ label, value, foot }) => (
 );
 
 const StakeInfoDisplayTicketCount = ({ value }) => (
-  <span className={styles.purchaseTicketLabel}>
-    <T
-      id="stake.ticketCount"
-      m="{ticketsFmt} {tickets, plural, one {ticket} other {tickets}}"
-      values={{
-        ticketsFmt: (
-          <span className={styles.purchaseTicketCount}>
-            <FormattedNumber value={value} />
-          </span>
-        ),
-        tickets: value
-      }}
-    />
-  </span>
+  <FormattedNumber value={value} />
 );
 
 const StakeInfoDisplay = ({
@@ -147,7 +134,8 @@ const StakeInfoDisplay = ({
       show={isShowingDetails}
       onToggleAccordion={onToggleStakeinfo}
       className={styles.accordion}
-      arrowClassName={styles.accordionArrow}>
+      arrowClassName={styles.accordionArrow}
+      activeArrowClassName={styles.activeAccordionArrow}>
       <StakeInfoDetails
         {...{
           ticketPoolSize,
diff --git a/app/components/views/TicketsPage/PurchaseTab/StakeInfo/index.js b/app/components/views/TicketsPage/PurchaseTab/StakeInfo/index.js
new file mode 100644
index 0000000000..6d40803a2e
--- /dev/null
+++ b/app/components/views/TicketsPage/PurchaseTab/StakeInfo/index.js
@@ -0,0 +1 @@
+export { default } from "./StakeInfo";
diff --git a/app/components/views/TicketsPage/PurchaseTab/TicketAutoBuyer/Form.jsx b/app/components/views/TicketsPage/PurchaseTab/TicketAutoBuyer/Form.jsx
deleted file mode 100644
index d108cd35e3..0000000000
--- a/app/components/views/TicketsPage/PurchaseTab/TicketAutoBuyer/Form.jsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import { AutoBuyerSwitch, AutoBuyerPassphraseModalSwitch } from "buttons";
-import { FormattedMessage as T } from "react-intl";
-import { Tooltip, classNames } from "pi-ui";
-import { DcrInput, AccountsSelect, VSPSelect } from "inputs";
-import { Balance, Subtitle } from "shared";
-import styles from "../PurchaseTab.module.css";
-
-const TicketAutoBuyerForm = ({
-  onStartAutoBuyer,
-  onStopAutoBuyer,
-  isRunning,
-  balanceToMaintain,
-  onChangeBalanceToMaintain,
-  balanceToMaintainError,
-  account,
-  changeAccount,
-  vsp,
-  changeVSP,
-  availableVSPs,
-  isValid,
-  onClick,
-  clicked,
-  notMixedAccounts,
-  getRunningIndicator
-}) => (
-  <>
-    <Subtitle
-      title={<T id="vsp.autobuyer.subtitle" m="Automatic Ticket Purchases" />}
-    />
-    <div className={styles.autobuyerWrapper}>
-      <div className={styles.autoBuyerRow}>
-        {isRunning ? (
-          <AutoBuyerSwitch enabled onClick={onStopAutoBuyer} />
-        ) : getRunningIndicator ? (
-          <Tooltip
-            content={
-              <T
-                id="tickets.autobuyer.running"
-                m="Privacy Mixer or Purchase Ticket Attempt running, please shut them off before starting autobuyer."
-              />
-            }>
-            <AutoBuyerPassphraseModalSwitch isValid={false} />
-          </Tooltip>
-        ) : (
-          <AutoBuyerPassphraseModalSwitch
-            modalTitle={
-              <T
-                id="vsp.tickets.startAutoBuyerConfirmation"
-                m="Start Ticket Buyer Confirmation"
-              />
-            }
-            modalDescription={
-              <div>
-                <span className={styles.orangeWarning}>
-                  <T
-                    id="vsp.tickets.startAutoBuyerConfirmation.attention"
-                    m="Attention!"
-                  />
-                </span>
-                <T
-                  id="vsp.tickets.startAutoBuyerConfirmation.description"
-                  m="Decrediton must remain running for tickets to be automatically purchased."
-                />
-                <div>
-                  <div className={styles.isRow}>
-                    <div className={styles.confirmLabel}>
-                      <T
-                        id="vsp.autobuyer.modal.balanceToMaintain"
-                        m="Balance To Maintain"
-                      />
-                      :
-                    </div>
-                    <div>
-                      <Balance flat amount={balanceToMaintain} />
-                    </div>
-                  </div>
-                  <div className={styles.isRow}>
-                    <div className={styles.confirmLabel}>
-                      <T id="vsp.autobuyer.modal.stakepool" m="VSP" />:
-                    </div>
-                    <div>{vsp && vsp.host}</div>
-                  </div>
-                </div>
-              </div>
-            }
-            onSubmit={onStartAutoBuyer}
-            onClick={onClick}
-            isValid={isValid}
-          />
-        )}
-        <div className={styles.autoBuyerRowPortionHalf}>
-          <div className={styles.autobuyerLabel}>
-            <T id="vsp.autobuyer.accountFrom" m="From" />:
-          </div>
-          <div className={styles.autobuyerInput}>
-            <AccountsSelect
-              {...{ account }}
-              disabled={isRunning}
-              onChange={changeAccount}
-              showAccountsButton={false}
-              hideSpendable={true}
-              filterAccounts={notMixedAccounts}
-            />
-          </div>
-        </div>
-        <div
-          className={classNames(styles.autoBuyerRowPortionHalf, styles.isRow)}>
-          <div className={styles.autobuyerLabel}>
-            <T id="vsp.autobuyer.stakePoolLabel" m="VSP" />:
-          </div>
-          <div className={styles.autobuyerInput}>
-            <VSPSelect
-              options={availableVSPs}
-              isDisabled={isRunning}
-              value={vsp}
-              onChange={changeVSP}
-            />
-          </div>
-        </div>
-      </div>
-      <div className={styles.autoBuyerRow}>
-        <div className={styles.autoBuyerRowPortionFull}>
-          <label className={styles.autobuyerLabel}>
-            <T id="vsp.autobuyer.balanceToMaintain" m="Balance to Maintain" />:
-          </label>
-          <div className={styles.autobuyerInput}>
-            <DcrInput
-              disabled={isRunning}
-              amount={balanceToMaintain}
-              onChangeAmount={onChangeBalanceToMaintain}
-              invalid={balanceToMaintainError}
-              invalidMessage={
-                <T
-                  id="vsp.autobuyer.balanceToMaintainError"
-                  m="Your balance to mantain is invalid"
-                />
-              }
-              showErrors
-            />
-          </div>
-        </div>
-      </div>
-      {clicked && isValid === false && (
-        <div className={styles.error}>
-          <T id="vsp.autobuyer.startErr" m="Fill all fields." />
-        </div>
-      )}
-    </div>
-  </>
-);
-
-export default TicketAutoBuyerForm;
diff --git a/app/components/views/TicketsPage/PurchaseTab/TicketAutoBuyer/TicketAutoBuyer.jsx b/app/components/views/TicketsPage/PurchaseTab/TicketAutoBuyer/TicketAutoBuyer.jsx
index 6c8d194ab1..2ca966c667 100644
--- a/app/components/views/TicketsPage/PurchaseTab/TicketAutoBuyer/TicketAutoBuyer.jsx
+++ b/app/components/views/TicketsPage/PurchaseTab/TicketAutoBuyer/TicketAutoBuyer.jsx
@@ -1,90 +1,60 @@
-import { injectIntl } from "react-intl";
-import TicketAutoBuyerForm from "./Form";
-import { useState, useEffect } from "react";
-import { usePurchaseTab } from "../hooks";
+import { TicketAutoBuyerForm } from "shared";
+import { useTicketAutoBuyer } from "./hooks";
+import { VSPSelect } from "inputs";
 
-function TicketAutoBuyer({ intl }) {
+function TicketAutoBuyer() {
   const {
+    balanceToMaintain,
+    setBalanceToMaintain,
+    account,
+    setAccount,
+    vsp,
+    setVsp,
     availableVSPs,
-    onEnableTicketAutoBuyer,
-    onDisableTicketAutoBuyer,
-    ticketAutoBuyerRunning,
-    buyerAccount,
-    buyerBalanceToMantain,
-    buyerVSP,
+    isRunning,
     notMixedAccounts,
-    getRunningIndicator
-  } = usePurchaseTab();
-  const [balanceToMaintain, setBalanceToMaintain] = useState(
-    buyerBalanceToMantain
-  );
-  const [account, setAccount] = useState(buyerAccount);
-  const [vsp, setVSP] = useState(buyerVSP);
-  // we use this bool flag so the error does not show before trying.
-  const [clicked, setClicked] = useState(false);
-  // isValid check if we can show the modal to start the auto buyer.
-  const [isValid, setIsValid] = useState(null);
-
-  const onHandleBalanceToMantain = (e) => setBalanceToMaintain(e.atomValue);
-
-  const onStartAutoBuyer = (passphrase) => {
-    onEnableTicketAutoBuyer(passphrase, account, balanceToMaintain, vsp);
-  };
-
-  const checkIsValid = (vsp, balanceToMaintain, account) => {
-    let isValid = true;
-    if (vsp) {
-      if (!vsp.pubkey || !vsp.host) {
-        isValid = false;
-      }
-    } else {
-      isValid = false;
-    }
-
-    // balance to mantain can be 0.
-    return (
-      isValid && (!!balanceToMaintain || balanceToMaintain === 0) && !!account
-    );
-  };
-
-  const onClick = () => {
-    setClicked(true);
-    setIsValid(checkIsValid(vsp, balanceToMaintain, account));
-  };
-
-  const onStopAutoBuyer = () => onDisableTicketAutoBuyer();
-
-  useEffect(
-    // we pass those values as parameter, so we don't need to add checkIsValid
-    // into the dependecy array.
-    () => {
-      setIsValid(checkIsValid(vsp, balanceToMaintain, account));
-    },
-    [vsp, balanceToMaintain, account]
+    getRunningIndicator,
+    clicked,
+    isValid,
+    isSettingsModalVisible,
+    showSettingsModal,
+    hideSettingsModal,
+    onClick,
+    onStartAutoBuyer,
+    onStopAutoBuyer,
+    onSaveAutoBuyerSettings,
+    vspHost
+  } = useTicketAutoBuyer();
+
+  const VSPSelectControl = (
+    <VSPSelect options={availableVSPs} value={vsp} onChange={setVsp} />
   );
 
   return (
     <TicketAutoBuyerForm
       {...{
-        formatMessage: intl.formatMessage,
-        onChangeBalanceToMaintain: onHandleBalanceToMantain,
-        changeAccount: setAccount,
-        changeVSP: setVSP,
-        account,
-        vsp,
         onStartAutoBuyer,
-        availableVSPs,
-        balanceToMaintain,
         onStopAutoBuyer,
-        isRunning: ticketAutoBuyerRunning,
+        isRunning,
+        balanceToMaintain,
+        setBalanceToMaintain,
+        account,
+        setAccount,
+        vsp,
         isValid,
         onClick,
         clicked,
         notMixedAccounts,
-        getRunningIndicator
+        getRunningIndicator,
+        onSaveAutoBuyerSettings,
+        isSettingsModalVisible,
+        showSettingsModal,
+        hideSettingsModal,
+        VSPSelectControl,
+        vspHost
       }}
     />
   );
 }
 
-export default injectIntl(TicketAutoBuyer);
+export default TicketAutoBuyer;
diff --git a/app/components/views/TicketsPage/PurchaseTab/TicketAutoBuyer/hooks.js b/app/components/views/TicketsPage/PurchaseTab/TicketAutoBuyer/hooks.js
new file mode 100644
index 0000000000..9a3fb49ea4
--- /dev/null
+++ b/app/components/views/TicketsPage/PurchaseTab/TicketAutoBuyer/hooks.js
@@ -0,0 +1,135 @@
+import { useSelector, useDispatch } from "react-redux";
+import { useState, useCallback, useEffect } from "react";
+import * as vspa from "actions/VSPActions";
+import * as ca from "actions/ControlActions";
+import * as sel from "selectors";
+
+export const useTicketAutoBuyer = () => {
+  const availableVSPs = useSelector(sel.getAvailableVSPs);
+  const isRunning = useSelector(sel.getTicketAutoBuyerRunning);
+
+  const buyerBalanceToMaintain = useSelector(sel.buyerBalanceToMaintain);
+  const buyerAccount = useSelector(sel.buyerAccount);
+  const buyerVSP = useSelector(sel.buyerVSP);
+
+  const [balanceToMaintain, setBalanceToMaintain] = useState(
+    buyerBalanceToMaintain
+  );
+  const [account, setAccount] = useState(buyerAccount);
+  const [vsp, setVsp] = useState(buyerVSP);
+
+  const notMixedAccounts = useSelector(sel.getNotMixedAccounts);
+  // isValid check if we can show the modal to start the auto buyer.
+  const [isValid, setIsValid] = useState(null);
+
+  const [isSettingsModalVisible, setIsSettingsModalVisible] = useState(false);
+  const showSettingsModal = () => setIsSettingsModalVisible(true);
+  const hideSettingsModal = () => {
+    resetSettingsState();
+    setIsSettingsModalVisible(false);
+  };
+  // we use this bool flag so the error does not show before trying.
+  const [clicked, setClicked] = useState(false);
+  const onStartAutoBuyer = (passphrase) => {
+    onEnableTicketAutoBuyer(
+      passphrase,
+      account,
+      balanceToMaintain?.atomValue,
+      vsp
+    );
+  };
+
+  const checkIsValid = (vsp, balanceToMaintain, account) => {
+    let isValid = true;
+    if (vsp) {
+      if (!vsp.pubkey || !vsp.host) {
+        isValid = false;
+      }
+    } else {
+      isValid = false;
+    }
+    // balance to mantain can be 0.
+    return isValid && balanceToMaintain?.atomValue >= 0 && !!account;
+  };
+
+  const onClick = () => {
+    setIsValid(checkIsValid(vsp, balanceToMaintain, account));
+    if (!isValid) {
+      setIsSettingsModalVisible(true);
+    }
+  };
+
+  useEffect(
+    // we pass those values as parameter, so we don't need to add checkIsValid
+    // into the dependecy array.
+    () => {
+      setIsValid(checkIsValid(vsp, balanceToMaintain, account));
+    },
+    [vsp, balanceToMaintain, account]
+  );
+  const getRunningIndicator = useSelector(sel.getRunningIndicator);
+
+  const resetSettingsState = () => {
+    setBalanceToMaintain(buyerBalanceToMaintain);
+    setAccount(buyerAccount);
+    setVsp(buyerVSP);
+    setClicked(false);
+  };
+  const vspHost = vsp && vsp.host;
+
+  const dispatch = useDispatch();
+  const onEnableTicketAutoBuyer = useCallback(
+    (passphrase, account, balanceToMaintain, vsp) =>
+      dispatch(
+        ca.startTicketBuyerV3Attempt(
+          passphrase,
+          account,
+          balanceToMaintain,
+          vsp
+        )
+      ),
+    [dispatch]
+  );
+
+  const onStopAutoBuyer = useCallback(() => dispatch(ca.ticketBuyerCancel()), [
+    dispatch
+  ]);
+
+  const onSaveAutoBuyerSettings = (balanceToMaintain, account, vsp) => {
+    setIsValid(checkIsValid(vsp, balanceToMaintain, account));
+    if (!isValid) {
+      setClicked(true);
+    } else {
+      dispatch(
+        vspa.saveAutoBuyerSettings({
+          balanceToMaintain,
+          account,
+          vsp
+        })
+      );
+      setIsSettingsModalVisible(false);
+    }
+  };
+  return {
+    balanceToMaintain,
+    setBalanceToMaintain,
+    account,
+    setAccount,
+    vsp,
+    setVsp,
+    availableVSPs,
+    isRunning,
+    notMixedAccounts,
+    getRunningIndicator,
+    clicked,
+    isValid,
+    isSettingsModalVisible,
+    showSettingsModal,
+    hideSettingsModal,
+    onClick,
+    onStartAutoBuyer,
+    onStopAutoBuyer,
+    onSaveAutoBuyerSettings,
+    vspHost
+  };
+};
diff --git a/app/components/views/TicketsPage/PurchaseTab/TicketAutoBuyer/index.js b/app/components/views/TicketsPage/PurchaseTab/TicketAutoBuyer/index.js
new file mode 100644
index 0000000000..d86648f3ab
--- /dev/null
+++ b/app/components/views/TicketsPage/PurchaseTab/TicketAutoBuyer/index.js
@@ -0,0 +1 @@
+export { default } from "./TicketAutoBuyer";
diff --git a/app/components/views/TicketsPage/PurchaseTab/hooks.js b/app/components/views/TicketsPage/PurchaseTab/hooks.js
index 2f1a3eb81d..1f3d6d5a1a 100644
--- a/app/components/views/TicketsPage/PurchaseTab/hooks.js
+++ b/app/components/views/TicketsPage/PurchaseTab/hooks.js
@@ -25,9 +25,10 @@ export const usePurchaseTab = () => {
   const notMixedAccounts = useSelector(sel.getNotMixedAccounts);
 
   const buyerVSP = useSelector(sel.buyerVSP);
-  const buyerBalanceToMantain = useSelector(sel.buyerBalanceToMantain);
+  const buyerBalanceToMaintain = useSelector(sel.buyerBalanceToMaintain);
   const buyerAccount = useSelector(sel.buyerAccount);
   const rememberedVspHost = useSelector(sel.getRememberedVspHost);
+  const visibleAccounts = useSelector(sel.visibleAccounts);
 
   // VSP listing checks
   const { onAddAllowedRequestType, isVSPListingEnabled } = useSettings();
@@ -120,7 +121,7 @@ export const usePurchaseTab = () => {
     ticketAutoBuyerRunning,
     buyerVSP,
     buyerAccount,
-    buyerBalanceToMantain,
+    buyerBalanceToMaintain,
     getVSPTicketsByFeeStatus,
     isLegacy,
     toggleIsLegacy,
@@ -134,6 +135,7 @@ export const usePurchaseTab = () => {
     isVSPListingEnabled,
     onEnableVSPListing,
     onListUnspentOutputs,
-    getRunningIndicator
+    getRunningIndicator,
+    visibleAccounts
   };
 };
diff --git a/app/reducers/control.js b/app/reducers/control.js
index 31fb6ca61b..4a05269be3 100644
--- a/app/reducers/control.js
+++ b/app/reducers/control.js
@@ -71,7 +71,8 @@ import {
   GETACCOUNTEXTENDEDKEY_FAILED,
   GETACCOUNTEXTENDEDKEY_SUCCESS,
   HIDE_CANTCLOSE_MODAL,
-  SHOW_CANTCLOSE_MODAL
+  SHOW_CANTCLOSE_MODAL,
+  SAVE_LEGACY_AUTOBUYER_SETTINGS
 } from "../actions/ControlActions";
 import { WALLET_AUTOBUYER_SETTINGS } from "actions/DaemonActions";
 import { CLOSEWALLET_SUCCESS } from "actions/WalletLoaderActions";
@@ -526,6 +527,13 @@ export default function control(state = {}, action) {
       };
     case CLOSEWALLET_SUCCESS:
       return { ...state, changeScriptByAccount: {} };
+    case SAVE_LEGACY_AUTOBUYER_SETTINGS:
+      return {
+        ...state,
+        legacyBalanceToMaintain: action.balanceToMaintain,
+        legacyAccount: action.account,
+        legacyVsp: action.vsp
+      };
     default:
       return state;
   }
diff --git a/app/reducers/vsp.js b/app/reducers/vsp.js
index f2d8aa3779..7a30a238b6 100644
--- a/app/reducers/vsp.js
+++ b/app/reducers/vsp.js
@@ -16,7 +16,8 @@ import {
   PROCESSUNMANAGEDTICKETS_FAILED,
   SETVSPDVOTECHOICE_ATTEMPT,
   SETVSPDVOTECHOICE_FAILED,
-  SETVSPDVOTECHOICE_SUCCESS
+  SETVSPDVOTECHOICE_SUCCESS,
+  SAVE_AUTOBUYER_SETTINGS
 } from "actions/VSPActions";
 import {
   STARTTICKETBUYERV3_ATTEMPT,
@@ -138,6 +139,13 @@ export default function vsp(state = {}, action) {
         ...state,
         setVspdVoteChoicesRequestAttempt: false
       };
+    case SAVE_AUTOBUYER_SETTINGS:
+      return {
+        ...state,
+        balanceToMaintain: action.balanceToMaintain,
+        account: action.account,
+        vsp: action.vsp
+      };
     default:
       return state;
   }
diff --git a/app/selectors.js b/app/selectors.js
index 42cea9b776..721906593d 100644
--- a/app/selectors.js
+++ b/app/selectors.js
@@ -913,8 +913,14 @@ export const isSyncingTickets = get(["vsp", "syncVSPRequestAttempt"]);
 
 // ticket auto buyer
 export const getTicketAutoBuyerRunning = get(["vsp", "ticketAutoBuyerRunning"]);
+export const legacyBuyerVSP = get(["control", "legacyVsp"]);
+export const legacyBuyerBalanceToMaintain = get([
+  "control",
+  "legacyBalanceToMaintain"
+]);
+export const legacyBuyerAccount = get(["control", "legacyAccount"]);
 export const buyerVSP = get(["vsp", "vsp"]);
-export const buyerBalanceToMantain = get(["vsp", "balanceToMaintain"]);
+export const buyerBalanceToMaintain = get(["vsp", "balanceToMaintain"]);
 export const buyerAccount = get(["vsp", "account"]);
 export const getHasVSPTicketsError = get(["vsp", "hasVSPTicketsError"]);
 export const getIsLegacy = get(["vsp", "isLegacy"]);
diff --git a/app/style/themes/darkTheme.js b/app/style/themes/darkTheme.js
index 7a5a616013..a8f3d8205d 100644
--- a/app/style/themes/darkTheme.js
+++ b/app/style/themes/darkTheme.js
@@ -145,6 +145,11 @@ const darkTheme = {
   "small-button-bg": "#2f4d8c",
   "small-button-disabled-bg": "#1f325f",
   "send-transaction-border": "#608ace",
+  "secondary-piui-button-bg": "#fff",
+  "purchase-ticket-border": "#608ace",
+  "stakeinfo-value": "#e9f8fe",
+  "stakeinfo-border": "#608ace",
+  "purchase-label": "#b7deee",
 
   // override pi-ui's toggle default dark background
   "toggle-bar-color": "var(--background-copy-color)",
diff --git a/app/style/themes/lightTheme.js b/app/style/themes/lightTheme.js
index 643f8c96d5..ca88309f97 100644
--- a/app/style/themes/lightTheme.js
+++ b/app/style/themes/lightTheme.js
@@ -148,6 +148,11 @@ const lightTheme = {
   "small-button-bg": "#fff",
   "small-button-disabled-bg": "#e6eaed",
   "send-transaction-border": "var(--grey-3)",
+  "secondary-piui-button-bg": "#fff",
+  "purchase-ticket-border": "var(--grey-3)",
+  "stakeinfo-value": "var(--main-dark-blue)",
+  "stakeinfo-border": "var(--grey-3)",
+  "purchase-label": "var(--grey-7)",
 
   // override pi-ui's tab colors
   "tab-default-color": "transparent", // default border
diff --git a/test/unit/components/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchasePage.spec.js b/test/unit/components/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchasePage.spec.js
index 65b23f9ab8..717f67beec 100644
--- a/test/unit/components/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchasePage.spec.js
+++ b/test/unit/components/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchasePage.spec.js
@@ -2,8 +2,7 @@ import Purchase from "../../../../../../app/components/views/TicketsPage/Purchas
 import TicketAutoBuyer from "../../../../../../app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_TicketAutoBuyer";
 import { render } from "test-utils.js";
 import user from "@testing-library/user-event";
-import { fireEvent } from "@testing-library/react";
-import { screen } from "@testing-library/react";
+import { screen, act, fireEvent } from "@testing-library/react";
 import * as sel from "selectors";
 import * as ca from "actions/ControlActions";
 import * as spa from "actions/VSPActions";
@@ -149,11 +148,15 @@ let mockIsTicketAutoBuyerEnabled;
 let mockTicketBuyerV2Cancel;
 let mockGetRunningIndicator;
 let mockAddCustomStakePool;
+let mockToggleIsLegacy;
 
 beforeEach(() => {
   selectors.getIsLegacy = jest.fn(() => true);
   selectors.stakePoolListingEnabled = jest.fn(() => true);
   selectors.unconfiguredStakePools = jest.fn(() => mockUnconfiguredStakePools);
+  selectors.spendingAccounts = jest.fn(() => [mockMixedAccount]);
+  selectors.visibleAccounts = jest.fn(() => [mockMixedAccount]);
+  selectors.getMixedAccount = jest.fn(() => mockMixedAccountValue);
   selectors.configuredStakePools = jest.fn(() => mockConfiguredStakePools);
   selectors.defaultSpendingAccount = jest.fn(() => mockMixedAccount);
   //stakeInfo
@@ -192,10 +195,19 @@ beforeEach(() => {
   mockGetRunningIndicator = selectors.getRunningIndicator = jest.fn(
     () => false
   );
+  mockToggleIsLegacy = spActions.toggleIsLegacy = jest.fn(() => () => {});
 });
 
 test("render LEGACY_PurchasePage", () => {
   render(<Purchase />, initialState);
+
+  // check Use Legacy VSP checkbox
+  expect(
+    screen.queryByText(/use a VSP which has not updated to vspd/i)
+  ).not.toBeInTheDocument(); // tooltip
+  user.click(screen.getByLabelText("Use Legacy VSP"));
+  expect(mockToggleIsLegacy).toHaveBeenCalledWith(false);
+
   expect(
     screen.getByText("Current VSP").nextElementSibling.textContent
   ).toMatch(mockConfiguredStakePools[0].Host);
@@ -242,6 +254,9 @@ test("render LEGACY_PurchasePage", () => {
     `${mockConfiguredStakePools[0].value.PoolFees}`
   );
 
+  expect(
+    screen.queryByLabelText("Always use this VSP")
+  ).not.toBeInTheDocument();
   // change stakepool
   const stakePoolSelectOption = screen.getAllByRole("option", {
     name: mockConfiguredStakePools[0].Host
@@ -307,7 +322,7 @@ test("render LEGACY_PurchasePage", () => {
   );
 
   // test amount input
-  const inputTag = screen.getByLabelText("Amount:");
+  const inputTag = screen.getByLabelText("Amount");
 
   const moreButton = screen.getByRole("button", { name: "more" });
   user.click(moreButton);
@@ -340,7 +355,7 @@ test("render LEGACY_PurchasePage", () => {
   expect(mockPurchaseTicketsAttempt).not.toHaveBeenCalled();
 
   //close advanced panel
-  user.click(ticketCogsButton);
+  act(() => user.click(ticketCogsButton));
   expect(ticketCogsButton.className).toMatch(/opened/i);
 
   // backup redeem script
@@ -383,27 +398,54 @@ test("render LEGACY_PurchasePage", () => {
 
 test("test legacy autobuyer", () => {
   render(<TicketAutoBuyer />, initialState);
+  const settingsButton = screen.getByRole("button", {
+    name: "Ticket Autobuyer Settings"
+  });
+  user.click(screen.getByTestId("toggleSwitch"));
+  const saveButton = screen.getByRole("button", { name: "Save" });
+  user.click(saveButton);
+  expect(screen.getByText("Fill all fields.")).toBeInTheDocument();
   const mockBalanceToMaintain = 14;
   user.type(
-    screen.getByLabelText("Balance to Maintain:"),
+    screen.getByLabelText(/Balance to Maintain/i),
     `${mockBalanceToMaintain}`
   );
 
-  // change stakepool
-  const stakePoolSelectOption = screen.getAllByRole("option", {
-    name: mockConfiguredStakePools[0].Host
-  })[0];
-
-  user.click(stakePoolSelectOption);
+  user.click(saveButton);
+  expect(screen.getByText("Fill all fields.")).toBeInTheDocument();
+  // set stakepool
+  user.click(screen.getByText("Select VSP..."));
   user.click(
     screen.getByRole("option", { name: mockConfiguredStakePools[1].Host })
   );
-  user.click(screen.getByTestId("toggleSwitch"));
 
+  user.click(saveButton);
+  expect(screen.getByText("Fill all fields.")).toBeInTheDocument();
+
+  // set account
+  user.click(screen.getByText("Select account"));
+  user.click(screen.getByText(mockMixedAccount.name));
+  user.click(saveButton);
+
+  // check settings
+  user.click(settingsButton);
+  expect(screen.getByLabelText(/Balance to Maintain/i).value).toBe(
+    `${mockBalanceToMaintain}`
+  );
+  expect(
+    screen.getByText(mockConfiguredStakePools[1].Host)
+  ).toBeInTheDocument();
+  expect(screen.getByText(mockMixedAccount.name)).toBeInTheDocument();
+  user.click(screen.getByRole("button", { name: "Cancel" }));
+
+  // clicking again on switch should open the confirmation modal
+  user.click(screen.getByTestId("toggleSwitch"));
   expect(
     screen.getByText(/start ticket buyer confirmation/i)
   ).toBeInTheDocument();
-  expect(screen.getAllByText(mockConfiguredStakePools[1].Host).length).toBe(2);
+  expect(
+    screen.getByText(mockConfiguredStakePools[1].Host)
+  ).toBeInTheDocument();
   expect(screen.getByText(`${mockBalanceToMaintain}.00`)).toBeInTheDocument();
   // cancel first
   user.click(screen.getByText("Cancel"));
@@ -417,7 +459,6 @@ test("test legacy autobuyer", () => {
     mockBalanceToMaintain * 100000000,
     mockConfiguredStakePools[1]
   );
-  //
 });
 
 test("test legacy autobuyer (autobuyer is runnning)", () => {
diff --git a/test/unit/components/TicketsPage/PurchaseTab/PurchasePage.spec.js b/test/unit/components/TicketsPage/PurchaseTab/PurchasePage.spec.js
new file mode 100644
index 0000000000..7dd1bc5cd0
--- /dev/null
+++ b/test/unit/components/TicketsPage/PurchaseTab/PurchasePage.spec.js
@@ -0,0 +1,362 @@
+import Purchase from "../../../../../app/components/views/TicketsPage/PurchaseTab/PurchaseTab.jsx";
+import TicketAutoBuyer from "../../../../../app/components/views/TicketsPage/PurchaseTab/TicketAutoBuyer/";
+import { render } from "test-utils.js";
+import user from "@testing-library/user-event";
+import { fireEvent, screen, wait } from "@testing-library/react";
+import * as sel from "selectors";
+import * as ca from "actions/ControlActions";
+import * as vsp from "../../../../../app/wallet/vsp";
+import * as vspa from "actions/VSPActions";
+import * as sa from "actions/SettingsActions";
+import { DCR } from "constants";
+import { en as enLocale } from "i18n/locales";
+import { DEFAULT_LIGHT_THEME_NAME } from "pi-ui";
+import { EXTERNALREQUEST_STAKEPOOL_LISTING } from "main_dev/externalRequests";
+
+const selectors = sel;
+const controlActions = ca;
+const vspActions = vspa;
+const settingsActions = sa;
+const vspFuncs = vsp;
+
+const mockVspInfo = {
+  data: {
+    pubkey: "test-pubkey",
+    feepercentage: 2
+  }
+};
+const mockAvailableVsps = [
+  {
+    host: "https://test-stakepool1.eu",
+    label: "https://test-stakepool1.eu",
+    vspData: {
+      feepercentage: 1
+    }
+  },
+  {
+    host: "https://test-stakepool2.eu",
+    label: "https://test-stakepool2.eu",
+    vspData: {
+      feepercentage: 2
+    }
+  }
+];
+const mockMixedAccountValue = 6;
+const mockChangeAccountValue = 6;
+const mockNumTicketsToBuy = 1;
+const mockMixedAccount = {
+  hidden: false,
+  label: "mixed: 249.79547928 DCR",
+  name: "mixed",
+  spendable: 24979547928,
+  spendableAndUnit: "249.79547928 DCR",
+  total: 24979547928,
+  value: mockMixedAccountValue
+};
+
+const mockPassphrase = "test-passphrase";
+const locale = enLocale;
+const currentSettings = {
+  locale: locale.key,
+  theme: DEFAULT_LIGHT_THEME_NAME,
+  allowedExternalRequests: [EXTERNALREQUEST_STAKEPOOL_LISTING]
+};
+const initialState = {
+  initialState: {
+    control: {
+      numTicketsToBuy: mockNumTicketsToBuy
+    },
+    settings: {
+      currentSettings,
+      tempSettings: currentSettings
+    }
+  }
+};
+
+const mockVotedTicketsCount = 3;
+const mockOwnMempoolTicketsCount = 5;
+const mockRevokedTicketsCount = 7;
+const mockImmatureTicketsCount = 6;
+const mockLiveTicketsCount = 7;
+const mockUnspentTicketsCount = 2;
+const mockTotalSubsidy = 400000000;
+const mockLastVotedTicket = null;
+const mockCurrencyDisplay = DCR;
+const mockTicketPrice = 6816662938;
+
+let mockPurchaseTicketsAttempt;
+let mockRevokeTicketsAttempt;
+let mockStartTicketBuyerV3Attempt;
+let mockGetTicketAutoBuyerRunning;
+let mockTicketBuyerCancel;
+let mockGetRunningIndicator;
+let mockToggleIsLegacy;
+let mockSetRememberedVspHost;
+let mockAddAllowedExternalRequest;
+
+beforeEach(() => {
+  selectors.getIsLegacy = jest.fn(() => false);
+  selectors.stakePoolListingEnabled = jest.fn(() => true);
+  selectors.getAvailableVSPs = jest.fn(() => mockAvailableVsps);
+  selectors.spendingAccounts = jest.fn(() => [mockMixedAccount]);
+  selectors.visibleAccounts = jest.fn(() => [mockMixedAccount]);
+  selectors.getMixedAccount = jest.fn(() => mockMixedAccountValue);
+  selectors.getChangeAccount = jest.fn(() => mockChangeAccountValue);
+  selectors.defaultSpendingAccount = jest.fn(() => mockMixedAccount);
+  selectors.ticketPrice = jest.fn(() => mockTicketPrice);
+  //stakeInfo
+  selectors.votedTicketsCount = jest.fn(() => mockVotedTicketsCount);
+  selectors.ownMempoolTicketsCount = jest.fn(() => mockOwnMempoolTicketsCount);
+  selectors.revokedTicketsCount = jest.fn(() => mockRevokedTicketsCount);
+  selectors.immatureTicketsCount = jest.fn(() => mockImmatureTicketsCount);
+  selectors.liveTicketsCount = jest.fn(() => mockLiveTicketsCount);
+  selectors.unspentTicketsCount = jest.fn(() => mockUnspentTicketsCount);
+  selectors.totalSubsidy = jest.fn(() => mockTotalSubsidy);
+  selectors.isSPV = jest.fn(() => false);
+  selectors.lastVotedTicket = jest.fn(() => mockLastVotedTicket);
+  selectors.currencyDisplay = jest.fn(() => mockCurrencyDisplay);
+  selectors.blocksNumberToNextTicket = jest.fn(() => 13);
+  mockAddAllowedExternalRequest = settingsActions.addAllowedExternalRequest = jest.fn(
+    () => () => {}
+  );
+
+  mockPurchaseTicketsAttempt = controlActions.newPurchaseTicketsAttempt = jest.fn(
+    () => () => {}
+  );
+  mockRevokeTicketsAttempt = controlActions.revokeTicketsAttempt = jest.fn(
+    () => () => {}
+  );
+  mockStartTicketBuyerV3Attempt = controlActions.startTicketBuyerV3Attempt = jest.fn(
+    () => () => {}
+  );
+  mockGetTicketAutoBuyerRunning = selectors.getTicketAutoBuyerRunning = jest.fn(
+    () => false
+  );
+  mockTicketBuyerCancel = controlActions.ticketBuyerCancel = jest.fn(
+    () => () => {}
+  );
+  mockGetRunningIndicator = selectors.getRunningIndicator = jest.fn(
+    () => false
+  );
+  vspFuncs.getVSPInfo = jest.fn(() => {
+    return Promise.resolve(mockVspInfo);
+  });
+  mockToggleIsLegacy = vspActions.toggleIsLegacy = jest.fn(() => () => {});
+  mockSetRememberedVspHost = vspActions.setRememberedVspHost = jest.fn(
+    () => () => {}
+  );
+});
+
+test("render PurchasePage", async () => {
+  render(<Purchase />, initialState);
+
+  // check PrivacyInfo
+  user.click(screen.getByText("You are purchasing mixed tickets"));
+  expect(
+    screen.getByText(/Purchasing mixed tickets can take some time/i)
+  ).toBeInTheDocument();
+
+  // check Use Legacy VSP checkbox
+  expect(
+    screen.getByText(/use a VSP which has not updated to vspd/i)
+  ).toBeInTheDocument(); //tooltip
+  user.click(screen.getByLabelText("Use Legacy VSP"));
+  expect(mockToggleIsLegacy).toHaveBeenCalledWith(true);
+
+  // set stakepool
+  user.click(screen.getByText("Select VSP..."));
+  user.click(screen.getByText(mockAvailableVsps[1].host));
+  await wait(() =>
+    expect(screen.queryByText("Loading")).not.toBeInTheDocument()
+  );
+
+  // check Always use this VSP checkbox
+  user.click(screen.getByLabelText("Always use this VSP"));
+  expect(mockSetRememberedVspHost).toHaveBeenCalledWith({
+    host: mockAvailableVsps[1].host,
+    pubkey: mockVspInfo.data.pubkey
+  });
+
+  // check summary
+  expect(screen.getByText("VSP Fee:").nextElementSibling.textContent).toMatch(
+    `${mockVspInfo.data.feepercentage} %`
+  );
+  expect(screen.getByText(/Total:/).textContent).toMatch(
+    `${mockTicketPrice / 100000000} ${DCR}`
+  );
+  expect(screen.getByText(/Remaining:/).textContent).toMatch(
+    `${(mockMixedAccount.spendable - mockTicketPrice) / 100000000} ${DCR}`
+  );
+
+  const purchaseButton = screen.getByText("Purchase");
+  user.click(purchaseButton);
+  user.type(screen.getByLabelText("Private Passphrase:"), mockPassphrase);
+  user.click(screen.getByText("Continue"));
+  expect(mockPurchaseTicketsAttempt).toHaveBeenCalledWith(
+    mockPassphrase,
+    mockMixedAccount,
+    mockNumTicketsToBuy,
+    {
+      host: mockAvailableVsps[1].host,
+      pubkey: mockVspInfo.data.pubkey
+    }
+  );
+
+  // test amount input
+  const inputTag = screen.getByLabelText("Amount");
+
+  const moreButton = screen.getByRole("button", { name: "more" });
+  user.click(moreButton);
+  expect(inputTag.value).toBe("2");
+
+  const lessButton = screen.getByRole("button", { name: "less" });
+  user.click(lessButton);
+  expect(inputTag.value).toBe("1");
+  // remain 1
+  user.click(lessButton);
+  expect(inputTag.value).toBe("1");
+
+  /* test arrow key */
+  fireEvent.keyDown(inputTag, { keyCode: 38 });
+  expect(inputTag.value).toBe("2");
+  fireEvent.keyDown(inputTag, { keyCode: 40 });
+  expect(inputTag.value).toBe("1");
+
+  user.clear(inputTag);
+  expect(inputTag.value).toBe("");
+
+  // "" => 1
+  user.click(moreButton);
+  expect(inputTag.value).toBe("1");
+
+  // not enough funds
+  mockPurchaseTicketsAttempt.mockReset();
+  user.type(inputTag, "100000000");
+  user.click(purchaseButton);
+  expect(mockPurchaseTicketsAttempt).not.toHaveBeenCalled();
+
+  // revoke
+  user.click(screen.getByText("Revoke"));
+  expect(screen.getByText(/revoke tickets confirmation/i)).toBeInTheDocument();
+  // cancel first
+  user.click(screen.getByText("Cancel"));
+  // try again
+  user.click(screen.getByText("Revoke"));
+  user.type(screen.getByLabelText("Private Passphrase:"), mockPassphrase);
+  user.click(screen.getByText("Continue"));
+  expect(mockRevokeTicketsAttempt).toHaveBeenCalledWith(mockPassphrase);
+});
+
+test("test autobuyer", async () => {
+  render(<TicketAutoBuyer />, initialState);
+  const settingsButton = screen.getByRole("button", {
+    name: "Ticket Autobuyer Settings"
+  });
+  user.click(screen.getByTestId("toggleSwitch"));
+  const saveButton = screen.getByRole("button", { name: "Save" });
+  user.click(saveButton);
+  expect(screen.getByText("Fill all fields.")).toBeInTheDocument();
+  const mockBalanceToMaintain = 14;
+  user.type(
+    screen.getByLabelText(/Balance to Maintain/i),
+    `${mockBalanceToMaintain}`
+  );
+
+  user.click(saveButton);
+  expect(screen.getByText("Fill all fields.")).toBeInTheDocument();
+  // set stakepool
+  user.click(screen.getByText("Select VSP..."));
+  user.click(screen.getByText(mockAvailableVsps[1].host));
+  await wait(() =>
+    expect(screen.queryByText("Loading")).not.toBeInTheDocument()
+  );
+  user.click(saveButton);
+  expect(screen.getByText("Fill all fields.")).toBeInTheDocument();
+
+  // set account
+  user.click(screen.getByText("Select account"));
+  user.click(screen.getByText(mockMixedAccount.name));
+  user.click(saveButton);
+
+  // check settings
+  user.click(settingsButton);
+  expect(screen.getByLabelText(/Balance to Maintain/i).value).toBe(
+    `${mockBalanceToMaintain}`
+  );
+  expect(screen.getByText(mockAvailableVsps[1].host)).toBeInTheDocument();
+  expect(screen.getByText(mockMixedAccount.name)).toBeInTheDocument();
+  user.click(screen.getByRole("button", { name: "Cancel" }));
+
+  user.click(screen.getByTestId("toggleSwitch"));
+  // clicking again on switch should open the confirmation modal
+  user.click(screen.getByTestId("toggleSwitch"));
+  expect(
+    screen.getByText(/start ticket buyer confirmation/i)
+  ).toBeInTheDocument();
+  expect(screen.getByText(mockAvailableVsps[1].host)).toBeInTheDocument();
+  expect(screen.getByText(`${mockBalanceToMaintain}.00`)).toBeInTheDocument();
+  // cancel first
+  user.click(screen.getByText("Cancel"));
+  // try again
+  user.click(screen.getByTestId("toggleSwitch"));
+  user.type(screen.getByLabelText("Private Passphrase:"), mockPassphrase);
+  user.click(screen.getByText("Continue"));
+  expect(mockStartTicketBuyerV3Attempt).toHaveBeenCalledWith(
+    mockPassphrase,
+    mockMixedAccount,
+    mockBalanceToMaintain * 100000000,
+    {
+      host: mockAvailableVsps[1].host,
+      pubkey: mockVspInfo.data.pubkey
+    }
+  );
+});
+
+test("test autobuyer (autobuyer is runnning)", () => {
+  mockGetTicketAutoBuyerRunning = selectors.getTicketAutoBuyerRunning = jest.fn(
+    () => true
+  );
+  render(<TicketAutoBuyer />, initialState);
+  expect(mockGetTicketAutoBuyerRunning).toHaveBeenCalled();
+  expect(screen.getByText(/turn off auto buyer/i)).toBeInTheDocument();
+  user.click(screen.getByTestId("toggleSwitch"));
+  expect(mockTicketBuyerCancel).toHaveBeenCalled();
+});
+
+test("test legacy autobuyer (a process is runnning)", () => {
+  mockGetRunningIndicator = selectors.getRunningIndicator = jest.fn(() => true);
+  render(<TicketAutoBuyer />, initialState);
+  expect(
+    screen.getByText(/privacy mixer or purchase ticket attempt running/i)
+  ).toBeInTheDocument();
+  user.click(screen.getByTestId("toggleSwitch"));
+
+  expect(
+    screen.queryByText(/start ticket buyer confirmation/i)
+  ).not.toBeInTheDocument();
+  expect(mockGetRunningIndicator).toHaveBeenCalled();
+});
+
+test("test when VSP listing is not enabled ", () => {
+  render(<Purchase />);
+  expect(
+    screen.getByText(
+      /VSP listing from external API endpoint is currently disabled/i
+    )
+  ).toBeInTheDocument();
+  user.click(screen.getByRole("button", { name: "Enable VSP Listing" }));
+  expect(mockAddAllowedExternalRequest).toHaveBeenCalledWith(
+    EXTERNALREQUEST_STAKEPOOL_LISTING
+  );
+});
+
+test("test `end of a ticket interval` state", () => {
+  selectors.blocksNumberToNextTicket = jest.fn(() => 2);
+  selectors.isSPV = jest.fn(() => true);
+  render(<Purchase />, initialState);
+  expect(
+    screen.getByText(
+      /Purchase Tickets is not available right now, because we are at the end of a ticket interval. After one block it will be available again./i
+    )
+  ).toBeInTheDocument();
+});
diff --git a/test/unit/components/TicketsPage/PurchaseTab/StakeInfo.spec.js b/test/unit/components/TicketsPage/PurchaseTab/StakeInfo.spec.js
index 3b554b44d5..f581f7cd46 100644
--- a/test/unit/components/TicketsPage/PurchaseTab/StakeInfo.spec.js
+++ b/test/unit/components/TicketsPage/PurchaseTab/StakeInfo.spec.js
@@ -35,11 +35,11 @@ test("test StakeInfo (SPV enabled)", () => {
 
   const unspentTickets = screen.getByText(/unspent tickets/i);
   expect(unspentTickets.nextElementSibling.textContent).toBe(
-    `${mockUnspentTicketsCount} tickets`
+    `${mockUnspentTicketsCount}`
   );
 
   expect(screen.getByText(/total voted/i).nextElementSibling.textContent).toBe(
-    `${mockVotedTicketsCount} tickets`
+    `${mockVotedTicketsCount}`
   );
   expect(
     screen.getByText(/last ticket voted/i).nextElementSibling.textContent
@@ -75,7 +75,7 @@ test("test StakeInfo (SPV disabled)", () => {
 
   const liveTickets = screen.getByText(/live/i);
   expect(liveTickets.nextElementSibling.textContent).toBe(
-    `${mockLiveTicketsCount} tickets`
+    `${mockLiveTicketsCount}`
   );
   expect(liveTickets.nextElementSibling.nextElementSibling.textContent).toMatch(
     `Own Mempool: ${mockOwnMempoolTicketsCount}`
diff --git a/test/unit/components/inputs/Inputs.spec.js b/test/unit/components/inputs/Inputs.spec.js
index 7581ba4df2..734f9cabc3 100644
--- a/test/unit/components/inputs/Inputs.spec.js
+++ b/test/unit/components/inputs/Inputs.spec.js
@@ -399,11 +399,11 @@ test("render default NumTicketsInput", () => {
   checkDefaultInput(input, inputTag, "text", "", testInitValue);
   expect(input.className).toMatch("numericInput");
   expect(input.className).toMatch("integerInput");
-  expect(screen.getByText("Ticket")).toBeInTheDocument(); // single ticket
+  expect(screen.getByText("ticket")).toBeInTheDocument(); // single ticket
   //manual type a value
   user.type(inputTag, "2.3");
   expect(inputTag.value).toBe("123");
-  expect(screen.getByText("Tickets")).toBeInTheDocument(); // multiple tickets
+  expect(screen.getByText("tickets")).toBeInTheDocument(); // multiple tickets
 
   /* test buttons */
   const lessButton = screen.getByRole("button", { name: "less" });