diff --git a/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/index.tsx b/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/index.tsx
index eb9294620e68..2f8e6cb29e88 100644
--- a/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/index.tsx
+++ b/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/index.tsx
@@ -42,17 +42,19 @@ import {
   MoreButton,
   MoreIcon,
   StatusRow,
-  StyledWrapper,
+  PortfolioTransactionItemWrapper,
   ToCircle,
-  TransactionDetailRow,
+  OrbAndTxDescriptionContainer,
   TransactionFeeTooltipBody,
-  TransactionFeeTooltipTitle
+  TransactionFeeTooltipTitle,
+  StatusBalanceAndMoreContainer
 } from './style'
 import { StatusBubble } from '../../shared/style'
 import TransactionFeesTooltip from '../transaction-fees-tooltip'
 import TransactionPopup, { TransactionPopupItem } from '../transaction-popup'
 import TransactionTimestampTooltip from '../transaction-timestamp-tooltip'
 import { WalletActions } from '../../../common/actions'
+import { OrbContainer } from '../../extension/transaction-detail-panel/style'
 
 export interface Props {
   transaction: BraveWallet.TransactionInfo
@@ -61,6 +63,19 @@ export interface Props {
   displayAccountName: boolean
 }
 
+const getLocaleKeyForTxStatus = (status: BraveWallet.TransactionStatus) => {
+  switch (status) {
+    case BraveWallet.TransactionStatus.Unapproved: return 'braveWalletTransactionStatusUnapproved'
+    case BraveWallet.TransactionStatus.Approved: return 'braveWalletTransactionStatusApproved'
+    case BraveWallet.TransactionStatus.Rejected: return 'braveWalletTransactionStatusRejected'
+    case BraveWallet.TransactionStatus.Submitted: return 'braveWalletTransactionStatusSubmitted'
+    case BraveWallet.TransactionStatus.Confirmed: return 'braveWalletTransactionStatusConfirmed'
+    case BraveWallet.TransactionStatus.Error: return 'braveWalletTransactionStatusError'
+    case BraveWallet.TransactionStatus.Dropped: return 'braveWalletTransactionStatusDropped'
+    default: return ''
+  }
+}
+
 export const PortfolioTransactionItem = ({
   transaction,
   account,
@@ -265,7 +280,7 @@ export const PortfolioTransactionItem = ({
     }
   }, [transactionDetails, onAssetClick, onAddressClick])
 
-  const transactionIntentLocale = React.useMemo(() => {
+  const transactionActionLocale = React.useMemo(() => {
     switch (true) {
       case transaction.txType === BraveWallet.TransactionType.ERC20Approve: {
         const text = getLocale('braveWalletApprovalTransactionIntent')
@@ -316,23 +331,29 @@ export const PortfolioTransactionItem = ({
     }
   }, [transaction, transactionDetails, displayAccountName, onAssetClick])
 
+  const wasTxRejected =
+    transactionDetails.status !== BraveWallet.TransactionStatus.Rejected &&
+    transactionDetails.status !== BraveWallet.TransactionStatus.Unapproved
+
   // render
   return (
-    <StyledWrapper onClick={onHideTransactionPopup}>
-      <TransactionDetailRow>
-        <FromCircle orb={fromOrb} />
-        <ToCircle orb={toOrb} />
+    <PortfolioTransactionItemWrapper onClick={onHideTransactionPopup}>
+      <OrbAndTxDescriptionContainer>
+        <OrbContainer>
+          <FromCircle orb={fromOrb} />
+          <ToCircle orb={toOrb} />
+        </OrbContainer>
+
         <DetailColumn>
           <DetailRow>
-            { // Display account name only if rendered under Portfolio view
-              displayAccountName &&
+
+            {displayAccountName && // Display account name only if rendered under Portfolio view
               <DetailTextLight>
                 {account?.name}
               </DetailTextLight>
             }
-            <DetailTextDark>
-              {transactionIntentLocale}
-            </DetailTextDark>
+
+            <DetailTextDark>{transactionActionLocale}</DetailTextDark>
             <DetailTextLight>-</DetailTextLight>
 
             <TransactionTimestampTooltip
@@ -346,113 +367,112 @@ export const PortfolioTransactionItem = ({
                 {formatDateAsRelative(mojoTimeDeltaToJSDate(transactionDetails.createdTime))}
               </DetailTextDarkBold>
             </TransactionTimestampTooltip>
+
           </DetailRow>
+
           {transactionIntentDescription}
+
         </DetailColumn>
-      </TransactionDetailRow>
-      <StatusRow>
-        <StatusBubble status={transactionDetails.status} />
-        <DetailTextDarkBold>
-          {transactionDetails.status === BraveWallet.TransactionStatus.Unapproved && getLocale('braveWalletTransactionStatusUnapproved')}
-          {transactionDetails.status === BraveWallet.TransactionStatus.Approved && getLocale('braveWalletTransactionStatusApproved')}
-          {transactionDetails.status === BraveWallet.TransactionStatus.Rejected && getLocale('braveWalletTransactionStatusRejected')}
-          {transactionDetails.status === BraveWallet.TransactionStatus.Submitted && getLocale('braveWalletTransactionStatusSubmitted')}
-          {transactionDetails.status === BraveWallet.TransactionStatus.Confirmed && getLocale('braveWalletTransactionStatusConfirmed')}
-          {transactionDetails.status === BraveWallet.TransactionStatus.Error && getLocale('braveWalletTransactionStatusError')}
-          {transactionDetails.status === BraveWallet.TransactionStatus.Dropped && getLocale('braveWalletTransactionStatusDropped')}
-        </DetailTextDarkBold>
-      </StatusRow>
-      <DetailRow>
-        <BalanceColumn>
-          <DetailTextDark>
-            {/* We need to return a Transaction Time Stamp to calculate Fiat value here */}
-            {transactionDetails.fiatValue
-              .formatAsFiat(defaultCurrencies.fiat)}
-          </DetailTextDark>
-          <DetailTextLight>{transactionDetails.formattedNativeCurrencyTotal}</DetailTextLight>
-        </BalanceColumn>
-        {/* Will remove this conditional for solana once https://github.com/brave/brave-browser/issues/22040 is implemented. */}
-        {!isSolanaTxn &&
-          <TransactionFeesTooltip
-            text={
-              <>
-                <TransactionFeeTooltipTitle>{getLocale('braveWalletAllowSpendTransactionFee')}</TransactionFeeTooltipTitle>
-                <TransactionFeeTooltipBody>
-                  {
-                    new Amount(transactionDetails.gasFee)
-                      .divideByDecimals(transactionsNetwork.decimals)
-                      .formatAsAsset(6, transactionsNetwork.symbol)
-                  }
-                </TransactionFeeTooltipBody>
-                <TransactionFeeTooltipBody>
-                  {
-                    new Amount(transactionDetails.gasFeeFiat)
-                      .formatAsFiat(defaultCurrencies.fiat)
-                  }
-                </TransactionFeeTooltipBody>
-              </>
-            }
-          >
-            <CoinsButton>
-              <CoinsIcon />
-            </CoinsButton>
-          </TransactionFeesTooltip>
-        }
-
-        {(transactionDetails.status !== BraveWallet.TransactionStatus.Rejected && transactionDetails.status !== BraveWallet.TransactionStatus.Unapproved) ? (
-          <MoreButton onClick={onShowTransactionPopup}>
-            <MoreIcon />
-          </MoreButton>
-        ) : (
-          <RejectedTransactionSpacer />
-        )}
-
-        {showTransactionPopup &&
-          <TransactionPopup>
-            {[BraveWallet.TransactionStatus.Approved, BraveWallet.TransactionStatus.Submitted, BraveWallet.TransactionStatus.Confirmed, BraveWallet.TransactionStatus.Dropped].includes(transactionDetails.status) &&
-              <TransactionPopupItem
-                onClick={onClickViewOnBlockExplorer('tx', transaction.txHash)}
-                text={getLocale('braveWalletTransactionExplorer')}
-              />
-            }
 
-            {[BraveWallet.TransactionStatus.Approved, BraveWallet.TransactionStatus.Submitted, BraveWallet.TransactionStatus.Confirmed, BraveWallet.TransactionStatus.Dropped].includes(transactionDetails.status) &&
-              <TransactionPopupItem
-                onClick={onClickCopyTransactionHash}
-                text={getLocale('braveWalletTransactionCopyHash')}
-              />
-            }
+      </OrbAndTxDescriptionContainer>
 
-            {[BraveWallet.TransactionStatus.Submitted, BraveWallet.TransactionStatus.Approved].includes(transactionDetails.status) &&
-              !isSolanaTxn &&
-              !isFilecoinTransaction &&
-              <TransactionPopupItem
-                onClick={onClickSpeedupTransaction}
-                text={getLocale('braveWalletTransactionSpeedup')}
-              />
-            }
+      <StatusBalanceAndMoreContainer>
+        <StatusRow>
+          <StatusBubble status={transactionDetails.status} />
+          <DetailTextDarkBold>
+            {getLocale(getLocaleKeyForTxStatus(transactionDetails.status))}
+          </DetailTextDarkBold>
+        </StatusRow>
 
-            {[BraveWallet.TransactionStatus.Submitted, BraveWallet.TransactionStatus.Approved].includes(transactionDetails.status) &&
-              !isSolanaTxn &&
-              !isFilecoinTransaction &&
-              <TransactionPopupItem
-                onClick={onClickCancelTransaction}
-                text={getLocale('braveWalletTransactionCancel')}
-              />
-            }
+        {/* Balance & more */}
+        <DetailRow>
+          <BalanceColumn>
+            <DetailTextDark>
+              {/* We need to return a Transaction Time Stamp to calculate Fiat value here */}
+              {transactionDetails.fiatValue.formatAsFiat(defaultCurrencies.fiat)}
+            </DetailTextDark>
+            <DetailTextLight>{transactionDetails.formattedNativeCurrencyTotal}</DetailTextLight>
+          </BalanceColumn>
 
-            {[BraveWallet.TransactionStatus.Error].includes(transactionDetails.status) &&
-              !isSolanaTxn &&
-              !isFilecoinTransaction &&
-              <TransactionPopupItem
-                onClick={onClickRetryTransaction}
-                text={getLocale('braveWalletTransactionRetry')}
-              />
-            }
-          </TransactionPopup>
-        }
-      </DetailRow>
-    </StyledWrapper>
+          {/* Will remove this conditional for solana once https://github.com/brave/brave-browser/issues/22040 is implemented. */}
+          {!isSolanaTxn &&
+            <TransactionFeesTooltip
+              text={
+                <>
+                  <TransactionFeeTooltipTitle>{getLocale('braveWalletAllowSpendTransactionFee')}</TransactionFeeTooltipTitle>
+                  <TransactionFeeTooltipBody>
+                    {
+                      new Amount(transactionDetails.gasFee)
+                        .divideByDecimals(transactionsNetwork.decimals)
+                        .formatAsAsset(6, transactionsNetwork.symbol)
+                    }
+                  </TransactionFeeTooltipBody>
+                  <TransactionFeeTooltipBody>
+                    {
+                      new Amount(transactionDetails.gasFeeFiat)
+                        .formatAsFiat(defaultCurrencies.fiat)
+                    }
+                  </TransactionFeeTooltipBody>
+                </>
+              }
+            >
+              <CoinsButton>
+                <CoinsIcon />
+              </CoinsButton>
+            </TransactionFeesTooltip>
+          }
+
+          {wasTxRejected
+            ? <MoreButton onClick={onShowTransactionPopup}>
+                <MoreIcon />
+              </MoreButton>
+            : <RejectedTransactionSpacer />
+          }
+
+          {showTransactionPopup &&
+            <TransactionPopup>
+              {[BraveWallet.TransactionStatus.Approved, BraveWallet.TransactionStatus.Submitted, BraveWallet.TransactionStatus.Confirmed, BraveWallet.TransactionStatus.Dropped].includes(transactionDetails.status) &&
+                <>
+                  <TransactionPopupItem
+                    onClick={onClickViewOnBlockExplorer('tx', transaction.txHash)}
+                    text={getLocale('braveWalletTransactionExplorer')}
+                  />
+                  <TransactionPopupItem
+                    onClick={onClickCopyTransactionHash}
+                    text={getLocale('braveWalletTransactionCopyHash')}
+                  />
+                </>
+              }
+
+              {[BraveWallet.TransactionStatus.Submitted, BraveWallet.TransactionStatus.Approved].includes(transactionDetails.status) &&
+                !isSolanaTxn &&
+                !isFilecoinTransaction &&
+                <>
+                  <TransactionPopupItem
+                    onClick={onClickSpeedupTransaction}
+                    text={getLocale('braveWalletTransactionSpeedup')}
+                  />
+                  <TransactionPopupItem
+                    onClick={onClickCancelTransaction}
+                    text={getLocale('braveWalletTransactionCancel')}
+                  />
+                </>
+              }
+
+              {[BraveWallet.TransactionStatus.Error].includes(transactionDetails.status) &&
+                !isSolanaTxn &&
+                !isFilecoinTransaction &&
+                <TransactionPopupItem
+                  onClick={onClickRetryTransaction}
+                  text={getLocale('braveWalletTransactionRetry')}
+                />
+              }
+            </TransactionPopup>
+          }
+        </DetailRow>
+      </StatusBalanceAndMoreContainer>
+
+    </PortfolioTransactionItemWrapper>
   )
 }
 
diff --git a/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/portfolio-transaction-item.stories.tsx b/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/portfolio-transaction-item.stories.tsx
new file mode 100644
index 000000000000..9d220fb586e1
--- /dev/null
+++ b/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/portfolio-transaction-item.stories.tsx
@@ -0,0 +1,55 @@
+// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import styled from 'styled-components'
+import { mockAccount } from '../../../common/constants/mocks'
+import { mockTransactionInfo } from '../../../stories/mock-data/mock-transaction-info'
+
+import { WalletPageStory } from '../../../stories/wrappers/wallet-page-story-wrapper'
+import WalletPageLayout from '../wallet-page-layout'
+import WalletSubViewLayout from '../wallet-sub-view-layout'
+import { PortfolioTransactionItem } from './index'
+
+export const CryptoViewWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  position: relative;
+`
+
+const PortfolioWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  margin-bottom: 20px;
+`
+
+export const _PortfolioTransactionItem: React.FC = () => {
+  return (
+    <WalletPageStory>
+      <WalletPageLayout>
+        <WalletSubViewLayout>
+          <CryptoViewWrapper>
+            <PortfolioWrapper>
+              <PortfolioTransactionItem
+                account={mockAccount}
+                accounts={[mockAccount]}
+                displayAccountName={true}
+                transaction={mockTransactionInfo}
+              />
+            </PortfolioWrapper>
+          </CryptoViewWrapper>
+        </WalletSubViewLayout>
+      </WalletPageLayout>
+    </WalletPageStory>
+  )
+}
+
+export default _PortfolioTransactionItem
diff --git a/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/style.ts b/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/style.ts
index 2f83690efa6c..0e68168d8487 100644
--- a/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/style.ts
+++ b/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/style.ts
@@ -7,7 +7,7 @@ interface StyleProps {
   orb: string
 }
 
-export const StyledWrapper = styled.div`
+export const PortfolioTransactionItemWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -22,6 +22,7 @@ export const DetailRow = styled.div`
   align-items: center;
   justify-content: center;
   flex-direction: row;
+  flex-wrap: wrap;
 `
 
 export const AddressText = styled.span`
@@ -137,12 +138,12 @@ export const ArrowIcon = styled(ArrowRightIcon)`
   color: ${(p) => p.theme.color.text03};
 `
 
-export const TransactionDetailRow = styled.div`
+export const OrbAndTxDescriptionContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-direction: row;
-  width: 50%;
+  flex-wrap: wrap;
 `
 
 export const StatusRow = styled.div`
@@ -151,6 +152,7 @@ export const StatusRow = styled.div`
   align-items: center;
   justify-content: flex-start;
   flex-direction: row;
+  margin-right: 16px;
 `
 
 export const CoinsButton = styled(WalletButton)`
@@ -193,3 +195,11 @@ export const TransactionFeeTooltipBody = styled.div`
   font-weight: 400;
   letter-spacing: 0.01em;
 `
+
+export const StatusBalanceAndMoreContainer = styled.div`
+  display: flex;
+  align-self: flex-end;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+`