diff --git a/apps/ui-kit/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx b/apps/ui-kit/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx
index a9bb2b7f224..972a53873bc 100644
--- a/apps/ui-kit/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx
+++ b/apps/ui-kit/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx
@@ -43,7 +43,7 @@ export function KeyValueInfo({
 }: KeyValueProps): React.JSX.Element {
     return (
         <div className="flex w-full flex-row items-center justify-between gap-2 py-xxs font-inter">
-            <div className="flex flex-row items-center gap-x-0.5">
+            <div className="flex w-full flex-row items-center gap-x-0.5">
                 <span className="text-body-md text-neutral-40 dark:text-neutral-60">{keyText}</span>
                 {showInfoIcon && <Info className="pl-xxxs text-neutral-60" />}
             </div>
diff --git a/apps/wallet/src/ui/app/components/Overlay.tsx b/apps/wallet/src/ui/app/components/Overlay.tsx
index 5ef8e66b7f5..c90090de085 100644
--- a/apps/wallet/src/ui/app/components/Overlay.tsx
+++ b/apps/wallet/src/ui/app/components/Overlay.tsx
@@ -6,6 +6,7 @@ import { useCallback } from 'react';
 import type { ReactNode } from 'react';
 import { Header } from '@iota/apps-ui-kit';
 import { Portal } from '../shared/Portal';
+import { useNavigate } from 'react-router-dom';
 
 interface OverlayProps {
     title?: string;
@@ -15,9 +16,17 @@ interface OverlayProps {
     closeIcon?: ReactNode | null;
     setShowModal?: (showModal: boolean) => void;
     background?: 'bg-iota-lightest';
+    showBackButton?: boolean;
 }
 
-export function Overlay({ title, children, showModal, closeOverlay, setShowModal }: OverlayProps) {
+export function Overlay({
+    title,
+    children,
+    showModal,
+    closeOverlay,
+    showBackButton,
+    setShowModal,
+}: OverlayProps) {
     const closeModal = useCallback(
         (e: React.MouseEvent<HTMLElement>) => {
             closeOverlay && closeOverlay();
@@ -25,11 +34,19 @@ export function Overlay({ title, children, showModal, closeOverlay, setShowModal
         },
         [closeOverlay, setShowModal],
     );
-
+    const navigate = useNavigate();
+    const handleBack = useCallback(() => navigate(-1), [navigate]);
     return showModal ? (
         <Portal containerId="overlay-portal-container">
             <div className="absolute inset-0 z-[9999] flex flex-col flex-nowrap items-center backdrop-blur-[20px]">
-                {title && <Header titleCentered title={title} onClose={closeModal} />}
+                {title && (
+                    <Header
+                        onBack={showBackButton ? handleBack : undefined}
+                        titleCentered
+                        title={title}
+                        onClose={closeModal}
+                    />
+                )}
                 <div className="w-full flex-1 overflow-hidden bg-neutral-100 p-md">{children}</div>
             </div>
         </Portal>
diff --git a/apps/wallet/src/ui/app/staking/delegation-detail/DelegationDetailCard.tsx b/apps/wallet/src/ui/app/staking/delegation-detail/DelegationDetailCard.tsx
index 30cc6dd52d9..fd696e387f6 100644
--- a/apps/wallet/src/ui/app/staking/delegation-detail/DelegationDetailCard.tsx
+++ b/apps/wallet/src/ui/app/staking/delegation-detail/DelegationDetailCard.tsx
@@ -2,17 +2,10 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import BottomMenuLayout, { Content } from '_app/shared/bottom-menu-layout';
-import { Button } from '_app/shared/ButtonUI';
-import { Card } from '_app/shared/card';
-import { CardItem } from '_app/shared/card/CardItem';
-import { Text } from '_app/shared/text';
-import { IconTooltip } from '_app/shared/tooltip';
 import { Alert, LoadingIndicator } from '_components';
 import { useAppSelector } from '_hooks';
 import { ampli } from '_src/shared/analytics/ampli';
 import { MIN_NUMBER_IOTA_TO_STAKE } from '_src/shared/constants';
-import FaucetRequestButton from '_src/ui/app/shared/faucet/FaucetRequestButton';
 import {
     useBalance,
     useCoinMetadata,
@@ -20,18 +13,30 @@ import {
     useGetValidatorsApy,
     DELEGATED_STAKES_QUERY_REFETCH_INTERVAL,
     DELEGATED_STAKES_QUERY_STALE_TIME,
+    useFormatCoin,
+    formatPercentageDisplay,
 } from '@iota/core';
 import { useIotaClientQuery } from '@iota/dapp-kit';
-import { ArrowLeft16, StakeAdd16, StakeRemove16 } from '@iota/icons';
 import { Network, type StakeObject } from '@iota/iota-sdk/client';
-import { NANO_PER_IOTA, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import { NANO_PER_IOTA, IOTA_TYPE_ARG, formatAddress } from '@iota/iota-sdk/utils';
 import BigNumber from 'bignumber.js';
 import { useMemo } from 'react';
 
 import { useActiveAddress } from '../../hooks/useActiveAddress';
-import { Heading } from '../../shared/heading';
 import { getDelegationDataByStakeId } from '../getDelegationByStakeId';
-import { StakeAmount } from '../home/StakeAmount';
+import {
+    CardImage,
+    CardBody,
+    Card,
+    CardType,
+    Panel,
+    KeyValueInfo,
+    Divider,
+    Button,
+    ButtonType,
+} from '@iota/apps-ui-kit';
+import { ImageIcon } from '../../shared/image-icon';
+import { useNavigate } from 'react-router-dom';
 
 interface DelegationDetailCardProps {
     validatorAddress: string;
@@ -39,6 +44,7 @@ interface DelegationDetailCardProps {
 }
 
 export function DelegationDetailCard({ validatorAddress, stakedId }: DelegationDetailCardProps) {
+    const navigate = useNavigate();
     const {
         data: system,
         isPending: loadingValidators,
@@ -81,7 +87,6 @@ export function DelegationDetailCard({ validatorAddress, stakedId }: DelegationD
     }, [allDelegation, stakedId]);
 
     const totalStake = BigInt(delegationData?.principal || 0n);
-
     const iotaEarned = BigInt(
         (delegationData as Extract<StakeObject, { estimatedReward: string }>)?.estimatedReward ||
             0n,
@@ -90,6 +95,9 @@ export function DelegationDetailCard({ validatorAddress, stakedId }: DelegationD
         apy: 0,
     };
 
+    const [iotaEarnedFormatted, iotaEarnedSymbol] = useFormatCoin(iotaEarned, IOTA_TYPE_ARG);
+    const [totalStakeFormatted, totalStakeSymbol] = useFormatCoin(totalStake, IOTA_TYPE_ARG);
+
     const delegationId = delegationData?.status === 'Active' && delegationData?.stakedIotaId;
 
     const stakeByValidatorAddress = `/stake/new?${new URLSearchParams({
@@ -122,167 +130,90 @@ export function DelegationDetailCard({ validatorAddress, stakedId }: DelegationD
         );
     }
 
-    return (
-        <div className="flex h-full flex-grow flex-col flex-nowrap">
-            <BottomMenuLayout>
-                <Content>
-                    <div className="flex w-full flex-col items-center justify-center">
-                        {hasInactiveValidatorDelegation ? (
-                            <div className="mb-3">
-                                <Alert>
-                                    Unstake IOTA from this inactive validator and stake on an active
-                                    validator to start earning rewards again.
-                                </Alert>
-                            </div>
-                        ) : null}
-                        <div className="flex w-full">
-                            <Card
-                                header={
-                                    <div className="divide-gray-45 grid w-full grid-cols-2 divide-x divide-y-0 divide-solid">
-                                        <CardItem title="Your Stake">
-                                            <StakeAmount balance={totalStake} variant="heading5" />
-                                        </CardItem>
-
-                                        <CardItem title="Earned">
-                                            <StakeAmount
-                                                balance={iotaEarned}
-                                                variant="heading5"
-                                                isEarnedRewards
-                                            />
-                                        </CardItem>
-                                    </div>
-                                }
-                                padding="none"
-                            >
-                                <div className="divide-gray-45 flex divide-x divide-y-0 divide-solid">
-                                    <CardItem
-                                        title={
-                                            <div className="text-steel-darker flex items-start gap-1">
-                                                APY
-                                                <div className="text-steel">
-                                                    <IconTooltip
-                                                        tip="Annual Percentage Yield"
-                                                        placement="top"
-                                                    />
-                                                </div>
-                                            </div>
-                                        }
-                                    >
-                                        <div className="flex items-baseline gap-0.5">
-                                            <Heading
-                                                variant="heading4"
-                                                weight="semibold"
-                                                color="gray-90"
-                                                leading="none"
-                                            >
-                                                {isApyApproxZero ? '~' : ''}
-                                                {apy}
-                                            </Heading>
-
-                                            <Text
-                                                variant="subtitleSmall"
-                                                weight="medium"
-                                                color="steel-dark"
-                                            >
-                                                %
-                                            </Text>
-                                        </div>
-                                    </CardItem>
-
-                                    <CardItem
-                                        title={
-                                            <div className="text-steel-darker flex gap-1">
-                                                Commission
-                                                <div className="text-steel">
-                                                    <IconTooltip
-                                                        tip="Validator commission"
-                                                        placement="top"
-                                                    />
-                                                </div>
-                                            </div>
-                                        }
-                                    >
-                                        <div className="flex items-baseline gap-0.5">
-                                            <Heading
-                                                variant="heading4"
-                                                weight="semibold"
-                                                color="gray-90"
-                                                leading="none"
-                                            >
-                                                {commission}
-                                            </Heading>
+    if (hasInactiveValidatorDelegation) {
+        <div className="mb-3">
+            <Alert>
+                Unstake IOTA from this inactive validator and stake on an active validator to start
+                earning rewards again.
+            </Alert>
+        </div>;
+    }
 
-                                            <Text
-                                                variant="subtitleSmall"
-                                                weight="medium"
-                                                color="steel-dark"
-                                            >
-                                                %
-                                            </Text>
-                                        </div>
-                                    </CardItem>
-                                </div>
-                            </Card>
-                        </div>
-                        <div className="my-3.75 flex w-full gap-2.5">
-                            {!hasInactiveValidatorDelegation ? (
-                                <Button
-                                    size="tall"
-                                    variant="outline"
-                                    to={stakeByValidatorAddress}
-                                    before={<StakeAdd16 />}
-                                    text="Stake IOTA"
-                                    onClick={() => {
-                                        ampli.clickedStakeIota({
-                                            isCurrentlyStaking: true,
-                                            sourceFlow: 'Delegation detail card',
-                                        });
-                                    }}
-                                    disabled={showRequestMoreIotaToken}
-                                />
-                            ) : null}
+    function handleAddNewStake() {
+        navigate(stakeByValidatorAddress);
+        ampli.clickedStakeIota({
+            isCurrentlyStaking: true,
+            sourceFlow: 'Delegation detail card',
+        });
+    }
 
-                            {Boolean(totalStake) && delegationId && (
-                                <Button
-                                    data-testid="unstake-button"
-                                    size="tall"
-                                    variant="outline"
-                                    to={stakeByValidatorAddress + '&unstake=true'}
-                                    onClick={() => {
-                                        ampli.clickedUnstakeIota({
-                                            stakedAmount: Number(totalStake / NANO_PER_IOTA),
-                                            validatorAddress,
-                                        });
-                                    }}
-                                    text="Unstake IOTA"
-                                    before={<StakeRemove16 />}
-                                />
-                            )}
-                        </div>
-                    </div>
-                </Content>
+    function handleUnstake() {
+        navigate(stakeByValidatorAddress + '&unstake=true');
+        ampli.clickedUnstakeIota({
+            stakedAmount: Number(totalStake / NANO_PER_IOTA),
+            validatorAddress,
+        });
+    }
 
-                {/* show faucet request button on devnet or testnet whenever there is only one coin  */}
-                {showRequestMoreIotaToken ? (
-                    <div className="flex flex-col items-center gap-4">
-                        <div className="w-8/12 text-center">
-                            <Text variant="pSubtitle" weight="medium" color="steel-darker">
-                                You need a minimum of {MIN_NUMBER_IOTA_TO_STAKE} IOTA to continue
-                                staking.
-                            </Text>
-                        </div>
-                        <FaucetRequestButton size="tall" />
+    return (
+        <div className="flex h-full flex-col justify-between">
+            <div className="flex flex-col gap-y-md">
+                <Card type={CardType.Filled}>
+                    <CardImage>
+                        <ImageIcon
+                            src={null}
+                            label={validatorData?.name || ''}
+                            fallback={validatorData?.name || ''}
+                        />
+                    </CardImage>
+                    <CardBody
+                        title={validatorData?.name || ''}
+                        subtitle={formatAddress(validatorAddress)}
+                    />
+                </Card>
+                <Panel hasBorder>
+                    <div className="flex flex-col gap-y-sm p-md">
+                        <KeyValueInfo
+                            keyText="Your Stake"
+                            valueText={totalStakeFormatted}
+                            supportingLabel={totalStakeSymbol}
+                        />
+                        <KeyValueInfo
+                            keyText="Earned"
+                            valueText={iotaEarnedFormatted}
+                            supportingLabel={iotaEarnedSymbol}
+                        />
+                        <Divider />
+                        <KeyValueInfo
+                            keyText="APY"
+                            valueText={formatPercentageDisplay(apy, '--', isApyApproxZero)}
+                        />
+                        <KeyValueInfo
+                            keyText="Commission"
+                            valueText={`${commission.toString()}%`}
+                        />
                     </div>
-                ) : (
+                </Panel>
+            </div>
+            <div className="my-3.75 flex w-full gap-2.5">
+                {Boolean(totalStake) && delegationId && (
                     <Button
-                        size="tall"
-                        variant="secondary"
-                        to="/stake"
-                        before={<ArrowLeft16 />}
-                        text="Back"
+                        type={ButtonType.Secondary}
+                        onClick={handleUnstake}
+                        text="Unstake"
+                        fullWidth
                     />
                 )}
-            </BottomMenuLayout>
+                {!hasInactiveValidatorDelegation ? (
+                    <Button
+                        type={ButtonType.Primary}
+                        text="Stake"
+                        onClick={handleAddNewStake}
+                        disabled={showRequestMoreIotaToken}
+                        fullWidth
+                    />
+                ) : null}
+            </div>
         </div>
     );
 }
diff --git a/apps/wallet/src/ui/app/staking/delegation-detail/index.tsx b/apps/wallet/src/ui/app/staking/delegation-detail/index.tsx
index 98f9e7a48df..d51ec4e4fe0 100644
--- a/apps/wallet/src/ui/app/staking/delegation-detail/index.tsx
+++ b/apps/wallet/src/ui/app/staking/delegation-detail/index.tsx
@@ -7,7 +7,6 @@ import { useGetDelegatedStake } from '@iota/core';
 import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
 import { useActiveAddress } from '../../hooks/useActiveAddress';
 import { DelegationDetailCard } from './DelegationDetailCard';
-import { formatAddress } from '@iota/iota-sdk/utils';
 
 export function DelegationDetail() {
     const [searchParams] = useSearchParams();
@@ -20,7 +19,7 @@ export function DelegationDetail() {
     });
 
     if (!validatorAddressParams || !stakeIdParams) {
-        return <Navigate to={'/stake'} replace={true} />;
+        return <Navigate to="/stake" replace={true} />;
     }
 
     if (isPending) {
@@ -32,12 +31,7 @@ export function DelegationDetail() {
     }
 
     return (
-        <Overlay
-            showModal
-            // this is a provisional title until we rebranding this page
-            title={`Validator: ${formatAddress(validatorAddressParams)}`}
-            closeOverlay={() => navigate('/')}
-        >
+        <Overlay showBackButton showModal title="Stake Details" closeOverlay={() => navigate('/')}>
             <DelegationDetailCard
                 validatorAddress={validatorAddressParams}
                 stakedId={stakeIdParams}