diff --git a/src/app/components/confirmStxTransactionComponent/index.tsx b/src/app/components/confirmStxTransactionComponent/index.tsx
index 7b23effcb..d23221af0 100644
--- a/src/app/components/confirmStxTransactionComponent/index.tsx
+++ b/src/app/components/confirmStxTransactionComponent/index.tsx
@@ -130,6 +130,7 @@ interface Props {
   title?: string;
   subTitle?: string;
   hasSignatures?: boolean;
+  feeOverride?: BigNumber;
 }
 
 function ConfirmStxTransactionComponent({
@@ -144,6 +145,7 @@ function ConfirmStxTransactionComponent({
   onCancelClick,
   skipModal = false,
   hasSignatures = false,
+  feeOverride,
 }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
   const { t: signatureRequestTranslate } = useTranslation('translation', {
@@ -255,6 +257,12 @@ function ConfirmStxTransactionComponent({
     setOpenTransactionSettingModal(false);
   };
 
+  useEffect(() => {
+    if (feeOverride) {
+      applyTxSettings({ fee: microstacksToStx(feeOverride).toString() });
+    }
+  }, [feeOverride]);
+
   const handleConnectAndConfirm = async () => {
     if (!selectedAccount) {
       console.error('No account selected');
diff --git a/src/app/components/inputScreen/index.tsx b/src/app/components/inputScreen/index.tsx
new file mode 100644
index 000000000..956106a5d
--- /dev/null
+++ b/src/app/components/inputScreen/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  flex: 1 1 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+const ButtonsContainer = styled.div`
+  margin: ${(props) => props.theme.spacing(12)}px 0;
+`;
+
+const InputsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+type InputScreenProps = {
+  inputs: React.ReactNode;
+  buttons: React.ReactNode;
+  header?: React.ReactNode;
+};
+
+function InputScreen({ inputs, buttons, header }: InputScreenProps) {
+  return (
+    <Container>
+      <div>
+        {header}
+        <InputsContainer>{inputs}</InputsContainer>
+      </div>
+      <ButtonsContainer>{buttons}</ButtonsContainer>
+    </Container>
+  );
+}
+
+export default InputScreen;
diff --git a/src/app/screens/confirmStxTransaction/index.tsx b/src/app/screens/confirmStxTransaction/index.tsx
index 24baf7560..38a09f93e 100644
--- a/src/app/screens/confirmStxTransaction/index.tsx
+++ b/src/app/screens/confirmStxTransaction/index.tsx
@@ -22,6 +22,7 @@ import {
   getStxFiatEquivalent,
   isMultiSig,
   microstacksToStx,
+  stxToMicrostacks,
 } from '@secretkeylabs/xverse-core';
 import { MultiSigSpendingCondition, deserializeTransaction } from '@stacks/transactions';
 import { useMutation } from '@tanstack/react-query';
@@ -38,7 +39,6 @@ const AlertContainer = styled.div((props) => ({
 
 function ConfirmStxTransaction() {
   const { t } = useTranslation('translation');
-  const [fee, setStateFee] = useState(new BigNumber(0));
   const [amount, setAmount] = useState(new BigNumber(0));
   const [fiatAmount, setFiatAmount] = useState(new BigNumber(0));
   const [total, setTotal] = useState(new BigNumber(0));
@@ -53,7 +53,18 @@ function ConfirmStxTransaction() {
   const { refetch } = useStxWalletData();
 
   const location = useLocation();
-  const { unsignedTx: stringHex, sponsored, isBrowserTx, tabId, requestToken } = location.state;
+  const {
+    unsignedTx: stringHex,
+    sponsored,
+    isBrowserTx,
+    tabId,
+    requestToken,
+    fee: stateFee,
+  } = location.state;
+  const [fee, setStateFee] = useState(
+    stateFee ? stxToMicrostacks(new BigNumber(stateFee)) : new BigNumber(0),
+  );
+
   const unsignedTx = useMemo(() => deserializeTransaction(stringHex), [stringHex]);
 
   // SignTransaction Params
@@ -123,7 +134,7 @@ function ConfirmStxTransaction() {
     }
 
     const txAmount = new BigNumber(txPayload.amount.toString(10));
-    const txFee = new BigNumber(unsignedTx.auth.spendingCondition.fee.toString());
+    const txFee = new BigNumber(fee.toString() ?? unsignedTx.auth.spendingCondition.fee.toString());
     const txTotal = amount.plus(fee);
     const txFiatAmount = getStxFiatEquivalent(
       amount,
@@ -137,7 +148,7 @@ function ConfirmStxTransaction() {
     const modifiedMemoString = txMemo.content.split('\u0000').join('');
 
     setAmount(txAmount);
-    setStateFee(txFee);
+    if (!fee) setStateFee(txFee);
     setFiatAmount(txFiatAmount);
     setTotal(txTotal);
     setFiatTotal(txFiatTotal);
@@ -194,6 +205,7 @@ function ConfirmStxTransaction() {
           recipientAddress: recipient,
           amountToSend: getAmount().toString(),
           stxMemo: memo,
+          fee: fee.toString(),
         },
       });
     }
@@ -214,6 +226,7 @@ function ConfirmStxTransaction() {
         isSponsored={sponsored}
         skipModal={isLedgerAccount(selectedAccount)}
         hasSignatures={hasSignatures}
+        feeOverride={fee}
       >
         <RecipientComponent
           address={recipient}
diff --git a/src/app/screens/ordinals/ordinalImage.tsx b/src/app/screens/ordinals/ordinalImage.tsx
index 434441900..2bbfaef2d 100644
--- a/src/app/screens/ordinals/ordinalImage.tsx
+++ b/src/app/screens/ordinals/ordinalImage.tsx
@@ -244,10 +244,13 @@ function OrdinalImage({
   if (contentType.includes('image')) {
     return renderImage(t('ORDINAL'), `${XVERSE_ORDIVIEW_URL(network.type)}/content/${ordinal.id}`);
   }
-  
+
   // if content type is undefined or "", we fall back to ordiview thumbnail
   if (!contentType) {
-    return renderImage(t('ORDINAL'), `${XVERSE_ORDIVIEW_URL(network.type)}/thumbnail/${ordinal.id}`);
+    return renderImage(
+      t('ORDINAL'),
+      `${XVERSE_ORDIVIEW_URL(network.type)}/thumbnail/${ordinal.id}`,
+    );
   }
 
   if (textContent?.includes('brc-721e')) {
diff --git a/src/app/screens/sendBtc/recipientSelector.tsx b/src/app/screens/sendBtc/btcRecipientSelector.tsx
similarity index 52%
rename from src/app/screens/sendBtc/recipientSelector.tsx
rename to src/app/screens/sendBtc/btcRecipientSelector.tsx
index fe59a953f..293e7ba42 100644
--- a/src/app/screens/sendBtc/recipientSelector.tsx
+++ b/src/app/screens/sendBtc/btcRecipientSelector.tsx
@@ -1,24 +1,12 @@
+import InputScreen from '@components/inputScreen';
 import useWalletSelector from '@hooks/useWalletSelector';
 import { validateBtcAddress } from '@secretkeylabs/xverse-core';
 import Button from '@ui-library/button';
 import Input from '@ui-library/input';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
 
-const Container = styled.div`
-  flex: 1 1 100%;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-`;
-
-const Buttons = styled.div`
-  margin: ${(props) => props.theme.spacing(12)}px 0;
-`;
-
-type Props = {
+type BtcRecipientScreenProps = {
   recipientAddress: string;
   setRecipientAddress: (address: string) => void;
   onNext: () => void;
@@ -26,14 +14,18 @@ type Props = {
   header?: React.ReactNode;
 };
 
-// TODO: this could be extracted into a component for reuse
-function RecipientSelector({
+type InputFeedback = {
+  variant: 'danger';
+  message: string;
+}
+
+function BtcRecipientScreen({
   recipientAddress,
   setRecipientAddress,
   onNext,
   isLoading,
   header,
-}: Props) {
+}: BtcRecipientScreenProps) {
   const { t } = useTranslation('translation', { keyPrefix: 'SEND' });
   const { network } = useWalletSelector();
   const [addressIsValid, setAddressIsValid] = useState(true);
@@ -51,41 +43,39 @@ function RecipientSelector({
     setAddressIsValid(true);
   };
 
-  const inputFeedback = useMemo(() => {
+  const inputFeedback: InputFeedback[] = useMemo(() => {
     if (addressIsValid) {
       return [];
     }
     return [
       {
-        variant: 'danger' as const,
+        variant: 'danger',
         message: t('ERRORS.ADDRESS_INVALID'),
       },
     ];
-  }, [addressIsValid]);
+  }, [addressIsValid, t]);
+
+  const inputElement = (
+    <Input
+      title={t('RECIPIENT')}
+      placeholder={t('BTC.RECIPIENT_PLACEHOLDER')}
+      value={recipientAddress}
+      onChange={handleAddressChange}
+      variant={addressIsValid ? 'default' : 'danger'}
+      feedback={inputFeedback}
+    />
+  );
 
-  return (
-    <Container>
-      <div>
-        {header}
-        <Input
-          title={t('RECIPIENT')}
-          placeholder={t('BTC.RECIPIENT_PLACEHOLDER')}
-          value={recipientAddress}
-          onChange={handleAddressChange}
-          variant={addressIsValid ? 'default' : 'danger'}
-          feedback={inputFeedback}
-        />
-      </div>
-      <Buttons>
-        <Button
-          title={t('NEXT')}
-          onClick={handleNext}
-          disabled={!recipientAddress || !addressIsValid}
-          loading={isLoading}
-        />
-      </Buttons>
-    </Container>
+  const buttonElement = (
+    <Button
+      title={t('NEXT')}
+      onClick={handleNext}
+      disabled={!recipientAddress || !addressIsValid}
+      loading={isLoading}
+    />
   );
+
+  return <InputScreen inputs={inputElement} buttons={buttonElement} header={header} />;
 }
 
-export default RecipientSelector;
+export default BtcRecipientScreen;
diff --git a/src/app/screens/sendBtc/stepDisplay.tsx b/src/app/screens/sendBtc/stepDisplay.tsx
index bf7747055..61f579e72 100644
--- a/src/app/screens/sendBtc/stepDisplay.tsx
+++ b/src/app/screens/sendBtc/stepDisplay.tsx
@@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import SendLayout from '../../layouts/sendLayout';
 import AmountSelector from './amountSelector';
+import BtcRecipientSelector from './btcRecipientSelector';
 import { TransactionSummary } from './helpers';
-import RecipientSelector from './recipientSelector';
 import { Step, getNextStep } from './steps';
 
 const TitleContainer = styled.div`
@@ -83,7 +83,7 @@ function StepDisplay({
       return (
         <SendLayout selectedBottomTab="dashboard" onClickBack={onBack}>
           <Container>
-            <RecipientSelector
+            <BtcRecipientSelector
               header={header}
               recipientAddress={recipientAddress}
               setRecipientAddress={setRecipientAddress}
diff --git a/src/app/screens/sendStx/index.tsx b/src/app/screens/sendStx/index.tsx
index adff7e75a..12c0d87ab 100644
--- a/src/app/screens/sendStx/index.tsx
+++ b/src/app/screens/sendStx/index.tsx
@@ -1,162 +1,145 @@
-import SendForm from '@components/sendForm';
-import BottomBar from '@components/tabBar';
-import useStxPendingTxData from '@hooks/queries/useStxPendingTxData';
-import useNetworkSelector from '@hooks/useNetwork';
-import useWalletSelector from '@hooks/useWalletSelector';
-import {
-  applyFeeMultiplier,
-  buf2hex,
-  generateUnsignedStxTokenTransferTransaction,
-  microstacksToStx,
-  StacksTransaction,
-  stxToMicrostacks,
-  validateStxAddress,
-} from '@secretkeylabs/xverse-core';
-import { useMutation } from '@tanstack/react-query';
-import { replaceCommaByDot } from '@utils/helper';
+import TokenImage from '@components/tokenImage';
+
+import { microstacksToStx, stxToMicrostacks } from '@secretkeylabs/xverse-core';
+import { isInOptions } from '@utils/helper';
 import BigNumber from 'bignumber.js';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
-import TopRow from '../../components/topRow';
-
-function SendStxScreen() {
-  const { t } = useTranslation('translation', { keyPrefix: 'SEND' });
-  const navigate = useNavigate();
-  const { stxAddress, stxAvailableBalance, stxPublicKey, network, feeMultipliers } =
-    useWalletSelector();
-  const [amountError, setAmountError] = useState('');
-  const [addressError, setAddressError] = useState('');
-  const [memoError, setMemoError] = useState('');
-  const selectedNetwork = useNetworkSelector();
-  const { data: stxPendingTxData } = useStxPendingTxData();
-  const location = useLocation();
-  let recipientAddress: string | undefined;
-  let amountToSend: string | undefined;
-  let stxMemo: string | undefined;
+import styled from 'styled-components';
+import SendLayout from 'app/layouts/sendLayout';
+import { Step, getNextStep, getPreviousStep } from './stepResolver';
+import Step1SelectRecipientAndMemo from './steps/Step1SelectRecipient';
+import Step2SelectAmount from './steps/Step2SelectAmount';
+import Step3Confirm from './steps/Step3Confirm';
 
-  if (location.state) {
-    recipientAddress = location.state.recipientAddress;
-    amountToSend = location.state.amountToSend;
-    stxMemo = location.state.stxMemo;
-  }
+const Container = styled.div`
+  display: flex;
+  flex: 1 1 100%;
+  min-height: 370px;
+`;
 
-  const { isLoading, data, mutate } = useMutation<
-    StacksTransaction,
-    Error,
-    { associatedAddress: string; amount: string; memo?: string }
-  >({
-    mutationFn: async ({ associatedAddress, amount, memo }) => {
-      const unsignedSendStxTx: StacksTransaction =
-        await generateUnsignedStxTokenTransferTransaction(
-          associatedAddress,
-          stxToMicrostacks(new BigNumber(amount)).toString(),
-          memo!,
-          stxPendingTxData?.pendingTransactions ?? [],
-          stxPublicKey,
-          selectedNetwork,
-        );
-      applyFeeMultiplier(unsignedSendStxTx, feeMultipliers);
-      return unsignedSendStxTx;
-    },
-  });
+const TitleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 0 0;
+`;
 
-  useEffect(() => {
-    if (data) {
-      navigate('/confirm-stx-tx', {
-        state: {
-          unsignedTx: buf2hex(data.serialize()),
-        },
-      });
-    }
-  }, [data]);
+const Title = styled.div`
+  ${(props) => props.theme.typography.headline_xs}
+  margin-top: ${(props) => props.theme.spacing(6)}px;
+  margin-bottom: ${(props) => props.theme.spacing(12)}px;
+`;
 
-  const handleBackButtonClick = () => {
-    // redirect to homepage to avoid looping back to confrim screen
-    navigate('/');
-  };
-
-  function validateFields(associatedAddress: string, amount: string, memo: string): boolean {
-    if (!associatedAddress) {
-      setAddressError(t('ERRORS.ADDRESS_REQUIRED'));
-      return false;
-    }
+function SendStxScreen() {
+  const isInOption = isInOptions();
+  const navigate = useNavigate();
+  const { t } = useTranslation('translation');
 
-    if (!amount) {
-      setAmountError(t('ERRORS.AMOUNT_REQUIRED'));
-      return false;
-    }
-    if (!validateStxAddress({ stxAddress: associatedAddress, network: network.type })) {
-      setAddressError(t('ERRORS.ADDRESS_INVALID'));
-      return false;
-    }
+  const location = useLocation();
+  const {
+    recipientAddress: stateAddress,
+    amountToSend,
+    stxMemo,
+    fee: previousFee,
+  } = location.state || {};
 
-    if (associatedAddress === stxAddress) {
-      setAddressError(t('ERRORS.SEND_TO_SELF'));
-      return false;
-    }
+  const [currentStep, setCurrentStep] = useState<Step>(
+    stateAddress ? Step.SelectAmount : Step.SelectRecipient,
+  );
 
-    let parsedAmount = new BigNumber(0);
-    try {
-      if (!Number.isNaN(Number(amount))) {
-        parsedAmount = new BigNumber(amount);
-      } else {
-        setAmountError(t('ERRORS.INVALID_AMOUNT'));
-        return false;
-      }
-    } catch (e) {
-      setAmountError(t('ERRORS.INVALID_AMOUNT'));
-      return false;
-    }
+  // Shared states
+  const [isLoading, setIsLoading] = useState(false);
 
-    if (stxToMicrostacks(parsedAmount).lt(1)) {
-      setAmountError(t('ERRORS.MINIMUM_AMOUNT'));
-      return false;
-    }
+  // Step 1 states
+  const [recipientAddress, setRecipientAddress] = useState(stateAddress ?? '');
+  // Will be used in the future when the summary screen is refactored
+  const [, setRecipientDomain] = useState('');
+  const [memo, setMemo] = useState(stxMemo ?? '');
 
-    if (stxToMicrostacks(parsedAmount).gt(stxAvailableBalance)) {
-      setAmountError(t('ERRORS.INSUFFICIENT_BALANCE'));
-      return false;
-    }
+  // Step 2 states
+  const [amount, setAmount] = useState(
+    amountToSend ? stxToMicrostacks(new BigNumber(amountToSend)).toString() : '0',
+  );
+  const [sendMax, setSendMax] = useState(false);
+  const [feeRate, setFeeRate] = useState(
+    previousFee ? microstacksToStx(new BigNumber(previousFee)).toString() : '',
+  );
+  const [unsignedSendStxTx, setUnsignedSendStxTx] = useState('');
 
-    if (memo) {
-      if (Buffer.from(memo).byteLength >= 34) {
-        setMemoError(t('ERRORS.MEMO_LENGTH'));
-        return false;
-      }
+  const handleCancel = () => {
+    if (isInOption) {
+      window.close();
+      return;
     }
-    return true;
-  }
+    navigate('/');
+  };
 
-  const onPressSendSTX = async (associatedAddress: string, amount: string, memo?: string) => {
-    const modifyAmount = replaceCommaByDot(amount);
-    const addMemo = memo ?? '';
-    if (validateFields(associatedAddress.trim(), modifyAmount, memo!)) {
-      setAddressError('');
-      setMemoError('');
-      setAmountError('');
-      mutate({ amount, associatedAddress, memo: addMemo });
+  const handleBackButtonClick = () => {
+    if (currentStep > 0) {
+      setCurrentStep(getPreviousStep(currentStep, true));
+    } else {
+      handleCancel();
     }
   };
 
-  return (
-    <>
-      <TopRow title={t('SEND')} onClick={handleBackButtonClick} />
-      <SendForm
-        processing={isLoading}
-        currencyType="STX"
-        amountError={amountError}
-        recepientError={addressError}
-        memoError={memoError}
-        balance={Number(microstacksToStx(new BigNumber(stxAvailableBalance)))}
-        onPressSend={onPressSendSTX}
-        recipient={recipientAddress!}
-        amountToSend={amountToSend!}
-        stxMemo={stxMemo!}
-      />
-      <BottomBar tab="dashboard" />
-    </>
+  const header = (
+    <TitleContainer>
+      <TokenImage token="STX" />
+      <Title>{t('SEND.SEND')}</Title>
+    </TitleContainer>
   );
+
+  switch (currentStep) {
+    case Step.SelectRecipient:
+      return (
+        <SendLayout selectedBottomTab="dashboard" onClickBack={handleBackButtonClick}>
+          <Container>
+            <Step1SelectRecipientAndMemo
+              header={header}
+              recipientAddress={recipientAddress}
+              setRecipientAddress={setRecipientAddress}
+              setRecipientDomain={setRecipientDomain}
+              memo={memo}
+              setMemo={setMemo}
+              onNext={() => setCurrentStep(getNextStep(Step.SelectRecipient, true))}
+              isLoading={isLoading}
+            />
+          </Container>
+        </SendLayout>
+      );
+    case Step.SelectAmount:
+      return (
+        <SendLayout selectedBottomTab="dashboard" onClickBack={handleBackButtonClick}>
+          <Container>
+            <Step2SelectAmount
+              header={header}
+              amount={amount}
+              setAmount={setAmount}
+              feeRate={feeRate}
+              setFeeRate={setFeeRate}
+              sendMax={sendMax}
+              setSendMax={setSendMax}
+              fee={feeRate}
+              getFeeForFeeRate={(fee) => Promise.resolve(fee)}
+              dustFiltered={false}
+              onNext={() => setCurrentStep(getNextStep(Step.SelectAmount, true))}
+              isLoading={isLoading}
+              setIsLoading={setIsLoading}
+              unsignedSendStxTx={unsignedSendStxTx}
+              setUnsignedSendStxTx={setUnsignedSendStxTx}
+              recipientAddress={recipientAddress}
+              memo={memo}
+            />
+          </Container>
+        </SendLayout>
+      );
+    case Step.Confirm:
+      return <Step3Confirm unsignedSendStxTx={unsignedSendStxTx} fee={feeRate} />;
+    default:
+      throw new Error(`Unknown step: ${currentStep}`);
+  }
 }
 
 export default SendStxScreen;
diff --git a/src/app/screens/sendStx/stepResolver.tsx b/src/app/screens/sendStx/stepResolver.tsx
new file mode 100644
index 000000000..be5199715
--- /dev/null
+++ b/src/app/screens/sendStx/stepResolver.tsx
@@ -0,0 +1,31 @@
+export enum Step {
+  SelectRecipient = 0,
+  SelectAmount = 1,
+  Confirm = 2,
+}
+
+export const getNextStep = (currentStep: Step, amountEditable: boolean) => {
+  switch (currentStep) {
+    case Step.SelectRecipient:
+      return amountEditable ? Step.SelectAmount : Step.Confirm;
+    case Step.SelectAmount:
+      return Step.Confirm;
+    case Step.Confirm:
+      return Step.Confirm;
+    default:
+      throw new Error(`Unknown step: ${currentStep}`);
+  }
+};
+
+export const getPreviousStep = (currentStep: Step, amountEditable: boolean) => {
+  switch (currentStep) {
+    case Step.SelectRecipient:
+      return Step.SelectRecipient;
+    case Step.SelectAmount:
+      return Step.SelectRecipient;
+    case Step.Confirm:
+      return amountEditable ? Step.SelectAmount : Step.SelectRecipient;
+    default:
+      throw new Error(`Unknown step: ${currentStep}`);
+  }
+};
diff --git a/src/app/screens/sendStx/steps/Step1SelectRecipient.tsx b/src/app/screens/sendStx/steps/Step1SelectRecipient.tsx
new file mode 100644
index 000000000..ec736e5f9
--- /dev/null
+++ b/src/app/screens/sendStx/steps/Step1SelectRecipient.tsx
@@ -0,0 +1,138 @@
+import InputScreen from '@components/inputScreen';
+import { useBnsName, useBnsResolver } from '@hooks/queries/useBnsName';
+import useDebounce from '@hooks/useDebounce';
+import useWalletSelector from '@hooks/useWalletSelector';
+import { validateStacksAddress } from '@stacks/transactions';
+import Button from '@ui-library/button';
+import Input from '@ui-library/input';
+import { FeedbackVariant } from '@ui-library/inputFeedback';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+
+type StxRecipientScreenProps = {
+  recipientAddress: string;
+  setRecipientAddress: (address: string) => void;
+  setRecipientDomain: (address: string) => void;
+  memo: string;
+  setMemo: (memo: string) => void;
+  onNext: () => void;
+  isLoading: boolean;
+  header?: React.ReactNode;
+};
+
+const MemoInput = styled(Input)`
+  input {
+    height: 64px;
+    padding-top: 0px;
+  }
+`;
+
+const RecipientInput = styled(Input)`
+  min-height: 125px;
+`;
+
+interface InputFeedback {
+  variant: FeedbackVariant;
+  message: string;
+}
+
+function Step1SelectRecipient({
+  recipientAddress,
+  setRecipientAddress,
+  setRecipientDomain,
+  memo,
+  setMemo,
+  onNext,
+  isLoading,
+  header,
+}: StxRecipientScreenProps) {
+  const { t } = useTranslation('translation', { keyPrefix: 'SEND' });
+  const { stxAddress } = useWalletSelector();
+  const [inputFeedback, setInputFeedback] = useState<InputFeedback[] | undefined>();
+  const [recipient, setRecipient] = useState(recipientAddress);
+
+  const debouncedSearchTerm = useDebounce(recipient, 300);
+  const associatedAddress = useBnsResolver(debouncedSearchTerm, stxAddress, 'STX');
+  const associatedDomain = useBnsName(debouncedSearchTerm);
+
+  useEffect(() => {
+    setInputFeedback(undefined);
+
+    if (associatedDomain !== '') {
+      setRecipientDomain(associatedDomain);
+      setRecipientAddress(recipient);
+      setInputFeedback([
+        { variant: 'checkmark', message: t('ASSOCIATED_DOMAIN') },
+        { variant: 'plainIndented', message: associatedDomain },
+      ]);
+    } else {
+      setRecipientDomain('');
+      setInputFeedback(undefined);
+    }
+
+    if (associatedAddress !== '') {
+      setRecipientAddress(associatedAddress);
+      setRecipientDomain(recipient);
+      setInputFeedback([
+        { variant: 'checkmark', message: t('ASSOCIATED_ADDRESS') },
+        { variant: 'plainIndented', message: associatedAddress },
+      ]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [associatedDomain, associatedAddress]);
+
+  const handleNext = () => {
+    if (stxAddress === recipientAddress) {
+      setInputFeedback([{ variant: 'danger', message: t('ERRORS.SEND_TO_SELF') }]);
+    } else if (validateStacksAddress(recipientAddress) || validateStacksAddress(recipient)) {
+      onNext();
+    } else {
+      setInputFeedback([{ variant: 'danger', message: t('ERRORS.ADDRESS_INVALID') }]);
+    }
+  };
+
+  const handleAddressChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setRecipient(newValue);
+    setInputFeedback(undefined);
+    setRecipientAddress(newValue);
+  };
+
+  const handleMemoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setMemo(e.target.value);
+  };
+
+  const inputElement = (
+    <>
+      <RecipientInput
+        title={t('RECIPIENT')}
+        placeholder={t('RECIPIENT_PLACEHOLDER')}
+        value={recipient}
+        onChange={handleAddressChange}
+        variant={inputFeedback?.some((i) => i.variant === 'danger') ? 'danger' : 'default'}
+        feedback={inputFeedback}
+      />
+      <MemoInput
+        title={t('MEMO')}
+        value={memo}
+        onChange={handleMemoChange}
+        feedback={[
+          {
+            variant: 'explicative',
+            message: t('MEMO_INFO'),
+          },
+        ]}
+        hideClear
+      />
+    </>
+  );
+
+  const buttonElement = (
+    <Button title={t('NEXT')} onClick={handleNext} disabled={!recipient} loading={isLoading} />
+  );
+
+  return <InputScreen inputs={inputElement} buttons={buttonElement} header={header} />;
+}
+
+export default Step1SelectRecipient;
diff --git a/src/app/screens/sendStx/steps/Step2SelectAmount.tsx b/src/app/screens/sendStx/steps/Step2SelectAmount.tsx
new file mode 100644
index 000000000..ac7678e07
--- /dev/null
+++ b/src/app/screens/sendStx/steps/Step2SelectAmount.tsx
@@ -0,0 +1,247 @@
+import useStxPendingTxData from '@hooks/queries/useStxPendingTxData';
+import useNetworkSelector from '@hooks/useNetwork';
+import useWalletSelector from '@hooks/useWalletSelector';
+import {
+  StacksTransaction,
+  applyFeeMultiplier,
+  buf2hex,
+  generateUnsignedStxTokenTransferTransaction,
+  getStxFiatEquivalent,
+  microstacksToStx,
+  stxToMicrostacks,
+} from '@secretkeylabs/xverse-core';
+import { deserializeTransaction, estimateTransaction } from '@stacks/transactions';
+import SelectFeeRate, { FeeRates } from '@ui-components/selectFeeRate';
+import Button from '@ui-library/button';
+import Callout from '@ui-library/callout';
+import { capStxFee } from '@utils/transactions/transactions';
+import BigNumber from 'bignumber.js';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+import StxAmountSelector from '../stxAmountSelector';
+
+const Container = styled.div`
+  flex: 1 1 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+const FeeRateContainer = styled.div`
+  margin-top: ${(props) => props.theme.spacing(12)}px;
+  margin-bottom: ${(props) => props.theme.spacing(8)}px;
+`;
+
+const Buttons = styled.div`
+  margin: ${(props) => props.theme.spacing(12)}px 0;
+`;
+
+type Props = {
+  amount: string;
+  setAmount: (amount: string) => void;
+  feeRate: string;
+  setFeeRate: (feeRate: string) => void;
+  sendMax: boolean;
+  setSendMax: (sendMax: boolean) => void;
+  fee: string | undefined;
+  getFeeForFeeRate: (feeRate: number, useEffectiveFeeRate?: boolean) => Promise<number | undefined>;
+  onNext: () => void;
+  dustFiltered: boolean;
+  setIsLoading: (isLoading: boolean) => void;
+  isLoading?: boolean;
+  header?: React.ReactNode;
+  recipientAddress: string;
+  memo: string;
+  unsignedSendStxTx: string;
+  setUnsignedSendStxTx: (unsignedSendStxTx: string) => void;
+};
+
+function Step2SelectAmount({
+  recipientAddress,
+  memo,
+  amount,
+  setAmount,
+  feeRate,
+  setFeeRate,
+  sendMax,
+  setSendMax,
+  fee,
+  getFeeForFeeRate,
+  onNext,
+  setIsLoading,
+  isLoading,
+  dustFiltered,
+  header,
+  unsignedSendStxTx,
+  setUnsignedSendStxTx,
+}: Props) {
+  const { t } = useTranslation('translation', { keyPrefix: 'SEND' });
+  const navigate = useNavigate();
+
+  const { btcFiatRate, stxBtcRate, fiatCurrency, stxBalance, stxPublicKey, feeMultipliers } =
+    useWalletSelector();
+
+  const stxToFiat = (stx: string) =>
+    getStxFiatEquivalent(
+      stxToMicrostacks(new BigNumber(stx)),
+      new BigNumber(stxBtcRate),
+      new BigNumber(btcFiatRate),
+    ).toFixed(2);
+
+  const hasStx = +stxBalance > 0;
+
+  const hasSufficientFunds = new BigNumber(stxBalance).isGreaterThanOrEqualTo(
+    new BigNumber(amount).plus(stxToMicrostacks(new BigNumber(fee ?? 0))),
+  );
+
+  useEffect(() => {
+    if (sendMax) {
+      const newAmount = new BigNumber(stxBalance).minus(stxToMicrostacks(new BigNumber(fee ?? 0)));
+
+      if (newAmount.isGreaterThan(new BigNumber(0))) {
+        setAmount(newAmount.toString());
+      }
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sendMax, fee]);
+
+  const { data: stxPendingTxData } = useStxPendingTxData();
+  const selectedNetwork = useNetworkSelector();
+
+  const [fees, setFees] = useState<FeeRates>({});
+
+  // Reactively construct a tx
+  useEffect(() => {
+    setIsLoading(true);
+
+    const createTx = async () => {
+      const rawUnsignedSendStxTx: StacksTransaction =
+        await generateUnsignedStxTokenTransferTransaction(
+          recipientAddress,
+          amount,
+          memo,
+          stxPendingTxData?.pendingTransactions ?? [],
+          stxPublicKey,
+          selectedNetwork,
+        );
+
+      // This function directly modifies unsignedSendStxTx lol
+      applyFeeMultiplier(rawUnsignedSendStxTx, feeMultipliers);
+      setUnsignedSendStxTx(buf2hex(rawUnsignedSendStxTx.serialize()));
+      setIsLoading(false);
+    };
+
+    createTx();
+  }, [
+    amount,
+    feeMultipliers,
+    memo,
+    recipientAddress,
+    selectedNetwork,
+    setIsLoading,
+    setUnsignedSendStxTx,
+    stxPendingTxData?.pendingTransactions,
+    stxPublicKey,
+  ]);
+
+  // Reactively estimate fees
+  useEffect(() => {
+    const fetchStxFees = async () => {
+      const unsignedTx: StacksTransaction = deserializeTransaction(unsignedSendStxTx);
+
+      const [low, medium, high] = await estimateTransaction(
+        unsignedTx.payload,
+        undefined,
+        selectedNetwork,
+      );
+
+      let stxFees = {
+        low: low.fee,
+        medium: medium.fee,
+        high: high.fee,
+      };
+
+      if (feeMultipliers?.thresholdHighStacksFee) {
+        const adjustedFees = capStxFee(
+          low.fee,
+          medium.fee,
+          high.fee,
+          feeMultipliers.thresholdHighStacksFee,
+        );
+        stxFees = { low: adjustedFees.low, medium: adjustedFees.medium, high: adjustedFees.high };
+      }
+
+      setFees({
+        low: Number(microstacksToStx(new BigNumber(stxFees.low)).toFixed(2)),
+        medium: Number(microstacksToStx(new BigNumber(stxFees.medium)).toFixed(2)),
+        high: Number(microstacksToStx(new BigNumber(stxFees.high)).toFixed(2)),
+      });
+      if (!fee)
+        setFeeRate(Number(microstacksToStx(new BigNumber(medium.fee)).toFixed(2)).toString());
+    };
+
+    fetchStxFees();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedNetwork, unsignedSendStxTx]);
+
+  return (
+    <Container>
+      <div>
+        {header}
+        <StxAmountSelector
+          amount={amount}
+          setAmount={setAmount}
+          sendMax={sendMax}
+          setSendMax={setSendMax}
+          disabled={!hasStx}
+        />
+        {hasStx && (
+          <FeeRateContainer>
+            <SelectFeeRate
+              fee={fee}
+              feeUnits="STX"
+              feeRate={feeRate}
+              setFeeRate={setFeeRate}
+              baseToFiat={stxToFiat}
+              fiatUnit={fiatCurrency}
+              getFeeForFeeRate={getFeeForFeeRate}
+              feeRates={fees}
+              feeRateLimits={{ min: 0.000001, max: feeMultipliers?.thresholdHighStacksFee }}
+              isLoading={isLoading}
+              absoluteBalance={Number(microstacksToStx(new BigNumber(stxBalance)))}
+              amount={Number(amount)}
+            />
+          </FeeRateContainer>
+        )}
+        {sendMax && dustFiltered && <Callout bodyText={t('BTC.MAX_IGNORING_DUST_UTXO_MSG')} />}
+      </div>
+      <Buttons>
+        {hasStx && (
+          <Button
+            title={hasSufficientFunds ? t('NEXT') : t('INSUFFICIENT_FUNDS')}
+            onClick={onNext}
+            loading={isLoading}
+            disabled={!hasSufficientFunds || +amount === 0}
+            variant={hasSufficientFunds ? undefined : 'danger'}
+          />
+        )}
+        {!hasStx && (
+          <Callout
+            titleText={t('BTC.NO_FUNDS_TITLE')}
+            bodyText={t('BTC.NO_FUNDS')}
+            redirectText={t('STX.BUY_STX')}
+            onClickRedirect={() => {
+              navigate('/buy/STX');
+            }}
+          />
+        )}
+      </Buttons>
+    </Container>
+  );
+}
+
+export default Step2SelectAmount;
diff --git a/src/app/screens/sendStx/steps/Step3Confirm.tsx b/src/app/screens/sendStx/steps/Step3Confirm.tsx
new file mode 100644
index 000000000..0473d23fb
--- /dev/null
+++ b/src/app/screens/sendStx/steps/Step3Confirm.tsx
@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+type Props = {
+  unsignedSendStxTx: string;
+  fee: string;
+};
+
+function Step3Confirm({ unsignedSendStxTx, fee }: Props) {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    navigate('/confirm-stx-tx', {
+      state: {
+        unsignedTx: unsignedSendStxTx,
+        fee,
+      },
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return <div />;
+}
+export default Step3Confirm;
diff --git a/src/app/screens/sendStx/stxAmountSelector.tsx b/src/app/screens/sendStx/stxAmountSelector.tsx
new file mode 100644
index 000000000..51906dfea
--- /dev/null
+++ b/src/app/screens/sendStx/stxAmountSelector.tsx
@@ -0,0 +1,258 @@
+import useWalletSelector from '@hooks/useWalletSelector';
+import { ArrowsDownUp } from '@phosphor-icons/react';
+import {
+  currencySymbolMap,
+  getStxFiatEquivalent,
+  getStxTokenEquivalent,
+  stxToMicrostacks,
+} from '@secretkeylabs/xverse-core';
+import { StyledP } from '@ui-library/common.styled';
+import Input from '@ui-library/input';
+import { microStxToStx } from '@utils/helper';
+import BigNumber from 'bignumber.js';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { NumericFormat } from 'react-number-format';
+import styled from 'styled-components';
+import Theme from 'theme';
+
+const BalanceText = styled.span`
+  ${(props) => props.theme.typography.body_medium_m}
+  color: ${(props) => props.theme.colors.white_200};
+`;
+
+const ConvertComplication = styled.div<{ $disabled?: boolean }>`
+  cursor: ${(props) => (props.$disabled ? 'not-allowed' : 'pointer')};
+  user-select: none;
+
+  display: flex;
+  align-items: center;
+  gap: 2px;
+
+  color: ${(props) => props.theme.colors.white_200};
+
+  &:hover {
+    color: ${(props) =>
+      props.$disabled ? props.theme.colors.white_200 : props.theme.colors.white_0};
+  }
+`;
+
+const VertRule = styled.div`
+  width: 1px;
+  height: 16px;
+  background-color: ${(props) => props.theme.colors.white_800};
+  margin: 0 8px;
+`;
+
+const MaxButton = styled.div<{ $sendMax: boolean; $disabled: boolean }>`
+  ${(props) => props.theme.typography.body_medium_m}
+  color: ${(props) =>
+    props.$sendMax ? props.theme.colors.tangerine : props.theme.colors.tangerine_400};
+  cursor: ${(props) => (props.$disabled ? 'not-allowed' : 'pointer')};
+  user-select: none;
+
+  &:hover {
+    ${(props) => (props.$disabled ? '' : `color:${props.theme.colors.tangerine_200}`)};
+  }
+`;
+
+const AmountText = styled(StyledP)`
+  margin-right: ${(props) => props.theme.space.xxs};
+`;
+
+const inputValidator = /^[0-9.]*$/;
+const stxInputExtractor = /[0-9]+[.]?[0-9]{0,6}/;
+const stxInputValidator = /^[0-9]+[.]?[0-9]{0,6}$/;
+const fiatInputExtractor = /[0-9]+[.]?[0-9]{0,2}/;
+const fiatInputValidator = /^[0-9]+[.]?[0-9]{0,2}$/;
+
+const microStxtoStxString = (num: string | number | BigNumber) =>
+  microStxToStx(num)
+    .toFixed(6)
+    .replace(/\.?0+$/, '');
+
+type Props = {
+  amount: string;
+  setAmount: (amount: string) => void;
+  sendMax: boolean;
+  setSendMax: (sendMax: boolean) => void;
+  disabled?: boolean;
+};
+
+function StxAmountSelector({ amount, setAmount, sendMax, setSendMax, disabled = false }: Props) {
+  const { t } = useTranslation('translation', { keyPrefix: 'SEND' });
+  const { stxBalance: stxBalanceStr, btcFiatRate, stxBtcRate, fiatCurrency } = useWalletSelector();
+
+  const [amountDisplay, setAmountDisplay] = useState(
+    amount && microStxtoStxString(new BigNumber(amount)),
+  );
+
+  const [useStxValue, setUseStxValue] = useState(true);
+
+  useEffect(() => {
+    if (!sendMax) return;
+
+    const amountToDisplay =
+      amount &&
+      (useStxValue
+        ? microStxtoStxString(new BigNumber(amount))
+        : getStxFiatEquivalent(
+            new BigNumber(amount),
+            new BigNumber(stxBtcRate),
+            new BigNumber(btcFiatRate),
+          )
+            .toNumber()
+            .toFixed(2));
+
+    if (amountToDisplay !== amountDisplay) {
+      setAmountDisplay(amountToDisplay);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- We specifically only want to run this on these 2 deps
+  }, [sendMax, amount]);
+
+  const stxBalance = new BigNumber(stxBalanceStr);
+  const balance = useStxValue
+    ? microStxtoStxString(stxBalance)
+    : getStxFiatEquivalent(stxBalance, new BigNumber(stxBtcRate), new BigNumber(btcFiatRate))
+        .toNumber()
+        .toFixed(2);
+
+  const sendAmountConverted = useStxValue
+    ? getStxFiatEquivalent(
+        new BigNumber(amount),
+        new BigNumber(stxBtcRate),
+        new BigNumber(btcFiatRate),
+      )
+        .toNumber()
+        .toFixed(2)
+    : microStxtoStxString(amount);
+
+  const handleAmountChange = (newAmount: string) => {
+    const isValidInput = inputValidator.test(newAmount);
+    if (!isValidInput) return;
+
+    setAmountDisplay(newAmount);
+
+    if (!newAmount) {
+      setAmount('0');
+      setSendMax(false);
+      return;
+    }
+
+    const isValidAmount = useStxValue
+      ? stxInputValidator.test(newAmount)
+      : fiatInputValidator.test(newAmount);
+
+    if (!isValidAmount) return;
+
+    setSendMax(false);
+
+    if (useStxValue) {
+      setAmount(stxToMicrostacks(new BigNumber(newAmount)).toString());
+    } else {
+      const stxAmount = stxToMicrostacks(
+        getStxTokenEquivalent(
+          new BigNumber(newAmount),
+          new BigNumber(stxBtcRate),
+          new BigNumber(btcFiatRate),
+        ),
+      );
+      setAmount(stxAmount.toString());
+    }
+  };
+
+  const handleUseStxValueChange = () => {
+    if (disabled) return;
+
+    const shouldUseStxValue = !useStxValue;
+    setUseStxValue(shouldUseStxValue);
+
+    if (!amountDisplay || Number.isNaN(+amountDisplay)) return;
+
+    if (shouldUseStxValue) {
+      // convert outer sats amount to btc
+      setAmountDisplay(microStxtoStxString(new BigNumber(amount)));
+    } else {
+      // convert btc to fiat
+      const fiatAmount = getStxFiatEquivalent(
+        new BigNumber(amount),
+        new BigNumber(stxBtcRate),
+        new BigNumber(btcFiatRate),
+      )
+        .toNumber()
+        .toFixed(2);
+      setAmountDisplay(fiatAmount);
+    }
+  };
+
+  const handleBlur = () => {
+    const isValidAmount = useStxValue
+      ? stxInputValidator.test(amountDisplay)
+      : fiatInputValidator.test(amountDisplay);
+
+    if (!isValidAmount) {
+      const newAmount = useStxValue
+        ? stxInputExtractor.exec(amountDisplay)?.[0]
+        : fiatInputExtractor.exec(amountDisplay)?.[0];
+      handleAmountChange(newAmount || '0');
+    }
+  };
+
+  const handleMaxClick = () => {
+    if (disabled) return;
+
+    setSendMax(!sendMax);
+  };
+
+  return (
+    <Input
+      title={t('BTC.AMOUNT', { currency: useStxValue ? 'STX' : fiatCurrency })}
+      value={amountDisplay}
+      onChange={(e) => handleAmountChange(e.target.value)}
+      onBlur={handleBlur}
+      placeholder="0"
+      infoPanel={
+        <NumericFormat
+          value={balance}
+          displayType="text"
+          thousandSeparator
+          prefix={useStxValue ? '' : `~ ${currencySymbolMap[fiatCurrency]}`}
+          renderText={(value: string) => (
+            <div>
+              <BalanceText>{t('BALANCE')}</BalanceText> {value} {useStxValue ? 'STX' : fiatCurrency}
+            </div>
+          )}
+        />
+      }
+      complications={
+        <>
+          <ConvertComplication $disabled={disabled} onClick={handleUseStxValueChange}>
+            <NumericFormat
+              value={sendAmountConverted}
+              displayType="text"
+              thousandSeparator
+              prefix={useStxValue ? `~ ${currencySymbolMap[fiatCurrency]}` : ''}
+              renderText={(value: string) => (
+                <div>
+                  <AmountText typography="body_medium_s" color="white_200">
+                    {' '}
+                    {value} {useStxValue ? fiatCurrency : 'STX'}
+                  </AmountText>
+                </div>
+              )}
+            />
+            <ArrowsDownUp size={16} color={Theme.colors.white_200} />
+          </ConvertComplication>
+          <VertRule />
+          <MaxButton $sendMax={sendMax} $disabled={disabled} onClick={handleMaxClick}>
+            MAX
+          </MaxButton>
+        </>
+      }
+      disabled={disabled}
+      hideClear
+    />
+  );
+}
+
+export default StxAmountSelector;
diff --git a/src/app/ui-components/selectFeeRate/feeItem.tsx b/src/app/ui-components/selectFeeRate/feeItem.tsx
index 6847a0b67..a3e206acc 100644
--- a/src/app/ui-components/selectFeeRate/feeItem.tsx
+++ b/src/app/ui-components/selectFeeRate/feeItem.tsx
@@ -87,12 +87,14 @@ interface FeeItemProps {
   time?: string;
   feeRate: number;
   feeUnits: string;
-  feeRateUnits: string;
+  feeRateUnits?: string;
   fiatUnit: string;
   baseToFiat: (base: string) => string;
   getFeeForFeeRate: (feeRate: number) => Promise<number | undefined>;
   selected: boolean;
   onClick?: () => void;
+  absoluteBalance?: number;
+  amount?: number;
 }
 
 function FeeItem({
@@ -106,6 +108,8 @@ function FeeItem({
   getFeeForFeeRate,
   selected,
   onClick,
+  absoluteBalance,
+  amount,
 }: FeeItemProps) {
   const { t } = useTranslation('translation');
   const theme = useTheme();
@@ -160,8 +164,35 @@ function FeeItem({
   const mainColor = totalFee ? 'white_0' : 'white_400';
   const secondaryColor = totalFee ? 'white_200' : 'white_400';
 
+  const feesExceedBalance = Boolean(
+    totalFee && absoluteBalance && absoluteBalance + Number(amount ?? 0) < Number(totalFee),
+  );
+
+  // Fee can either be an absolute amount or a rate
+  // If feeRateUnits is not defined, therefore an absolute fee is used
+  const absoluteFeeOnly = !feeRateUnits
+
+  function renderAbsoluteFeeAmountAndUnit() {
+    return (
+      <StyledP typography="body_medium_s" color={secondaryColor}>
+          <NumericFormat
+            value={fiat}
+            displayType="text"
+            prefix={`~${currencySymbolMap[fiatUnit]}`}
+            thousandSeparator
+            renderText={(value: string) => `${value} ${fiatUnit}`}
+          />
+      </StyledP>
+    )
+  }
+
+
   return (
-    <FeeItemContainer onClick={onClick} $isSelected={selected} disabled={!totalFee}>
+    <FeeItemContainer
+      onClick={onClick}
+      $isSelected={selected}
+      disabled={!totalFee || feesExceedBalance}
+    >
       <IconContainer>{getIcon()}</IconContainer>
       <TextsContainer>
         <ColumnsTexts>
@@ -171,28 +202,21 @@ function FeeItem({
           <StyledSubText typography="body_medium_s" color={secondaryColor}>
             {time ?? `~${priorityTimeMap[priority]} mins`}
           </StyledSubText>
-          <StyledP
-            typography="body_medium_s"
-            color={secondaryColor}
-          >{`${feeRate} ${feeRateUnits}`}</StyledP>
+          {feeRateUnits && (
+            <StyledP
+              typography="body_medium_s"
+              color={secondaryColor}
+            >{`${feeRate} ${feeRateUnits}`}</StyledP>
+          )}
+          {absoluteFeeOnly && fiat && renderAbsoluteFeeAmountAndUnit()}
         </ColumnsTexts>
         {!isLoading ? (
-          <EndColumnTexts $insufficientFunds={totalFee === undefined}>
+          <EndColumnTexts $insufficientFunds={totalFee === undefined || feesExceedBalance}>
             <StyledHeading typography="body_medium_m" color={mainColor}>
               {`${totalFee || '-'} ${feeUnits}`}
             </StyledHeading>
-            {fiat && (
-              <StyledP typography="body_medium_s" color={secondaryColor}>
-                <NumericFormat
-                  value={fiat}
-                  displayType="text"
-                  prefix={`~${currencySymbolMap[fiatUnit]}`}
-                  thousandSeparator
-                  renderText={(value: string) => `${value} ${fiatUnit}`}
-                />
-              </StyledP>
-            )}
-            {!totalFee && (
+            {fiat && !absoluteFeeOnly && renderAbsoluteFeeAmountAndUnit()}
+            {(!totalFee || feesExceedBalance) && (
               <StyledP typography="body_medium_s" color="danger_light">
                 {t('SEND.INSUFFICIENT_FUNDS')}
               </StyledP>
diff --git a/src/app/ui-components/selectFeeRate/feeSelectPopup.tsx b/src/app/ui-components/selectFeeRate/feeSelectPopup.tsx
index 07329e257..460f09bef 100644
--- a/src/app/ui-components/selectFeeRate/feeSelectPopup.tsx
+++ b/src/app/ui-components/selectFeeRate/feeSelectPopup.tsx
@@ -57,14 +57,12 @@ const RotatedFaders = styled(Faders)`
   transform: rotate(90deg);
 `;
 
-const inputValidator = /^[0-9]*$/;
-
 type FeePriority = 'high' | 'medium' | 'low';
 
 type Props = {
   currentFeeRate: string;
   feeUnits: string;
-  feeRateUnits: string;
+  feeRateUnits?: string;
   fiatUnit: string;
   feeRates: {
     low?: number;
@@ -79,6 +77,8 @@ type Props = {
   baseToFiat: (base: string) => string;
   setFeeRate: (feeRate: string) => void;
   getFeeForFeeRate: (feeRate: number) => Promise<number | undefined>;
+  absoluteBalance?: number;
+  amount?: number;
 };
 
 function FeeSelectPopup({
@@ -92,7 +92,12 @@ function FeeSelectPopup({
   baseToFiat,
   setFeeRate,
   getFeeForFeeRate,
+  absoluteBalance,
+  amount,
 }: Props) {
+  const stxInputExtractor = /[0-9]+[.]?[0-9]{0,6}/;
+  const inputValidator = absoluteBalance ? stxInputExtractor : /^[0-9]*$/;
+
   const { t } = useTranslation('translation');
   const theme = useTheme();
 
@@ -262,6 +267,8 @@ function FeeSelectPopup({
             fiatUnit={fiatUnit}
             baseToFiat={baseToFiat}
             getFeeForFeeRate={getFeeForFeeRate}
+            absoluteBalance={absoluteBalance}
+            amount={amount}
           />
         ))}
         <FeeItemContainer $isSelected={!selected} onClick={() => setUseCustom(true)}>
diff --git a/src/app/ui-components/selectFeeRate/index.tsx b/src/app/ui-components/selectFeeRate/index.tsx
index 78d6f8391..ef2bb09b5 100644
--- a/src/app/ui-components/selectFeeRate/index.tsx
+++ b/src/app/ui-components/selectFeeRate/index.tsx
@@ -54,25 +54,29 @@ const EditRow = styled.span`
   gap: 7px;
 `;
 
+export type FeeRates = {
+  low?: number;
+  medium?: number;
+  high?: number;
+};
+
 type Props = {
   fee: string | undefined;
   feeUnits: string;
   feeRate: string;
   setFeeRate: (feeRate: string) => void;
-  feeRateUnits: string;
+  feeRateUnits?: string;
   fiatUnit: string;
   baseToFiat: (base: string) => string;
   getFeeForFeeRate: (feeRate: number) => Promise<number | undefined>;
   isLoading?: boolean;
-  feeRates: {
-    low?: number;
-    medium?: number;
-    high?: number;
-  };
+  feeRates: FeeRates;
   feeRateLimits?: {
     min?: number;
     max?: number;
   };
+  absoluteBalance?: number;
+  amount?: number;
 };
 
 function SelectFeeRate({
@@ -87,6 +91,8 @@ function SelectFeeRate({
   feeRates,
   feeRateLimits,
   isLoading,
+  absoluteBalance,
+  amount
 }: Props) {
   const { t } = useTranslation('translation');
   const [editing, setEditing] = useState(false);
@@ -105,6 +111,7 @@ function SelectFeeRate({
     }
 
     return t('TRANSACTION_SETTING.PRIORITIES.CUSTOM');
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [feeRates, feeRate]);
 
   return (
@@ -138,20 +145,23 @@ function SelectFeeRate({
             {t('COMMON.EDIT')} <PencilSimple size={16} weight="fill" />
           </Label>
         </EditRow>
-        <Label $size="s" $variant="dark">
-          <NumericFormat
-            value={feeRate}
-            displayType="text"
-            thousandSeparator
-            renderText={(value: string) => (
-              <>
-                {value} {feeRateUnits}
-              </>
-            )}
-          />
-        </Label>
-      </RowContainer>
-      {fee && (
+        {/* Fee can either be an absolute amount or a rate */}
+        {/* If feeRateUnits is not defined, therefore an absolute fee is used */}
+        {feeRateUnits && (
+          <Label $size="s" $variant="dark">
+            <NumericFormat
+              value={feeRate}
+              displayType="text"
+              thousandSeparator
+              renderText={(value: string) => (
+                <>
+                  {value} {feeRateUnits}
+                </>
+              )}
+            />
+          </Label>
+        )}
+        {fee && (
         <RowContainer>
           <div />
           <NumericFormat
@@ -166,7 +176,8 @@ function SelectFeeRate({
             )}
           />
         </RowContainer>
-      )}
+        )}
+      </RowContainer>
       {editing && (
         <FeeSelectPopup
           currentFeeRate={feeRate}
@@ -179,6 +190,8 @@ function SelectFeeRate({
           baseToFiat={baseToFiat}
           setFeeRate={setFeeRate}
           getFeeForFeeRate={getFeeForFeeRate}
+          absoluteBalance={absoluteBalance}
+          amount={amount}
         />
       )}
     </div>
diff --git a/src/app/ui-library/button.tsx b/src/app/ui-library/button.tsx
index bb0d9a67a..16f46cc36 100644
--- a/src/app/ui-library/button.tsx
+++ b/src/app/ui-library/button.tsx
@@ -6,10 +6,13 @@ type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger';
 
 const StyledButton = styled.button`
   width: 100%;
+  min-height: 44px;
   user-select: none;
 
   display: flex;
   justify-content: center;
+  align-items: center;
+
   gap: ${(props) => props.theme.space.xs};
 
   padding: ${(props) => props.theme.space.s} ${(props) => props.theme.space.m};
diff --git a/src/app/ui-library/inputFeedback.tsx b/src/app/ui-library/inputFeedback.tsx
index a5916472a..a1a5ed483 100644
--- a/src/app/ui-library/inputFeedback.tsx
+++ b/src/app/ui-library/inputFeedback.tsx
@@ -1,13 +1,16 @@
-import { Icon, Info, Warning } from '@phosphor-icons/react';
+import { CheckCircle, Icon, Info, Warning } from '@phosphor-icons/react';
 import styled from 'styled-components';
 import Theme from 'theme';
 import { StyledP } from './common.styled';
 
-export type FeedbackVariant = 'info' | 'danger';
+export type FeedbackVariant = 'info' | 'danger' | 'explicative' | 'plainIndented' | 'checkmark';
 
 const colors: Record<FeedbackVariant, string> = {
   info: Theme.colors.white_200,
   danger: Theme.colors.danger_light,
+  explicative: Theme.colors.white_400,
+  plainIndented: Theme.colors.white_200,
+  checkmark: Theme.colors.success_light,
 };
 const getColorForVariant = (variant: FeedbackVariant) => colors[variant];
 
@@ -15,9 +18,12 @@ const getStyledIcon = (icon: Icon) => styled(icon)`
   flex-shrink: 0;
   flex-grow: 0;
 `;
-const icons: Record<FeedbackVariant, ReturnType<typeof getStyledIcon>> = {
+const icons: Record<FeedbackVariant, ReturnType<typeof getStyledIcon> | undefined> = {
   info: getStyledIcon(Info),
   danger: getStyledIcon(Warning),
+  explicative: undefined,
+  plainIndented: undefined,
+  checkmark: getStyledIcon(CheckCircle),
 };
 
 const Feedback = styled.div<{ variant: FeedbackVariant }>`
@@ -26,6 +32,10 @@ const Feedback = styled.div<{ variant: FeedbackVariant }>`
   color: ${(props) => getColorForVariant(props.variant)};
 `;
 
+const Indent = styled.div`
+  width: 16px;
+`;
+
 export const isDangerFeedback = (inputFeedback: InputFeedbackProps | null): boolean =>
   inputFeedback?.variant === 'danger';
 
@@ -42,7 +52,8 @@ export function InputFeedback({ className, message, variant = 'info' }: InputFee
   const IconVariant = icons[variant];
   return (
     <Feedback className={className} variant={variant}>
-      {message && <IconVariant weight="fill" size={16} color="currentColor" />}
+      {message && IconVariant && <IconVariant weight="fill" size={16} color="currentColor" />}
+      {message && variant === 'plainIndented' && <Indent />}
       <StyledP typography="body_medium_s">{message}</StyledP>
     </Feedback>
   );
diff --git a/src/app/utils/transactions/transactions.ts b/src/app/utils/transactions/transactions.ts
index 1031384d8..3a638bb53 100644
--- a/src/app/utils/transactions/transactions.ts
+++ b/src/app/utils/transactions/transactions.ts
@@ -121,3 +121,23 @@ export function isBrc20Transaction(
 ): tx is Brc20HistoryTransactionData {
   return (tx as Brc20HistoryTransactionData).txType === 'brc20';
 }
+
+// todo: move this to xverse-core
+export const capStxFee = (
+  low: number,
+  medium: number,
+  high: number,
+  highCap: number,
+): { low: number; medium: number; high: number } => {
+  let adjustedMedium = medium;
+  let adjustedHigh = high;
+
+  if (highCap < medium) {
+    adjustedMedium = highCap;
+    adjustedHigh = highCap * 1.25;
+  } else if (medium < highCap && highCap < high) {
+    adjustedHigh = highCap;
+  }
+
+  return { low, medium: adjustedMedium, high: adjustedHigh };
+};
diff --git a/src/locales/en.json b/src/locales/en.json
index b178f37ca..e42ccbbaf 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -259,6 +259,9 @@
       "NO_FUNDS": "You don't have any funds to send. You can purchase crypto quickly and deposit directly into your Xverse wallet.",
       "BUY_BTC": "Buy Bitcoin"
     },
+    "STX": {
+      "BUY_STX": "Buy Stacks"
+    },
     "SEND_TO": "Send to",
     "SEND": "Send",
     "AMOUNT": "Amount",
@@ -266,10 +269,11 @@
     "RECIPIENT": "Recipient",
     "RECIPIENT_PLACEHOLDER": "STX Address or .btc domain",
     "ORDINAL_RECIPIENT_PLACEHOLDER": "Enter address",
-    "MEMO": "Add a memo (optional)",
+    "MEMO": "Memo (optional)",
     "MEMO_PLACEHOLDER": "Memo",
     "ASSOCIATED_ADDRESS": "Associated Address",
-    "MEMO_INFO": "Adding a memo can have an impact on the transaction fee",
+    "ASSOCIATED_DOMAIN": "Associated Domain",
+    "MEMO_INFO": "Adding a memo can have an impact on the transaction fee.",
     "NEXT": "Next",
     "NO_FUNDS": "You don't have any funds to send.",
     "BUY_CRYPTO": "Buy crypto",