diff --git a/apps/ui-kit/src/lib/components/organisms/dialog/Dialog.tsx b/apps/ui-kit/src/lib/components/organisms/dialog/Dialog.tsx
index ddd77e87df7..53971681633 100644
--- a/apps/ui-kit/src/lib/components/organisms/dialog/Dialog.tsx
+++ b/apps/ui-kit/src/lib/components/organisms/dialog/Dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
 >(({ showCloseIcon, ...props }, ref) => (
     <RadixDialog.Overlay
         ref={ref}
-        className="absolute inset-0 z-[99998] bg-shader-neutral-light-48 backdrop-blur-md"
+        className="fixed inset-0 z-[99998] bg-shader-neutral-light-48 backdrop-blur-md"
         {...props}
     >
         <DialogClose className={cx('fixed right-3 top-3', { hidden: !showCloseIcon })}>
@@ -70,7 +70,7 @@ const DialogContent = React.forwardRef<
                 <RadixDialog.Content
                     ref={ref}
                     className={cx(
-                        'absolute z-[99999] flex flex-col justify-center overflow-hidden bg-primary-100 dark:bg-neutral-6 md:w-96',
+                        'fixed z-[99999] flex flex-col justify-center overflow-hidden bg-primary-100 dark:bg-neutral-6 md:w-96',
                         positionClass,
                     )}
                     {...props}
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx
index 4debae8e578..d0d131ffa7f 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx
@@ -21,10 +21,10 @@ import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { NotificationType } from '@/stores/notificationStore';
 import { prepareObjectsForTimelockedStakingTransaction } from '@/lib/utils';
 import { Dialog, DialogBody, DialogContent, DialogPosition, Header } from '@iota/apps-ui-kit';
+import { SuccessScreenView } from './views/ConfirmAndExit';
 
 interface StakeDialogProps {
     isTimelockedStaking?: boolean;
-    onSuccess?: (digest: string) => void;
     isOpen: boolean;
     setOpen: (bool: boolean) => void;
 }
@@ -32,14 +32,10 @@ interface StakeDialogProps {
 enum Step {
     SelectValidator,
     EnterAmount,
+    TransactionDetails,
 }
 
-function StakeDialog({
-    onSuccess,
-    isTimelockedStaking,
-    isOpen,
-    setOpen,
-}: StakeDialogProps): JSX.Element {
+function StakeDialog({ isTimelockedStaking, isOpen, setOpen }: StakeDialogProps): JSX.Element {
     const [step, setStep] = useState<Step>(Step.SelectValidator);
     const [selectedValidator, setSelectedValidator] = useState<string>('');
     const [amount, setAmount] = useState<string>('');
@@ -91,6 +87,12 @@ function StakeDialog({
         }
     }
 
+    function resetDefaultValues(): void {
+        setStep(Step.SelectValidator);
+        setSelectedValidator('');
+        setAmount('');
+    }
+
     function handleStake(): void {
         if (isTimelockedStaking && groupedTimelockObjects.length === 0) {
             addNotification('Invalid stake amount. Please try again.', NotificationType.Error);
@@ -105,10 +107,8 @@ function StakeDialog({
                 transaction: newStakeData?.transaction,
             },
             {
-                onSuccess: (tx) => {
-                    if (onSuccess) {
-                        onSuccess(tx.digest);
-                    }
+                onSuccess: () => {
+                    setStep(Step.TransactionDetails);
                 },
             },
         )
@@ -120,20 +120,26 @@ function StakeDialog({
             });
     }
 
-    const title = {
+    const title: Record<Step, string> = {
         [Step.SelectValidator]: 'Select Validator',
         [Step.EnterAmount]: 'Enter Amount',
+        [Step.TransactionDetails]: 'Transaction',
     };
 
+    function handleClose(): void {
+        setOpen(false);
+        resetDefaultValues();
+    }
+
     return (
         <Dialog open={isOpen} onOpenChange={setOpen}>
             <DialogContent containerId="overlay-portal-container" position={DialogPosition.Right}>
                 <div className="flex min-h-full flex-col">
                     <Header
                         title={title[step]}
-                        onClose={() => setOpen(false)}
-                        titleCentered
-                        onBack={handleBack}
+                        onClose={handleClose}
+                        titleCentered={step !== Step.TransactionDetails}
+                        onBack={step === Step.EnterAmount ? handleBack : undefined}
                     />
                     <div className="flex w-full flex-1 [&_>div]:flex [&_>div]:w-full [&_>div]:flex-1">
                         <DialogBody>
@@ -155,6 +161,15 @@ function StakeDialog({
                                     onStake={handleStake}
                                 />
                             )}
+                            {step === Step.TransactionDetails && (
+                                <SuccessScreenView
+                                    validatorAddress={selectedValidator}
+                                    gasBudget={newStakeData?.gasBudget}
+                                    onConfirm={handleClose}
+                                    amount={amount}
+                                    symbol={metadata?.symbol}
+                                />
+                            )}
                         </DialogBody>
                     </div>
                 </div>
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/ConfirmAndExit.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/ConfirmAndExit.tsx
new file mode 100644
index 00000000000..345e549cf78
--- /dev/null
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/ConfirmAndExit.tsx
@@ -0,0 +1,65 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+    Button,
+    ButtonType,
+    Card,
+    CardBody,
+    CardImage,
+    CardType,
+    ImageShape,
+    ImageType,
+} from '@iota/apps-ui-kit';
+import { useValidatorInfo } from '@iota/core';
+import { StakingTransactionDetails } from './StakingTransactionDetails';
+import { Validator } from './Validator';
+import { IotaLogoMark } from '@iota/ui-icons';
+
+interface SuccessScreenViewProps {
+    validatorAddress: string;
+    gasBudget: string | number | null | undefined;
+    onConfirm: () => void;
+    amount: string;
+    symbol: string | undefined;
+}
+
+export function SuccessScreenView({
+    validatorAddress,
+    gasBudget,
+    onConfirm,
+    amount,
+    symbol,
+}: SuccessScreenViewProps): React.JSX.Element {
+    const { apy } = useValidatorInfo({
+        validatorAddress,
+    });
+
+    return (
+        <div className="flex flex-1 flex-col">
+            <div className="flex w-full flex-1 flex-col justify-between">
+                <div className="flex flex-col gap-y-md">
+                    <Validator address={validatorAddress} isSelected showAction={false} />
+
+                    <Card type={CardType.Outlined}>
+                        <CardImage type={ImageType.BgSolid} shape={ImageShape.Rounded}>
+                            <IotaLogoMark className="h-5 w-5 text-neutral-10" />
+                        </CardImage>
+                        <CardBody title={`${amount} ${symbol}`} subtitle="Stake" />
+                    </Card>
+
+                    <StakingTransactionDetails gasBudget={gasBudget} apy={apy} />
+                </div>
+            </div>
+
+            <div className="flex w-full">
+                <Button
+                    type={ButtonType.Primary}
+                    fullWidth
+                    onClick={onConfirm}
+                    text="Confirm & Exit"
+                />
+            </div>
+        </div>
+    );
+}
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountView.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountView.tsx
index c01cdd6d9ed..25677b80510 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountView.tsx
@@ -4,19 +4,11 @@
 import React from 'react';
 import { useFormatCoin, useBalance, CoinFormat } from '@iota/core';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-import {
-    Button,
-    ButtonType,
-    KeyValueInfo,
-    Panel,
-    Divider,
-    Input,
-    InputType,
-} from '@iota/apps-ui-kit';
-import { useStakeTxnInfo } from '../hooks';
-import { useCurrentAccount, useIotaClientQuery } from '@iota/dapp-kit';
+import { Button, ButtonType, Input, InputType } from '@iota/apps-ui-kit';
+import { useCurrentAccount } from '@iota/dapp-kit';
 import { Validator } from './Validator';
 import { StakedInfo } from './StakedInfo';
+import { StakingTransactionDetails } from './StakingTransactionDetails';
 
 interface EnterAmountViewProps {
     selectedValidator: string;
@@ -40,7 +32,6 @@ function EnterAmountView({
     const account = useCurrentAccount();
     const accountAddress = account?.address;
 
-    const { data: system } = useIotaClientQuery('getLatestIotaSystemState');
     const { data: iotaBalance } = useBalance(accountAddress!);
 
     const coinBalance = BigInt(iotaBalance?.totalBalance || 0);
@@ -50,10 +41,6 @@ function EnterAmountView({
         IOTA_TYPE_ARG,
         CoinFormat.FULL,
     );
-    const [gas, symbol] = useFormatCoin(gasBudget, IOTA_TYPE_ARG);
-    const { stakedRewardsStartEpoch, timeBeforeStakeRewardsRedeemableAgoDisplay } = useStakeTxnInfo(
-        system?.epoch,
-    );
 
     return (
         <div className="flex w-full flex-col justify-between">
@@ -73,28 +60,7 @@ function EnterAmountView({
                         caption={`${maxTokenFormatted} ${maxTokenFormattedSymbol} Available`}
                     />
                 </div>
-
-                <Panel hasBorder>
-                    <div className="flex flex-col gap-y-sm p-md">
-                        <KeyValueInfo
-                            keyText="Staking Rewards Start"
-                            value={stakedRewardsStartEpoch}
-                            fullwidth
-                        />
-                        <KeyValueInfo
-                            keyText="Redeem Rewards"
-                            value={timeBeforeStakeRewardsRedeemableAgoDisplay}
-                            fullwidth
-                        />
-                        <Divider />
-                        <KeyValueInfo
-                            keyText="Gas fee"
-                            value={gas || '--'}
-                            supportingLabel={symbol}
-                            fullwidth
-                        />
-                    </div>
-                </Panel>
+                <StakingTransactionDetails gasBudget={gasBudget} />
             </div>
 
             <div className="flex w-full justify-between gap-sm">
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/StakingTransactionDetails.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/StakingTransactionDetails.tsx
new file mode 100644
index 00000000000..53a79c6e803
--- /dev/null
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/StakingTransactionDetails.tsx
@@ -0,0 +1,53 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Divider, KeyValueInfo, Panel } from '@iota/apps-ui-kit';
+import { useFormatCoin } from '@iota/core';
+import { useIotaClientQuery } from '@iota/dapp-kit';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import { useStakeTxnInfo } from '../hooks';
+
+interface StakingTransactionDetailsProps {
+    gasBudget: string | number | null | undefined;
+    apy?: number | null;
+}
+
+export function StakingTransactionDetails({
+    gasBudget,
+    apy,
+}: StakingTransactionDetailsProps): React.JSX.Element {
+    const [gas, gasSymbol] = useFormatCoin(gasBudget, IOTA_TYPE_ARG);
+    const { data: system } = useIotaClientQuery('getLatestIotaSystemState');
+
+    const { stakedRewardsStartEpoch, timeBeforeStakeRewardsRedeemableAgoDisplay } = useStakeTxnInfo(
+        system?.epoch,
+    );
+
+    return (
+        <Panel hasBorder>
+            <div className="flex flex-col gap-y-sm p-md">
+                {apy !== null && apy !== undefined ? (
+                    <KeyValueInfo keyText="APY" value={`${apy}%`} fullwidth />
+                ) : null}
+
+                <KeyValueInfo
+                    keyText="Staking Rewards Start"
+                    value={stakedRewardsStartEpoch}
+                    fullwidth
+                />
+                <KeyValueInfo
+                    keyText="Redeem Rewards"
+                    value={timeBeforeStakeRewardsRedeemableAgoDisplay}
+                    fullwidth
+                />
+                <Divider />
+                <KeyValueInfo
+                    keyText="Gas fee"
+                    value={gas || '--'}
+                    supportingLabel={gasSymbol}
+                    fullwidth
+                />
+            </div>
+        </Panel>
+    );
+}
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/index.ts b/apps/wallet-dashboard/components/Dialogs/Staking/views/index.ts
index 2e8d1f59b5e..917bae35f85 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/views/index.ts
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/index.ts
@@ -3,3 +3,4 @@
 
 export { default as EnterAmountView } from './EnterAmountView';
 export { default as SelectValidatorView } from './SelectValidatorView';
+export * from './StakingTransactionDetails';