diff --git a/client/src/app/components/stardust/Output.tsx b/client/src/app/components/stardust/Output.tsx
index f515ca898..01a2640d9 100644
--- a/client/src/app/components/stardust/Output.tsx
+++ b/client/src/app/components/stardust/Output.tsx
@@ -72,6 +72,7 @@ class Output extends Component<OutputProps, OutputState> {
      */
     public render(): ReactNode {
         const { outputId, output, amount, showCopyAmount, network, isPreExpanded, displayFullOutputId, isLinksDisabled } = this.props;
+        // console.log(output);
         const { isExpanded, isFormattedBalance } = this.state;
         const tokenInfo: INodeInfoBaseToken = this.context.tokenInfo;
 
diff --git a/client/src/app/routes/stardust/TransactionPage.tsx b/client/src/app/routes/stardust/TransactionPage.tsx
index b805a26c7..d6a6edc64 100644
--- a/client/src/app/routes/stardust/TransactionPage.tsx
+++ b/client/src/app/routes/stardust/TransactionPage.tsx
@@ -23,6 +23,10 @@ import InclusionState from "../../components/stardust/InclusionState";
 import TruncatedId from "../../components/stardust/TruncatedId";
 import NetworkContext from "../../context/NetworkContext";
 import "./TransactionPage.scss";
+import { ServiceFactory } from "~factories/serviceFactory";
+import { StardustApiClient } from "~services/stardust/stardustApiClient";
+import { STARDUST } from "~models/config/protocolVersion";
+import { OutputResponse, UnlockConditionType } from "@iota/sdk-wasm/web";
 
 enum TRANSACTION_PAGE_TABS {
     Payload = "Payload",
@@ -36,6 +40,7 @@ const TransactionPage: React.FC<RouteComponentProps<TransactionPageProps>> = ({
     },
 }) => {
     const { tokenInfo } = useContext(NetworkContext);
+    const [apiClient] = useState(() => ServiceFactory.get<StardustApiClient>(`api-client-${STARDUST}`));
     const [block, isIncludedBlockLoading, blockError] = useTransactionIncludedBlock(network, transactionId);
     const [inputs, unlocks, outputs, transferTotal, isInputsAndOutputsLoading] = useInputsAndOutputs(network, block);
     const [includedBlockId, setIncludedBlockId] = useState<string | null>(null);
@@ -45,6 +50,8 @@ const TransactionPage: React.FC<RouteComponentProps<TransactionPageProps>> = ({
     const [blockMetadata, isBlockMetadataLoading] = useBlockMetadata(network, includedBlockId);
     const [isFormattedBalance, setIsFormattedBalance] = useState(true);
 
+    // console.log('--- inputs', inputs, outputs);
+
     useEffect(() => {
         if (block?.payload?.type === PayloadType.Transaction) {
             const transactionPayload = block.payload as ITransactionPayload;
@@ -55,6 +62,59 @@ const TransactionPage: React.FC<RouteComponentProps<TransactionPageProps>> = ({
         }
     }, [block]);
 
+    const requestOutputDetails = async (outputId: string): Promise<OutputResponse | null> => {
+        if (!outputId) return null;
+
+        try {
+            const response = await apiClient.outputDetails({ network, outputId });
+            const details = response.output;
+
+            if (!response.error && details?.output && details?.metadata) {
+                return details;
+            }
+            return null;
+        } catch {
+            console.log("Failed loading transaction history details!");
+            return null;
+        }
+    };
+
+    useEffect(() => {
+        // request output details for unlocks with expiration
+        if (!inputs || !outputs) return;
+
+        (async () => {
+            const outputIdsWithUnlockConditions = [];
+
+            for (const input of inputs) {
+                // @ts-ignore
+                const hasUnlockExpiration = input?.output?.output?.unlockConditions?.some(i => i.type === UnlockConditionType.Expiration);
+                // @ts-ignore
+                if (hasUnlockExpiration) {
+                    outputIdsWithUnlockConditions.push(input?.outputId);
+                }
+            }
+
+            for (const output of outputs) {
+
+                // @ts-ignore
+                const hasUnlockExpiration = output?.output?.unlockConditions?.some(i => i.type === UnlockConditionType.Expiration);
+
+                if (hasUnlockExpiration) {
+                    outputIdsWithUnlockConditions.push(output?.id);
+                }
+            }
+
+            if (outputIdsWithUnlockConditions.length > 0) {
+                const outputDetails = await Promise.all(outputIdsWithUnlockConditions.map((outputId) => {
+                    return apiClient.outputDetails({ network, outputId });
+                }));
+                console.log('--- outputDetails', outputDetails);
+            }
+
+        })();
+    }, [inputs, outputs]);
+
     const { metadata, metadataError, conflictReason, blockTangleStatus } = blockMetadata;
     const isLinksDisabled = metadata?.ledgerInclusionState === "conflicting";
     const isMarketed = isMarketedNetwork(network);