diff --git a/app/actions/SettingsActions.js b/app/actions/SettingsActions.js
index e3814044dc..e02eefc958 100644
--- a/app/actions/SettingsActions.js
+++ b/app/actions/SettingsActions.js
@@ -181,6 +181,13 @@ export function updateStateSettingsChanged(settings, norestart) {
   };
 }
 
+export const resetSettingsState = () => {
+  return (dispatch, getState) => {
+    const { currentSettings } = getState().settings;
+    dispatch({ tempSettings: currentSettings, type: SETTINGS_UNCHANGED });
+  };
+};
+
 export const updateStateVoteSettingsChanged = (settings) => (
   dispatch,
   getState
diff --git a/app/components/buttons/index.js b/app/components/buttons/index.js
index 85cd0d1f41..bd09414569 100644
--- a/app/components/buttons/index.js
+++ b/app/components/buttons/index.js
@@ -118,8 +118,17 @@ export const InfoDocFieldModalButton = mbb(
   styles.infoFieldModalButton,
   DocumentationInfoModal
 );
+export const InfoDocFieldModalInvisibleButton = mbb(
+  null,
+  DocumentationInfoModal,
+  InvisibleButton
+);
 export const DiscoverUsageButton = mbb(null, DiscoverUsageModal);
-export const ChangePassphraseButton = mbb(null, ChangePassphraseModal);
+export const ChangePassphraseButton = mbb(
+  null,
+  ChangePassphraseModal,
+  PiUiButton
+);
 export const InvisiblePassphraseModalButton = mbb(
   null,
   PassphraseModal,
diff --git a/app/components/inputs/AccountsSelect/AccountsSelect.jsx b/app/components/inputs/AccountsSelect/AccountsSelect.jsx
index 98bf9c365b..45583920b2 100644
--- a/app/components/inputs/AccountsSelect/AccountsSelect.jsx
+++ b/app/components/inputs/AccountsSelect/AccountsSelect.jsx
@@ -1,24 +1,24 @@
-import Select from "react-select";
 import { useAccountsSelect } from "./hooks";
 import { Balance } from "shared";
 import styles from "./AccountsSelect.module.css";
 import { classNames } from "pi-ui";
+import { Select } from "inputs";
 import LinkToAccounts from "./LinkToAccounts";
+import { components } from "react-select";
 
 const AccountsSelect = ({
   accountsType,
   className,
   selectClassName,
   showAccountsButton,
-  disabled,
   hideSpendable,
   filterAccounts,
   account: accountProp,
+  customStyles,
+  customComponents,
   onChange,
-  onKeyDown,
-  valueRenderer,
-  optionRenderer,
-  searchable
+  selectWithBigFont,
+  ...props
 }) => {
   const { account, accounts, placeholder } = useAccountsSelect({
     accountProp,
@@ -27,49 +27,54 @@ const AccountsSelect = ({
     onChange
   });
 
-  const selectKeyDown = (e) => {
-    switch (e.keyCode) {
-      case 8:
-      case 46:
-        e.preventDefault();
-        break;
-    }
-    onKeyDown?.(e);
+  const SingleValue = (props) => {
+    return (
+      <components.SingleValue {...props}>
+        <div
+          className={classNames(
+            styles.value,
+            selectWithBigFont && styles.selectWithBigFont
+          )}>
+          <div className={styles.name}>{props.data.name}</div>
+          {!hideSpendable && (
+            <div className={styles.spendable}>
+              <Balance flat amount={props.data.spendable} />
+            </div>
+          )}
+        </div>
+      </components.SingleValue>
+    );
   };
 
-  if (!valueRenderer) {
-    valueRenderer = (option) => (
-      <div className={styles.value}>
-        <div className={styles.name}>{option.name}</div>
-        {!hideSpendable && (
-          <div className={styles.spendable}>
-            <Balance flat amount={option.spendable} />
-          </div>
-        )}
-      </div>
+  const Option = (props) => {
+    return (
+      <components.Option {...props}>
+        <div className={styles.label}>
+          <div className={styles.name}>{props.data.name}</div>
+          {!hideSpendable && (
+            <div className={styles.spendable}>
+              <Balance flat amount={props.data.spendable} />
+            </div>
+          )}
+        </div>
+      </components.Option>
     );
-  }
+  };
 
   return (
     <div
-      className={classNames(styles.isRow, className)}
+      className={classNames(styles.container, className)}
       data-testid="accountsSelect">
       <Select
-        disabled={disabled}
-        clearable={false}
-        style={{ zIndex: "9" }}
         placeholder={placeholder}
-        multi={false}
         value={account}
-        valueKey="value"
-        labelKey="label"
         options={accounts}
-        valueRenderer={valueRenderer}
-        optionRenderer={optionRenderer ?? valueRenderer}
+        customComponents={{ SingleValue, Option, ...customComponents }}
+        className={selectClassName}
+        styles={customStyles}
+        selectWithBigFont={selectWithBigFont}
         onChange={(acc) => onChange?.(acc)}
-        className={classNames(styles.select, selectClassName)}
-        onInputKeyDown={selectKeyDown}
-        searchable={searchable}
+        {...props}
       />
       {showAccountsButton && <LinkToAccounts />}
     </div>
@@ -79,8 +84,7 @@ const AccountsSelect = ({
 AccountsSelect.propTypes = {
   accountsType: PropTypes.oneOf(["spending", "visible"]),
   className: PropTypes.string,
-  showAccountsButton: PropTypes.bool,
-  getAddressForSelected: PropTypes.bool
+  showAccountsButton: PropTypes.bool
 };
 
 export default AccountsSelect;
diff --git a/app/components/inputs/AccountsSelect/AccountsSelect.module.css b/app/components/inputs/AccountsSelect/AccountsSelect.module.css
index 8ebff8aee1..8d8da4c9f4 100644
--- a/app/components/inputs/AccountsSelect/AccountsSelect.module.css
+++ b/app/components/inputs/AccountsSelect/AccountsSelect.module.css
@@ -1,11 +1,16 @@
-.isRow {
+.container {
+  display: inline-block;
+  width: 100%;
+}
+.value {
   display: flex;
-  flex-direction: row;
+  justify-content: space-between;
 }
-.select {
-  width: 300px;
+.value.selectWithBigFont {
+  font-size: 1.6rem;
+  line-height: 2.1rem;
 }
-.value {
+.label {
   display: flex;
   justify-content: space-between;
 }
diff --git a/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.jsx b/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.jsx
index 533ad37b02..4613383b8b 100644
--- a/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.jsx
+++ b/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.jsx
@@ -3,71 +3,79 @@ import styles from "./DetailedAccountsSelect.module.css";
 import { Balance } from "shared";
 import { useDetailedAccountsSelect } from "./hooks";
 import { classNames } from "pi-ui";
+import { components } from "react-select";
 
 // default account's number equals 2^31-1.
 // source https://github.com/decred/dcrwallet/blob/master/wallet/udb/addressmanager.go#L43
 const isImported = ({ value }) => value === Math.pow(2, 31) - 1;
 
-const DetailedAccountsSelect = ({ selectClassName, ...props }) => {
+const DetailedAccountsSelect = (props) => {
   const { mixedAccount, changeAccount } = useDetailedAccountsSelect();
-  const valueRenderer = (option) => {
-    const isMixed = option.value === mixedAccount;
-    const isChange = option.value === changeAccount;
+  const SingleValue = (props) => {
+    const isMixed = props.data.value === mixedAccount;
+    const isChange = props.data.value === changeAccount;
     return (
-      <div className={styles.value}>
-        <div
-          className={classNames(
-            styles.name,
-            styles.icon,
-            isImported(option) && styles.imported,
-            isMixed && styles.mixed,
-            isChange && styles.unmixed
-          )}>
-          {option.name}
+      <components.SingleValue {...props}>
+        <div className={styles.value}>
+          <div
+            className={classNames(
+              styles.name,
+              styles.icon,
+              isImported(props.data) && styles.imported,
+              isMixed && styles.mixed,
+              isChange && styles.unmixed
+            )}>
+            {props.data.name}
+          </div>
+          <div className={styles.spendable}>
+            <span className={styles.balanceLabel}>Balance:</span>
+            <Balance
+              flat
+              amount={props.data.spendable}
+              classNameAmount={styles.balanceAmount}
+              classNameUnit={styles.balanceUnit}
+              classNameSecondary={styles.balanceSecondary}
+            />
+          </div>
         </div>
-        <div className={styles.spendable}>
-          <span className={styles.balanceLabel}>Balance:</span>
-          <Balance
-            flat
-            amount={option.spendable}
-            classNameAmount={styles.balanceAmount}
-            classNameUnit={styles.balanceUnit}
-            classNameSecondary={styles.balanceSecondary}
-          />
+      </components.SingleValue>
+    );
+  };
+
+  const Option = (props) => {
+    return (
+      <components.Option {...props}>
+        <div className={classNames(styles.value, styles.option)}>
+          <div className={styles.name}>{props.data.name}</div>
+          <div className={styles.spendable}>
+            <Balance flat amount={props.data.spendable} />
+          </div>
         </div>
-      </div>
+      </components.Option>
     );
   };
-  const optionRenderer = (option) => (
-    <div className={classNames(styles.value, styles.option)}>
-      <div className={styles.name}>{option.name}</div>
-      <div className={styles.spendable}>
-        <Balance flat amount={option.spendable} />
-      </div>
-    </div>
-  );
 
-  // `detailedAccountSelect` and `selectWithBigFont` classNames are
-  // temp solution to skinning from ReactSelectGlobal.css.
-  // When react-select will be replaced by the `pi-ui` component,
-  // this className can be deleted.
+  const customStyles = {
+    control: () => ({
+      padding: 0,
+      border: "none"
+    }),
+    indicatorsContainer: () => ({
+      alignItems: "flex-start",
+      marginTop: "0.3rem"
+    })
+  };
+
   return (
     <AccountsSelect
-      className={classNames("detailedAccountSelect", "selectWithBigFont")}
-      valueRenderer={valueRenderer}
-      optionRenderer={optionRenderer}
-      selectClassName={classNames(styles.select, selectClassName)}
-      searchable={false}
+      selectWithBigFont
+      className={styles.detailedAccountSelect}
+      selectClassName={styles.select}
+      customStyles={customStyles}
+      customComponents={{ SingleValue, Option }}
       {...props}
     />
   );
 };
 
-DetailedAccountsSelect.propTypes = {
-  accountsType: PropTypes.oneOf(["spending", "visible"]),
-  className: PropTypes.string,
-  showAccountsButton: PropTypes.bool,
-  getAddressForSelected: PropTypes.bool
-};
-
 export default DetailedAccountsSelect;
diff --git a/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.module.css b/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.module.css
index c05641435e..7b03231bc8 100644
--- a/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.module.css
+++ b/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.module.css
@@ -1,7 +1,4 @@
-.isRow {
-  display: flex;
-  flex-direction: row;
-}
+.detailedAccountSelect,
 .select {
   width: auto;
 }
diff --git a/app/components/inputs/Input/Input.module.css b/app/components/inputs/Input/Input.module.css
index 458ff1a499..68361898a0 100644
--- a/app/components/inputs/Input/Input.module.css
+++ b/app/components/inputs/Input/Input.module.css
@@ -19,12 +19,12 @@
 
 .newBiggerFontStyleInput {
   font-family: var(--font-family-regular);
-  font-size: 16px !important;
-  line-height: 16px !important;
+  font-size: 1.6rem !important;
+  line-height: 2.2rem !important;
 }
 .newBiggerFontStyleInput::placeholder {
-  font-size: 16px !important;
-  line-height: 16px !important;
+  font-size: 1.6rem !important;
+  line-height: 2.2rem !important;
   color: var(--grey-5) !important;
 }
 
diff --git a/app/components/inputs/LEGACY_StakePoolSelect.jsx b/app/components/inputs/LEGACY_StakePoolSelect.jsx
index 7f59d14962..84e43f0f2a 100644
--- a/app/components/inputs/LEGACY_StakePoolSelect.jsx
+++ b/app/components/inputs/LEGACY_StakePoolSelect.jsx
@@ -1,8 +1,7 @@
-import { Creatable } from "react-select";
-import Select from "react-select";
 import { FormattedMessage as T, defineMessages } from "react-intl";
 import { useIntl } from "react-intl";
 import { useState } from "react";
+import { Select } from "inputs";
 
 const messages = defineMessages({
   placeholder: {
@@ -55,15 +54,6 @@ const StakePoolSelect = ({
     );
   };
 
-  const newOptionCreator = () => {
-    return {
-      value: { Host: lastInput },
-      label: lastInput,
-      Host: lastInput,
-      newOption: true
-    };
-  };
-
   const onInputChange = (input) => {
     setLastInput(input);
   };
@@ -84,16 +74,25 @@ const StakePoolSelect = ({
     return true;
   };
 
-  const Component = creatable ? Creatable : Select;
-
   return (
-    <Component
+    <Select
+      isCreatable={creatable}
+      isSearchable
       {...props}
       options={getOptions()}
       placeholder={intl.formatMessage(messages.placeholder)}
       promptTextCreator={addStakePoolLabel}
       onChange={onChangeLocal}
-      newOptionCreator={newOptionCreator}
+      onCreateOption={(option) =>
+        onChangeLocal({
+          value: {
+            value: { Host: option }
+          },
+          label: option,
+          Host: option,
+          newOption: true
+        })
+      }
       onInputChange={onInputChange}
       isValidNewOption={isValidNewOption}
     />
diff --git a/app/components/inputs/LanguageSelectInput/LanguageSelectInput.jsx b/app/components/inputs/LanguageSelectInput/LanguageSelectInput.jsx
index 2bc9005203..89bf6d05bd 100644
--- a/app/components/inputs/LanguageSelectInput/LanguageSelectInput.jsx
+++ b/app/components/inputs/LanguageSelectInput/LanguageSelectInput.jsx
@@ -1,69 +1,46 @@
-import { useState } from "react";
-import Select from "react-select";
-import { injectIntl } from "react-intl";
+import { SettingsInput } from "inputs";
 import { classNames } from "pi-ui";
-import { useMountEffect } from "hooks";
 import styles from "./LanguageSelectInput.module.css";
+import { components } from "react-select";
 
 const LanguageSelectInput = ({
-  className,
-  value,
-  onChange,
   valueKey,
   labelKey,
-  options,
-  ariaLabelledBy
+  ariaLabelledBy,
+  className,
+  ...props
 }) => {
-  const [stateValue, setValue] = useState(null);
-
-  useMountEffect(() => {
-    if (value) {
-      setValue(value);
-    }
-  });
-
-  const selectKeyDown = (e) => {
-    switch (e.keyCode) {
-      case 8:
-      case 46:
-        e.preventDefault();
-        break;
-    }
-  };
-
-  const valueRenderer = (option) => (
-    <div className={styles.label}>
-      <div className={classNames(styles.flag, styles[option.language])} />
-      <div className={styles.name}>{option.description}</div>
-    </div>
+  const SingleValue = (props) => (
+    <components.SingleValue {...props}>
+      <div className={styles.label}>
+        <div className={classNames(styles.flag, styles[props.data.value])} />
+        <div className={styles.singleValue}>{props.data.label}</div>
+      </div>
+    </components.SingleValue>
   );
 
-  const onChangeSelect = (value) => {
-    setValue(value);
-    onChange?.(value);
-  };
+  const Option = (props) => (
+    <components.Option {...props}>
+      <div className={styles.label}>
+        <div className={classNames(styles.flag, styles[props.data.value])} />
+        <div className={styles.option}>{props.data.label}</div>
+      </div>
+    </components.Option>
+  );
 
   return (
     <div className={classNames(styles.input, className)}>
-      <Select
-        clearable={false}
-        multi={false}
-        value={stateValue}
-        valueKey={valueKey}
-        labelKey={labelKey}
-        options={options}
-        valueRenderer={valueRenderer}
-        optionRenderer={valueRenderer}
-        onChange={onChangeSelect}
-        onInputKeyDown={selectKeyDown}
-        aria-labelledby={ariaLabelledBy}
+      <SettingsInput
+        {...{
+          valueKey,
+          labelKey,
+          ariaLabelledBy,
+          customComponents: { SingleValue, Option },
+          ...props
+        }}
       />
     </div>
   );
 };
 
-LanguageSelectInput.propTypes = {
-  className: PropTypes.string
-};
-
-export default injectIntl(LanguageSelectInput);
+export default LanguageSelectInput;
diff --git a/app/components/inputs/LanguageSelectInput/LanguageSelectInput.module.css b/app/components/inputs/LanguageSelectInput/LanguageSelectInput.module.css
index 336d84f93d..5c814fad14 100644
--- a/app/components/inputs/LanguageSelectInput/LanguageSelectInput.module.css
+++ b/app/components/inputs/LanguageSelectInput/LanguageSelectInput.module.css
@@ -1,24 +1,13 @@
-.input {
-  width: 200px;
-  margin-right: 0.5em;
-}
-
 .label {
   display: flex;
 }
 
-.label .flag {
-  margin: 5px 5px 0 0;
-}
-
 .flag {
-  flex-grow: 2;
   background-repeat: no-repeat;
-  background-size: 20px;
-  width: 20px;
-  height: 20px;
-  margin-left: 10px;
-  margin-top: 2px;
+  background-size: 20px 13px;
+  width: 25px;
+  min-width: 25px;
+  background-position: left center;
 }
 
 .flag.ar {
@@ -61,6 +50,7 @@
   background-image: var(--flag-pl);
 }
 
+.flag.dev,
 .flag.pt-BR {
   background-image: var(--flag-ptbr);
 }
@@ -73,9 +63,8 @@
   background-image: var(--flag-hk);
 }
 
-.name {
-  flex-grow: 4;
-  width: 100px;
+.option,
+.singleValue {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
diff --git a/app/components/inputs/ReceiveAccountsSelect.jsx b/app/components/inputs/ReceiveAccountsSelect.jsx
index cd2f05e469..b56b8f8399 100644
--- a/app/components/inputs/ReceiveAccountsSelect.jsx
+++ b/app/components/inputs/ReceiveAccountsSelect.jsx
@@ -6,11 +6,9 @@ import * as sel from "selectors";
 
 function ReceiveAccountsSelect({
   onChange,
-  className,
-  selectClassName,
   showAccountsButton,
-  disabled,
-  account
+  account,
+  ...props
 }) {
   const dispatch = useDispatch();
   const mixedAccount = useSelector(sel.getMixedAccount);
@@ -38,8 +36,6 @@ function ReceiveAccountsSelect({
     <AccountsSelect
       {...{
         showAccountsButton,
-        className,
-        selectClassName,
         onChange: onChangeAccount,
         accountsType: "visible",
         filterAccounts: [mixedAccount],
@@ -51,7 +47,8 @@ function ReceiveAccountsSelect({
           account && account != nextAddressAccount.value
             ? null
             : nextAddressAccount,
-        disabled
+        isSearchable: true,
+        ...props
       }}
     />
   );
diff --git a/app/components/inputs/Select.jsx b/app/components/inputs/Select.jsx
new file mode 100644
index 0000000000..341be7f841
--- /dev/null
+++ b/app/components/inputs/Select.jsx
@@ -0,0 +1,74 @@
+import { Select as PiUiSelect } from "pi-ui";
+
+const Select = ({ styles, selectWithBigFont, ariaLabelledBy, ...props }) => {
+  const customStyles = {
+    valueContainer: () => ({
+      padding: `0 0 0 ${selectWithBigFont ? 0 : "0.5rem"}`
+    }),
+    placeholder: (provided) => ({
+      margin: 0,
+      color: "var(--grey-5)",
+      fontSize: selectWithBigFont ? "1.6rem" : provided.fontSize,
+      lineHeight: selectWithBigFont ? "2.1rem" : provided.lineHeight
+    }),
+    control: (_, state) => ({
+      borderBottomColor: "var(--select-stroke-color)",
+      borderRadius: "none",
+      borderLeft: "none",
+      borderRight: "none",
+      borderTop: "none",
+      minHeight: "initial",
+      "&:hover": {
+        borderBottomColor: "var(--accent-blue)"
+      },
+      backgroundColor: state.isDisabled
+        ? "var(--disabled-background-color)"
+        : "transparent"
+    }),
+    container: () => ({
+      padding: 0
+    }),
+    singleValue: (provided) => ({
+      margin: 0,
+      fontSize: selectWithBigFont ? "1.6rem" : provided.fontSize,
+      lineHeight: selectWithBigFont ? "2.1rem" : provided.lineHeight,
+      color: "var(--main-dark-blue)"
+    }),
+    option: (_, state) => ({
+      color: "var(--main-dark-blue)",
+      backgroundColor: state.isFocused
+        ? "var(--background-hovered)"
+        : "var(--card-background)"
+    }),
+    menu: () => ({
+      marginTop: 0
+    }),
+    dropdownIndicator: () => ({
+      paddingRight: 0
+    }),
+    input: () => ({
+      paddingTop: 0,
+      paddingBottom: 0,
+      marginTop: 0,
+      marginBottom: 0
+    }),
+    ...styles
+  };
+
+  return (
+    <PiUiSelect
+      customStyles={customStyles}
+      maxMenuHeight={200}
+      aria-labelledby={ariaLabelledBy}
+      {...props}
+    />
+  );
+};
+
+Select.propTypes = {
+  styles: PropTypes.object,
+  selectWithBigFont: PropTypes.bool,
+  ariaLabelledBy: PropTypes.string
+};
+
+export default Select;
diff --git a/app/components/inputs/SettingsInput.jsx b/app/components/inputs/SettingsInput.jsx
index bb5462276d..d1a029de46 100644
--- a/app/components/inputs/SettingsInput.jsx
+++ b/app/components/inputs/SettingsInput.jsx
@@ -1,53 +1,44 @@
-import Select from "react-select";
-import { injectIntl } from "react-intl";
-import { useState } from "react";
+import { Select } from "inputs";
+import { isString } from "lodash";
 
 const SettingsInput = ({
-  className,
   value,
+  options,
   valueKey,
   labelKey,
-  options,
-  disabled,
   ariaLabelledBy,
-  onChange
+  className,
+  ...props
 }) => {
-  const [inputValue, setInputValue] = useState(value ?? null);
-
-  const selectKeyDown = (e) => {
-    switch (e.keyCode) {
-      case 8:
-      case 46:
-        e.preventDefault();
-        break;
-    }
+  const normalizeOption = (option) => {
+    if (!option) return null;
+    return {
+      ...option,
+      value: option[valueKey],
+      label: option[labelKey]
+    };
   };
 
-  const onChangeSelect = (value) => {
-    setInputValue(value);
-    onChange?.(value);
-  };
+  const normalizedValue = isString(value)
+    ? normalizeOption(
+        options.find((option) => option[valueKey]?.toString() === value)
+      )
+    : value;
+
+  const normalizedOptions = options?.map((option) => normalizeOption(option));
 
   return (
     <div className={className}>
       <Select
-        clearable={false}
-        multi={false}
-        value={inputValue}
-        valueKey={valueKey}
-        labelKey={labelKey}
-        options={options}
-        onChange={onChangeSelect}
-        onInputKeyDown={selectKeyDown}
-        disabled={disabled}
-        aria-labelledby={ariaLabelledBy}
+        {...{
+          value: normalizedValue,
+          options: normalizedOptions,
+          ariaLabelledBy,
+          ...props
+        }}
       />
     </div>
   );
 };
 
-SettingsInput.propTypes = {
-  className: PropTypes.string
-};
-
-export default injectIntl(SettingsInput);
+export default SettingsInput;
diff --git a/app/components/inputs/SettingsTextInput.jsx b/app/components/inputs/SettingsTextInput.jsx
index be83830d36..269cdbade9 100644
--- a/app/components/inputs/SettingsTextInput.jsx
+++ b/app/components/inputs/SettingsTextInput.jsx
@@ -1,3 +1,20 @@
 import Input from "./Input";
+import { useState } from "react";
 
-export default (props) => <Input {...props} />;
+export default ({ onChange, value, ...props }) => {
+  const [inputValue, setInputValue] = useState(value);
+
+  const onSubmit = () => {
+    onChange?.(inputValue);
+  };
+
+  return (
+    <Input
+      value={inputValue}
+      onChange={(e) => setInputValue(e.target.value)}
+      onKeyDownSubmit={onSubmit}
+      onBlur={onSubmit}
+      {...props}
+    />
+  );
+};
diff --git a/app/components/inputs/VSPSelect/VSPSelect.jsx b/app/components/inputs/VSPSelect/VSPSelect.jsx
index f7247d860d..d6d9b13061 100644
--- a/app/components/inputs/VSPSelect/VSPSelect.jsx
+++ b/app/components/inputs/VSPSelect/VSPSelect.jsx
@@ -1,10 +1,10 @@
-import { Creatable } from "react-select";
 import { injectIntl, defineMessages } from "react-intl";
 import { useEffect, useState, useMemo } from "react";
 import { useVSPSelect } from "./hooks";
 import { FormattedMessage as T } from "react-intl";
 import { Tooltip } from "pi-ui";
 import styles from "./VSPSelect.modules.css";
+import { Select } from "inputs";
 
 const messages = defineMessages({
   placeholder: {
@@ -30,7 +30,15 @@ const getError = (error) => {
   return String(error);
 };
 
-function VSPSelect({ onChange, options, intl, value, isDisabled, setVspFee }) {
+function VSPSelect({
+  onChange,
+  options,
+  intl,
+  value,
+  isDisabled,
+  setVspFee,
+  selectWithBigFont
+}) {
   const { send, state, selectedOption, vspInfo, availableVSPs } = useVSPSelect(
     options,
     value,
@@ -93,13 +101,17 @@ function VSPSelect({ onChange, options, intl, value, isDisabled, setVspFee }) {
     // push new value if it is a new vsp option.
     if (value.newOption) {
       const host = value.host;
-      newOptions.push({
-        host,
-        label: host,
-        value: host
-      });
-
-      setNewOptions(newOptions);
+      setNewOptions((opts) => [
+        ...opts,
+        {
+          value: {
+            host,
+            label: host,
+            value: host
+          },
+          label: host
+        }
+      ]);
     }
     isRetry ? send({ type: "RETRY", value }) : send({ type: "FETCH", value });
   };
@@ -114,21 +126,24 @@ function VSPSelect({ onChange, options, intl, value, isDisabled, setVspFee }) {
 
   const getSelect = (isRetry) => {
     return (
-      <Creatable
+      <Select
+        isCreatable
+        isSearchable
+        selectWithBigFont={selectWithBigFont}
         options={vspList}
-        clearable={!!newOption}
+        isClearable={!!newOption}
         placeholder={intl.formatMessage(messages.placeholder)}
         onChange={(option) => handleOnChange(option, isRetry)}
         value={selectedOption}
-        newOptionCreator={() => {
-          return {
-            value: { host: newOption, label: newOption },
-            label: newOption,
-            host: newOption,
-            newOption: true
-          };
-        }}
-        disabled={isDisabled}
+        onCreateOption={(option) =>
+          handleOnChange(
+            {
+              value: { host: option, label: option, newOption: true }
+            },
+            isRetry
+          )
+        }
+        isDisabled={isDisabled}
         onInputChange={(input) => onSetNewOption(input)}
         isValidNewOption={() => !!newOption}
       />
diff --git a/app/components/inputs/index.js b/app/components/inputs/index.js
index c89537d391..7f95d9e0f5 100644
--- a/app/components/inputs/index.js
+++ b/app/components/inputs/index.js
@@ -24,3 +24,4 @@ export { default as InlineField } from "./InlineField";
 export { default as SettingsTextInput } from "./SettingsTextInput";
 export { default as VSPSelect } from "./VSPSelect";
 export { default as SeedHexEntry } from "./SeedHexEntry";
+export { default as Select } from "./Select";
diff --git a/app/components/layout/TabbedPage/TabbedPage.jsx b/app/components/layout/TabbedPage/TabbedPage.jsx
index e0ecb70f02..41fabb0bb1 100644
--- a/app/components/layout/TabbedPage/TabbedPage.jsx
+++ b/app/components/layout/TabbedPage/TabbedPage.jsx
@@ -26,7 +26,9 @@ const TabbedPage = ({
 
   const onSelectTab = (index) => {
     setActiveTabIndex(index);
-    history.push(tabs[index].path);
+    if (tabs[index].path) {
+      history.push(tabs[index].path);
+    }
   };
 
   useEffect(() => {
@@ -60,7 +62,7 @@ const TabbedPage = ({
             contentAnimation={uiAnimations ? "slide" : "none"}>
             {tabs
               .filter(({ disabled }) => !disabled)
-              .map(({ label, content, path, props }) => {
+              .map(({ label, content, path, props, key }) => {
                 const element = React.isValidElement(content)
                   ? k(content, {
                       ...props,
@@ -70,8 +72,8 @@ const TabbedPage = ({
                     // before send, otherwise they will be undfined.
                     h(content, { ...props }, null);
                 return (
-                  <Tab label={label} key={path}>
-                    <div key={`${path}-key`}>{element}</div>
+                  <Tab label={label} key={key ?? path}>
+                    <div key={`${key ?? path}-key`}>{element}</div>
                   </Tab>
                 );
               })}
diff --git a/app/components/layout/TitleHeader/TitleHeader.jsx b/app/components/layout/TitleHeader/TitleHeader.jsx
index d1d8375264..a1918dbba7 100644
--- a/app/components/layout/TitleHeader/TitleHeader.jsx
+++ b/app/components/layout/TitleHeader/TitleHeader.jsx
@@ -4,9 +4,11 @@ import styles from "./TitleHeader.module.css";
 const TitleHeader = ({ title, iconType, optionalButton }) => (
   <div className={classNames(styles.container, "flex-row")}>
     <div className="flex-row">
-      <div className={styles.icon}>
-        <div className={styles[iconType]} data-testid="title-header-icon" />
-      </div>
+      {iconType && (
+        <div className={styles.icon}>
+          <div className={styles[iconType]} data-testid="title-header-icon" />
+        </div>
+      )}
       <div className={styles.title} data-testid="title-header">
         {title}
       </div>
diff --git a/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.jsx b/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.jsx
index 02f39419ab..932c250080 100644
--- a/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.jsx
+++ b/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.jsx
@@ -59,15 +59,15 @@ const AutoBuyerSettingsModal = ({
         placeholder={intl.formatMessage(messages.balanceToMaintainPlaceholder)}
         label={intl.formatMessage(messages.balanceToMaintainLabel)}
       />
-      <label className={classNames(styles.label, "selectWithBigFont")}>
+      <label className={styles.label}>
         <T id="vsp.autobuyer.accountFrom" m="From" />
         <AccountsSelect
           {...{ account }}
+          selectWithBigFont
           onChange={setAccount}
           showAccountsButton={false}
           hideSpendable={true}
           filterAccounts={notMixedAccounts}
-          selectClassName={styles.accountSelectInput}
         />
       </label>
       {VSPSelectControl && (
diff --git a/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.module.css b/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.module.css
index 0f14993bb3..16e0ed0242 100644
--- a/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.module.css
+++ b/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.module.css
@@ -41,9 +41,6 @@
   line-height: 16px;
   color: var(--stroke-color-hovered);
 }
-.accountSelectInput {
-  width: 100%;
-}
 .balanceToMaintainInput input {
   font-size: 16px;
 }
diff --git a/app/components/modals/ListUTXOsModal/ListUTXOsModal.module.css b/app/components/modals/ListUTXOsModal/ListUTXOsModal.module.css
index 81d8ec36c5..2cb42f5287 100644
--- a/app/components/modals/ListUTXOsModal/ListUTXOsModal.module.css
+++ b/app/components/modals/ListUTXOsModal/ListUTXOsModal.module.css
@@ -55,7 +55,6 @@
   font-weight: 400;
 }
 .accountSelect {
-  font-size: 16px;
   width: 250px;
 }
 .tableHeader tr th:first-child,
diff --git a/app/components/modals/SyncVSPFailedTickets/SyncVSPFailedTickets.jsx b/app/components/modals/SyncVSPFailedTickets/SyncVSPFailedTickets.jsx
index 56689a54a6..5090310952 100644
--- a/app/components/modals/SyncVSPFailedTickets/SyncVSPFailedTickets.jsx
+++ b/app/components/modals/SyncVSPFailedTickets/SyncVSPFailedTickets.jsx
@@ -16,17 +16,19 @@ const SyncVSPFailedTickets = ({
   options
 }) => (
   <PassphraseModal {...{ show, onSubmit, onCancelModal, ...props }}>
-    <label className={classNames(styles.label, "selectWithBigFont")}>
+    <label className={styles.label}>
       <T id="syncVsp.vsp" m="VSP Select" />
       <VSPSelect
+        selectWithBigFont
         className="stakepool-purchase-ticket-input-select"
         {...{ account, onChange: setVSP, value, options }}
       />
     </label>
     <div className={classNames("margin-top-m", "margin-bottom-s")}>
-      <label className={classNames(styles.label, "selectWithBigFont")}>
+      <label className={styles.label}>
         <T id="syncVsp.account" m="Account" />
         <AccountsSelect
+          selectWithBigFont
           selectClassName={styles.accountSelectInput}
           {...{ account, onChange: setAccount }}
         />
diff --git a/app/components/modals/TrezorModals/TrezorWordModal.jsx b/app/components/modals/TrezorModals/TrezorWordModal.jsx
index 3bb3529bf8..bf39ae7bef 100644
--- a/app/components/modals/TrezorModals/TrezorWordModal.jsx
+++ b/app/components/modals/TrezorModals/TrezorWordModal.jsx
@@ -1,22 +1,20 @@
 import { useState, useCallback } from "react";
 import { FormattedMessage as T } from "react-intl";
-import Select from "react-select";
+import { Select } from "inputs";
 import Modal from "../Modal";
 import { ButtonsToolbar } from "shared";
 import { WORD_LIST } from "constants/trezor";
 import { classNames } from "pi-ui";
 import styles from "./TrezorModals.module.css";
 
-const inputOptions = WORD_LIST.map((w) => ({ word: w }));
+const inputOptions = WORD_LIST.map((w) => ({ value: w, label: w }));
 
 const getSeedWords = (input, callback) => {
-  input = input.toLowerCase();
+  const inputValue = input.toLowerCase();
   const options = inputOptions.filter(
-    (w) => w.word.toLowerCase().substr(0, input.length) === input
+    (w) => w.value.toLowerCase().substr(0, inputValue.length) === inputValue
   );
-  callback(null, {
-    options: options.slice(0, 5)
-  });
+  callback(options.slice(0, 5));
 };
 
 const TrezorWordModal = ({
@@ -41,10 +39,10 @@ const TrezorWordModal = ({
     setValue(null);
   }, [word, onSubmitWord]);
 
-  const onWordChanged = useCallback((value) => {
-    setWord(value);
-    setValue({ word: value });
-  }, []);
+  const onWordChanged = (value) => {
+    setWord(value.value);
+    setValue(value);
+  };
 
   const onSelectKeyDown = useCallback(
     (e) => {
@@ -73,16 +71,11 @@ const TrezorWordModal = ({
       </p>
 
       <div className={styles.wordSelect}>
-        <Select.Async
-          ref={(n) => n && n.focus()}
+        <Select
+          isAsync
+          isSearchable
+          defaultOptions
           autoFocus
-          simpleValue
-          multi={false}
-          clearable={false}
-          multi={false}
-          filterOptions={false}
-          valueKey={"word"}
-          labelKey={"word"}
           loadOptions={getSeedWords}
           onChange={onWordChanged}
           value={value}
@@ -92,8 +85,8 @@ const TrezorWordModal = ({
               m="Start typing word..."
             />
           }
-          onInputKeyDown={onSelectKeyDown}
-          disabled={!waitingForWord}
+          onKeyDown={onSelectKeyDown}
+          isDisabled={!waitingForWord}
         />
       </div>
 
diff --git a/app/components/shared/PurchaseTicketsForm/PurchaseTicketsForm.jsx b/app/components/shared/PurchaseTicketsForm/PurchaseTicketsForm.jsx
index d667f8b93b..7c663003aa 100644
--- a/app/components/shared/PurchaseTicketsForm/PurchaseTicketsForm.jsx
+++ b/app/components/shared/PurchaseTicketsForm/PurchaseTicketsForm.jsx
@@ -71,12 +71,9 @@ const PurchaseTicketsForm = ({
         <div className={classNames(styles.isColumn, styles.inputAddress)}>
           <label className={styles.rowLabel}>
             <T id="purchaseTickets.accountFrom" m="Account" />
-            <div
-              className={classNames(
-                styles.inputSelectContainer,
-                "selectWithBigFont"
-              )}>
+            <div className={styles.inputSelectContainer}>
               <AccountsSelect
+                selectWithBigFont
                 filterAccounts={notMixedAccounts}
                 className={styles.inputSelect}
                 selectClassName={styles.accountSelectInput}
@@ -87,12 +84,9 @@ const PurchaseTicketsForm = ({
           {!isLegacy && (
             <label className={styles.rowLabel}>
               <T id="purchaseTickets.vspFrom" m="VSP" />
-              <div
-                className={classNames(
-                  styles.vspContainer,
-                  "selectWithBigFont"
-                )}>
+              <div className={styles.vspContainer}>
                 <VSPSelect
+                  selectWithBigFont
                   className={styles.inputSelect}
                   style={{ width: "100%", marginRight: "10px" }}
                   {...{
diff --git a/app/components/shared/PurchaseTicketsForm/PurchaseTicketsForm.module.css b/app/components/shared/PurchaseTicketsForm/PurchaseTicketsForm.module.css
index 658c0df1a8..ab5aaef447 100644
--- a/app/components/shared/PurchaseTicketsForm/PurchaseTicketsForm.module.css
+++ b/app/components/shared/PurchaseTicketsForm/PurchaseTicketsForm.module.css
@@ -59,7 +59,6 @@
 
 .rowLabel {
   font-size: 13px;
-  line-height: 16px;
   color: var(--purchase-label);
   align-self: flex-end;
   width: 100%;
diff --git a/app/components/views/DexPage/CreateDexAcctPage/CreateDexAcctPage.jsx b/app/components/views/DexPage/CreateDexAcctPage/CreateDexAcctPage.jsx
index 654a8b63cc..671d445b6e 100644
--- a/app/components/views/DexPage/CreateDexAcctPage/CreateDexAcctPage.jsx
+++ b/app/components/views/DexPage/CreateDexAcctPage/CreateDexAcctPage.jsx
@@ -39,7 +39,7 @@ const CreateDexAcctPage = () => {
             <T id="dex.createDexAccount.or" m="or" />
           </label>
           <AccountsSelect
-            disabled={dexAccountAttempt || dexSelectAccountAttempt}
+            isDisabled={dexAccountAttempt || dexSelectAccountAttempt}
             id="accountSelect"
             {...{ account, onChange: setAccount }}
             filterAccounts={[mixedAccount]}
diff --git a/app/components/views/DexPage/RegisterPage/SendOutputRow/SendOutputRow.jsx b/app/components/views/DexPage/RegisterPage/SendOutputRow/SendOutputRow.jsx
index 2534e79661..ef36d825ca 100644
--- a/app/components/views/DexPage/RegisterPage/SendOutputRow/SendOutputRow.jsx
+++ b/app/components/views/DexPage/RegisterPage/SendOutputRow/SendOutputRow.jsx
@@ -68,8 +68,7 @@ const SendOutputRow = ({
     <div className={styles.sendInputWrapper}>
       {isSendSelf ? (
         <ReceiveAccountsSelect
-          disabled={receiveAccountsSelectDisabled}
-          getAddressForSelected={true}
+          isDisabled={receiveAccountsSelectDisabled}
           showAccountsButton={false}
           onKeyDown={onKeyDown}
           account={receiveAccount}
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/ExistingSeed/Form/Form.jsx b/app/components/views/GetStartedPage/CreateWalletPage/ExistingSeed/Form/Form.jsx
index 9981399b30..2368fb3f38 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/ExistingSeed/Form/Form.jsx
+++ b/app/components/views/GetStartedPage/CreateWalletPage/ExistingSeed/Form/Form.jsx
@@ -67,6 +67,7 @@ const ExistingSeedForm = ({
               onPaste={handleOnPaste}
               onChangeSeedWord={onChangeSeedWord}
               onPasteFromClipboard={pasteFromClipboard}
+              autoFocus={index === 0}
             />
           ))}
         </SeedArea>
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWord/SeedWord.jsx b/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWord/SeedWord.jsx
index 036386bfc8..e7f9fce176 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWord/SeedWord.jsx
+++ b/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWord/SeedWord.jsx
@@ -7,7 +7,8 @@ const SeedWord = ({
   onChangeSeedWord,
   onPasteFromClipboard,
   onPaste,
-  isConfirm
+  isConfirm,
+  autoFocus
 }) => {
   const { index, show, match, word, error } = seedWord;
   return (
@@ -36,6 +37,7 @@ const SeedWord = ({
             value={{ name: word }}
             onPasteFromClipboard={onPasteFromClipboard}
             onPaste={onPaste}
+            autoFocus={autoFocus}
           />
         )}
       </span>
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWord/SeedWord.module.css b/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWord/SeedWord.module.css
index dc2ca30353..c74068f1b8 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWord/SeedWord.module.css
+++ b/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWord/SeedWord.module.css
@@ -69,7 +69,6 @@
 
 .word {
   text-align: center;
-  padding-left: 5px;
   width: 85px;
   font-size: 13px;
   line-height: 23px;
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWordEntry/SeedWordEntry.jsx b/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWordEntry/SeedWordEntry.jsx
index ba4cbd839b..737c5e5703 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWordEntry/SeedWordEntry.jsx
+++ b/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWordEntry/SeedWordEntry.jsx
@@ -1,11 +1,7 @@
-import Select from "react-select";
+import { Select } from "inputs";
 import { SEED_WORDS } from "constants/seed";
 import { wallet } from "wallet-preload-shim";
 import { useLayoutEffect } from "react";
-// SeedWordSelect.css includes custom styling for seed word select which need
-// to be loaded *after* ReactSelectGlobal.less, both imports should be deleted
-// when migrating to pi-ui's Select componentt!
-import "./SeedWordSelect.css";
 
 const SEED_WORD_OPTIONS = SEED_WORDS.map((name) => ({ name }));
 
@@ -16,7 +12,8 @@ const SeedWordEntry = ({
   seedWord,
   onPaste,
   value: { name },
-  disabled
+  disabled,
+  autoFocus
 }) => {
   useLayoutEffect(() => {
     document.onmousedown = (e) => {
@@ -27,7 +24,7 @@ const SeedWordEntry = ({
 
         // missing with the select options from react-select
         if (isPasted) {
-          const select = document.querySelector(".Select-menu-outer");
+          const select = document.querySelector("[id$='listbox']");
           if (select) {
             select.style.display = "none";
           }
@@ -37,39 +34,60 @@ const SeedWordEntry = ({
   });
 
   const getSeedWords = (input, callback) => {
-    input = input.toLowerCase();
+    const inputValue = input.toLowerCase();
     const options = SEED_WORD_OPTIONS.filter(
-      (i) => i.name.toLowerCase().substr(0, input.length) === input
-    );
-    callback(null, {
-      options: options.slice(0, 5)
+      (i) => i.name.toLowerCase().substr(0, inputValue.length) === inputValue
+    ).map((option) => {
+      return { value: option.name, label: option.name };
     });
+
+    callback(options.slice(0, 5));
   };
 
   const selectKeyDown = (e) => {
+    // prevent space key
     switch (e.keyCode) {
       case 32:
-        e.keyCode = 9;
+        e.preventDefault();
         break;
     }
   };
 
-  const value = { name };
+  const customStyles = {
+    indicatorsContainer: () => ({
+      display: "none"
+    }),
+    control: () => ({
+      border: "none",
+      background: "transparent"
+    }),
+    input: () => ({
+      textAlign: "center",
+      padding: "0"
+    }),
+    valueContainer: () => ({
+      textAlign: "center",
+      padding: "0 0.1em"
+    })
+  };
+
+  const value = { value: name, label: name };
   return (
     <div className={className} onPaste={onPaste}>
-      <Select.Async // use pi-ui's select here
-        autoFocus
-        simpleValue
+      <Select
+        isAsync
+        isSearchable
+        defaultOptions
+        autoFocus={autoFocus}
         disabled={disabled}
-        clearable={false}
-        multi={false}
-        filterOptions={false}
         value={value}
-        onChange={(value) => onChange(seedWord, value)}
-        valueKey="name"
-        labelKey="name"
+        onChange={({ value }) => onChange(seedWord, value)}
+        valueKey="value"
+        labelKey="label"
         loadOptions={getSeedWords}
-        onInputKeyDown={selectKeyDown}
+        placeholder=""
+        styles={customStyles}
+        onKeyDown={selectKeyDown}
       />
     </div>
   );
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWordEntry/SeedWordSelect.css b/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWordEntry/SeedWordSelect.css
deleted file mode 100644
index 23832a9f5a..0000000000
--- a/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedWordEntry/SeedWordSelect.css
+++ /dev/null
@@ -1,58 +0,0 @@
-/* this includes custom styling for select used in SingleSeedWordEntry
-and ideally should be deleting when we migrate to use pi-ui's Select component
-please note that this isn't a module as we target react-select classes directly here
-and using a css module would hash the classes hence won't work !!
-*/
-
-.Select-menu-with-arrow .Select-value {
-  padding-left: 0;
-}
-
-.Select-menu-with-arrow .Select-input {
-  height: 23px;
-  line-height: 23px;
-  vertical-align: initial;
-}
-
-.Select-menu-with-arrow .Select-menu-outer {
-  left: -27px;
-  width: calc(100% + 28px);
-}
-
-.Select-menu-with-arrow .Select-arrow {
-  border: none;
-  display: inherit;
-  height: 0;
-  width: 0;
-  position: relative;
-  transition: inherit;
-}
-
-.Select-menu-with-arrow .Select-control:hover:not(:disabled) {
-  border: inherit;
-}
-
-.Select-menu-with-arrow .Select-control:hover:not(:disabled) .Select-arrow {
-  border-top-color: inherit;
-}
-
-.is-open .Select-menu-with-arrow .Select-arrow,
-.is-open
-  .Select-menu-with-arrow
-  .Select-control:hover:not(:disabled)
-  .Select-arrow,
-.Select-menu-with-arrow .Select-arrow-zone:hover > .Select-arrow {
-  border-top-color: inherit;
-}
-
-.Select-menu-with-arrow .Select-control {
-  padding-left: 0;
-  border-radius: 3px;
-  color: var(--modal-bottom);
-  border-bottom: none;
-}
-
-.Select-menu-with-arrow .Select-control:hover,
-.Select-menu-with-arrow .Select-control:focus {
-  border: 1px solid var(--disabled-color);
-}
diff --git a/app/components/views/GetStartedPage/LanguageSelectPage/Page/Page.jsx b/app/components/views/GetStartedPage/LanguageSelectPage/Page/Page.jsx
index ad706bb190..d6738bc6d0 100644
--- a/app/components/views/GetStartedPage/LanguageSelectPage/Page/Page.jsx
+++ b/app/components/views/GetStartedPage/LanguageSelectPage/Page/Page.jsx
@@ -22,11 +22,12 @@ const LanguageSelectPage = ({
       </SubTitle>
       <div className={styles.toolbar}>
         <LanguageSelectInput
-          value={selectedLang}
+          value={selectedLang.key}
           onChange={onChangeSelectedLang}
           valueKey="key"
           labelKey="description"
           options={availableLanguages}
+          className={styles.input}
         />
         <KeyBlueButton className={styles.button} onClick={onSelectLang}>
           <T id="selectLang.continueBtn" m="Continue" />
diff --git a/app/components/views/GetStartedPage/LanguageSelectPage/Page/Page.module.css b/app/components/views/GetStartedPage/LanguageSelectPage/Page/Page.module.css
index 87d4d0e1e5..9ae995d57a 100644
--- a/app/components/views/GetStartedPage/LanguageSelectPage/Page/Page.module.css
+++ b/app/components/views/GetStartedPage/LanguageSelectPage/Page/Page.module.css
@@ -7,6 +7,11 @@
   padding: 5px 16px 10px 16px;
 }
 
+.input {
+  width: 20rem;
+  margin-right: 0.5em;
+}
+
 @media screen and (max-width: 768px) {
   .button {
     padding: 6px 20px;
diff --git a/app/components/views/GetStartedPage/PrivacyPage/CustomPrivacyOptions/CustomPrivacyOptions.jsx b/app/components/views/GetStartedPage/PrivacyPage/CustomPrivacyOptions/CustomPrivacyOptions.jsx
index 8b6a46bb92..165572a99c 100644
--- a/app/components/views/GetStartedPage/PrivacyPage/CustomPrivacyOptions/CustomPrivacyOptions.jsx
+++ b/app/components/views/GetStartedPage/PrivacyPage/CustomPrivacyOptions/CustomPrivacyOptions.jsx
@@ -1,5 +1,5 @@
 import { FormattedMessage as T } from "react-intl";
-import { PrivacySettings } from "views/SettingsPage/SettingsTab/groups";
+import PrivacySettings from "views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings";
 import { InvisibleButton, KeyBlueButton } from "buttons";
 import { Title, SubTitle } from "../../helpers";
 import styles from "./CustomPrivacyOptions.module.css";
diff --git a/app/components/views/GetStartedPage/PrivacyPage/CustomPrivacyOptions/CustomPrivacyOptions.module.css b/app/components/views/GetStartedPage/PrivacyPage/CustomPrivacyOptions/CustomPrivacyOptions.module.css
index 1e24a11bac..c3b2e63acc 100644
--- a/app/components/views/GetStartedPage/PrivacyPage/CustomPrivacyOptions/CustomPrivacyOptions.module.css
+++ b/app/components/views/GetStartedPage/PrivacyPage/CustomPrivacyOptions/CustomPrivacyOptions.module.css
@@ -1,7 +1,8 @@
 .customPrivacySettings {
-  width: 300px;
+  width: 60rem;
 }
 
 .privacyButtons {
+  margin-top: 1rem;
   text-align: right;
 }
diff --git a/app/components/views/GetStartedPage/Settings/Settings.jsx b/app/components/views/GetStartedPage/Settings/Settings.jsx
index 2afaceb537..c2c2a36960 100644
--- a/app/components/views/GetStartedPage/Settings/Settings.jsx
+++ b/app/components/views/GetStartedPage/Settings/Settings.jsx
@@ -1,143 +1,82 @@
-import { useCallback } from "react";
 import { FormattedMessage as T } from "react-intl";
-import { Tooltip } from "pi-ui";
-import {
-  NetworkSettings,
-  ProxySettings,
-  PrivacySettings,
-  UISettings,
-  TimezoneSettings
-} from "views/SettingsPage/SettingsTab/groups";
-import { Subtitle } from "shared";
-import { KeyBlueButton } from "buttons";
+import ConnectivitySettingsTab from "views/SettingsPage/ConnectivitySettingsTab";
+import GeneralSettingsTab from "views/SettingsPage/GeneralSettingsTab";
+import PrivacyandSecuritySettingsTab from "views/SettingsPage/PrivacyandSecuritySettingsTab";
+import { InvisibleButton } from "buttons";
 import { GoBackMsg } from "../messages";
-import * as configConstants from "constants/config";
-import {
-  useTheme,
-  DEFAULT_LIGHT_THEME_NAME,
-  DEFAULT_DARK_THEME_NAME
-} from "pi-ui";
-import {
-  Wrapper,
-  Group,
-  ColumnWrapper,
-  Column
-} from "views/SettingsPage/SettingsTab//helpers";
-import { useSettings } from "hooks";
-import { BackButton, BackButtonArea } from "../helpers";
 import styles from "./Settings.module.css";
-import { wallet } from "wallet-preload-shim";
+import { TabbedPage, TitleHeader } from "layout";
+import { useTheme } from "pi-ui";
 
-const SetttingsForm = ({ onSendBack }) => {
-  const { setThemeName } = useTheme();
-  const {
-    areSettingsDirty,
-    tempSettings,
-    locales,
-    onChangeTempSettings,
-    onSaveSettings,
-    onAttemptChangePassphrase,
-    isChangePassPhraseDisabled,
-    changePassphraseRequestAttempt,
-    walletReady
-  } = useSettings();
+const ContentWithGoBackButton = ({ onSendBack, children }) => (
+  <>
+    <InvisibleButton className={styles.goBack} onClick={onSendBack}>
+      <GoBackMsg />
+    </InvisibleButton>
+    {children}
+  </>
+);
 
-  const saveSettingsHandler = useCallback(() => {
-    const config = wallet.getGlobalCfg();
-    const oldTheme = config.get(configConstants.THEME);
-    if (oldTheme != tempSettings.theme) {
-      setThemeName(
-        tempSettings.theme.includes("dark")
-          ? DEFAULT_DARK_THEME_NAME
-          : DEFAULT_LIGHT_THEME_NAME
-      );
+const Setttings = ({ onSendBack }) => {
+  const { setThemeName } = useTheme();
+  const tabs = [
+    {
+      key: "connectivity",
+      content: (
+        <ContentWithGoBackButton onSendBack={onSendBack}>
+          <ConnectivitySettingsTab
+            wrapperClassName={styles.connectionWrapper}
+          />
+        </ContentWithGoBackButton>
+      ),
+      label: <T id="getstarted.settings.tab.connectivity" m="Connectivity" />
+    },
+    {
+      key: "general",
+      content: (
+        <ContentWithGoBackButton onSendBack={onSendBack}>
+          <GeneralSettingsTab
+            wrapperClassName={styles.generalWrapper}
+            uiBoxClassName={styles.uiBox}
+            uiGroupClassName={styles.uiGroup}
+            timezoneBoxClassName={styles.timezoneBox}
+            setThemeName={setThemeName}
+          />
+        </ContentWithGoBackButton>
+      ),
+      label: <T id="getstarted.settings.tab.general" m="General" />
+    },
+    {
+      key: "privacyandsecurity",
+      content: (
+        <ContentWithGoBackButton onSendBack={onSendBack}>
+          <PrivacyandSecuritySettingsTab
+            wrapperClassName={styles.privacyAndSecurityWrapper}
+            boxClassName={styles.privacyAndSecurityBox}
+          />
+        </ContentWithGoBackButton>
+      ),
+      label: (
+        <T
+          id="getstarted.settings.tab.privacyandsecurity"
+          m="Privacy and Security"
+        />
+      )
     }
-    onSaveSettings(tempSettings);
-    onSendBack();
-  }, [onSaveSettings, onSendBack, tempSettings, setThemeName]);
-
+  ];
   return (
-    <>
-      <div>
-        <BackButtonArea className={styles.backButtonArea}>
-          <Tooltip content={<GoBackMsg />}>
-            <BackButton onClick={onSendBack} />
-          </Tooltip>
-        </BackButtonArea>
-        <Subtitle title={<T id="settings.subtitle" m="Settings" />} />
-        <Wrapper>
-          <Group>
-            <Subtitle
-              title={
-                <T id="settings.group-title.connectivity" m="Connectivity" />
-              }
-            />
-            <ColumnWrapper>
-              <Column>
-                <NetworkSettings
-                  {...{
-                    tempSettings,
-                    onChangeTempSettings
-                  }}
-                />
-              </Column>
-              <Column>
-                <ProxySettings {...{ tempSettings, onChangeTempSettings }} />
-              </Column>
-            </ColumnWrapper>
-          </Group>
-
-          <Group className={styles.general}>
-            <Subtitle
-              title={<T id="settings.group-title.general" m="General" />}
-            />
-            <ColumnWrapper>
-              <Column>
-                <UISettings
-                  {...{ tempSettings, locales, onChangeTempSettings }}
-                />
-              </Column>
-              <Column className={styles.timezone}>
-                <TimezoneSettings {...{ tempSettings, onChangeTempSettings }} />
-              </Column>
-            </ColumnWrapper>
-          </Group>
-
-          <Group className={styles.privacy}>
-            <Subtitle
-              title={
-                <T
-                  id="settings.group-title.privacy-and-security"
-                  m="Privacy and Security"
-                />
-              }
-            />
-            <ColumnWrapper>
-              <PrivacySettings
-                {...{
-                  tempSettings,
-                  onAttemptChangePassphrase,
-                  isChangePassPhraseDisabled,
-                  onChangeTempSettings,
-                  walletReady,
-                  changePassphraseRequestAttempt
-                }}
-              />
-            </ColumnWrapper>
-          </Group>
-        </Wrapper>
-      </div>
-      <div className={styles.saveButtonWrapper}>
-        <KeyBlueButton
-          disabled={!areSettingsDirty}
-          size="large"
-          block={false}
-          onClick={saveSettingsHandler}>
-          <T id="getStarted.settings.save" m="Save" />
-        </KeyBlueButton>
-      </div>
-    </>
+    <div className={styles.tabsContainer}>
+      <TabbedPage
+        header={
+          <TitleHeader title={<T id="settings.subtitle" m="Settings" />} />
+        }
+        tabs={tabs}
+        tabsClassName={styles.tabs}
+        tabContentClassName={styles.tabsContent}
+        headerClassName={styles.tabHeader}
+      />
+    </div>
   );
 };
 
-export default SetttingsForm;
+export default Setttings;
diff --git a/app/components/views/GetStartedPage/Settings/Settings.module.css b/app/components/views/GetStartedPage/Settings/Settings.module.css
index 1823b0cd19..e9d81908a0 100644
--- a/app/components/views/GetStartedPage/Settings/Settings.module.css
+++ b/app/components/views/GetStartedPage/Settings/Settings.module.css
@@ -1,105 +1,109 @@
-.backButtonArea {
-  position: absolute;
-  left: 1467px;
-  top: 66px;
-  right: initial;
+.tabsContainer {
+  height: calc(100vh - 17rem);
+  margin: -2rem -4rem 0 -4rem;
 }
 
-.privacy,
-.security,
-.timezone {
-  float: left;
+.tabs {
+  padding-left: 6rem !important;
 }
 
-.general {
-  order: 3;
+.tabsContent {
+  padding-top: 1rem;
+  padding-left: 6rem;
 }
 
-.saveButtonWrapper {
-  width: 1481px;
-  text-align: right;
+.tabHeader {
+  padding-left: 6rem !important;
 }
 
-.saveButton {
-  display: inline-block;
-  margin-right: 0;
+.uiGroup {
+  grid-column: initial;
 }
 
-@media screen and (max-width: 1920px) {
-  .backButtonArea {
-    left: 1230px;
-  }
+.goBack {
+  background-image: var(--menu-arrow);
+  background-position: 0 center;
+  background-size: 10px;
+  background-repeat: no-repeat;
+  padding: 2rem;
+  font-size: 1.6rem;
+  line-height: 2rem;
+  font-weight: 400;
+  margin-bottom: 0.5rem;
 }
 
-@media screen and (max-width: 1680px) {
-  .backButtonArea {
-    left: 988px;
-  }
+.privacyAndSecurityWrapper {
+  grid-template-columns: repeat(1, 105.8rem) !important;
 }
 
-@media screen and (min-width: 1680px) and (max-width: 1920px) {
-  .saveButtonWrapper {
-    width: 1240px;
-  }
+.generalWrapper {
+  grid-template-columns: repeat(2, 51.5rem);
 }
 
-@media screen and (min-width: 1400px) and (max-width: 1680px) {
-  .privacy {
-    order: 3;
-  }
+.privacyAndSecurityBox {
+  grid-template-columns: repeat(3, 1fr) !important;
+}
 
-  .general {
-    order: 2;
-  }
+.uiBox {
+  grid-template-columns: repeat(2, 1fr) !important;
+}
 
-  .saveButtonWrapper {
-    width: 1000px;
+@media screen and (max-width: 1920px) {
+  .connectionWrapper {
+    grid-template-columns: repeat(2, 51.5rem);
   }
+}
 
-  .timezone {
-    margin-left: 20px;
+@media screen and (max-width: 1080px) {
+  .privacyAndSecurityWrapper,
+  .generalWrapper,
+  .connectionWrapper {
+    grid-template-columns: repeat(1, 76.4rem) !important;
   }
-}
 
-@media screen and (max-width: 1400px) {
-  .backButtonArea {
-    left: 726px;
+  .privacyAndSecurityBox {
+    grid-template-columns: repeat(2, 1fr) !important;
   }
+}
 
-  .privacy {
-    order: 3;
+@media screen and (min-width: 768px) {
+  .timezoneBox ul li > div {
+    margin: 0 !important;
   }
 
-  .general {
-    order: 2;
+  .timezoneBox {
+    min-height: 10rem;
   }
 
-  .saveButtonWrapper {
-    width: 740px;
+  .timezoneBox ul {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 }
 
-@media screen and (max-width: 1180px) {
-  .saveButtonWrapper {
-    width: 649px;
+@media screen and (max-width: 768px) {
+  .tabsContainer {
+    margin: 0 -2rem;
   }
-  .backButtonArea {
-    left: 638px;
+
+  .tabsContent {
+    padding: 1rem 2rem 1rem 2rem;
   }
-}
 
-@media screen and (max-width: 768px) {
-  .backButtonArea {
-    top: 40px;
-    left: 342px;
+  .tabHeader,
+  .tabs {
+    padding-left: 2rem !important;
   }
 
-  .timezone {
-    order: 3;
+  .generalWrapper,
+  .privacyAndSecurityWrapper,
+  .connectionWrapper {
+    grid-template-columns: repeat(1, 35.5rem) !important;
   }
 
-  .saveButtonWrapper {
-    width: 355px;
-    text-align: center;
+  .privacyAndSecurityBox,
+  .uiBox {
+    grid-template-columns: 1fr !important;
   }
 }
diff --git a/app/components/views/LNPage/ConnectPage/CreateLNWallet/CreateLNWallet.jsx b/app/components/views/LNPage/ConnectPage/CreateLNWallet/CreateLNWallet.jsx
index 2307d83c81..614b5e5874 100644
--- a/app/components/views/LNPage/ConnectPage/CreateLNWallet/CreateLNWallet.jsx
+++ b/app/components/views/LNPage/ConnectPage/CreateLNWallet/CreateLNWallet.jsx
@@ -70,17 +70,9 @@ const CreateLNWallet = ({
       <AnimatedContainer show={accountOption !== NEW_ACCOUNT}>
         <div className={styles.connectOptWrapper}>
           <div className={styles.connectOpt}>
-            {
-              // `selectWithBigFont` className is
-              // temp solution to skinning from ReactSelectGlobal.css.
-              // When react-select will be replaced by the `pi-ui` component,
-              // this className can be deleted.
-            }
             <ReceiveAccountsSelect
-              className={classNames(
-                styles.receiveSelectAccountSelect,
-                "selectWithBigFont"
-              )}
+              selectWithBigFont
+              className={styles.receiveSelectAccountSelect}
               selectClassName={styles.receiveSelectAccountSelectInput}
               account={account.value}
               onChange={onChangeAccount}
diff --git a/app/components/views/PrivacyPage/PrivacyTab/SendOutputRow/SendOutputRow.jsx b/app/components/views/PrivacyPage/PrivacyTab/SendOutputRow/SendOutputRow.jsx
index 7c4f5d2487..71216ad82a 100644
--- a/app/components/views/PrivacyPage/PrivacyTab/SendOutputRow/SendOutputRow.jsx
+++ b/app/components/views/PrivacyPage/PrivacyTab/SendOutputRow/SendOutputRow.jsx
@@ -108,8 +108,7 @@ const SendOutputRow = ({
     </label>
     <div className={styles.sendInputWrapper}>
       <ReceiveAccountsSelect
-        disabled={receiveAccountsSelectDisabled}
-        getAddressForSelected={true}
+        isDisabled={receiveAccountsSelectDisabled}
         showAccountsButton={false}
         onKeyDown={onKeyDown}
         account={receiveAccount}
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/ConnectivitySettings.jsx b/app/components/views/SettingsPage/ConnectivitySettingsTab/ConnectivitySettings.jsx
new file mode 100644
index 0000000000..c5add67c5d
--- /dev/null
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/ConnectivitySettings.jsx
@@ -0,0 +1,55 @@
+import { FormattedMessage as T } from "react-intl";
+import NetworkSettings from "./NetworkSettings";
+import ProxySettings from "./ProxySettings";
+import { Subtitle } from "shared";
+import styles from "./ConnectivitySettings.module.css";
+import { Wrapper, Group, ConfirmRestartModal } from "../helpers";
+
+const ConnectivitySettings = ({
+  tempSettings,
+  onChangeTempSettings,
+  onSaveSettings,
+  showConfirmModal,
+  onCancelConfirmModal,
+  wrapperClassName
+}) => (
+  <Wrapper className={wrapperClassName}>
+    <Group>
+      <Subtitle
+        className={styles.subtitle}
+        title={<T id="settings.getstartpage.group-title.network" m="Network" />}
+      />
+      <NetworkSettings
+        {...{
+          tempSettings,
+          onChangeTempSettings
+        }}
+      />
+    </Group>
+
+    <Group>
+      <Subtitle
+        className={styles.subtitle}
+        title={<T id="settings.getstartpage.group-title.proxy" m="Proxy" />}
+      />
+      <ProxySettings {...{ tempSettings, onChangeTempSettings }} />
+    </Group>
+
+    <ConfirmRestartModal
+      show={showConfirmModal}
+      onSubmit={onSaveSettings}
+      onCancelModal={onCancelConfirmModal}
+    />
+  </Wrapper>
+);
+
+ConnectivitySettings.propTypes = {
+  tempSettings: PropTypes.object.isRequired,
+  onChangeTempSettings: PropTypes.func.isRequired,
+  onSaveSettings: PropTypes.func.isRequired,
+  showConfirmModal: PropTypes.bool.isRequired,
+  onCancelConfirmModal: PropTypes.func.isRequired,
+  wrapperClassName: PropTypes.string
+};
+
+export default ConnectivitySettings;
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/ConnectivitySettings.module.css b/app/components/views/SettingsPage/ConnectivitySettingsTab/ConnectivitySettings.module.css
new file mode 100644
index 0000000000..c54a9f0fb1
--- /dev/null
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/ConnectivitySettings.module.css
@@ -0,0 +1,3 @@
+.subtitle {
+  width: initial;
+}
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/ConnectivitySettingsTab.jsx b/app/components/views/SettingsPage/ConnectivitySettingsTab/ConnectivitySettingsTab.jsx
new file mode 100644
index 0000000000..cb0005eaf8
--- /dev/null
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/ConnectivitySettingsTab.jsx
@@ -0,0 +1,55 @@
+import { useState, useEffect, useCallback } from "react";
+import ConnectivitySettings from "./ConnectivitySettings";
+import { useSettings } from "hooks";
+
+const ConnectivitySettingsTab = ({
+  wrapperClassName,
+  groupWrapperClassName
+}) => {
+  const {
+    tempSettings,
+    onSaveSettings,
+    onChangeTempSettings,
+    areSettingsDirty,
+    needNetworkReset,
+    resetSettingsState
+  } = useSettings();
+
+  const onSaveSettingsHandler = useCallback(() => {
+    setShowConfirmModal(false);
+    onSaveSettings && onSaveSettings(tempSettings);
+  }, [tempSettings, onSaveSettings]);
+
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  useEffect(() => {
+    if (areSettingsDirty) {
+      if (needNetworkReset) {
+        setShowConfirmModal(true);
+      } else {
+        onSaveSettingsHandler();
+      }
+    }
+  }, [areSettingsDirty, needNetworkReset, onSaveSettingsHandler]);
+
+  const onCancelConfirmModal = () => {
+    setShowConfirmModal(false);
+    resetSettingsState();
+  };
+
+  return (
+    <ConnectivitySettings
+      {...{
+        onSaveSettings: onSaveSettingsHandler,
+        tempSettings,
+        onChangeTempSettings,
+        showConfirmModal,
+        onCancelConfirmModal,
+        wrapperClassName,
+        groupWrapperClassName
+      }}
+    />
+  );
+  // );
+};
+
+export default ConnectivitySettingsTab;
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.jsx b/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.jsx
new file mode 100644
index 0000000000..fe8e6bcfde
--- /dev/null
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.jsx
@@ -0,0 +1,152 @@
+import { FormattedMessage as T } from "react-intl";
+import { Tooltip } from "pi-ui";
+import { SettingsInput, SettingsTextInput } from "inputs";
+import { TESTNET, MAINNET } from "constants";
+import styles from "./NetworkSettings.module.css";
+import { Box, Label } from "../../helpers";
+
+const SettingsInputWrapper = ({ isTooltipEnabled, children }) =>
+  isTooltipEnabled ? (
+    <Tooltip
+      content={
+        <T
+          id="settings.alreadySetFromCli"
+          m="This was set as a command-line option when launching decrediton"
+        />
+      }
+      className={styles.tooltip}>
+      {children}
+    </Tooltip>
+  ) : (
+    children
+  );
+
+SettingsInputWrapper.propTypes = {
+  isTooltipEnabled: PropTypes.bool,
+  children: PropTypes.object.isRequired
+};
+
+// Do **not** add stuff that depends on the wallet here, as this is also used
+// for startup config.
+const NetworkSettings = ({ tempSettings, onChangeTempSettings }) => (
+  <Box className={styles.box}>
+    <div>
+      <Label id="network-input">
+        <T id="settings.network" m="Network" />
+      </Label>
+      <SettingsInputWrapper isTooltipEnabled={tempSettings.networkFromCli}>
+        <SettingsInput
+          selectWithBigFont
+          className={styles.input}
+          value={tempSettings.network}
+          onChange={(opt) => onChangeTempSettings({ network: opt.value })}
+          valueKey="value"
+          labelKey="description"
+          disabled={tempSettings.networkFromCli}
+          ariaLabelledBy="network-input"
+          options={[
+            {
+              key: "true",
+              value: MAINNET,
+              description: <T id="settings.network.mainnet" m="Mainnet" />
+            },
+            {
+              key: "false",
+              value: TESTNET,
+              description: <T id="settings.network.testnet" m="Testnet" />
+            }
+          ]}
+        />
+      </SettingsInputWrapper>
+    </div>
+
+    <div>
+      <Label id="spv-input">
+        <T id="settings.SPV" m="SPV" />
+      </Label>
+      <SettingsInputWrapper isTooltipEnabled={tempSettings.spvModeFromCli}>
+        <SettingsInput
+          selectWithBigFont
+          className={styles.input}
+          value={tempSettings.spvMode ? "true" : "false"}
+          onChange={(opt) => onChangeTempSettings({ spvMode: opt.value })}
+          valueKey="value"
+          labelKey="description"
+          disabled={tempSettings.spvModeFromCli}
+          ariaLabelledBy="spv-input"
+          options={[
+            {
+              key: "true",
+              value: true,
+              description: <T id="settings.spv.true" m="Enabled" />
+            },
+            {
+              key: "false",
+              value: false,
+              description: <T id="settings.spv.false" m="Disabled" />
+            }
+          ]}
+        />
+      </SettingsInputWrapper>
+    </div>
+
+    <div>
+      <Label id="adv-damon-startup-input">
+        <T id="settings.advancedDaemon.label" m="Adv. Daemon Startup" />
+      </Label>
+      <SettingsInputWrapper
+        isTooltipEnabled={tempSettings.daemonStartAdvancedFromCli}>
+        <SettingsInput
+          selectWithBigFont
+          className={styles.input}
+          value={tempSettings.daemonStartAdvanced ? "true" : "false"}
+          onChange={(opt) =>
+            onChangeTempSettings({ daemonStartAdvanced: opt.value })
+          }
+          valueKey="value"
+          labelKey="description"
+          disabled={tempSettings.daemonStartAdvancedFromCli}
+          ariaLabelledBy="adv-damon-startup-input"
+          options={[
+            {
+              key: "true",
+              value: true,
+              description: <T id="settings.advancedDaemon.true" m="Enabled" />
+            },
+            {
+              key: "false",
+              value: false,
+              description: <T id="settings.advancedDaemon.false" m="Disabled" />
+            }
+          ]}
+        />
+      </SettingsInputWrapper>
+    </div>
+
+    <div>
+      <Label id="spv-connect-input">
+        <T id="settings.SPVConnect" m="SPV Connect" />
+      </Label>
+      <SettingsInputWrapper isTooltipEnabled={tempSettings.spvConnectFromCli}>
+        <SettingsTextInput
+          newBiggerFontStyle
+          inputClassNames={styles.settingsTextInput}
+          id="spvConnectInput"
+          value={tempSettings.spvConnect}
+          disabled={tempSettings.spvConnectFromCli}
+          ariaLabelledBy="spv-connect-input"
+          onChange={(value) =>
+            onChangeTempSettings({ spvConnect: value.split(",") })
+          }
+        />
+      </SettingsInputWrapper>
+    </div>
+  </Box>
+);
+
+NetworkSettings.propTypes = {
+  tempSettings: PropTypes.object.isRequired,
+  onChangeTempSettings: PropTypes.func.isRequired
+};
+
+export default NetworkSettings;
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.module.css b/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.module.css
new file mode 100644
index 0000000000..41e6aa8391
--- /dev/null
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.module.css
@@ -0,0 +1,19 @@
+.box {
+  display: grid;
+  grid-gap: 3rem;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.tooltip {
+  display: block !important;
+}
+
+.settingsTextInput {
+  color: var(--main-dark-blue) !important;
+}
+
+@media screen and (max-width: 768px) {
+  .box {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/index.js b/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/index.js
similarity index 100%
rename from app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/index.js
rename to app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/index.js
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.jsx b/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.jsx
new file mode 100644
index 0000000000..6662aa19a8
--- /dev/null
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.jsx
@@ -0,0 +1,61 @@
+import { SettingsInput, SettingsTextInput } from "inputs";
+import { FormattedMessage as T } from "react-intl";
+import {
+  PROXYTYPE_PAC,
+  PROXYTYPE_HTTP,
+  PROXYTYPE_SOCKS4,
+  PROXYTYPE_SOCKS5
+} from "constants";
+import styles from "./ProxySettings.module.css";
+import { Label, Box } from "../../helpers";
+
+const availableProxyTypes = [
+  { name: <T id="settings.proxy.type.none" m="No Proxy" />, value: null },
+  { name: "HTTP", value: PROXYTYPE_HTTP },
+  { name: "PAC", value: PROXYTYPE_PAC },
+  { name: "SOCKS4", value: PROXYTYPE_SOCKS4 },
+  { name: "SOCKS5", value: PROXYTYPE_SOCKS5 }
+];
+
+const ProxySettings = ({ tempSettings, onChangeTempSettings }) => (
+  <Box className={styles.box}>
+    <div>
+      <Label id="proxy-type-input">
+        <T id="settings.proxy.type" m="Proxy Type" />
+      </Label>
+      <SettingsInput
+        selectWithBigFont
+        className={styles.input}
+        value={tempSettings.proxyType}
+        onChange={(newProxyType) =>
+          onChangeTempSettings({ proxyType: newProxyType.value })
+        }
+        valueKey="value"
+        labelKey="name"
+        ariaLabelledBy="proxy-type-input"
+        options={availableProxyTypes}
+      />
+    </div>
+
+    <div>
+      <Label id="proxy-location">
+        <T id="settings.proxy.location" m="Proxy Location" />
+      </Label>
+      <SettingsTextInput
+        newBiggerFontStyle
+        inputClassNames={styles.settingsTextInput}
+        id="proxyLocationInput"
+        value={tempSettings.proxyLocation}
+        ariaLabelledBy="proxy-location"
+        onChange={(value) => onChangeTempSettings({ proxyLocation: value })}
+      />
+    </div>
+  </Box>
+);
+
+ProxySettings.propTypes = {
+  tempSettings: PropTypes.object.isRequired,
+  onChangeTempSettings: PropTypes.func.isRequired
+};
+
+export default ProxySettings;
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.module.css b/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.module.css
new file mode 100644
index 0000000000..47d4dd0e17
--- /dev/null
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.module.css
@@ -0,0 +1,15 @@
+.box {
+  display: grid;
+  grid-gap: 3rem;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.settingsTextInput {
+  color: var(--main-dark-blue) !important;
+}
+
+@media screen and (max-width: 768px) {
+  .box {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/index.js b/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/index.js
similarity index 100%
rename from app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/index.js
rename to app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/index.js
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/index.js b/app/components/views/SettingsPage/ConnectivitySettingsTab/index.js
new file mode 100644
index 0000000000..cf81a7df47
--- /dev/null
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/index.js
@@ -0,0 +1 @@
+export { default } from "./ConnectivitySettingsTab";
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.jsx b/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.jsx
new file mode 100644
index 0000000000..07b6292174
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.jsx
@@ -0,0 +1,72 @@
+import { FormattedMessage as T } from "react-intl";
+import UISettings from "./UISettings";
+import MiscSettings from "./MiscSettings";
+import TimezoneSettings from "./TimezoneSettings";
+import { Subtitle } from "shared";
+import styles from "./GeneralSettings.module.css";
+import { Wrapper, Group } from "../helpers";
+import { classNames } from "pi-ui";
+
+const GeneralSettings = ({
+  tempSettings,
+  currencies,
+  locales,
+  onChangeTempSettings,
+  walletReady,
+  wrapperClassName,
+  uiBoxClassName,
+  uiGroupClassName,
+  timezoneBoxClassName
+}) => (
+  <Wrapper className={classNames(styles.wrapper, wrapperClassName)}>
+    <Group>
+      <Subtitle
+        className={styles.subtitle}
+        title={
+          <T id="settings.getstartpage.group-title.timezone" m="Timezone" />
+        }
+      />
+      <TimezoneSettings
+        {...{ tempSettings, onChangeTempSettings, timezoneBoxClassName }}
+      />
+    </Group>
+
+    {walletReady && (
+      <Group>
+        <Subtitle
+          className={styles.subtitle}
+          title={<T id="settings.getstartpage.group-title.misc" m="Misc" />}
+        />
+        <MiscSettings
+          {...{
+            tempSettings,
+            currencies,
+            onChangeTempSettings
+          }}
+        />
+      </Group>
+    )}
+    <Group className={classNames(styles.uiGroup, uiGroupClassName)}>
+      <Subtitle
+        className={styles.subtitle}
+        title={<T id="settings.getstartpage.group-title.ui" m="UI" />}
+      />
+      <UISettings
+        {...{ tempSettings, locales, onChangeTempSettings, uiBoxClassName }}
+      />
+    </Group>
+  </Wrapper>
+);
+
+GeneralSettings.propTypes = {
+  tempSettings: PropTypes.object.isRequired,
+  currencies: PropTypes.array.isRequired,
+  locales: PropTypes.array,
+  onChangeTempSettings: PropTypes.func.isRequired,
+  wrapperClassName: PropTypes.string,
+  uiBoxClassName: PropTypes.string,
+  uiGroupClassName: PropTypes.string,
+  timezoneBoxClassName: PropTypes.string
+};
+
+export default GeneralSettings;
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.module.css b/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.module.css
new file mode 100644
index 0000000000..dd515e85df
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.module.css
@@ -0,0 +1,30 @@
+.subtitle {
+  width: initial;
+}
+
+.wrapper {
+  grid-template-columns: repeat(4, 36.7rem);
+}
+
+.uiGroup {
+  grid-column: 3/5;
+}
+
+@media screen and (max-width: 1920px) {
+  .wrapper {
+    grid-template-columns: repeat(2, 36.7rem);
+  }
+  .uiGroup {
+    grid-column: 1/3;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .wrapper {
+    grid-template-columns: repeat(1, 35.5rem);
+  }
+
+  .uiGroup {
+    grid-column: 1;
+  }
+}
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettingsTab.jsx b/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettingsTab.jsx
new file mode 100644
index 0000000000..511a5caca2
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettingsTab.jsx
@@ -0,0 +1,69 @@
+import { useCallback, useEffect } from "react";
+import { DEFAULT_DARK_THEME_NAME, DEFAULT_LIGHT_THEME_NAME } from "pi-ui";
+import GeneralSettings from "./GeneralSettings";
+import { useSettings } from "hooks";
+import * as configConstants from "constants/config";
+import { wallet } from "wallet-preload-shim";
+
+const GeneralSettingsTab = ({
+  wrapperClassName,
+  uiBoxClassName,
+  uiGroupClassName,
+  timezoneBoxClassName,
+  setThemeName
+}) => {
+  const {
+    tempSettings,
+    onSaveSettings,
+    onChangeTempSettings,
+    currencies,
+    locales,
+    areSettingsDirty,
+    walletReady
+  } = useSettings();
+
+  const onSaveSettingsHandler = useCallback(() => {
+    const config = wallet.getGlobalCfg();
+    const oldTheme = config.get(configConstants.THEME);
+    if (oldTheme != tempSettings.theme) {
+      setThemeName(
+        tempSettings.theme.includes("dark")
+          ? DEFAULT_DARK_THEME_NAME
+          : DEFAULT_LIGHT_THEME_NAME
+      );
+    }
+    onSaveSettings?.(tempSettings);
+  }, [onSaveSettings, setThemeName, tempSettings]);
+
+  useEffect(() => {
+    if (areSettingsDirty) {
+      onSaveSettingsHandler();
+    }
+  }, [areSettingsDirty, onSaveSettingsHandler]);
+
+  return (
+    <GeneralSettings
+      {...{
+        tempSettings,
+        currencies,
+        locales,
+        onChangeTempSettings,
+        walletReady,
+        wrapperClassName,
+        uiBoxClassName,
+        uiGroupClassName,
+        timezoneBoxClassName
+      }}
+    />
+  );
+};
+
+GeneralSettingsTab.propTypes = {
+  setThemeName: PropTypes.func,
+  wrapperClassName: PropTypes.string,
+  uiBoxClassName: PropTypes.string,
+  uiGroupClassName: PropTypes.string,
+  timezoneBoxClassName: PropTypes.string
+};
+
+export default GeneralSettingsTab;
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/MiscSettings.jsx b/app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/MiscSettings.jsx
new file mode 100644
index 0000000000..239bed513c
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/MiscSettings.jsx
@@ -0,0 +1,75 @@
+import { FormattedMessage as T } from "react-intl";
+import { SettingsInput } from "inputs";
+import styles from "./MiscSettings.module.css";
+import { DiscoverUsageModal } from "modals";
+import { KeyBlueButton } from "buttons";
+import { useSettings } from "hooks";
+import { Label, Box } from "../../helpers";
+
+const MiscSettings = ({ tempSettings, currencies, onChangeTempSettings }) => {
+  const {
+    onDiscoverUsage,
+    gapLimit,
+    setGapLimit,
+    isValid,
+    clicked,
+    isDiscoverModalVisible,
+    showDiscoverModal,
+    hideDiscoverModal,
+    discoverUsageAttempt,
+    rescanRunning
+  } = useSettings();
+
+  return (
+    <Box className={styles.box}>
+      <div>
+        <Label id="displayed-units-input">
+          <T id="settings.displayedUnits" m="Displayed Units" />
+        </Label>
+        <SettingsInput
+          selectWithBigFont
+          className={styles.input}
+          value={tempSettings.currencyDisplay}
+          onChange={(newCurrency) =>
+            onChangeTempSettings({ currencyDisplay: newCurrency.name })
+          }
+          ariaLabelledBy="displayed-units-input"
+          valueKey="name"
+          labelKey="name"
+          options={currencies}
+        />
+      </div>
+      <div>
+        <Label id="address-usage">
+          <T id="settings.addressUsage" m="Address Usage" />
+        </Label>
+        <KeyBlueButton
+          className={styles.discoverUsageButton}
+          onClick={showDiscoverModal}
+          loading={discoverUsageAttempt || rescanRunning}
+          disabled={discoverUsageAttempt || rescanRunning}>
+          <T id="settings.DiscoverAddressBtn" m="Discover Address Usage" />
+        </KeyBlueButton>
+        <DiscoverUsageModal
+          {...{
+            show: isDiscoverModalVisible,
+            onSubmit: onDiscoverUsage,
+            onCancelModal: hideDiscoverModal,
+            gapLimit,
+            setGapLimit,
+            isValid,
+            clicked
+          }}
+        />
+      </div>
+    </Box>
+  );
+};
+
+MiscSettings.propTypes = {
+  tempSettings: PropTypes.object.isRequired,
+  currencies: PropTypes.array.isRequired,
+  onChangeTempSettings: PropTypes.func.isRequired
+};
+
+export default MiscSettings;
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/MiscSettings.module.css b/app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/MiscSettings.module.css
new file mode 100644
index 0000000000..f32ea67ac8
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/MiscSettings.module.css
@@ -0,0 +1,12 @@
+.box {
+  min-height: 19rem;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 3rem;
+}
+
+.discoverUsageButton {
+  background-color: var(--grey-7);
+  padding: 0.6rem 1rem;
+  margin-top: 1rem;
+}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/index.js b/app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/index.js
similarity index 100%
rename from app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/index.js
rename to app/components/views/SettingsPage/GeneralSettingsTab/MiscSettings/index.js
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.jsx b/app/components/views/SettingsPage/GeneralSettingsTab/TimezoneSettings/TimezoneSettings.jsx
similarity index 67%
rename from app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.jsx
rename to app/components/views/SettingsPage/GeneralSettingsTab/TimezoneSettings/TimezoneSettings.jsx
index 3dd91839c8..37dd385403 100644
--- a/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.jsx
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/TimezoneSettings/TimezoneSettings.jsx
@@ -1,9 +1,13 @@
 import { FormattedMessage as T } from "react-intl";
-import { RadioButtonGroup } from "pi-ui";
+import { RadioButtonGroup, classNames } from "pi-ui";
 import styles from "./TimezoneSettings.module.css";
-import { ColumnTitle } from "../../helpers";
+import { Box } from "../../helpers";
 
-const TimezoneSettings = ({ tempSettings, onChangeTempSettings }) => {
+const TimezoneSettings = ({
+  tempSettings,
+  onChangeTempSettings,
+  timezoneBoxClassName
+}) => {
   const update = (value) => onChangeTempSettings({ timezone: value });
 
   const timezoneOptions = [
@@ -30,22 +34,21 @@ const TimezoneSettings = ({ tempSettings, onChangeTempSettings }) => {
   ];
 
   return (
-    <>
-      <ColumnTitle title={<T id="settings.timezone.title" m="Timezone" />} />
+    <Box className={classNames(styles.box, timezoneBoxClassName)}>
       <RadioButtonGroup
         options={timezoneOptions}
         onChange={(option) => update(option.value)}
         value={tempSettings.timezone}
         vertical
-        optionsClassName={styles.timezoneOption}
+        optionsClassName={[styles.timezoneOption1, styles.timezoneOption2]}
       />
-    </>
+    </Box>
   );
 };
 
 TimezoneSettings.propTypes = {
   tempSettings: PropTypes.object.isRequired,
-  onChangeTempSettings: PropTypes.func.isRequired
+  onChangeTempSettings: PropTypes.func.isRequired,
+  timezoneBoxClassName: PropTypes.string
 };
-
 export default TimezoneSettings;
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/TimezoneSettings/TimezoneSettings.module.css b/app/components/views/SettingsPage/GeneralSettingsTab/TimezoneSettings/TimezoneSettings.module.css
new file mode 100644
index 0000000000..cf1b7a7284
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/TimezoneSettings/TimezoneSettings.module.css
@@ -0,0 +1,27 @@
+.box {
+  min-height: 19rem;
+}
+
+.timezoneOption1 {
+  margin: 0 0 4rem 0 !important;
+  padding-left: 0 !important;
+}
+.timezoneOption2 {
+  margin: 0 !important;
+  padding-left: 0 !important;
+}
+
+.timezoneOption1 > div,
+.timezoneOption2 > div {
+  font-size: 1.3rem;
+  line-height: 1.6rem;
+  color: var(--grey-5);
+  font-style: normal;
+}
+
+.timezoneOption1 label,
+.timezoneOption2 label {
+  color: var(--main-dark-blue);
+  font-size: 1.6rem;
+  line-height: 2rem;
+}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/index.js b/app/components/views/SettingsPage/GeneralSettingsTab/TimezoneSettings/index.js
similarity index 100%
rename from app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/index.js
rename to app/components/views/SettingsPage/GeneralSettingsTab/TimezoneSettings/index.js
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/UISettings/UISettings.jsx b/app/components/views/SettingsPage/GeneralSettingsTab/UISettings/UISettings.jsx
new file mode 100644
index 0000000000..726be22bcf
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/UISettings/UISettings.jsx
@@ -0,0 +1,111 @@
+import { FormattedMessage as T } from "react-intl";
+import { SettingsInput, LanguageSelectInput } from "inputs";
+import { InfoDocFieldModalInvisibleButton } from "buttons";
+import styles from "./UISettings.module.css";
+import {
+  DEFAULT_DARK_THEME_NAME,
+  DEFAULT_LIGHT_THEME_NAME,
+  classNames
+} from "pi-ui";
+import { Box, Label } from "../../helpers";
+
+const availableUIThemeTypes = [
+  {
+    name: <T id="settings.uitheme.type.light" m="Light" />,
+    value: DEFAULT_LIGHT_THEME_NAME
+  },
+  {
+    name: <T id="settings.uitheme.type.dark" m="Dark" />,
+    value: DEFAULT_DARK_THEME_NAME
+  }
+];
+
+const UISettings = ({
+  tempSettings,
+  locales,
+  onChangeTempSettings,
+  uiBoxClassName
+}) => (
+  <Box className={classNames(styles.box, uiBoxClassName)}>
+    <div>
+      <Label id="theme-input">
+        <T id="settings.uitheme.type" m="Tonality" />
+      </Label>
+      <SettingsInput
+        selectWithBigFont
+        className={styles.input}
+        value={tempSettings.theme}
+        ariaLabelledBy="theme-input"
+        onChange={(newTheme) => onChangeTempSettings({ theme: newTheme.value })}
+        valueKey="value"
+        labelKey="name"
+        options={availableUIThemeTypes}
+      />
+    </div>
+
+    <div>
+      <Label id="locale-input">
+        <T id="settings.locale" m="Locale" />
+      </Label>
+      <LanguageSelectInput
+        selectWithBigFont
+        className={styles.input}
+        value={tempSettings.locale}
+        onChange={(newLocale) =>
+          onChangeTempSettings({ locale: newLocale.key })
+        }
+        ariaLabelledBy="locale-input"
+        valueKey="key"
+        labelKey="description"
+        options={locales}
+      />
+    </div>
+
+    <div>
+      <Label id="ui-animation" className={styles.label}>
+        <T id="settings.uiAnimations.label" m="UI Animations" />
+      </Label>
+      <SettingsInput
+        selectWithBigFont
+        className={styles.input}
+        value={tempSettings.uiAnimations ? "true" : "false"}
+        onChange={(newUIAnimations) =>
+          onChangeTempSettings({ uiAnimations: newUIAnimations.value })
+        }
+        valueKey="value"
+        labelKey="description"
+        ariaLabelledBy="ui-animation"
+        options={[
+          {
+            key: "true",
+            value: true,
+            description: <T id="settings.uiAnimations.enabled" m="Enabled" />
+          },
+          {
+            key: "false",
+            value: false,
+            description: <T id="settings.uiAnimations.disabled" m="Disabled" />
+          }
+        ]}
+      />
+      <InfoDocFieldModalInvisibleButton
+        document="UIAnimationsInfo"
+        className={styles.infoButton}
+        modalClassName={styles.hasWarning}
+        buttonLabel={
+          <T id="settings.uiAnimations.whatsthis" m="What’s this?" />
+        }
+        draggable
+      />
+    </div>
+  </Box>
+);
+
+UISettings.propTypes = {
+  tempSettings: PropTypes.object.isRequired,
+  locales: PropTypes.array.isRequired,
+  onChangeTempSettings: PropTypes.func.isRequired,
+  uiBoxClassName: PropTypes.string
+};
+
+export default UISettings;
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/UISettings/UISettings.module.css b/app/components/views/SettingsPage/GeneralSettingsTab/UISettings/UISettings.module.css
new file mode 100644
index 0000000000..bfc63b1eb6
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/UISettings/UISettings.module.css
@@ -0,0 +1,26 @@
+.box {
+  display: grid;
+  grid-gap: 3rem;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.hasWarning strong {
+  color: var(--error-text-color);
+}
+
+.infoButton {
+  padding: 0;
+  text-decoration: none;
+  color: var(--grey-5);
+  font-size: 1.1rem;
+  line-height: 1.4rem;
+}
+.infoButton:hover {
+  text-decoration: underline;
+}
+
+@media screen and (max-width: 768px) {
+  .box {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/UISettings/index.js b/app/components/views/SettingsPage/GeneralSettingsTab/UISettings/index.js
similarity index 100%
rename from app/components/views/SettingsPage/SettingsTab/groups/UISettings/index.js
rename to app/components/views/SettingsPage/GeneralSettingsTab/UISettings/index.js
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/index.js b/app/components/views/SettingsPage/GeneralSettingsTab/index.js
new file mode 100644
index 0000000000..1396aabf45
--- /dev/null
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/index.js
@@ -0,0 +1 @@
+export { default } from "./GeneralSettingsTab";
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/PrivacySettings.jsx b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/PrivacySettings.jsx
new file mode 100644
index 0000000000..84cfb9b84d
--- /dev/null
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/PrivacySettings.jsx
@@ -0,0 +1,145 @@
+import { FormattedMessage as T } from "react-intl";
+import {
+  EXTERNALREQUEST_NETWORK_STATUS,
+  EXTERNALREQUEST_STAKEPOOL_LISTING,
+  EXTERNALREQUEST_UPDATE_CHECK,
+  EXTERNALREQUEST_POLITEIA,
+  EXTERNALREQUEST_DCRDATA
+} from "constants";
+import { Checkbox, classNames } from "pi-ui";
+import styles from "./PrivacySettings.module.css";
+import { Box } from "../../helpers";
+
+const PrivacySettings = ({
+  tempSettings,
+  onChangeTempSettings,
+  boxClassName
+}) => {
+  const toggle = (value) => () => {
+    const allowedExternalRequests = [...tempSettings.allowedExternalRequests];
+    const idx = allowedExternalRequests.indexOf(value);
+    if (idx > -1) {
+      allowedExternalRequests.splice(idx, 1);
+    } else {
+      allowedExternalRequests.push(value);
+    }
+    onChangeTempSettings({ allowedExternalRequests });
+  };
+
+  return (
+    <Box className={classNames(styles.box, boxClassName)}>
+      <div>
+        <Checkbox
+          className={styles.privacyCheckbox}
+          label={
+            <T
+              id="settings.privacy.networkStatus.label"
+              m="Network Information"
+            />
+          }
+          id="networking"
+          description={
+            <T
+              id="settings.privacy.networkStatus.description"
+              m="General network information (block height, etc) from decred.org"
+            />
+          }
+          checked={
+            tempSettings.allowedExternalRequests.indexOf(
+              EXTERNALREQUEST_NETWORK_STATUS
+            ) > -1
+          }
+          onChange={toggle(EXTERNALREQUEST_NETWORK_STATUS)}
+        />
+      </div>
+      <div>
+        <Checkbox
+          className={styles.privacyCheckbox}
+          label={
+            <T id="settings.privacy.dcrdata.label" m="Decred Block Explorer" />
+          }
+          id="dcrdata"
+          description={
+            <T
+              id="settings.privacy.dcrdata.description"
+              m="Access chain information from dcrdata.decred.org"
+            />
+          }
+          checked={
+            tempSettings.allowedExternalRequests.indexOf(
+              EXTERNALREQUEST_DCRDATA
+            ) > -1
+          }
+          onChange={toggle(EXTERNALREQUEST_DCRDATA)}
+        />
+      </div>
+      <div>
+        <Checkbox
+          className={styles.privacyCheckbox}
+          label={
+            <T id="settings.privacy.stakepoolListing.label" m="VSP Listing" />
+          }
+          id="stakepool"
+          description={
+            <T
+              id="settings.privacy.stakepoolListing.description"
+              m="List of currently available VSPs from decred.org"
+            />
+          }
+          checked={
+            tempSettings.allowedExternalRequests.indexOf(
+              EXTERNALREQUEST_STAKEPOOL_LISTING
+            ) > -1
+          }
+          onChange={toggle(EXTERNALREQUEST_STAKEPOOL_LISTING)}
+        />
+      </div>
+      <div>
+        <Checkbox
+          className={styles.privacyCheckbox}
+          label={<T id="settings.privacy.politeia.label" m="Politeia" />}
+          id="politeia"
+          description={
+            <T
+              id="settings.privacy.politeia.description"
+              m="List and vote on proposals on proposals.decred.org"
+            />
+          }
+          checked={
+            tempSettings.allowedExternalRequests.indexOf(
+              EXTERNALREQUEST_POLITEIA
+            ) > -1
+          }
+          onChange={toggle(EXTERNALREQUEST_POLITEIA)}
+        />
+      </div>
+      <div>
+        <Checkbox
+          className={styles.privacyCheckbox}
+          label={<T id="settings.privacy.updateCheck.label" m="Update Check" />}
+          id="update"
+          description={
+            <T
+              id="settings.privacy.updateCheck.description"
+              m="Get latest released version from github.org"
+            />
+          }
+          checked={
+            tempSettings.allowedExternalRequests.indexOf(
+              EXTERNALREQUEST_UPDATE_CHECK
+            ) > -1
+          }
+          onChange={toggle(EXTERNALREQUEST_UPDATE_CHECK)}
+        />
+      </div>
+    </Box>
+  );
+};
+
+PrivacySettings.propTypes = {
+  tempSettings: PropTypes.object.isRequired,
+  onChangeTempSettings: PropTypes.func.isRequired,
+  boxClassName: PropTypes.string
+};
+
+export default PrivacySettings;
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/PrivacySettings.module.css b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/PrivacySettings.module.css
new file mode 100644
index 0000000000..99a0d1b91e
--- /dev/null
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/PrivacySettings.module.css
@@ -0,0 +1,17 @@
+.box {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 3rem 8rem;
+}
+
+.privacyCheckbox {
+  line-height: 2rem;
+  font-size: 1.6rem;
+  color: var(--grey-7);
+}
+
+@media screen and (max-width: 768px) {
+  .box {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/index.js b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/index.js
similarity index 100%
rename from app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/index.js
rename to app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/index.js
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettings.jsx b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettings.jsx
new file mode 100644
index 0000000000..960736ed04
--- /dev/null
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettings.jsx
@@ -0,0 +1,73 @@
+import { FormattedMessage as T } from "react-intl";
+import PrivacySettings from "./PrivacySettings";
+import PrivatePassphraseSettings from "./PrivatePassphraseSettings";
+import { Subtitle } from "shared";
+import styles from "./PrivacyandSecuritySettings.module.css";
+import { Wrapper, Group } from "../helpers";
+import { classNames } from "pi-ui";
+
+const PrivacyandSecuritySettings = ({
+  tempSettings,
+  onChangeTempSettings,
+  onAttemptChangePassphrase,
+  isChangePassPhraseDisabled,
+  changePassphraseRequestAttempt,
+  walletReady,
+  wrapperClassName,
+  boxClassName
+}) => (
+  <Wrapper className={classNames(wrapperClassName, styles.wrapper)}>
+    {walletReady && (
+      <Group>
+        <Subtitle
+          className={styles.subtitle}
+          title={
+            <T
+              id="settings.getstartpage.group-title.privatePassphrase"
+              m="Private Passphrase"
+            />
+          }
+        />
+        <PrivatePassphraseSettings
+          {...{
+            onAttemptChangePassphrase,
+            isChangePassPhraseDisabled,
+            changePassphraseRequestAttempt
+          }}
+        />
+      </Group>
+    )}
+
+    <Group>
+      <Subtitle
+        className={styles.subtitle}
+        title={
+          <T
+            id="settings.getstartpage.group-title.privacy-and-security"
+            m="Privacy and Security"
+          />
+        }
+      />
+      <PrivacySettings
+        {...{
+          tempSettings,
+          onChangeTempSettings,
+          boxClassName
+        }}
+      />
+    </Group>
+  </Wrapper>
+);
+
+PrivacyandSecuritySettings.propTypes = {
+  tempSettings: PropTypes.object.isRequired,
+  onChangeTempSettings: PropTypes.func.isRequired,
+  onAttemptChangePassphrase: PropTypes.func,
+  isChangePassPhraseDisabled: PropTypes.bool.isRequired,
+  changePassphraseRequestAttempt: PropTypes.bool.isRequired,
+  walletReady: PropTypes.bool.isRequired,
+  wrapperClassName: PropTypes.string,
+  boxClassName: PropTypes.string
+};
+
+export default PrivacyandSecuritySettings;
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettings.module.css b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettings.module.css
new file mode 100644
index 0000000000..1e4a9c6ce9
--- /dev/null
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettings.module.css
@@ -0,0 +1,19 @@
+.subtitle {
+  width: initial;
+}
+
+.wrapper {
+  grid-template-columns: repeat(1, 76.4rem);
+}
+
+@media screen and (max-width: 1920px) {
+  .wrapper {
+    grid-template-columns: repeat(1, 76.4rem);
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .wrapper {
+    grid-template-columns: repeat(1, 35.5rem);
+  }
+}
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettingsTab.jsx b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettingsTab.jsx
new file mode 100644
index 0000000000..24156a047c
--- /dev/null
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettingsTab.jsx
@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import PrivacyandSecuritySettings from "./PrivacyandSecuritySettings";
+import { useSettings } from "hooks";
+
+const PrivacyandSecuritySettingsTab = ({ wrapperClassName, boxClassName }) => {
+  const {
+    tempSettings,
+    onSaveSettings,
+    onChangeTempSettings,
+    onAttemptChangePassphrase,
+    changePassphraseRequestAttempt,
+    isChangePassPhraseDisabled,
+    areSettingsDirty,
+    walletReady
+  } = useSettings();
+
+  useEffect(() => {
+    if (areSettingsDirty) {
+      onSaveSettings?.(tempSettings);
+    }
+  }, [areSettingsDirty, onSaveSettings, tempSettings]);
+
+  return (
+    <PrivacyandSecuritySettings
+      {...{
+        tempSettings,
+        onChangeTempSettings,
+        onAttemptChangePassphrase,
+        isChangePassPhraseDisabled,
+        changePassphraseRequestAttempt,
+        walletReady,
+        wrapperClassName,
+        boxClassName
+      }}
+    />
+  );
+};
+
+export default PrivacyandSecuritySettingsTab;
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivatePassphraseSettings/PrivatePassphraseSettings.jsx b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivatePassphraseSettings/PrivatePassphraseSettings.jsx
new file mode 100644
index 0000000000..1b22127fa5
--- /dev/null
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivatePassphraseSettings/PrivatePassphraseSettings.jsx
@@ -0,0 +1,39 @@
+import { FormattedMessage as T } from "react-intl";
+import { ChangePassphraseButton } from "buttons";
+import { WatchOnlyWarnNotification } from "shared";
+import styles from "./PrivatePassphraseSettings.module.css";
+
+const PrivatePassphraseSettings = ({
+  isChangePassPhraseDisabled,
+  changePassphraseRequestAttempt,
+  onAttemptChangePassphrase
+}) => {
+  return (
+    <WatchOnlyWarnNotification isActive={isChangePassPhraseDisabled}>
+      <ChangePassphraseButton
+        ariaLabelledBy="update-private-passphrase-button"
+        className={styles.changePassphraseButton}
+        loading={changePassphraseRequestAttempt}
+        isDisabled={isChangePassPhraseDisabled}
+        modalTitle={
+          <T id="settings.changeConfirmation" m="Change your passphrase" />
+        }
+        onSubmit={onAttemptChangePassphrase}
+        buttonLabel={
+          <T
+            id="settings.privatePassphrase.buttonLabel"
+            m="Update Private Passphrase"
+          />
+        }
+      />
+    </WatchOnlyWarnNotification>
+  );
+};
+
+PrivatePassphraseSettings.propTypes = {
+  onAttemptChangePassphrase: PropTypes.func,
+  isChangePassPhraseDisabled: PropTypes.bool.isRequired,
+  changePassphraseRequestAttempt: PropTypes.bool.isRequired
+};
+
+export default PrivatePassphraseSettings;
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivatePassphraseSettings/PrivatePassphraseSettings.module.css b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivatePassphraseSettings/PrivatePassphraseSettings.module.css
new file mode 100644
index 0000000000..2309b369e4
--- /dev/null
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivatePassphraseSettings/PrivatePassphraseSettings.module.css
@@ -0,0 +1,10 @@
+.changePassphraseButton {
+  background-color: var(--grey-7) !important;
+  border-color: var(--grey-7) !important;
+  font-size: 1.6rem !important;
+  font-weight: 600 !important;
+  line-height: 2rem !important;
+}
+.changePassphraseButton:hover {
+  background-color: var(--input-color-hover) !important;
+}
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivatePassphraseSettings/index.js b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivatePassphraseSettings/index.js
new file mode 100644
index 0000000000..08337487bb
--- /dev/null
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivatePassphraseSettings/index.js
@@ -0,0 +1 @@
+export { default } from "./PrivatePassphraseSettings";
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/index.js b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/index.js
new file mode 100644
index 0000000000..7962d8b545
--- /dev/null
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/index.js
@@ -0,0 +1 @@
+export { default } from "./PrivacyandSecuritySettingsTab";
diff --git a/app/components/views/SettingsPage/SettingsPage.jsx b/app/components/views/SettingsPage/SettingsPage.jsx
index 155d37e6cc..48ca0de7ae 100644
--- a/app/components/views/SettingsPage/SettingsPage.jsx
+++ b/app/components/views/SettingsPage/SettingsPage.jsx
@@ -4,10 +4,13 @@ import { TabbedPage, TitleHeader, DescriptionHeader } from "layout";
 import LinksTab from "./LinksTab";
 import LogsTab from "./LogsTab";
 import TutorialsTab from "./TutorialsTab";
-import SettingsTab from "./SettingsTab";
-import { useSettings } from "hooks";
+import ConnectivitySettingsTab from "./ConnectivitySettingsTab";
+import GeneralSettingsTab from "./GeneralSettingsTab";
+import PrivacyandSecuritySettingsTab from "./PrivacyandSecuritySettingsTab";
+import { useSettings, useService } from "hooks";
 import styles from "./SettingsPage.module.css";
 import { SETTINGS_ICON } from "constants";
+import ErrorScreen from "ErrorScreen";
 import { useTheme } from "pi-ui";
 
 const closeWalletModalContent = (walletName) => (
@@ -51,13 +54,26 @@ const SettingsPageHeader = () => {
 };
 
 const SettingsPage = () => {
+  const { walletService } = useService();
   const { setThemeName } = useTheme();
   const tabs = [
     {
-      path: "/settings/settings",
-      content: <SettingsTab setThemeName={setThemeName} />,
+      path: "/settings/connectivity",
+      content: ConnectivitySettingsTab,
       header: SettingsTabHeader,
-      label: <T id="settings.tab.settings" m="Settings" />
+      label: <T id="settings.tab.connectivity" m="Connectivity" />
+    },
+    {
+      path: "/settings/general",
+      content: <GeneralSettingsTab setThemeName={setThemeName} />,
+      header: SettingsTabHeader,
+      label: <T id="settings.tab.general" m="General" />
+    },
+    {
+      path: "/settings/privacyandsecurity",
+      content: PrivacyandSecuritySettingsTab,
+      header: SettingsTabHeader,
+      label: <T id="settings.tab.privacyandsecurity" m="Privacy and Security" />
     },
     {
       path: "/settings/links",
@@ -78,7 +94,11 @@ const SettingsPage = () => {
       label: <T id="settings.tab.logs" m="Logs" />
     }
   ];
-  return <TabbedPage header={<SettingsPageHeader />} tabs={tabs} />;
+  return !walletService ? (
+    <ErrorScreen />
+  ) : (
+    <TabbedPage header={<SettingsPageHeader />} tabs={tabs} />
+  );
 };
 
 export default SettingsPage;
diff --git a/app/components/views/SettingsPage/SettingsPage.module.css b/app/components/views/SettingsPage/SettingsPage.module.css
index b8bc808e76..9a9bb71bfb 100644
--- a/app/components/views/SettingsPage/SettingsPage.module.css
+++ b/app/components/views/SettingsPage/SettingsPage.module.css
@@ -1,11 +1,11 @@
 .closeModalButton {
   height: 29px;
-  background-color: var(--wallet-close-button-bg);
+  background-color: var(--grey-7) !important;
   color: var(--wallet-close-button-text);
   background-image: var(--close-wallet-icon);
   background-repeat: no-repeat;
   background-size: 13px;
   background-position: 10px 8px;
-  border-radius: 10px;
+  border-radius: 0.5rem;
   padding: 0 15px 0 30px;
 }
diff --git a/app/components/views/SettingsPage/SettingsTab/Settings.jsx b/app/components/views/SettingsPage/SettingsTab/Settings.jsx
deleted file mode 100644
index 37bb2ab55b..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/Settings.jsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import { useCallback } from "react";
-import { DEFAULT_DARK_THEME_NAME, DEFAULT_LIGHT_THEME_NAME } from "pi-ui";
-import { FormattedMessage as T } from "react-intl";
-import { KeyBlueButton, ResetNetworkButton } from "buttons";
-import {
-  NetworkSettings,
-  ProxySettings,
-  PrivacySettings,
-  UISettings,
-  MiscSettings,
-  TimezoneSettings
-} from "./groups";
-import { Subtitle } from "shared";
-import styles from "./Settings.module.css";
-import * as configConstants from "constants/config";
-import { wallet } from "wallet-preload-shim";
-import { Wrapper, Group, ColumnWrapper, Column } from "./helpers";
-
-const SettingsPage = ({
-  areSettingsDirty,
-  tempSettings,
-  currencies,
-  locales,
-  onChangeTempSettings,
-  onSaveSettings,
-  onAttemptChangePassphrase,
-  isChangePassPhraseDisabled,
-  changePassphraseRequestAttempt,
-  needNetworkReset,
-  walletReady,
-  setThemeName
-}) => {
-  const saveSettingsHandler = useCallback(() => {
-    const config = wallet.getGlobalCfg();
-    const oldTheme = config.get(configConstants.THEME);
-    if (oldTheme != tempSettings.theme) {
-      setThemeName(
-        tempSettings.theme.includes("dark")
-          ? DEFAULT_DARK_THEME_NAME
-          : DEFAULT_LIGHT_THEME_NAME
-      );
-    }
-    onSaveSettings(tempSettings);
-  }, [onSaveSettings, tempSettings, setThemeName]);
-
-  return (
-    <>
-      <Wrapper>
-        <Group>
-          <Subtitle
-            title={
-              <T
-                id="settings.getstartpage.group-title.connectivity"
-                m="Connectivity"
-              />
-            }
-          />
-          <ColumnWrapper>
-            <Column>
-              <NetworkSettings
-                {...{
-                  tempSettings,
-                  onChangeTempSettings
-                }}
-              />
-            </Column>
-            <Column>
-              <ProxySettings {...{ tempSettings, onChangeTempSettings }} />
-            </Column>
-          </ColumnWrapper>
-        </Group>
-
-        <Group className={styles.general}>
-          <Subtitle
-            title={
-              <T id="settings.getstartpage.group-title.general" m="General" />
-            }
-          />
-          <ColumnWrapper>
-            <Column>
-              <UISettings
-                {...{ tempSettings, locales, onChangeTempSettings }}
-              />
-            </Column>
-            <Column className={styles.timezone}>
-              <TimezoneSettings {...{ tempSettings, onChangeTempSettings }} />
-            </Column>
-            {walletReady && (
-              <Column>
-                <MiscSettings
-                  {...{
-                    tempSettings,
-                    currencies,
-                    walletReady,
-                    onChangeTempSettings
-                  }}
-                />
-              </Column>
-            )}
-          </ColumnWrapper>
-        </Group>
-
-        <Group className={styles.privacy}>
-          <Subtitle
-            title={
-              <T
-                id="settings.getstartpage.group-title.privacy-and-security"
-                m="Privacy and Security"
-              />
-            }
-          />
-          <ColumnWrapper>
-            <PrivacySettings
-              {...{
-                tempSettings,
-                onAttemptChangePassphrase,
-                isChangePassPhraseDisabled,
-                onChangeTempSettings,
-                walletReady,
-                changePassphraseRequestAttempt
-              }}
-            />
-          </ColumnWrapper>
-        </Group>
-      </Wrapper>
-
-      <div className={styles.saveButtonWrapper}>
-        <div className={styles.saveButton}>
-          {needNetworkReset ? (
-            <ResetNetworkButton
-              modalTitle={
-                <T id="settings.resetNetworkTitle" m="Reset required" />
-              }
-              buttonLabel={<T id="settings.save" m="Save" />}
-              modalContent={
-                <T
-                  id="settings.resetNetworkContent"
-                  m="The setting you have chosen to change requires Decrediton to be restarted.  Please confirm this action before proceeding."
-                />
-              }
-              disabled={!areSettingsDirty}
-              size="large"
-              block={false}
-              onSubmit={saveSettingsHandler}
-            />
-          ) : (
-            <KeyBlueButton
-              disabled={!areSettingsDirty}
-              size="large"
-              block={false}
-              onClick={saveSettingsHandler}>
-              <T id="settings.save" m="Save" />
-            </KeyBlueButton>
-          )}
-        </div>
-      </div>
-    </>
-  );
-};
-
-SettingsPage.propTypes = {
-  areSettingsDirty: PropTypes.bool.isRequired,
-  tempSettings: PropTypes.object.isRequired,
-  networks: PropTypes.array.isRequired,
-  currencies: PropTypes.array.isRequired,
-  locales: PropTypes.array,
-  onChangeTempSettings: PropTypes.func.isRequired,
-  onSaveSettings: PropTypes.func.isRequired,
-  onAttemptChangePassphrase: PropTypes.func,
-  isChangePassPhraseDisabled: PropTypes.bool.isRequired,
-  changePassphraseRequestAttempt: PropTypes.bool.isRequired
-};
-
-export default SettingsPage;
diff --git a/app/components/views/SettingsPage/SettingsTab/Settings.module.css b/app/components/views/SettingsPage/SettingsTab/Settings.module.css
deleted file mode 100644
index 89760ea454..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/Settings.module.css
+++ /dev/null
@@ -1,74 +0,0 @@
-.privacy,
-.security,
-.timezone {
-  float: left;
-}
-
-.general {
-  order: 3;
-}
-
-.saveButtonWrapper {
-  width: 1481px;
-  text-align: right;
-}
-
-.saveButton {
-  display: inline-block;
-  margin-right: 0;
-}
-
-@media screen and (min-width: 1680px) and (max-width: 1920px) {
-  .saveButtonWrapper {
-    width: 1240px;
-  }
-}
-
-@media screen and (min-width: 1400px) and (max-width: 1680px) {
-  .privacy {
-    order: 3;
-  }
-
-  .general {
-    order: 2;
-  }
-
-  .saveButtonWrapper {
-    width: 1000px;
-  }
-
-  .timezone {
-    margin-left: 20px;
-  }
-}
-
-@media screen and (max-width: 1400px) {
-  .privacy {
-    order: 3;
-  }
-
-  .general {
-    order: 2;
-  }
-
-  .saveButtonWrapper {
-    width: 740px;
-  }
-}
-
-@media screen and (max-width: 1180px) {
-  .saveButtonWrapper {
-    width: 649px;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .timezone {
-    order: 3;
-  }
-
-  .saveButtonWrapper {
-    width: 355px;
-    text-align: center;
-  }
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/SettingsTab.jsx b/app/components/views/SettingsPage/SettingsTab/SettingsTab.jsx
deleted file mode 100644
index 086e483313..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/SettingsTab.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import ErrorScreen from "ErrorScreen";
-import SettingsPage from "./Settings";
-import { useSettings, useService } from "hooks";
-
-const SettingsTab = ({ setThemeName }) => {
-  const {
-    tempSettings,
-    onSaveSettings,
-    onChangeTempSettings,
-    onAttemptChangePassphrase,
-    changePassphraseRequestAttempt,
-    isChangePassPhraseDisabled,
-    currencies,
-    locales,
-    networks,
-    areSettingsDirty,
-    needNetworkReset,
-    walletReady
-  } = useSettings();
-  const { walletService } = useService();
-
-  const onSaveSettingsHandler = () =>
-    onSaveSettings && onSaveSettings(tempSettings);
-
-  return !walletService ? (
-    <ErrorScreen />
-  ) : (
-    <SettingsPage
-      {...{
-        onAttemptChangePassphrase,
-        onSaveSettings: onSaveSettingsHandler,
-        changePassphraseRequestAttempt,
-        isChangePassPhraseDisabled,
-        tempSettings,
-        onChangeTempSettings,
-        currencies,
-        locales,
-        networks,
-        areSettingsDirty,
-        needNetworkReset,
-        walletReady,
-        setThemeName
-      }}
-    />
-  );
-};
-
-SettingsTab.propTypes = {
-  setThemeName: PropTypes.func
-};
-
-export default SettingsTab;
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/MiscSettings.jsx b/app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/MiscSettings.jsx
deleted file mode 100644
index 65754fb9d6..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/MiscSettings.jsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { FormattedMessage as T } from "react-intl";
-import { SettingsInput } from "inputs";
-import styles from "./MiscSettings.module.css";
-import { DiscoverUsageModal } from "modals";
-import { KeyBlueButton } from "buttons";
-import { useSettings } from "hooks";
-import { Row, Label, ColumnTitle } from "../../helpers";
-
-const MiscSettings = ({
-  tempSettings,
-  currencies,
-  onChangeTempSettings,
-  walletReady
-}) => {
-  const {
-    onDiscoverUsage,
-    gapLimit,
-    setGapLimit,
-    isValid,
-    clicked,
-    isDiscoverModalVisible,
-    showDiscoverModal,
-    hideDiscoverModal,
-    discoverUsageAttempt,
-    rescanRunning
-  } = useSettings();
-
-  return (
-    <>
-      <ColumnTitle title={<T id="settings.misc.title" m="Misc" />} />
-      <div>
-        {walletReady && (
-          <Row>
-            <Label id="displayed-units-input">
-              <T id="settings.displayedUnits" m="Displayed Units" />
-            </Label>
-            <SettingsInput
-              className={styles.input}
-              value={tempSettings.currencyDisplay}
-              onChange={(newCurrency) =>
-                onChangeTempSettings({ currencyDisplay: newCurrency.name })
-              }
-              ariaLabelledBy="displayed-units-input"
-              valueKey="name"
-              labelKey="name"
-              options={currencies}
-            />
-          </Row>
-        )}
-
-        {walletReady && (
-          <Row>
-            <KeyBlueButton
-              onClick={showDiscoverModal}
-              loading={discoverUsageAttempt || rescanRunning}
-              disabled={discoverUsageAttempt || rescanRunning}>
-              <T id="settings.DiscoverAddressBtn" m="Discover Address Usage" />
-            </KeyBlueButton>
-            <DiscoverUsageModal
-              {...{
-                show: isDiscoverModalVisible,
-                onSubmit: onDiscoverUsage,
-                onCancelModal: hideDiscoverModal,
-                gapLimit,
-                setGapLimit,
-                isValid,
-                clicked
-              }}
-            />
-          </Row>
-        )}
-      </div>
-    </>
-  );
-};
-
-MiscSettings.propTypes = {
-  tempSettings: PropTypes.object.isRequired,
-  currencies: PropTypes.array.isRequired,
-  onChangeTempSettings: PropTypes.func.isRequired,
-  walletReady: PropTypes.bool.isRequired
-};
-
-export default MiscSettings;
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/MiscSettings.module.css b/app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/MiscSettings.module.css
deleted file mode 100644
index 99fd4eaa05..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/MiscSettings/MiscSettings.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.input {
-  display: inline-block;
-  vertical-align: middle;
-  width: 150px;
-  min-width: 150px;
-  margin-right: 0;
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/NetworkSettings.jsx b/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/NetworkSettings.jsx
deleted file mode 100644
index 68fddcc8c1..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/NetworkSettings.jsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { FormattedMessage as T } from "react-intl";
-import { Tooltip } from "pi-ui";
-import { SettingsInput, SettingsTextInput } from "inputs";
-import { TESTNET, MAINNET } from "constants";
-import styles from "./NetworkSettings.module.css";
-import { Row, Label, ColumnTitle } from "../../helpers";
-
-const AlreadySetMessage = () => (
-  <T
-    id="settings.alreadySetFromCli"
-    m="This was set as a command-line option when launching decrediton"
-  />
-);
-
-// Do **not** add stuff that depends on the wallet here, as this is also used
-// for startup config.
-const NetworkSettings = ({ tempSettings, onChangeTempSettings }) => (
-  <>
-    <ColumnTitle title={<T id="settings.network.title" m="Network" />} />
-    <div>
-      <Row>
-        <Label id="network-input">
-          <T id="settings.network" m="Network" />
-        </Label>
-        <Tooltip
-          content={<AlreadySetMessage />}
-          disabled={!tempSettings.networkFromCli}>
-          <SettingsInput
-            className={styles.input}
-            value={tempSettings.network}
-            onChange={(opt) => onChangeTempSettings({ network: opt.value })}
-            valueKey="value"
-            labelKey="description"
-            disabled={tempSettings.networkFromCli}
-            ariaLabelledBy="network-input"
-            options={[
-              {
-                key: "true",
-                value: MAINNET,
-                description: <T id="settings.network.mainnet" m="Mainnet" />
-              },
-              {
-                key: "false",
-                value: TESTNET,
-                description: <T id="settings.network.testnet" m="Testnet" />
-              }
-            ]}
-          />
-        </Tooltip>
-      </Row>
-
-      <Row>
-        <Label id="spv-input">
-          <T id="settings.SPV" m="SPV" />
-        </Label>
-        <Tooltip
-          content={<AlreadySetMessage />}
-          disabled={!tempSettings.spvModeFromCli}>
-          <SettingsInput
-            className={styles.input}
-            value={tempSettings.spvMode ? "true" : "false"}
-            onChange={(opt) => onChangeTempSettings({ spvMode: opt.value })}
-            valueKey="key"
-            labelKey="description"
-            disabled={tempSettings.spvModeFromCli}
-            ariaLabelledBy="spv-input"
-            options={[
-              {
-                key: "true",
-                value: true,
-                description: <T id="settings.spv.true" m="Enabled" />
-              },
-              {
-                key: "false",
-                value: false,
-                description: <T id="settings.spv.false" m="Disabled" />
-              }
-            ]}
-          />
-        </Tooltip>
-      </Row>
-
-      <Row>
-        <Label id="spv-connect-input">
-          <T id="settings.SPVConnect" m="SPV Connect" />
-        </Label>
-        <Tooltip
-          content={<AlreadySetMessage />}
-          disabled={!tempSettings.spvConnectFromCli}>
-          <SettingsTextInput
-            className={styles.settingsTextInput}
-            id="spvConnectInput"
-            value={tempSettings.spvConnect}
-            disabled={tempSettings.spvConnectFromCli}
-            ariaLabelledBy="spv-connect-input"
-            onChange={(e) =>
-              onChangeTempSettings({ spvConnect: e.target.value.split(",") })
-            }
-          />
-        </Tooltip>
-      </Row>
-
-      <Row>
-        <Label id="adv-damon-startup-input">
-          <T id="settings.advancedDaemon.label" m="Adv. Daemon Startup" />
-        </Label>
-        <Tooltip
-          content={<AlreadySetMessage />}
-          disabled={!tempSettings.daemonStartAdvancedFromCli}>
-          <SettingsInput
-            className={styles.input}
-            value={tempSettings.daemonStartAdvanced ? "true" : "false"}
-            onChange={(opt) =>
-              onChangeTempSettings({ daemonStartAdvanced: opt.value })
-            }
-            valueKey="key"
-            labelKey="description"
-            disabled={tempSettings.daemonStartAdvancedFromCli}
-            ariaLabelledBy="adv-damon-startup-input"
-            options={[
-              {
-                key: "true",
-                value: true,
-                description: <T id="settings.advancedDaemon.true" m="Enabled" />
-              },
-              {
-                key: "false",
-                value: false,
-                description: (
-                  <T id="settings.advancedDaemon.false" m="Disabled" />
-                )
-              }
-            ]}
-          />
-        </Tooltip>
-      </Row>
-    </div>
-  </>
-);
-
-NetworkSettings.propTypes = {
-  tempSettings: PropTypes.object.isRequired,
-  onChangeTempSettings: PropTypes.func.isRequired
-};
-
-export default NetworkSettings;
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/NetworkSettings.module.css b/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/NetworkSettings.module.css
deleted file mode 100644
index 265d2e7107..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/NetworkSettings/NetworkSettings.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.input {
-  display: inline-block;
-  vertical-align: middle;
-  width: 150px;
-  min-width: 150px;
-  margin-right: 0;
-}
-
-.settingsTextInput {
-  width: 150px !important;
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/PrivacySettings.jsx b/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/PrivacySettings.jsx
deleted file mode 100644
index 82bff8bfd1..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/PrivacySettings.jsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import { FormattedMessage as T } from "react-intl";
-import {
-  EXTERNALREQUEST_NETWORK_STATUS,
-  EXTERNALREQUEST_STAKEPOOL_LISTING,
-  EXTERNALREQUEST_UPDATE_CHECK,
-  EXTERNALREQUEST_POLITEIA,
-  EXTERNALREQUEST_DCRDATA
-} from "constants";
-import { ChangePassphraseButton } from "buttons";
-import { WatchOnlyWarnNotification } from "shared";
-import { classNames, Checkbox } from "pi-ui";
-import styles from "./PrivacySettings.module.css";
-import { Row } from "../../helpers";
-
-const PrivacySettings = ({
-  tempSettings,
-  isChangePassPhraseDisabled,
-  changePassphraseRequestAttempt,
-  onAttemptChangePassphrase,
-  onChangeTempSettings,
-  walletReady
-}) => {
-  const toggle = (value) => () => {
-    const allowedExternalRequests = [...tempSettings.allowedExternalRequests];
-    const idx = allowedExternalRequests.indexOf(value);
-    if (idx > -1) {
-      allowedExternalRequests.splice(idx, 1);
-    } else {
-      allowedExternalRequests.push(value);
-    }
-    onChangeTempSettings({ allowedExternalRequests });
-  };
-
-  return (
-    <>
-      <div className={styles.column}>
-        <div>
-          {walletReady && (
-            <Row className={styles.row}>
-              <div
-                disabled={isChangePassPhraseDisabled}
-                className={styles.updatePassphraseButton}>
-                <label id="update-private-passphrase-button">
-                  <T
-                    id="settings.updatePrivatePassphrase"
-                    m="Update Private Passphrase"
-                  />
-                </label>
-                <WatchOnlyWarnNotification
-                  isActive={isChangePassPhraseDisabled}>
-                  <ChangePassphraseButton
-                    ariaLabelledBy="update-private-passphrase-button"
-                    className={classNames(
-                      styles.changePasswordDefaultIcon,
-                      isChangePassPhraseDisabled &&
-                        styles.changePasswordDisabledIcon,
-                      changePassphraseRequestAttempt &&
-                        styles.changePasswordLoading
-                    )}
-                    isDisabled={isChangePassPhraseDisabled}
-                    modalTitle={
-                      <T
-                        id="settings.changeConfirmation"
-                        m="Change your passphrase"
-                      />
-                    }
-                    onSubmit={onAttemptChangePassphrase}
-                  />
-                </WatchOnlyWarnNotification>
-              </div>
-            </Row>
-          )}
-          <Row className={styles.row}>
-            <Checkbox
-              label={
-                <T
-                  id="settings.privacy.networkStatus.label"
-                  m="Network Information"
-                />
-              }
-              id="networking"
-              description={
-                <T
-                  id="settings.privacy.networkStatus.description"
-                  m="General network information (block height, etc) from decred.org"
-                />
-              }
-              checked={
-                tempSettings.allowedExternalRequests.indexOf(
-                  EXTERNALREQUEST_NETWORK_STATUS
-                ) > -1
-              }
-              onChange={toggle(EXTERNALREQUEST_NETWORK_STATUS)}
-            />
-          </Row>
-          <Row className={styles.row}>
-            <Checkbox
-              label={
-                <T
-                  id="settings.privacy.stakepoolListing.label"
-                  m="VSP Listing"
-                />
-              }
-              id="stakepool"
-              description={
-                <T
-                  id="settings.privacy.stakepoolListing.description"
-                  m="List of currently available VSPs from decred.org"
-                />
-              }
-              checked={
-                tempSettings.allowedExternalRequests.indexOf(
-                  EXTERNALREQUEST_STAKEPOOL_LISTING
-                ) > -1
-              }
-              onChange={toggle(EXTERNALREQUEST_STAKEPOOL_LISTING)}
-            />
-          </Row>
-        </div>
-      </div>
-      <div className={styles.column}>
-        <div>
-          <Row className={styles.row}>
-            <Checkbox
-              label={
-                <T id="settings.privacy.updateCheck.label" m="Update Check" />
-              }
-              id="update"
-              description={
-                <T
-                  id="settings.privacy.updateCheck.description"
-                  m="Get latest released version from github.org"
-                />
-              }
-              checked={
-                tempSettings.allowedExternalRequests.indexOf(
-                  EXTERNALREQUEST_UPDATE_CHECK
-                ) > -1
-              }
-              onChange={toggle(EXTERNALREQUEST_UPDATE_CHECK)}
-            />
-          </Row>
-          <Row className={styles.row}>
-            <Checkbox
-              label={<T id="settings.privacy.politeia.label" m="Politeia" />}
-              id="politeia"
-              description={
-                <T
-                  id="settings.privacy.politeia.description"
-                  m="List and vote on proposals on proposals.decred.org"
-                />
-              }
-              checked={
-                tempSettings.allowedExternalRequests.indexOf(
-                  EXTERNALREQUEST_POLITEIA
-                ) > -1
-              }
-              onChange={toggle(EXTERNALREQUEST_POLITEIA)}
-            />
-          </Row>
-          <Row className={styles.row}>
-            <Checkbox
-              label={
-                <T
-                  id="settings.privacy.dcrdata.label"
-                  m="Decred Block Explorer"
-                />
-              }
-              id="dcrdata"
-              description={
-                <T
-                  id="settings.privacy.dcrdata.description"
-                  m="Access chain information from dcrdata.decred.org"
-                />
-              }
-              checked={
-                tempSettings.allowedExternalRequests.indexOf(
-                  EXTERNALREQUEST_DCRDATA
-                ) > -1
-              }
-              onChange={toggle(EXTERNALREQUEST_DCRDATA)}
-            />
-          </Row>
-        </div>
-      </div>
-    </>
-  );
-};
-
-PrivacySettings.propTypes = {
-  tempSettings: PropTypes.object.isRequired,
-  onAttemptChangePassphrase: PropTypes.func,
-  isChangePassPhraseDisabled: PropTypes.bool.isRequired,
-  changePassphraseRequestAttempt: PropTypes.bool.isRequired,
-  onChangeTempSettings: PropTypes.func.isRequired,
-  walletReady: PropTypes.bool.isRequired
-};
-
-export default PrivacySettings;
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/PrivacySettings.module.css b/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/PrivacySettings.module.css
deleted file mode 100644
index babc38fee6..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/PrivacySettings/PrivacySettings.module.css
+++ /dev/null
@@ -1,110 +0,0 @@
-.column {
-  width: 300px;
-}
-
-.row {
-  justify-content: flex-start;
-  flex-direction: column;
-}
-
-.updatePassphraseButton {
-  font-size: 13px;
-  float: left;
-  line-height: 23px;
-  margin-bottom: 26px;
-}
-
-.updatePassphraseButton button {
-  margin-left: 0;
-  margin-right: 10px;
-}
-
-.updatePassphraseButton span {
-  float: left;
-  margin-top: 1px;
-  font-size: 13px;
-  line-height: 17px;
-}
-
-.changePasswordDefaultIcon {
-  background: var(--change-password-default-icon) no-repeat center;
-  background-color: var(--input-color);
-  background-size: 16px;
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  margin-left: 10px;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-  border: 1px solid transparent;
-  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.13);
-  outline: none;
-}
-
-.changePasswordDefaultIcon:hover {
-  background-color: var(--input-color-hover);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
-}
-
-.changePasswordDisbledIcon,
-.changePasswordLoading {
-  background: var(--password-inactive-icon) no-repeat center;
-  background-color: var(--disabled-background-color);
-  cursor: default;
-}
-
-.changePasswordDisbledIcon:hover,
-.changePasswordLoading:hover {
-  background-color: var(--disabled-background-color) !important;
-  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.13) !important;
-}
-
-@media screen and (min-width: 1680px) and (max-width: 1920px) {
-  .column {
-    width: 245px;
-  }
-
-  .row {
-    width: 250px;
-  }
-}
-
-@media screen and (min-width: 1400px) and (max-width: 1680px) {
-  .row {
-    width: 220px;
-    flex-wrap: wrap;
-    margin-right: 200px;
-  }
-
-  .column {
-    width: 420px;
-  }
-}
-
-@media screen and (max-width: 1400px) {
-  .column {
-    width: 248px;
-  }
-}
-
-@media screen and (max-width: 1180px) {
-  .row {
-    width: 250px;
-  }
-
-  .column {
-    width: 248px;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .column {
-    width: 100%;
-  }
-
-  .row {
-    width: 250px;
-    margin-right: initial;
-  }
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/ProxySettings.jsx b/app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/ProxySettings.jsx
deleted file mode 100644
index 64854b0535..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/ProxySettings.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { SettingsInput, SettingsTextInput } from "inputs";
-import { FormattedMessage as T } from "react-intl";
-import {
-  PROXYTYPE_PAC,
-  PROXYTYPE_HTTP,
-  PROXYTYPE_SOCKS4,
-  PROXYTYPE_SOCKS5
-} from "constants";
-import styles from "./ProxySettings.module.css";
-import { Row, Label, ColumnTitle } from "../../helpers";
-
-const availableProxyTypes = [
-  { name: <T id="settings.proxy.type.none" m="No Proxy" />, value: null },
-  { name: "HTTP", value: PROXYTYPE_HTTP },
-  { name: "PAC", value: PROXYTYPE_PAC },
-  { name: "SOCKS4", value: PROXYTYPE_SOCKS4 },
-  { name: "SOCKS5", value: PROXYTYPE_SOCKS5 }
-];
-
-const ProxySettings = ({ tempSettings, onChangeTempSettings }) => (
-  <>
-    <ColumnTitle title={<T id="settings.proxy.title" m="Proxy" />} />
-    <div>
-      <Row>
-        <Label id="proxy-type-input">
-          <T id="settings.proxy.type" m="Proxy Type" />
-        </Label>
-        <SettingsInput
-          className={styles.input}
-          value={tempSettings.proxyType}
-          onChange={(newProxyType) =>
-            onChangeTempSettings({ proxyType: newProxyType.value })
-          }
-          valueKey="value"
-          labelKey="name"
-          ariaLabelledBy="proxy-type-input"
-          options={availableProxyTypes}
-        />
-      </Row>
-
-      <Row>
-        <Label id="proxy-location">
-          <T id="settings.proxy.location" m="Proxy Location" />
-        </Label>
-        <SettingsTextInput
-          className={styles.settingsTextInput}
-          id="proxyLocationInput"
-          value={tempSettings.proxyLocation}
-          ariaLabelledBy="proxy-location"
-          onChange={(e) =>
-            onChangeTempSettings({ proxyLocation: e.target.value })
-          }
-        />
-      </Row>
-    </div>
-  </>
-);
-
-ProxySettings.propTypes = {
-  tempSettings: PropTypes.object.isRequired,
-  onChangeTempSettings: PropTypes.func.isRequired
-};
-
-export default ProxySettings;
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/ProxySettings.module.css b/app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/ProxySettings.module.css
deleted file mode 100644
index 265d2e7107..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/ProxySettings/ProxySettings.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.input {
-  display: inline-block;
-  vertical-align: middle;
-  width: 150px;
-  min-width: 150px;
-  margin-right: 0;
-}
-
-.settingsTextInput {
-  width: 150px !important;
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.module.css b/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.module.css
deleted file mode 100644
index c2d474ca4c..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/TimezoneSettings/TimezoneSettings.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.timezoneOption {
-  margin: 0 0 1rem 0 !important;
-}
-
-.timezoneOption label {
-  color: var(--input-color-default);
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/UISettings/UISettings.jsx b/app/components/views/SettingsPage/SettingsTab/groups/UISettings/UISettings.jsx
deleted file mode 100644
index 614619c057..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/UISettings/UISettings.jsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { FormattedMessage as T } from "react-intl";
-import { SettingsInput, LanguageSelectInput } from "inputs";
-import { InfoDocFieldModalButton } from "buttons";
-import styles from "./UISettings.module.css";
-import { DEFAULT_DARK_THEME_NAME, DEFAULT_LIGHT_THEME_NAME } from "pi-ui";
-import { Row, Label, ColumnTitle } from "../../helpers";
-
-const availableUIThemeTypes = [
-  {
-    name: <T id="settings.uitheme.type.light" m="Light" />,
-    value: DEFAULT_LIGHT_THEME_NAME
-  },
-  {
-    name: <T id="settings.uitheme.type.dark" m="Dark" />,
-    value: DEFAULT_DARK_THEME_NAME
-  }
-];
-
-const UISettings = ({ tempSettings, locales, onChangeTempSettings }) => (
-  <>
-    <ColumnTitle title={<T id="settings.ui.title" m="UI" />} />
-    <div>
-      <Row>
-        <Label id="theme-input">
-          <T id="settings.uitheme.type" m="Tonality" />
-        </Label>
-        <SettingsInput
-          className={styles.input}
-          value={tempSettings.theme}
-          ariaLabelledBy="theme-input"
-          onChange={(newTheme) =>
-            onChangeTempSettings({ theme: newTheme.value })
-          }
-          valueKey="value"
-          labelKey="name"
-          options={availableUIThemeTypes}
-        />
-      </Row>
-
-      <Row>
-        <Label id="locale-input">
-          <T id="settings.locale" m="Locale" />
-        </Label>
-        <LanguageSelectInput
-          className={styles.input}
-          value={tempSettings.locale}
-          onChange={(newLocale) =>
-            onChangeTempSettings({ locale: newLocale.key })
-          }
-          ariaLabelledBy="locale-input"
-          valueKey="key"
-          labelKey="description"
-          options={locales}
-        />
-      </Row>
-
-      <Row>
-        <Label id="ui-animation" className={styles.label}>
-          <T id="settings.uiAnimations.label" m="UI Animations" />
-          <InfoDocFieldModalButton
-            document="UIAnimationsInfo"
-            modalClassName={styles.hasWarning}
-            draggable
-          />
-        </Label>
-        <SettingsInput
-          className={styles.input}
-          value={tempSettings.uiAnimations ? "true" : "false"}
-          onChange={(newUIAnimations) =>
-            onChangeTempSettings({ uiAnimations: newUIAnimations.value })
-          }
-          valueKey="value"
-          labelKey="description"
-          options={[
-            {
-              key: "true",
-              value: true,
-              description: <T id="settings.uiAnimations.enabled" m="Enabled" />
-            },
-            {
-              key: "false",
-              value: false,
-              description: (
-                <T id="settings.uiAnimations.disabled" m="Disabled" />
-              )
-            }
-          ]}
-        />
-      </Row>
-    </div>
-  </>
-);
-
-UISettings.propTypes = {
-  tempSettings: PropTypes.object.isRequired,
-  locales: PropTypes.array.isRequired,
-  onChangeTempSettings: PropTypes.func.isRequired
-};
-
-export default UISettings;
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/UISettings/UISettings.module.css b/app/components/views/SettingsPage/SettingsTab/groups/UISettings/UISettings.module.css
deleted file mode 100644
index 57dda2ad8a..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/UISettings/UISettings.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.input {
-  display: inline-block;
-  vertical-align: middle;
-  width: 150px;
-  min-width: 150px;
-  margin-right: 0;
-}
-
-.hasWarning strong {
-  color: var(--error-text-color);
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/groups/index.js b/app/components/views/SettingsPage/SettingsTab/groups/index.js
deleted file mode 100644
index 3c18dbad16..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/groups/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export { default as MiscSettings } from "./MiscSettings";
-export { default as NetworkSettings } from "./NetworkSettings";
-export { default as PrivacySettings } from "./PrivacySettings";
-export { default as ProxySettings } from "./ProxySettings";
-export { default as TimezoneSettings } from "./TimezoneSettings";
-export { default as UISettings } from "./UISettings";
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Column/Column.jsx b/app/components/views/SettingsPage/SettingsTab/helpers/Column/Column.jsx
deleted file mode 100644
index 3ee79f163a..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Column/Column.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { classNames } from "pi-ui";
-import styles from "./Column.module.css";
-
-const Column = ({ className, children }) => (
-  <div className={classNames(styles.column, className)}>{children}</div>
-);
-
-Column.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired
-};
-
-export default Column;
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Column/Column.module.css b/app/components/views/SettingsPage/SettingsTab/helpers/Column/Column.module.css
deleted file mode 100644
index 9978ce2338..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Column/Column.module.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.column {
-  width: 300px;
-}
-
-@media screen and (min-width: 1680px) and (max-width: 1920px) {
-  .column {
-    width: 245px;
-  }
-}
-
-@media screen and (min-width: 1400px) and (max-width: 1680px) {
-  .column {
-    width: 420px;
-  }
-}
-
-@media screen and (max-width: 1180px) {
-  .column {
-    width: 248px;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .column {
-    width: 100%;
-  }
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Column/index.js b/app/components/views/SettingsPage/SettingsTab/helpers/Column/index.js
deleted file mode 100644
index 5adccd4886..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Column/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Column";
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/ColumnTitle.jsx b/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/ColumnTitle.jsx
deleted file mode 100644
index 0bb0e64137..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/ColumnTitle.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import styles from "./ColumnTitle.module.css";
-
-const ColumnTitle = ({ title }) => (
-  <div className={styles.columnTitle}>{title}</div>
-);
-
-ColumnTitle.propTypes = {
-  title: PropTypes.object.isRequired
-};
-
-export default ColumnTitle;
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/ColumnTitle.module.css b/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/ColumnTitle.module.css
deleted file mode 100644
index c9385865ae..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/ColumnTitle.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.columnTitle {
-  font-size: 19px;
-  text-transform: capitalize;
-  margin-bottom: 14px;
-  line-height: 24px;
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/index.js b/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/index.js
deleted file mode 100644
index ba83bb52b4..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnTitle/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./ColumnTitle";
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/ColumnWrapper.jsx b/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/ColumnWrapper.jsx
deleted file mode 100644
index 4203fab461..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/ColumnWrapper.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import styles from "./ColumnWrapper.module.css";
-
-const ColumnWrapper = ({ children }) => (
-  <div className={styles.columnWrapper}>{children}</div>
-);
-
-ColumnWrapper.propTypes = {
-  children: PropTypes.node.isRequired
-};
-
-export default ColumnWrapper;
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/ColumnWrapper.module.css b/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/ColumnWrapper.module.css
deleted file mode 100644
index 567c194fa8..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/ColumnWrapper.module.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.columnWrapper {
-  padding: 30px 40px;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  background: var(--background-back-color);
-  min-height: 190px;
-}
-
-@media screen and (min-width: 1680px) and (max-width: 1920px) {
-  .columnWrapper {
-    padding-left: 30px;
-    padding-right: 40px;
-  }
-}
-
-@media screen and (max-width: 1400px) {
-  .columnWrapper {
-    min-height: initial;
-    padding: 30px 40px;
-  }
-}
-
-@media screen and (max-width: 1180px) {
-  .columnWrapper {
-    padding-left: 20px;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .columnWrapper {
-    padding-left: 15px;
-    padding-right: 35px;
-  }
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/index.js b/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/index.js
deleted file mode 100644
index b5318c917d..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/ColumnWrapper/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./ColumnWrapper";
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Group/Group.jsx b/app/components/views/SettingsPage/SettingsTab/helpers/Group/Group.jsx
deleted file mode 100644
index df40d42033..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Group/Group.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { classNames } from "pi-ui";
-import styles from "./Group.module.css";
-
-const Group = ({ className, children }) => (
-  <div className={classNames(styles.group, className)}>{children}</div>
-);
-
-Group.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired
-};
-
-export default Group;
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Group/Group.module.css b/app/components/views/SettingsPage/SettingsTab/helpers/Group/Group.module.css
deleted file mode 100644
index 42a14325f4..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Group/Group.module.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.group {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 37px;
-  width: 720px;
-}
-
-@media screen and (min-width: 1680px) and (max-width: 1920px) {
-  .group {
-    width: 600px;
-  }
-}
-
-@media screen and (min-width: 1400px) and (max-width: 1680px) {
-  .group {
-    width: 1000px;
-  }
-}
-
-@media screen and (max-width: 1400px) {
-  .group {
-    width: 739px;
-  }
-}
-
-@media screen and (max-width: 1180px) {
-  .group {
-    width: 649px;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .group {
-    width: 355px;
-    margin-bottom: 27px;
-  }
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Group/index.js b/app/components/views/SettingsPage/SettingsTab/helpers/Group/index.js
deleted file mode 100644
index 867468fee1..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Group/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Group";
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Label/Label.module.css b/app/components/views/SettingsPage/SettingsTab/helpers/Label/Label.module.css
deleted file mode 100644
index 3eb76f19a0..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Label/Label.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.label {
-  display: inline-block;
-  margin-right: 14px;
-  text-align: right;
-  width: 116px;
-}
-
-.label button {
-  margin-right: 0;
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Row/Row.jsx b/app/components/views/SettingsPage/SettingsTab/helpers/Row/Row.jsx
deleted file mode 100644
index e8dcae2199..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Row/Row.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { classNames } from "pi-ui";
-import styles from "./Row.module.css";
-
-const Row = ({ children, className }) => (
-  <div className={classNames(styles.row, className)}>{children}</div>
-);
-
-Row.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
-};
-
-export default Row;
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Row/Row.module.css b/app/components/views/SettingsPage/SettingsTab/helpers/Row/Row.module.css
deleted file mode 100644
index f3da300152..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Row/Row.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.row {
-  display: flex;
-  margin-bottom: 20px;
-  justify-content: flex-end;
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Row/index.js b/app/components/views/SettingsPage/SettingsTab/helpers/Row/index.js
deleted file mode 100644
index 74ea459f62..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Row/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Row";
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/Wrapper.jsx b/app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/Wrapper.jsx
deleted file mode 100644
index 30be6165de..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/Wrapper.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import styles from "./Wrapper.module.css";
-
-const Wrapper = ({ children }) => (
-  <div className={styles.wrapper}>{children}</div>
-);
-
-Wrapper.propTypes = {
-  children: PropTypes.node.isRequired
-};
-
-export default Wrapper;
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/Wrapper.module.css b/app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/Wrapper.module.css
deleted file mode 100644
index f65467757e..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/Wrapper.module.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.wrapper {
-  display: flex;
-  justify-content: space-between;
-  width: 1481px;
-  flex-direction: row;
-  font-size: 13px;
-  flex-wrap: wrap;
-}
-
-@media screen and (min-width: 1680px) and (max-width: 1920px) {
-  .wrapper {
-    width: 1240px;
-  }
-}
-
-@media screen and (min-width: 1400px) and (max-width: 1680px) {
-  .wrapper {
-    flex-direction: column;
-  }
-}
-
-@media screen and (max-width: 1400px) {
-  .wrapper {
-    flex-direction: column;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .wrapper {
-    margin-top: 0;
-    flex-direction: column;
-  }
-}
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/index.js b/app/components/views/SettingsPage/SettingsTab/helpers/index.js
deleted file mode 100644
index 7de531a4ea..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/helpers/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export { default as Wrapper } from "./Wrapper";
-export { default as Group } from "./Group";
-export { default as ColumnWrapper } from "./ColumnWrapper";
-export { default as Column } from "./Column";
-export { default as Row } from "./Row";
-export { default as Label } from "./Label";
-export { default as ColumnTitle } from "./ColumnTitle";
diff --git a/app/components/views/SettingsPage/SettingsTab/index.js b/app/components/views/SettingsPage/SettingsTab/index.js
deleted file mode 100644
index a1fbd9d339..0000000000
--- a/app/components/views/SettingsPage/SettingsTab/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./SettingsTab";
diff --git a/app/components/views/SettingsPage/helpers/Box/Box.jsx b/app/components/views/SettingsPage/helpers/Box/Box.jsx
new file mode 100644
index 0000000000..0c048c666a
--- /dev/null
+++ b/app/components/views/SettingsPage/helpers/Box/Box.jsx
@@ -0,0 +1,13 @@
+import { classNames } from "pi-ui";
+import styles from "./Box.module.css";
+
+const Box = ({ className, children }) => (
+  <div className={classNames(styles.box, className)}>{children}</div>
+);
+
+Box.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node.isRequired
+};
+
+export default Box;
diff --git a/app/components/views/SettingsPage/helpers/Box/Box.module.css b/app/components/views/SettingsPage/helpers/Box/Box.module.css
new file mode 100644
index 0000000000..ca1a442b5e
--- /dev/null
+++ b/app/components/views/SettingsPage/helpers/Box/Box.module.css
@@ -0,0 +1,11 @@
+.box {
+  padding: 3rem 4rem;
+  background: var(--background-back-color);
+  width: 100%;
+}
+
+@media screen and (max-width: 768px) {
+  .box {
+    padding: 3rem 2rem;
+  }
+}
diff --git a/app/components/views/SettingsPage/helpers/Box/index.js b/app/components/views/SettingsPage/helpers/Box/index.js
new file mode 100644
index 0000000000..772ab37c11
--- /dev/null
+++ b/app/components/views/SettingsPage/helpers/Box/index.js
@@ -0,0 +1 @@
+export { default } from "./Box";
diff --git a/app/components/views/SettingsPage/helpers/ConfirmRestartModal.jsx b/app/components/views/SettingsPage/helpers/ConfirmRestartModal.jsx
new file mode 100644
index 0000000000..247984d892
--- /dev/null
+++ b/app/components/views/SettingsPage/helpers/ConfirmRestartModal.jsx
@@ -0,0 +1,20 @@
+import { ConfirmModal } from "modals";
+import { FormattedMessage as T } from "react-intl";
+
+const ConfirmRestartModal = (props) => (
+  <ConfirmModal
+    modalTitle={<T id="settings.resetNetworkTitle" m="Reset required" />}
+    buttonLabel={<T id="settings.save" m="Save" />}
+    modalContent={
+      <T
+        id="settings.resetNetworkContent"
+        m="The setting you have chosen to change requires Decrediton to be restarted.  Please confirm this action before proceeding."
+      />
+    }
+    size="large"
+    block={false}
+    {...props}
+  />
+);
+
+export default ConfirmRestartModal;
diff --git a/app/components/views/SettingsPage/helpers/Group.jsx b/app/components/views/SettingsPage/helpers/Group.jsx
new file mode 100644
index 0000000000..9bad3ae27f
--- /dev/null
+++ b/app/components/views/SettingsPage/helpers/Group.jsx
@@ -0,0 +1,9 @@
+const Group = ({ className, children }) => (
+  <div className={className}>{children}</div>
+);
+
+Group.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default Group;
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Label/Label.jsx b/app/components/views/SettingsPage/helpers/Label/Label.jsx
similarity index 100%
rename from app/components/views/SettingsPage/SettingsTab/helpers/Label/Label.jsx
rename to app/components/views/SettingsPage/helpers/Label/Label.jsx
diff --git a/app/components/views/SettingsPage/helpers/Label/Label.module.css b/app/components/views/SettingsPage/helpers/Label/Label.module.css
new file mode 100644
index 0000000000..5420954dc0
--- /dev/null
+++ b/app/components/views/SettingsPage/helpers/Label/Label.module.css
@@ -0,0 +1,7 @@
+.label {
+  color: var(--grey-7);
+}
+
+.label button {
+  margin-right: 0;
+}
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Label/index.js b/app/components/views/SettingsPage/helpers/Label/index.js
similarity index 100%
rename from app/components/views/SettingsPage/SettingsTab/helpers/Label/index.js
rename to app/components/views/SettingsPage/helpers/Label/index.js
diff --git a/app/components/views/SettingsPage/helpers/Wrapper/Wrapper.jsx b/app/components/views/SettingsPage/helpers/Wrapper/Wrapper.jsx
new file mode 100644
index 0000000000..26f55c7f0d
--- /dev/null
+++ b/app/components/views/SettingsPage/helpers/Wrapper/Wrapper.jsx
@@ -0,0 +1,12 @@
+import styles from "./Wrapper.module.css";
+import { classNames } from "pi-ui";
+
+const Wrapper = ({ className, children }) => (
+  <div className={classNames(styles.wrapper, className)}>{children}</div>
+);
+
+Wrapper.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default Wrapper;
diff --git a/app/components/views/SettingsPage/helpers/Wrapper/Wrapper.module.css b/app/components/views/SettingsPage/helpers/Wrapper/Wrapper.module.css
new file mode 100644
index 0000000000..b9da7adffc
--- /dev/null
+++ b/app/components/views/SettingsPage/helpers/Wrapper/Wrapper.module.css
@@ -0,0 +1,18 @@
+.wrapper {
+  font-size: 13px;
+  display: grid;
+  grid-template-columns: repeat(2, 73.7rem);
+  grid-gap: 3rem;
+}
+
+@media screen and (max-width: 1920px) {
+  .wrapper {
+    grid-template-columns: repeat(1, 76.4rem);
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .wrapper {
+    grid-template-columns: repeat(1, 35.5rem);
+  }
+}
diff --git a/app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/index.js b/app/components/views/SettingsPage/helpers/Wrapper/index.js
similarity index 100%
rename from app/components/views/SettingsPage/SettingsTab/helpers/Wrapper/index.js
rename to app/components/views/SettingsPage/helpers/Wrapper/index.js
diff --git a/app/components/views/SettingsPage/helpers/index.js b/app/components/views/SettingsPage/helpers/index.js
new file mode 100644
index 0000000000..f45ba98e04
--- /dev/null
+++ b/app/components/views/SettingsPage/helpers/index.js
@@ -0,0 +1,5 @@
+export { default as Wrapper } from "./Wrapper";
+export { default as Group } from "./Group";
+export { default as Label } from "./Label";
+export { default as Box } from "./Box";
+export { default as ConfirmRestartModal } from "./ConfirmRestartModal";
diff --git a/app/components/views/TransactionsPage/ExportTab/ExportPage/ExportPage.jsx b/app/components/views/TransactionsPage/ExportTab/ExportPage/ExportPage.jsx
index f30fed9225..bbd95105f7 100644
--- a/app/components/views/TransactionsPage/ExportTab/ExportPage/ExportPage.jsx
+++ b/app/components/views/TransactionsPage/ExportTab/ExportPage/ExportPage.jsx
@@ -1,8 +1,7 @@
-import Select from "react-select";
 import { FormattedMessage as T, defineMessages } from "react-intl";
 import { classNames } from "pi-ui";
 import { KeyBlueButton, InfoModalButton } from "buttons";
-import { PathBrowseInput, FileBrowserFilters } from "inputs";
+import { PathBrowseInput, FileBrowserFilters, Select } from "inputs";
 import { Subtitle } from "shared";
 import styles from "./ExportPage.module.css";
 
@@ -66,21 +65,12 @@ const ExportPage = ({
       }
     />
     <div className={styles.exportArea}>
-      {
-        // `selectWithBigFont` className is
-        // temp solution to skinning from ReactSelectGlobal.css.
-        // When react-select will be replaced by the `pi-ui` component,
-        // this className can be deleted.
-      }
-      <div className={classNames(styles.exportAreaLeft, "selectWithBigFont")}>
+      <div className={styles.exportAreaLeft}>
         <label>
           <T id="export.select" m="Export Type" />
           <Select
-            clearable={false}
-            multi={false}
-            valueKey="key"
-            labelKey="name"
-            value={selectedExport.key}
+            selectWithBigFont
+            value={selectedExport}
             options={availableExports}
             onChange={onChangeSelectedExport}
           />
diff --git a/app/components/views/TransactionsPage/ExportTab/helpers.js b/app/components/views/TransactionsPage/ExportTab/helpers.js
index 4777685c76..8539a07d54 100644
--- a/app/components/views/TransactionsPage/ExportTab/helpers.js
+++ b/app/components/views/TransactionsPage/ExportTab/helpers.js
@@ -9,7 +9,7 @@ import {
 
 export const messages = {
   transactions: {
-    name: <T id="export.transactions.name" m="Transactions" />,
+    label: <T id="export.transactions.name" m="Transactions" />,
     description: (
       <T
         id="export.transactions.descr"
@@ -92,7 +92,7 @@ export const messages = {
     ]
   },
   dailyBalances: {
-    name: <T id="export.dailyBalances.name" m="Daily Balances" />,
+    label: <T id="export.dailyBalances.name" m="Daily Balances" />,
     description: (
       <T
         id="export.dailyBalances.descr"
@@ -235,7 +235,7 @@ export const messages = {
     ]
   },
   balances: {
-    name: <T id="export.balances.name" m="Balances" />,
+    label: <T id="export.balances.name" m="Balances" />,
     description: (
       <T
         id="export.balances.descr"
@@ -330,7 +330,7 @@ export const messages = {
     ]
   },
   voteTime: {
-    name: <T id="export.votetime.name" m="Vote Time" />,
+    label: <T id="export.votetime.name" m="Vote Time" />,
     description: (
       <T
         id="export.votetime.descr"
@@ -356,7 +356,7 @@ export const messages = {
     ]
   },
   tickets: {
-    name: <T id="export.tickets.name" m="Tickets" />,
+    label: <T id="export.tickets.name" m="Tickets" />,
     description: (
       <T id="export.tickets.descr" m="Export ticket and vote information." />
     ),
@@ -431,15 +431,15 @@ export const messages = {
 export const availableExports = [
   {
     ...messages.transactions,
-    key: "transactions",
+    value: "transactions",
     calcFunction: transactionStats
   },
   {
     ...messages.dailyBalances,
-    key: "dailyBalances",
+    value: "dailyBalances",
     calcFunction: dailyBalancesStats
   },
-  { ...messages.balances, key: "balances", calcFunction: balancesStats },
-  { ...messages.voteTime, key: "votetime", calcFunction: voteTimeStats },
-  { ...messages.tickets, key: "tickets", calcFunction: ticketStats }
+  { ...messages.balances, value: "balances", calcFunction: balancesStats },
+  { ...messages.voteTime, value: "votetime", calcFunction: voteTimeStats },
+  { ...messages.tickets, value: "tickets", calcFunction: ticketStats }
 ];
diff --git a/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.jsx b/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.jsx
index 783c2940c1..4555c15c68 100644
--- a/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.jsx
+++ b/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.jsx
@@ -13,7 +13,7 @@ import {
   getThemeProperty,
   TextHighlighted
 } from "pi-ui";
-import style from "./ReceivePage.module.css";
+import styles from "./ReceivePage.module.css";
 
 const messages = defineMessages({
   amountPlaceholder: {
@@ -54,39 +54,31 @@ const ReceivePage = ({
     <>
       {modal && <QRCodeModal {...{ amount, nextAddress, setModal }} />}
       <Subtitle title={<T id="receive.subtitle" m="Receive DCR" />} />
-      <div className={style.receiveContent}>
-        <div className={style.inputs}>
-          <div className={style.inputWrapper}>
-            <label htmlFor="receiveAccountSelect">
+      <div className={styles.receiveContent}>
+        <div className={styles.inputs}>
+          <div className={styles.inputWrapper}>
+            <label htmlFor="receiveAccountSelect" className={styles.label}>
               <T id="receive.accountLabel" m="This address is for" />
             </label>
-            {
-              // `selectWithBigFont` className is
-              // temp solution to skinning from ReactSelectGlobal.css.
-              // When react-select will be replaced by the `pi-ui` component,
-              // this className can be deleted.
-            }
             <ReceiveAccountsSelect
               id="receiveAccountSelect"
+              selectWithBigFont
               showAccountsButton
-              className={classNames(
-                style.receiveSelectAccountSelect,
-                "selectWithBigFont"
-              )}
-              selectClassName={style.receiveSelectAccountSelectInput}
+              className={styles.receiveSelectAccountSelect}
+              selectClassName={styles.receiveSelectAccountSelectInput}
             />
           </div>
           <div
             className={classNames(
-              style.inputWrapper,
-              style.amountInputWrapper
+              styles.inputWrapper,
+              styles.amountInputWrapper
             )}>
-            <div className={style.receiveSelectAmountInput}>
+            <div className={styles.receiveSelectAmountInput}>
               <DcrInput
                 newBiggerFontStyle
                 id="amountInput"
                 label={intl.formatMessage(messages.amountLabel)}
-                className={style.requestedAmountInput}
+                className={styles.requestedAmountInput}
                 required={false}
                 showErrors={error && error.amount}
                 invalid={error && error.amount}
@@ -99,18 +91,18 @@ const ReceivePage = ({
           </div>
         </div>
 
-        <div className={style.line}>
+        <div className={styles.line}>
           <TextHighlighted
             truncate={false}
-            className={classNames(style.receiveContentNestQR)}>
+            className={classNames(styles.receiveContentNestQR)}>
             {nextAddress}
             <div
               className={classNames(
-                style.receiveContentNestCopyQR,
-                tooltip && style.opacity
+                styles.receiveContentNestCopyQR,
+                tooltip && styles.opacity
               )}>
-              <div className={style.receiveContentNestCopyQRArrow} />
-              <div className={style.receiveContentNestCopyQRText}>
+              <div className={styles.receiveContentNestCopyQRArrow} />
+              <div className={styles.receiveContentNestCopyQRText}>
                 {tooltipText ? (
                   <T
                     id="receive.tooltipGenerated"
@@ -129,7 +121,7 @@ const ReceivePage = ({
             <Tooltip content={<T id="receiveTab.copy" m="Copy" />}>
               <ButtonIcon
                 type="copyToClipboard"
-                className={style.receiveContentCopyButton}
+                className={styles.receiveContentCopyButton}
                 iconBackgroundColor={iconColor}
                 onClick={() => {
                   copy(nextAddress);
@@ -150,11 +142,11 @@ const ReceivePage = ({
           </div>
         </div>
       </div>
-      <div className={style.generateButton}>
+      <div className={styles.generateButton}>
         <KeyBlueButton
           size="large"
           block={false}
-          className={style.blueButton}
+          className={styles.blueButton}
           onClick={() => {
             setTooltipText(true);
             showTooltip();
diff --git a/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.module.css b/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.module.css
index aee9d519b8..3c64c37389 100644
--- a/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.module.css
+++ b/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.module.css
@@ -27,7 +27,8 @@
   display: flex;
 }
 .receiveSelectAccountSelect {
-  align-items: flex-end;
+  align-items: center;
+  display: flex !important;
 }
 .receiveSelectAccountSelect a {
   margin-left: 10px;
@@ -118,6 +119,12 @@
   font-size: 16px;
 }
 
+.label {
+  font-size: 1.3rem;
+  line-height: 1.6rem;
+  color: var(--grey-7);
+}
+
 @media screen and (max-width: 768px) {
   .receiveContent {
     width: 355px;
diff --git a/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.jsx b/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.jsx
index 58994c7fe0..8b7d3b53d6 100644
--- a/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.jsx
+++ b/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.jsx
@@ -285,10 +285,6 @@ const SendOutputRow = ({
       <div className={styles.destinationContainer}>
         <div className={classNames(styles.sendInputWrapper, styles.address)}>
           {isSendSelf ? (
-            // `selectWithBigFont` className is
-            // temp solution to skinning from ReactSelectGlobal.css.
-            // When react-select will be replaced by the `pi-ui` component,
-            // this className can be deleted.
             <>
               <label
                 htmlFor={`addressInput-${index}`}
@@ -297,10 +293,9 @@ const SendOutputRow = ({
               </label>
               <ReceiveAccountsSelect
                 id={`addressInput-${index}`}
-                className="selectWithBigFont"
+                selectWithBigFont
                 selectClassName={styles.receiveAccountSelect}
-                disabled={receiveAccountsSelectDisabled}
-                getAddressForSelected={true}
+                isDisabled={receiveAccountsSelectDisabled}
                 showAccountsButton={false}
                 onKeyDown={onKeyDown}
                 account={receiveAccount}
diff --git a/app/hooks/useSettings.js b/app/hooks/useSettings.js
index 9481a157ac..cc08dd279d 100644
--- a/app/hooks/useSettings.js
+++ b/app/hooks/useSettings.js
@@ -37,6 +37,11 @@ const useSettings = () => {
     [dispatch]
   );
 
+  const resetSettingsState = useCallback(
+    () => dispatch(sa.resetSettingsState()),
+    [dispatch]
+  );
+
   const isVSPListingEnabled = useMemo(
     () =>
       tempSettings.allowedExternalRequests.includes(
@@ -130,7 +135,8 @@ const useSettings = () => {
     showDiscoverModal,
     hideDiscoverModal,
     discoverUsageAttempt,
-    rescanRunning
+    rescanRunning,
+    resetSettingsState
   };
 };
 
diff --git a/app/index.js b/app/index.js
index 2ec80b80fd..09c67b05bf 100644
--- a/app/index.js
+++ b/app/index.js
@@ -8,7 +8,6 @@ import configureStore from "./store/configureStore";
 import locales from "./i18n/locales";
 import "pi-ui/dist/index.css";
 import "./style/main.css";
-import "./style/ReactSelectGlobal.css";
 import pkg from "./package.json";
 import {
   DCR,
diff --git a/app/reducers/snackbar.js b/app/reducers/snackbar.js
index 9eeeac19e0..85cf8d64b3 100644
--- a/app/reducers/snackbar.js
+++ b/app/reducers/snackbar.js
@@ -174,6 +174,7 @@ import {
   CREATEMIXERACCOUNTS_FAILED,
   RUNACCOUNTMIXER_FAILED
 } from "actions/AccountMixerActions";
+import { SETTINGS_SAVE } from "actions/SettingsActions";
 
 const WRONG_PASSPHRASE_MSG = "WRONG_PASSPHRASE_MSG";
 const ERROR_IS_OBJECT = "ERROR_IS_OBJECT";
@@ -729,6 +730,10 @@ const messages = defineMessages({
   DEX_EXPORT_SEED_FAILED: {
     id: "dex.export.seed.failed",
     defaultMessage: "{originalError}"
+  },
+  SETTINGS_SAVE: {
+    id: "settings.saved",
+    defaultMessage: "Settings saved successfully."
   }
 });
 
@@ -821,6 +826,7 @@ export default function snackbar(state = {}, action) {
     case SETVOTECHOICES_SUCCESS:
     case DISCOVERUSAGE_SUCCESS:
     case NEW_BTC_CONFIG_SUCCESS:
+    case SETTINGS_SAVE:
       type = "Success";
       message = messages[action.type] || messages.defaultSuccessMessage;
 
diff --git a/app/style/ReactSelectGlobal.css b/app/style/ReactSelectGlobal.css
deleted file mode 100644
index a24e53b007..0000000000
--- a/app/style/ReactSelectGlobal.css
+++ /dev/null
@@ -1,507 +0,0 @@
-/**
- * React Select
- * ============
- * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/
- * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs
- * MIT License: https://github.com/JedWatson/react-select
-*/
-
-.Select {
-  position: relative;
-  font-size: 13px;
-}
-
-.Select,
-.Select div,
-.Select input,
-.Select span {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.Select.is-disabled > .Select-control {
-  background-color: var(--disabled-background-color);
-  color: var(--disabled-color);
-}
-
-.Select.is-disabled > .Select-control:hover {
-  box-shadow: none;
-  color: var(--disabled-color);
-}
-
-.Select.is-disabled .Select-arrow-zone {
-  cursor: default;
-  pointer-events: none;
-  opacity: 0.35;
-}
-
-.Select-control {
-  border: 0px;
-  border-radius: 0px;
-  background-color: inherit;
-  border-bottom: 1px solid var(--select-stroke-color);
-  box-shadow: none;
-  color: var(--input-color-default);
-  cursor: default;
-  display: table;
-  border-spacing: 0;
-  border-collapse: separate;
-  outline: none;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-}
-
-.is-open .Select-control .Select-input:focus {
-  outline: none;
-  color: var(--input-color-focused);
-}
-
-.is-searchable.is-open > .Select-control {
-  cursor: text;
-  color: var(--input-color-focused);
-}
-
-.is-open {
-  z-index: 100 !important;
-}
-
-.is-open > .Select-control {
-  z-index: 100 !important;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.is-searchable.is-focused:not(.is-open) > .Select-control {
-  cursor: text;
-}
-
-.Select-placeholder,
-.Select--single > .Select-control .Select-value {
-  bottom: 0;
-  left: 0;
-  padding: 0px 20px 0px 10px;
-  position: absolute;
-  right: 0;
-  top: 0;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.Select-placeholder {
-  color: var(--select-placeholder);
-}
-
-.has-value.Select--single > .Select-control .Select-value a.Select-value-label,
-.has-value.is-pseudo-focused.Select--single
-  > .Select-control
-  .Select-value
-  a.Select-value-label {
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.has-value.Select--single
-  > .Select-control
-  .Select-value
-  a.Select-value-label:hover,
-.has-value.is-pseudo-focused.Select--single
-  > .Select-control
-  .Select-value
-  a.Select-value-label:hover,
-.has-value.Select--single
-  > .Select-control
-  .Select-value
-  a.Select-value-label:focus,
-.has-value.is-pseudo-focused.Select--single
-  > .Select-control
-  .Select-value
-  a.Select-value-label:focus {
-  outline: none;
-  text-decoration: underline;
-}
-
-.Select-input {
-  height: 21px;
-  vertical-align: middle;
-}
-
-.Select-input > input {
-  width: 100%;
-  background: none transparent;
-  border: 0 none;
-  box-shadow: none;
-  cursor: default;
-  display: inline-block;
-  font-family: inherit;
-  font-size: inherit;
-  margin: 0;
-  outline: none;
-
-  /* For IE 8 compatibility */
-  -webkit-appearance: none;
-  color: var(--input-color-default);
-}
-
-.is-focused .Select-input > input {
-  cursor: text;
-}
-
-.has-value.is-pseudo-focused .Select-input {
-  opacity: 0;
-}
-
-.Select-control:not(.is-searchable) > .Select-input {
-  outline: none;
-}
-
-.Select-loading-zone {
-  cursor: pointer;
-  display: table-cell;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  width: 16px;
-}
-
-.Select-loading {
-  -webkit-animation: Select-animation-spin 400ms infinite linear;
-  -o-animation: Select-animation-spin 400ms infinite linear;
-  animation: Select-animation-spin 400ms infinite linear;
-  width: 16px;
-  height: 16px;
-  box-sizing: border-box;
-  border-radius: 50%;
-  border: 2px solid var(--white-border);
-  border-right-color: var(--stroke-color-hovered);
-  display: inline-block;
-  position: relative;
-  vertical-align: middle;
-}
-
-.Select-clear-zone {
-  -webkit-animation: Select-animation-fadeIn 200ms;
-  -o-animation: Select-animation-fadeIn 200ms;
-  animation: Select-animation-fadeIn 200ms;
-  color: var(--tab-text);
-  cursor: pointer;
-  display: table-cell;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  width: 17px;
-}
-
-.Select-clear-zone:hover {
-  color: var(--error-red-hover);
-}
-
-.Select-clear {
-  display: inline-block;
-  font-size: 18px;
-  line-height: 1;
-}
-
-.Select--multi .Select-clear-zone {
-  width: 17px;
-}
-
-.Select-arrow-zone {
-  cursor: pointer;
-  display: table-cell;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  width: 10px;
-}
-
-.Select-arrow {
-  border-color: var(--stroke-color-default) transparent transparent;
-  border-style: solid;
-  border-width: 5px 5px 2.5px;
-  display: inline-block;
-  height: 0;
-  width: 0;
-  position: relative;
-}
-
-.Select-control:hover:not(:disabled) {
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
-  color: var(--input-color-hovered);
-  border-bottom: 1px solid var(--stroke-color-hovered);
-}
-
-.Select-control:hover:not(:disabled) .Select-arrow {
-  border-top-color: var(--stroke-color-hovered);
-}
-
-.is-open .Select-arrow,
-.is-open .Select-control:hover:not(:disabled) .Select-arrow,
-.Select-arrow-zone:hover > .Select-arrow {
-  border-top-color: var(--stroke-color-focused);
-  transform: rotate(180deg) translateY(4px);
-}
-
-.Select--multi .Select-multi-value-wrapper {
-  display: inline-block;
-}
-
-.Select .Select-aria-only {
-  display: inline-block;
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  clip: rect(0, 0, 0, 0);
-  overflow: hidden;
-  float: left;
-}
-
-@-webkit-keyframes Select-animation-fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes Select-animation-fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.Select-menu-outer {
-  background-color: var(--background-back-color);
-  border: 1px solid var(--background-container);
-  border-top-color: var(--white-border);
-  border-bottom-color: var(--combobox-outer-bottom-border);
-  box-shadow: 0 3px 6px rgba(9, 20, 64, 0.21);
-  box-sizing: border-box;
-  margin-top: -1px;
-  max-height: 200px;
-  position: absolute;
-  width: 100%;
-  z-index: 101;
-  -webkit-overflow-scrolling: touch;
-}
-
-.Select-menu-with-arrow .Select-menu-outer {
-  border: 1px solid var(--background-container);
-  background-color: var(--background-back-color);
-  box-shadow: 0px 3px 6px #00000029;
-  margin-top: 8px;
-  border-radius: 5px;
-
-  &::before {
-    content: "";
-    position: absolute;
-    background-image: var(--select-arrow-up);
-    background-repeat: no-repeat;
-    width: 10px;
-    height: 5px;
-    top: -5px;
-    left: 20px;
-  }
-}
-
-.Select-menu {
-  max-height: 198px;
-  overflow-y: auto;
-}
-
-.Select-option {
-  box-sizing: border-box;
-  background-color: var(--background-back-color);
-  color: var(--input-color-focused);
-  cursor: pointer;
-  display: block;
-  padding: 8px 10px;
-}
-
-.Select-option:last-child {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-
-.Select-option.is-focused {
-  background-color: var(--background-hovered);
-}
-
-.Select-option.is-disabled {
-  color: var(--input-color-default);
-  cursor: default;
-}
-
-.Select-noresults {
-  box-sizing: border-box;
-  color: var(--input-color-default);
-  cursor: default;
-  display: block;
-  padding: 8px 10px;
-}
-
-.Select--multi .Select-input {
-  vertical-align: middle;
-  padding: 6px 0px 10px 0px;
-}
-
-.Select--multi.has-value .Select-input {
-  margin-left: 5px;
-}
-
-.Select--multi .Select-value {
-  background-color: var(--disabled-background-color);
-
-  /* Fallback color for IE 8 */
-  background-color: rgba(0, 126, 255, 0.08);
-  border-radius: 2px;
-  border: 1px solid var(--white-border);
-
-  /* Fallback color for IE 8 */
-  border: 1px solid rgba(0, 126, 255, 0.24);
-  color: var(--input-color);
-  display: inline-block;
-  font-size: 0.9em;
-  line-height: 1.4;
-  margin-left: 5px;
-  margin-top: 5px;
-  vertical-align: top;
-}
-
-.Select--multi .Select-value-icon,
-.Select--multi .Select-value-label {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.Select--multi .Select-value-label {
-  border-bottom-right-radius: 2px;
-  border-top-right-radius: 2px;
-  cursor: default;
-  padding: 2px 5px;
-}
-
-.Select--multi a.Select-value-label {
-  color: var(--input-color);
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.Select--multi a.Select-value-label:hover {
-  text-decoration: underline;
-}
-
-.Select--multi .Select-value-icon {
-  cursor: pointer;
-  border-bottom-left-radius: 2px;
-  border-top-left-radius: 2px;
-  border-right: 1px solid var(--white-border);
-
-  /* Fallback color for IE 8 */
-  border-right: 1px solid rgba(0, 126, 255, 0.24);
-  padding: 1px 5px 3px;
-}
-
-.Select--multi .Select-value-icon:hover,
-.Select--multi .Select-value-icon:focus {
-  background-color: var(--disabled-background-color);
-
-  /* Fallback color for IE 8 */
-  background-color: rgba(0, 113, 230, 0.08);
-  color: var(--input-color);
-}
-
-.Select--multi .Select-value-icon:active {
-  background-color: var(--background-hovered);
-}
-
-.Select--multi.is-disabled .Select-value {
-  background-color: var(--disabled-background-color);
-  box-shadow: var(--disabled-box-shadow);
-  color: var(--disabled-color);
-}
-
-.Select--multi.is-disabled .Select-value-icon {
-  cursor: not-allowed;
-  border-right: 1px solid var(--white-border);
-}
-
-.Select--multi.is-disabled .Select-value-icon:hover,
-.Select--multi.is-disabled .Select-value-icon:focus,
-.Select--multi.is-disabled .Select-value-icon:active {
-  background-color: var(--disabled-background-color);
-}
-
-@keyframes Select-animation-spin {
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-@-webkit-keyframes Select-animation-spin {
-  to {
-    -webkit-transform: rotate(1turn);
-  }
-}
-
-.detailedAccountSelect .Select-arrow-zone {
-  vertical-align: top;
-}
-.detailedAccountSelect .Select-value-label {
-  display: block;
-  width: max-content;
-}
-.detailedAccountSelect .Select-placeholder,
-.detailedAccountSelect .Select-value {
-  width: max-content !important;
-  max-width: max-content !important;
-  position: relative !important;
-}
-.detailedAccountSelect .Select-multi-value-wrapper {
-  display: block;
-  width: max-content;
-  max-width: max-content;
-}
-.detailedAccountSelect .Select-input {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-.detailedAccountSelect .Select-control {
-  height: 48px;
-  cursor: pointer;
-  border-bottom: none;
-}
-.detailedAccountSelect .Select-control:hover {
-  border-bottom: none !important;
-  box-shadow: none !important;
-}
-.detailedAccountSelect .Select-menu-outer {
-  border: none !important;
-  border-top-color: var(--white-border);
-  border-bottom-color: none !important;
-  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.16);
-  border-radius: 2px !important;
-  margin-top: -21px;
-  margin-left: 5px;
-}
-
-.selectWithBigFont .Select-placeholder,
-.selectWithBigFont .Select--single > .Select-control .Select-value {
-  padding: 0px 20px 0px 0;
-  font-size: 16px;
-}
-.selectWithBigFont .Select-placeholder {
-  color: var(--gray-5);
-}
-.selectWithBigFont .Select-control:hover:not(:disabled) {
-  border-bottom: 1px solid var(--accent-blue);
-}
diff --git a/app/style/icons/changepasswordDefault.svg b/app/style/icons/changepasswordDefault.svg
deleted file mode 100644
index cb91b756e2..0000000000
--- a/app/style/icons/changepasswordDefault.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="7169.536 293.253 16 4.291">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #fff;
-      }
-    </style>
-  </defs>
-  <g id="Symbol_32_1" data-name="Symbol 32 – 1" transform="translate(6194.6 -1)">
-    <path id="Path_225" data-name="Path 225" class="cls-1" d="M1.5,952.4l-.824.485.242.436.436.751H0v.97H1.358l-.436.751-.242.412.824.485.242-.412.436-.752.436.752.242.412.824-.485-.242-.412-.436-.751H4.364v-.97H3.006l.436-.751.242-.436-.824-.485-.242.436-.436.727-.436-.751Zm5.818,0-.824.485.242.436.436.751H5.818v.97H7.176l-.436.751-.242.412.824.485.242-.412L8,955.527l.436.752.242.412.824-.485-.242-.412-.436-.751h1.358v-.97H8.824l.436-.751.242-.436-.824-.485-.242.436L8,953.588l-.436-.751Zm5.818,0-.824.485.242.436.436.751H11.636v.97h1.358l-.436.751-.242.412.824.485.242-.412.436-.752.436.752.242.412.824-.485-.242-.412-.436-.751H16v-.97H14.642l.436-.751.242-.436L14.5,952.4l-.242.436-.436.751-.436-.751Z" transform="translate(974.936 -658.148)"/>
-  </g>
-</svg>
diff --git a/app/style/themes/icons.js b/app/style/themes/icons.js
index 2281bf0f37..b9499b60e0 100644
--- a/app/style/themes/icons.js
+++ b/app/style/themes/icons.js
@@ -34,9 +34,6 @@ const icons = {
   "checkmark-context-icon": url(
     require("style/icons/checkMarkContextMenu.svg")
   ),
-  "change-password-default-icon": url(
-    require("style/icons/changepasswordDefault.svg")
-  ),
   "close-wallet-icon": url(require("style/icons/closeWallet.svg")),
   "contextbutton-eye-disabled-icon": url(
     require("style/icons/contextbutton-eye-disabled.svg")
diff --git a/package.json b/package.json
index f36cd410a8..6e62ed8489 100644
--- a/package.json
+++ b/package.json
@@ -310,7 +310,6 @@
     "react-motion": "^0.5.2",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
-    "react-select": "1.0.0",
     "react-timeout": "^2.0.1",
     "recharts": "^2.1.4",
     "redux": "^4.0.5",
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 f036402840..8feb8a5322 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
@@ -255,14 +255,12 @@ test("render LEGACY_PurchasePage", () => {
     screen.queryByLabelText("Always use this VSP")
   ).not.toBeInTheDocument();
   // change stakepool
-  const stakePoolSelectOption = screen.getAllByRole("option", {
-    name: mockConfiguredStakePools[0].Host
-  })[0];
+  const stakePoolSelectOption = screen.getAllByText(
+    mockConfiguredStakePools[0].Host
+  )[0];
 
   user.click(stakePoolSelectOption);
-  user.click(
-    screen.getByRole("option", { name: mockConfiguredStakePools[1].Host })
-  );
+  user.click(screen.getByText(mockConfiguredStakePools[1].Host));
 
   // changed values
   expect(screen.getByLabelText("Ticket Address:").value).toMatch(
@@ -363,7 +361,7 @@ test("render LEGACY_PurchasePage", () => {
   user.click(screen.getByText("Add VSP"));
   const testStakePoolHost = "test-stakepool-host";
   user.type(screen.getByRole("combobox"), testStakePoolHost);
-  user.click(screen.getByRole("option", { name: testStakePoolHost }));
+  user.click(screen.getByText(`Create "${testStakePoolHost}"`));
   expect(mockAddCustomStakePool).toHaveBeenCalledWith(testStakePoolHost);
 
   user.click(screen.getByText("Cancel"));
@@ -416,9 +414,7 @@ test("test legacy autobuyer", async () => {
   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.getByText(mockConfiguredStakePools[1].Host));
 
   user.click(saveButton);
   expect(screen.getByText("Fill all fields.")).toBeInTheDocument();
diff --git a/test/unit/components/views/GetStaredPage/CreateWallet.spec.js b/test/unit/components/views/GetStaredPage/CreateWallet.spec.js
index bca3dd047d..dccd884556 100644
--- a/test/unit/components/views/GetStaredPage/CreateWallet.spec.js
+++ b/test/unit/components/views/GetStaredPage/CreateWallet.spec.js
@@ -110,34 +110,45 @@ const goToConfirmView = async () => {
 
 const goToRestoreView = async () => {
   render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
-  user.click(screen.getByText(/restore existing wallet/i));
+  await wait(() => screen.getByText("Welcome to Decrediton Wallet"));
+  user.click(screen.getByText("Restore Existing Wallet"));
   await wait(() => screen.getByText("Wallet Name"));
-  user.type(screen.getByPlaceholderText(/choose a name/i), testWalletName);
+  user.type(screen.getByPlaceholderText("Choose a Name"), testWalletName);
 };
 
 const goToExistingSeedView = async () => {
   await goToRestoreView();
-  user.click(screen.getByText(/continue/i));
-  await wait(() => screen.getByText(/confirm seed key/i));
+  user.click(screen.getByText("Continue"));
+  await wait(() => screen.getByText("Confirm Seed Key"));
 };
 
-const testPrivatePassphraseInputs = async () => {
+const testPrivatePassphraseInputs = async (
+  privatePassphraseInput,
+  repeatPrivatePassphraseInput,
+  mistypeFirst = false
+) => {
   const testPassword = "test-password";
-  const privatePassphraseInput = screen.getByPlaceholderText(
-    "Write your Private Passphrase"
-  );
-  const repeatPrivatePassphraseInput = screen.getByPlaceholderText(
-    "Confirm your Private Passphrase"
-  );
+  if (!privatePassphraseInput) {
+    privatePassphraseInput = screen.getByPlaceholderText(
+      "Write your Private Passphrase"
+    );
+  }
+  if (!repeatPrivatePassphraseInput) {
+    repeatPrivatePassphraseInput = screen.getByPlaceholderText(
+      "Confirm your Private Passphrase"
+    );
+  }
   fireEvent.change(privatePassphraseInput, {
     target: { value: testPassword }
   });
-  fireEvent.change(repeatPrivatePassphraseInput, {
-    target: { value: `mistyped ${testPassword}` }
-  });
-  await wait(() => screen.getByText(/passphrases do not match/i));
-  user.clear(repeatPrivatePassphraseInput);
+
+  if (mistypeFirst) {
+    fireEvent.change(repeatPrivatePassphraseInput, {
+      target: { value: `mistyped ${testPassword}` }
+    });
+    await wait(() => screen.getByText(/passphrases do not match/i));
+    user.clear(repeatPrivatePassphraseInput);
+  }
   fireEvent.change(repeatPrivatePassphraseInput, {
     target: { value: testPassword }
   });
@@ -155,13 +166,10 @@ const firePasteEvent = (combobox, text) => {
   fireEvent(combobox, pasteEvent);
 };
 
-const fillSeedWordEntryUsingSpaceKey = (combobox, word) => {
-  user.click(combobox);
-  user.type(combobox, word + " ");
-};
-const clearSeedWordEntryUsing = (combobox) => {
+const fillSeedWordEntryUsingEnterKey = (combobox, word) => {
   user.click(combobox);
-  fireEvent.keyDown(combobox, { key: "backspace", keyCode: 8 });
+  user.type(combobox, word);
+  fireEvent.keyDown(combobox, { key: "Enter", code: "Enter", charCode: 13 });
 };
 
 test("test copy seed view", async () => {
@@ -314,7 +322,7 @@ test("test typing a valid seed word on existing seed view", async () => {
   const comboboxArray = screen.getAllByRole("combobox");
   expect(comboboxArray.length).toBe(testSeedArray.length);
 
-  fillSeedWordEntryUsingSpaceKey(comboboxArray[0], testSeedArray[0]);
+  fillSeedWordEntryUsingEnterKey(comboboxArray[0], testSeedArray[0]);
   expect(mockDecodeSeed).toHaveBeenCalled();
   await wait(() =>
     expect(screen.getByText("1.").parentNode.className).toMatch(/populated/)
@@ -388,7 +396,17 @@ test("pasting valid seed words on existing seed view and successfully create wal
       /please make sure you also have a physical, written down copy of your seed./i
     )
   );
-  await testPrivatePassphraseInputs();
+  const privatePassphraseInput = screen.getByPlaceholderText(
+    "Write your Private Passphrase"
+  );
+  const repeatPrivatePassphraseInput = screen.getByPlaceholderText(
+    "Confirm your Private Passphrase"
+  );
+  await testPrivatePassphraseInputs(
+    privatePassphraseInput,
+    repeatPrivatePassphraseInput,
+    true
+  );
 
   user.click(screen.getByText(/create wallet/i));
   expect(mockCreateWallet).toHaveBeenCalled();
@@ -398,7 +416,7 @@ test("pasting valid seed words on existing seed view and successfully create wal
   );
 });
 
-test("create wallet button must be disabled if any of the inputs is invalid", async () => {
+test("check passphrase errors on restore view", async () => {
   mockDecodeSeed = wlActions.decodeSeed = jest.fn(() => () =>
     Promise.resolve({
       decodedSeed: testSeedArray
@@ -409,76 +427,65 @@ test("create wallet button must be disabled if any of the inputs is invalid", as
   );
   await goToExistingSeedView();
 
-  firePasteEvent(screen.getAllByRole("combobox")[0], testSeedMnemonic);
-
-  await wait(() =>
-    screen.getByText(
-      /please make sure you also have a physical, written down copy of your seed./i
-    )
-  );
-  await testPrivatePassphraseInputs();
-  expect(screen.getByText(/create wallet/i).disabled).toBe(false);
-
   const privatePassphraseInput = screen.getByPlaceholderText(
     "Write your Private Passphrase"
   );
   const repeatPrivatePassphraseInput = screen.getByPlaceholderText(
     "Confirm your Private Passphrase"
   );
+  await testPrivatePassphraseInputs(
+    privatePassphraseInput,
+    repeatPrivatePassphraseInput
+  );
 
-  // differentiate passphrases
+  // different passphrases
   user.type(repeatPrivatePassphraseInput, "plus-string");
-  await wait(() => screen.getByText(/passphrases do not match/i));
-  expect(screen.getByText(/create wallet/i).disabled).toBe(true);
-  // fix, button should be enabled
-  user.clear(privatePassphraseInput);
-  user.clear(repeatPrivatePassphraseInput);
-  await testPrivatePassphraseInputs();
-  expect(screen.getByText(/create wallet/i).disabled).toBe(false);
+  screen.getByText("*Passphrases do not match");
 
   // clear passphrases
   user.clear(privatePassphraseInput);
   user.clear(repeatPrivatePassphraseInput);
-  await wait(() => screen.getByText(/please enter your private passphrase/i));
-  expect(screen.getByText(/create wallet/i).disabled).toBe(true);
-
-  // fix, button should be enabled
-  user.clear(privatePassphraseInput);
-  user.clear(repeatPrivatePassphraseInput);
-  await testPrivatePassphraseInputs();
-  expect(screen.getByText(/create wallet/i).disabled).toBe(false);
-
-  // clear the first seed input, button should be disabled
-  mockDecodeSeed = wlActions.decodeSeed = jest.fn(() => () =>
-    Promise.reject({})
-  );
-  const comboboxArray = screen.getAllByRole("combobox");
-  clearSeedWordEntryUsing(comboboxArray[0]);
-  await wait(() =>
-    expect(screen.getByText("1.").parentNode.className).toMatch(/restore/)
-  );
-  expect(screen.getByText(/create wallet/i).disabled).toBe(true);
+  screen.getByText("*Please enter your private passphrase");
+});
 
-  // fix, button should be enabled
+test("create wallet button must be disabled if any of the inputs are invalid", async () => {
   mockDecodeSeed = wlActions.decodeSeed = jest.fn(() => () =>
     Promise.resolve({
       decodedSeed: testSeedArray
     })
   );
-  fillSeedWordEntryUsingSpaceKey(comboboxArray[0], testSeedArray[0]);
+  mockCreateWalletRequest = wlActions.createWalletRequest = jest.fn(() => () =>
+    Promise.resolve(true)
+  );
+  await goToExistingSeedView();
+
+  const comboboxArray = screen.getAllByRole("combobox");
+  firePasteEvent(comboboxArray[0], testSeedMnemonic);
+
   await wait(() =>
-    expect(screen.getByText("1.").parentNode.className).toMatch(/populated/)
+    screen.getByText(
+      "*Please make sure you also have a physical, written down copy of your seed."
+    )
+  );
+  const privatePassphraseInput = screen.getByPlaceholderText(
+    "Write your Private Passphrase"
   );
-  expect(screen.getByText(/create wallet/i)).not.toHaveAttribute("disabled");
+  const repeatPrivatePassphraseInput = screen.getByPlaceholderText(
+    "Confirm your Private Passphrase"
+  );
+  const createWallet = screen.getByText("Create Wallet");
+  await testPrivatePassphraseInputs(
+    privatePassphraseInput,
+    repeatPrivatePassphraseInput
+  );
+  expect(createWallet.disabled).toBe(false);
 
   // enter invalid seed word into the first input, button should be disabled
   mockDecodeSeed = wlActions.decodeSeed = jest.fn(() => () =>
     Promise.reject({})
   );
-  fillSeedWordEntryUsingSpaceKey(comboboxArray[0], testSeedArray[1]);
-  await wait(() =>
-    expect(screen.getByText(/create wallet/i)).toHaveAttribute("disabled")
-  );
+  fillSeedWordEntryUsingEnterKey(comboboxArray[0], testSeedArray[1]);
+  await wait(() => expect(createWallet).toHaveAttribute("disabled"));
 
   // fix, button should be enabled
   mockDecodeSeed = wlActions.decodeSeed = jest.fn(() => () =>
@@ -486,13 +493,11 @@ test("create wallet button must be disabled if any of the inputs is invalid", as
       decodedSeed: testSeedArray
     })
   );
-  fillSeedWordEntryUsingSpaceKey(comboboxArray[0], testSeedArray[0]);
-  await wait(() =>
-    expect(screen.getByText(/create wallet/i)).not.toHaveAttribute("disabled")
-  );
-});
+  fillSeedWordEntryUsingEnterKey(comboboxArray[0], testSeedArray[0]);
+  await wait(() => expect(createWallet).not.toHaveAttribute("disabled"));
+}, 30000);
 
-test("test POSITION_ERROR handling on restore view", async () => {
+test("test POSITION_ERROR handling on restore view (missing words)", async () => {
   await goToExistingSeedView();
 
   // reject with an empty error object
@@ -500,9 +505,9 @@ test("test POSITION_ERROR handling on restore view", async () => {
     Promise.reject({})
   );
   const comboboxArray = screen.getAllByRole("combobox");
-  fillSeedWordEntryUsingSpaceKey(comboboxArray[0], testSeedArray[0]);
+  fillSeedWordEntryUsingEnterKey(comboboxArray[0], testSeedArray[0]);
   expect(screen.getByText("1.").parentNode.className).toMatch(/populated/);
-  fillSeedWordEntryUsingSpaceKey(comboboxArray[1], testSeedArray[1]);
+  fillSeedWordEntryUsingEnterKey(comboboxArray[1], testSeedArray[1]);
   expect(screen.getByText("2.").parentNode.className).toMatch(/populated/);
 
   mockDecodeSeed = wlActions.decodeSeed = jest.fn(() => () =>
@@ -510,29 +515,43 @@ test("test POSITION_ERROR handling on restore view", async () => {
       toString: () => `is ${POSITION_ERROR} 2, check for missing words`
     })
   );
-  fillSeedWordEntryUsingSpaceKey(comboboxArray[2], testSeedArray[2]);
+  fillSeedWordEntryUsingEnterKey(comboboxArray[2], testSeedArray[2]);
   await wait(() =>
     expect(screen.getByText("3.").parentNode.className).toMatch(/error/)
   );
+}, 30000);
+
+test("test POSITION_ERROR handling on restore view (mismatch error)", async () => {
+  await goToExistingSeedView();
+
+  // reject with an empty error object
+  mockDecodeSeed = wlActions.decodeSeed = jest.fn(() => () =>
+    Promise.reject({})
+  );
+  const comboboxArray = screen.getAllByRole("combobox");
+  fillSeedWordEntryUsingEnterKey(comboboxArray[0], testSeedArray[0]);
+  expect(screen.getByText("1.").parentNode.className).toMatch(/populated/);
+  fillSeedWordEntryUsingEnterKey(comboboxArray[1], testSeedArray[1]);
+  expect(screen.getByText("2.").parentNode.className).toMatch(/populated/);
 
   mockDecodeSeed = wlActions.decodeSeed = jest.fn(() => () =>
     Promise.reject({ details: MISMATCH_ERROR })
   );
-  fillSeedWordEntryUsingSpaceKey(comboboxArray[4], testSeedArray[4]);
+  fillSeedWordEntryUsingEnterKey(comboboxArray[4], testSeedArray[4]);
   await wait(() =>
     expect(screen.getByText("5.").parentNode.className).toMatch(/populated/)
   );
 
   // if entered the same word, the decodeSeed should not be called
   mockDecodeSeed.mockClear();
-  fillSeedWordEntryUsingSpaceKey(comboboxArray[4], testSeedArray[4]);
+  fillSeedWordEntryUsingEnterKey(comboboxArray[4], testSeedArray[4]);
   expect(mockDecodeSeed).not.toHaveBeenCalled();
 
-  fillSeedWordEntryUsingSpaceKey(comboboxArray[5], testSeedArray[5]);
+  fillSeedWordEntryUsingEnterKey(comboboxArray[5], testSeedArray[5]);
   await wait(() =>
     expect(screen.getByText("6.").parentNode.className).toMatch(/populated/)
   );
-});
+}, 30000);
 
 test("test invalid POSITION_ERROR msg format handling on restore view", async () => {
   await goToExistingSeedView();
@@ -543,13 +562,13 @@ test("test invalid POSITION_ERROR msg format handling on restore view", async ()
     })
   );
   const comboboxArray = screen.getAllByRole("combobox");
-  fillSeedWordEntryUsingSpaceKey(comboboxArray[0], testSeedArray[0]);
-  fillSeedWordEntryUsingSpaceKey(comboboxArray[1], testSeedArray[1]);
-  fillSeedWordEntryUsingSpaceKey(comboboxArray[3], testSeedArray[3]);
+  fillSeedWordEntryUsingEnterKey(comboboxArray[0], testSeedArray[0]);
+  fillSeedWordEntryUsingEnterKey(comboboxArray[1], testSeedArray[1]);
+  fillSeedWordEntryUsingEnterKey(comboboxArray[3], testSeedArray[3]);
   await wait(() =>
     expect(screen.getByText("4.").parentNode.className).toMatch(/populated/)
   );
-});
+}, 30000);
 
 test("test hex input tab on restore view", async () => {
   await goToExistingSeedView();
@@ -652,20 +671,25 @@ test("test hex input tab on restore view", async () => {
   expect(hexInput.value).toMatch("");
 });
 
-test("press space button on seed combobox", async () => {
+test("space button should be disabled on seed combobox", async () => {
   await goToExistingSeedView();
 
   const combobox = screen.getAllByRole("combobox")[0];
   user.click(combobox);
   user.type(combobox, testSeedArray[0].charAt(0));
-  expect(screen.getByText(testSeedArray[0].charAt(0))).toBeInTheDocument();
+  expect(combobox.value).toMatch(testSeedArray[0].charAt(0));
   user.type(combobox, " ");
-  expect(
-    screen.queryByText(testSeedArray[0].charAt(0))
-  ).not.toBeInTheDocument();
-  expect(screen.getByText(testSeedArray[0])).toBeInTheDocument();
+  expect(combobox.value).toMatch(testSeedArray[0].charAt(0));
 });
 
+const getComboboxByName = (name) => {
+  const regex = new RegExp("singleValue", "g");
+  const options = screen
+    .getAllByText(name)
+    .filter((option) => option.className.match(regex));
+  return options[0];
+};
+
 test("middle mouse button down and paste on seed combobox", async () => {
   await goToExistingSeedView();
 
@@ -673,7 +697,7 @@ test("middle mouse button down and paste on seed combobox", async () => {
   fireEvent.mouseDown(combobox, { which: 2 });
   await wait(() => expect(mockClipboardReadText).toHaveBeenCalled());
   for (let i = 0; i < testSeedArray.length; i++) {
-    expect(screen.getByText(testSeedArray[i])).toBeInTheDocument();
+    expect(getComboboxByName(testSeedArray[i])).toBeInTheDocument();
   }
 });
 
diff --git a/test/unit/components/views/GetStaredPage/GetStartedPage.spec.js b/test/unit/components/views/GetStaredPage/GetStartedPage.spec.js
index 43e194980f..7d0db7afaa 100644
--- a/test/unit/components/views/GetStaredPage/GetStartedPage.spec.js
+++ b/test/unit/components/views/GetStaredPage/GetStartedPage.spec.js
@@ -1,5 +1,5 @@
 import GetStartedPage from "components/views/GetStartedPage/GetStartedPage";
-import { DEFAULT_LIGHT_THEME_NAME, DEFAULT_DARK_THEME_NAME } from "pi-ui";
+import { DEFAULT_LIGHT_THEME_NAME } from "pi-ui";
 import { render } from "test-utils.js";
 import user from "@testing-library/user-event";
 import { screen, wait } from "@testing-library/react";
@@ -177,36 +177,18 @@ test("render empty wallet chooser view and click-on&test release notes", async (
   await wait(() => screen.getByText(/welcome to decrediton wallet/i));
 });
 
-test("click on settings link", async () => {
+test("click on settings link and go back", async () => {
   render(<GetStartedPage />);
   await wait(() => screen.getByText(/welcome to decrediton wallet/i));
 
   user.click(screen.getByText(/settings/i));
   await wait(() => screen.getByText(/connectivity/i));
 
-  user.click(screen.getByText(/save/i));
-  expect(mockGetGlobalCfg).toHaveBeenCalled();
-
   // go back
-  user.click(screen.getByText(/go back/i).nextElementSibling);
+  user.click(screen.getByText(/go back/i));
   await wait(() => screen.getByText(/welcome to decrediton wallet/i));
 });
 
-test("click on settings link and change theme", async () => {
-  render(<GetStartedPage />);
-  await wait(() => screen.getByText(/welcome to decrediton wallet/i));
-
-  user.click(screen.getByText(/settings/i));
-  await wait(() => screen.getByText(/connectivity/i));
-
-  mockGetGlobalCfg.mockReturnValueOnce({
-    get: () => DEFAULT_DARK_THEME_NAME,
-    set: () => {}
-  });
-  user.click(screen.getByText(/save/i));
-  expect(mockGetGlobalCfg).toHaveBeenCalled();
-});
-
 test("click on logs view", async () => {
   render(<GetStartedPage />);
   await wait(() => screen.getByText(/welcome to decrediton wallet/i));
diff --git a/test/unit/components/views/GetStaredPage/LanguageSelectPage.spec.js b/test/unit/components/views/GetStaredPage/LanguageSelectPage.spec.js
index f21d9b3afd..9215dde9fa 100644
--- a/test/unit/components/views/GetStaredPage/LanguageSelectPage.spec.js
+++ b/test/unit/components/views/GetStaredPage/LanguageSelectPage.spec.js
@@ -6,9 +6,13 @@ import * as sel from "selectors";
 import * as da from "actions/DaemonActions";
 
 const testLocalesArray = [
-  { description: "first-test-language" },
-  { description: "second-test-language" },
-  { description: "third-test-language" }
+  { key: "key1", description: "desc1", language: "lang1" },
+  {
+    key: "key2",
+    description: "desc2",
+    language: "lang2"
+  },
+  { key: "key3", description: "desc3", language: "lang3" }
 ];
 const selectors = sel;
 const daemonActions = da;
@@ -19,6 +23,7 @@ let mockIsTestNet;
 
 beforeEach(() => {
   mockSortedLocales = selectors.sortedLocales = jest.fn(() => testLocalesArray);
+  selectors.defaultLocaleName = jest.fn(() => testLocalesArray[0].key);
   mockSelectLanguage = daemonActions.selectLanguage = jest.fn(() => () => {});
   mockIsTestNet = selectors.isTestNet = jest.fn(() => false);
   selectors.stakeTransactions = jest.fn(() => []);
@@ -65,9 +70,11 @@ test("render language select page", () => {
   }
 
   user.click(screen.getByText(/continue/i));
-  expect(mockSelectLanguage).toHaveBeenCalledWith(
-    testLocalesArray[testLocalesArray.length - 1]
-  );
+  expect(mockSelectLanguage).toHaveBeenCalledWith({
+    ...testLocalesArray[testLocalesArray.length - 1],
+    label: testLocalesArray[testLocalesArray.length - 1].description,
+    value: testLocalesArray[testLocalesArray.length - 1].key
+  });
 });
 
 test("render language select page in testnet mode", () => {
diff --git a/test/unit/components/views/SettingsPage/SettingsPage.spec.js b/test/unit/components/views/SettingsPage/SettingsPage.spec.js
index 764ad77b78..01ef687d59 100644
--- a/test/unit/components/views/SettingsPage/SettingsPage.spec.js
+++ b/test/unit/components/views/SettingsPage/SettingsPage.spec.js
@@ -1,7 +1,7 @@
 import SettingsPage from "components/views/SettingsPage";
 import { render } from "test-utils.js";
 import user from "@testing-library/user-event";
-import { screen } from "@testing-library/react";
+import { screen, fireEvent, wait } from "@testing-library/react";
 
 import * as sel from "selectors";
 import * as ca from "actions/ControlActions";
@@ -55,9 +55,11 @@ const testDefaultAllowedExternalRequests = [
   EXTERNALREQUEST_NETWORK_STATUS,
   EXTERNALREQUEST_POLITEIA
 ];
+const testDefaultUIAnimationsLabel = "Enabled";
+const testUIAnimationsLabel = "Disabled";
 
 const testCurrentSettings = {
-  locale: testDefaultLocale,
+  locale: testDefaultLocale.key,
   theme: testDefaultTheme,
   network: testDefaultNetwork.toLowerCase(),
   needNetworkReset: false,
@@ -69,6 +71,7 @@ const testCurrentSettings = {
   currencyDisplay: testDefaultCurrencyDisplay,
   gapLimit: testDefaultGapLimit,
   timezone: testDefaultTimezone,
+  uiAnimations: testDefaultUIAnimationsLabel,
   allowedExternalRequests: testDefaultAllowedExternalRequests
 };
 const testSettings = {
@@ -82,7 +85,6 @@ let mockIsMainNet;
 let mockWalletService;
 let mockTicketBuyerService;
 let mockSaveSettings;
-let mockGetGlobalCfg;
 let mockChangePassphrase;
 let mockIsChangePassPhraseDisabled;
 let mockIsTicketAutoBuyerEnabled;
@@ -98,7 +100,7 @@ const settingsActions = sa;
 const vspActions = vspa;
 
 beforeEach(() => {
-  mockGetGlobalCfg = wallet.getGlobalCfg = jest.fn(() => {
+  wallet.getGlobalCfg = jest.fn(() => {
     return {
       get: () => DEFAULT_LIGHT_THEME_NAME,
       set: () => {}
@@ -277,65 +279,66 @@ test("test cli tooltips", () => {
 const getOptionByNameAndType = (name, type) => {
   const regex = new RegExp(type, "g");
   const options = screen
-    .getAllByRole("option", { name: name })
+    .getAllByText(name)
     .filter((option) => option.className.match(regex));
   return options[0];
 };
 
-const testConfirmModal = (
-  submitButtonText,
+const testConfirmModal = async (
+  changeFn,
   confirmHeaderText,
   confirmContent,
   confirmButtonLabel = "Confirm"
 ) => {
-  const submitButton = screen.getByText(submitButtonText);
-  // submit and cancel
-  user.click(submitButton);
-  expect(screen.getByText(confirmHeaderText)).toBeInTheDocument();
+  // wait for the confirm modal and cancel
+  await wait(() => screen.getByText(confirmHeaderText));
   if (confirmContent) {
     expect(screen.getByText(confirmContent)).toBeInTheDocument();
   }
   user.click(screen.getByText("Cancel"));
   expect(screen.queryByText(confirmHeaderText)).not.toBeInTheDocument();
-  // submit and confirm
-  user.click(submitButton);
-  expect(screen.getByText(confirmHeaderText)).toBeInTheDocument();
-  user.click(screen.getByText(confirmButtonLabel));
+  // wait for the confirm modal and confirm
+  changeFn();
+  await wait(() => screen.getByText(confirmHeaderText));
+  user.click(screen.getByRole("button", { name: confirmButtonLabel }));
 };
 
-const testComboxBoxInput = (
+const testComboxBoxInput = async (
   labelName,
   oldValue,
   option,
   expectedChange,
-  needsConfirm
+  needsConfirm,
+  tabLabel = null
 ) => {
   render(<SettingsPage />, {
     initialState: {
       settings: testSettings
     }
   });
-  const saveButton = screen.getByText("Save");
-  expect(saveButton.disabled).toBe(true);
+  if (tabLabel) {
+    // go to the specified tab
+    user.click(screen.getAllByText(tabLabel)[0]);
+  }
   const inputControl = screen.getByLabelText(labelName);
-  const inputValueSpan = getOptionByNameAndType(oldValue, "value");
+  const inputValueSpan = getOptionByNameAndType(oldValue, "singleValue");
   expect(inputValueSpan.textContent).toMatch(oldValue);
-  user.click(inputControl.parentNode);
-  user.click(getOptionByNameAndType(option, "option"));
-
-  expect(screen.getByText("Save").disabled).toBe(false);
+  const changeFn = () => {
+    user.click(inputControl);
+    user.click(getOptionByNameAndType(option, "option"));
+  };
+  changeFn();
 
   if (needsConfirm) {
-    testConfirmModal("Save", "Reset required");
-  } else {
-    user.click(saveButton);
+    await testConfirmModal(changeFn, "Reset required");
   }
 
-  expect(mockSaveSettings).toHaveBeenCalledWith({
-    ...testCurrentSettings,
-    ...expectedChange
-  });
-  expect(mockGetGlobalCfg).toHaveBeenCalled();
+  await wait(() =>
+    expect(mockSaveSettings).toHaveBeenCalledWith({
+      ...testCurrentSettings,
+      ...expectedChange
+    })
+  );
 };
 
 test.each([
@@ -354,25 +357,36 @@ test.each([
     testDefaultLocaleLabel,
     testLocaleLabel,
     { locale: testLocale },
-    false
+    false,
+    "General"
   ],
   [
     "Displayed Units",
     testDefaultCurrencyDisplay,
     testCurrencyDisplay,
     { currencyDisplay: testCurrencyDisplay },
-    false
+    false,
+    "General"
   ],
   [
     "Tonality",
     testDefaultThemeLabel,
     testThemeLabel,
     { theme: testTheme },
-    false
+    false,
+    "General"
+  ],
+  [
+    "UI Animations",
+    testDefaultUIAnimationsLabel,
+    testUIAnimationsLabel,
+    { uiAnimations: false },
+    false,
+    "General"
   ]
 ])("change '%s' ComboBox from '%s' to '%s' expeced %s", testComboxBoxInput);
 
-const testTextFieldInput = (
+const testTextFieldInput = async (
   labelName,
   oldValue,
   newValue,
@@ -382,24 +396,27 @@ const testTextFieldInput = (
   render(<SettingsPage />, {
     initialState: { settings: testSettings }
   });
-  const saveButton = screen.getByText("Save");
-  expect(saveButton.disabled).toBe(true);
 
   const inputControl = screen.getByLabelText(labelName);
   expect(inputControl.value).toMatch(oldValue);
   user.clear(inputControl);
   user.type(inputControl, newValue);
+  // press enter
+  fireEvent.keyDown(inputControl, {
+    key: "enter",
+    keyCode: 13
+  });
 
-  expect(saveButton.disabled).toBe(false);
   if (needsConfirm) {
     testConfirmModal("Save", "Reset required");
-  } else {
-    user.click(saveButton);
   }
-  expect(mockSaveSettings).toHaveBeenCalledWith({
-    ...testCurrentSettings,
-    ...expectedChange
-  });
+
+  await wait(() =>
+    expect(mockSaveSettings).toHaveBeenCalledWith({
+      ...testCurrentSettings,
+      ...expectedChange
+    })
+  );
 };
 
 test.each([
@@ -425,8 +442,7 @@ const testRadioButtonGroupInput = (configKey, options, defaultValue) => {
       settings: testSettings
     }
   });
-  const saveButton = screen.getByText("Save");
-  expect(saveButton.disabled).toBe(true);
+  user.click(screen.getByText("General"));
 
   options.forEach((option) =>
     expect(screen.getByLabelText(option.label).checked).toBe(
@@ -445,8 +461,6 @@ const testRadioButtonGroupInput = (configKey, options, defaultValue) => {
     )
   );
 
-  expect(saveButton.disabled).toBe(false);
-  user.click(saveButton);
   const expectedChange = { ...testCurrentSettings };
   expectedChange[configKey] = otherOption.value;
   expect(mockSaveSettings).toHaveBeenCalledWith(expectedChange);
@@ -461,8 +475,6 @@ const testRadioButtonGroupInput = (configKey, options, defaultValue) => {
       option.value == defaultOption.value
     )
   );
-
-  expect(saveButton.disabled).toBe(true);
 };
 
 test.each([
@@ -482,21 +494,18 @@ const testCheckBoxInput = (label, configKey) => {
       settings: testSettings
     }
   });
+  user.click(screen.getByText("Privacy and Security"));
 
   const checkbox = screen.getByLabelText(label);
   const defaultCheckedValue = testDefaultAllowedExternalRequests.includes(
     configKey
   );
-  const saveButton = screen.getByText("Save");
 
   expect(checkbox.checked).toBe(defaultCheckedValue);
 
-  expect(saveButton.disabled).toBe(true);
   user.click(checkbox);
   expect(checkbox.checked).toBe(!defaultCheckedValue);
-  expect(saveButton.disabled).toBe(false);
 
-  user.click(saveButton);
   const expectedChange = { ...testCurrentSettings };
 
   if (defaultCheckedValue) {
@@ -550,7 +559,10 @@ test("test update private passphrase", () => {
       settings: testSettings
     }
   });
-  const updateButton = screen.getByLabelText("Update Private Passphrase");
+  user.click(screen.getByText("Privacy and Security"));
+  const updateButton = screen.getByRole("button", {
+    name: "Update Private Passphrase"
+  });
   const modalHeaderText = "Change your passphrase";
   // click and cancel
   user.click(updateButton);
@@ -622,7 +634,8 @@ test("update private passphrase is disabled", () => {
       settings: testSettings
     }
   });
+  user.click(screen.getByText("Privacy and Security"));
   expect(mockIsChangePassPhraseDisabled).toHaveBeenCalled();
-  user.click(screen.getByLabelText("Update Private Passphrase"));
+  user.click(screen.getByRole("button", { name: "Update Private Passphrase" }));
   expect(screen.queryByText("Change your passphrase")).not.toBeInTheDocument();
 });
diff --git a/test/unit/components/views/TransactionsPage/SendTab/SendTab.spec.js b/test/unit/components/views/TransactionsPage/SendTab/SendTab.spec.js
index fa507f837e..e0a8b676ec 100644
--- a/test/unit/components/views/TransactionsPage/SendTab/SendTab.spec.js
+++ b/test/unit/components/views/TransactionsPage/SendTab/SendTab.spec.js
@@ -173,7 +173,6 @@ test("show error when there is no walletService", () => {
 const getAmountInput = () => screen.getByLabelText("Amount");
 const queryAmountInput = () => screen.queryByLabelText("Amount");
 const getSendToInput = () => screen.getByLabelText("Send to");
-const querySendToInput = () => screen.queryByLabelText("Send to");
 const getSendAllButton = () =>
   screen.getByText("Send all funds from selected account").nextElementSibling;
 const getCancelSendAllButton = () =>
@@ -523,8 +522,7 @@ test("send funds to another account", async () => {
 
   user.type(getAmountInput(), `${validAmount}`);
   user.click(sendSelfButton);
-  expect(querySendToInput()).not.toBeInTheDocument();
-  user.click(screen.getByText(mockDefaultAccount.name));
+  user.click(screen.getAllByRole("combobox")[1]);
   selectors.nextAddressAccount = jest.fn(() => mockAccount2);
   selectors.publishTxResponse = jest.fn(() => "mocknewpublishtxresponse");
   user.click(screen.getByText(mockAccount2.name));
diff --git a/yarn.lock b/yarn.lock
index e5599dcfce..fe87bdc50f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3861,7 +3861,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.4, classnames@^2.2.5:
+classnames@^2.2.5:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
@@ -9773,7 +9773,7 @@ performance-now@^2.1.0:
 
 "pi-ui@https://github.com/decred/pi-ui":
   version "1.0.0"
-  resolved "https://github.com/decred/pi-ui#d531580971d6001db317cfd4ab6150dd009dfb64"
+  resolved "https://github.com/decred/pi-ui#94c66bab5963ee5456d617ae093b4abbb043e31a"
   dependencies:
     clamp-js-main "^0.11.5"
     lodash "^4.17.15"
@@ -10462,13 +10462,6 @@ react-infinite-scroller@^1.2.4:
   dependencies:
     prop-types "^15.5.8"
 
-react-input-autosize@^2.1.0:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
-  integrity sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==
-  dependencies:
-    prop-types "^15.5.8"
-
 react-intl-po@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-intl-po/-/react-intl-po-2.2.2.tgz#ca5b5d8cefe1a693b0c316cb5f6dd4caf8b0141c"
@@ -10614,15 +10607,6 @@ react-select-event@^5.3.0:
   dependencies:
     "@testing-library/dom" ">=7"
 
-react-select@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.0.0.tgz#7d3b78ad104db7a747a427375fd846c0f4a3cfe1"
-  integrity sha512-dgmCJIZO+cKOhIau5ZPcz8wWo/saBrb7bv7+/iejbAZSRi7bOvL4/d1vOr6VpXRiycz2BA4V2G+cpR5GB82SFw==
-  dependencies:
-    classnames "^2.2.4"
-    prop-types "^15.5.8"
-    react-input-autosize "^2.1.0"
-
 react-select@5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.2.1.tgz#416c25c6b79b94687702374e019c4f2ed9d159d6"