diff --git a/apps/explorer/src/pages/transaction-result/TransactionData.tsx b/apps/explorer/src/pages/transaction-result/TransactionData.tsx
index 24eea304d00..604998be216 100644
--- a/apps/explorer/src/pages/transaction-result/TransactionData.tsx
+++ b/apps/explorer/src/pages/transaction-result/TransactionData.tsx
@@ -7,8 +7,6 @@ import {
     type ProgrammableTransaction,
     type IotaTransactionBlockResponse,
 } from '@iota/iota-sdk/client';
-
-import { TransactionDetailCard } from './transaction-summary/TransactionDetailCard';
 import { GasBreakdown } from '~/components';
 import { useRecognizedPackages } from '~/hooks/useRecognizedPackages';
 import { InputsCard } from '~/pages/transaction-result/programmable-transaction-view/InputsCard';
@@ -32,15 +30,8 @@ export function TransactionData({ transaction }: TransactionDataProps): JSX.Elem
     const programmableTxn = transaction.transaction!.data.transaction as ProgrammableTransaction;
 
     return (
-        <div className="flex flex-wrap gap-3 pl-1 pr-2 md:gap-6">
-            <section className="flex w-96 flex-1 flex-col gap-3 max-md:min-w-[50%] md:gap-6">
-                <TransactionDetailCard
-                    timestamp={summary?.timestamp}
-                    sender={summary?.sender}
-                    checkpoint={transaction.checkpoint}
-                    executedEpoch={transaction.effects?.executedEpoch}
-                />
-
+        <div className="flex w-full flex-col gap-3 pl-1 pr-2 md:gap-6">
+            <section className="flex w-full flex-1 flex-col gap-3  md:gap-6">
                 {isProgrammableTransaction && (
                     <div data-testid="inputs-card">
                         <InputsCard inputs={programmableTxn.inputs} />
@@ -49,7 +40,7 @@ export function TransactionData({ transaction }: TransactionDataProps): JSX.Elem
             </section>
 
             {isProgrammableTransaction && (
-                <section className="flex w-96 flex-1 flex-col gap-3 md:min-w-transactionColumn md:gap-6">
+                <section className="flex w-full flex-1 flex-col gap-3 md:min-w-transactionColumn md:gap-6">
                     <div data-testid="transactions-card">
                         <TransactionsCard transactions={programmableTxn.transactions} />
                     </div>
diff --git a/apps/explorer/src/pages/transaction-result/TransactionView.tsx b/apps/explorer/src/pages/transaction-result/TransactionView.tsx
index 966a9e53e8e..2b65378e7e2 100644
--- a/apps/explorer/src/pages/transaction-result/TransactionView.tsx
+++ b/apps/explorer/src/pages/transaction-result/TransactionView.tsx
@@ -16,6 +16,9 @@ import { Signatures } from './Signatures';
 
 import { LocalStorageSplitPaneKey } from '~/lib/enums';
 import styles from './TransactionResult.module.css';
+import { TransactionDetails } from './transaction-summary/TransactionDetails';
+import { useTransactionSummary } from '@iota/core';
+import { useRecognizedPackages } from '~/hooks';
 
 interface TabsContentContainerProps {
     value: string;
@@ -91,10 +94,22 @@ export function TransactionView({ transaction }: TransactionViewProps): JSX.Elem
         minSize: 40,
         defaultSize: isProgrammableTransaction ? 65 : 50,
     };
-
+    const recognizedPackagesList = useRecognizedPackages();
+    const summary = useTransactionSummary({
+        transaction,
+        recognizedPackagesList,
+    });
     return (
         <div className={clsx(styles.txdetailsbg)}>
-            <div className="h-screen md:h-full">
+            <div className="flex h-screen flex-col gap-2xl md:h-full">
+                <div>
+                    <TransactionDetails
+                        timestamp={summary?.timestamp}
+                        sender={summary?.sender}
+                        checkpoint={transaction.checkpoint}
+                        executedEpoch={transaction.effects?.executedEpoch}
+                    />
+                </div>
                 <SplitPanes
                     autoSaveId={LocalStorageSplitPaneKey.TransactionView}
                     onCollapse={setIsCollapsed}
diff --git a/apps/explorer/src/pages/transaction-result/transaction-summary/TransactionDetailCard.tsx b/apps/explorer/src/pages/transaction-result/transaction-summary/TransactionDetailCard.tsx
deleted file mode 100644
index e96bf30ce38..00000000000
--- a/apps/explorer/src/pages/transaction-result/transaction-summary/TransactionDetailCard.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { formatDate, useResolveIotaNSName } from '@iota/core';
-import { Heading, Text } from '@iota/ui';
-import { type ReactNode } from 'react';
-
-import {
-    AddressLink,
-    CheckpointSequenceLink,
-    CollapsibleCard,
-    CollapsibleSection,
-    EpochLink,
-} from '~/components/ui';
-import { useBreakpoint } from '~/hooks/useBreakpoint';
-
-export function TransactionDetail({
-    label,
-    value,
-}: {
-    label: string;
-    value: ReactNode | string;
-}): JSX.Element {
-    return (
-        <div className="flex basis-1/3 flex-col gap-2 pl-3 first:pl-0 md:pl-5">
-            <Heading variant="heading4/semibold" color="steel-darker">
-                {label}
-            </Heading>
-            <Text variant="pBody/normal" color="steel-dark">
-                {value}
-            </Text>
-        </div>
-    );
-}
-
-interface TransactionDetailsProps {
-    sender?: string;
-    checkpoint?: string | null;
-    executedEpoch?: string;
-    timestamp?: string | null;
-}
-
-export function TransactionDetailCard({
-    sender,
-    checkpoint,
-    executedEpoch,
-    timestamp,
-}: TransactionDetailsProps): JSX.Element {
-    const md = useBreakpoint('md');
-    const { data: domainName } = useResolveIotaNSName(sender);
-
-    return (
-        <CollapsibleCard size={md ? 'md' : 'sm'}>
-            <CollapsibleSection>
-                <div className="flex flex-col gap-6">
-                    {timestamp && (
-                        <Text variant="pBody/medium" color="steel-dark">
-                            {formatDate(Number(timestamp))}
-                        </Text>
-                    )}
-                    <div className="flex justify-between gap-3 divide-x divide-gray-45 md:gap-5">
-                        {sender && (
-                            <TransactionDetail
-                                label="Sender"
-                                value={<AddressLink address={domainName ?? sender} />}
-                            />
-                        )}
-                        {checkpoint && (
-                            <TransactionDetail
-                                label="Checkpoint"
-                                value={
-                                    <CheckpointSequenceLink
-                                        sequence={checkpoint}
-                                        label={Number(checkpoint).toLocaleString()}
-                                    />
-                                }
-                            />
-                        )}
-                        {executedEpoch && (
-                            <TransactionDetail
-                                label="Epoch"
-                                value={<EpochLink epoch={executedEpoch} />}
-                            />
-                        )}
-                    </div>
-                </div>
-            </CollapsibleSection>
-        </CollapsibleCard>
-    );
-}
diff --git a/apps/explorer/src/pages/transaction-result/transaction-summary/TransactionDetails.tsx b/apps/explorer/src/pages/transaction-result/transaction-summary/TransactionDetails.tsx
new file mode 100644
index 00000000000..a90d9f1cd3c
--- /dev/null
+++ b/apps/explorer/src/pages/transaction-result/transaction-summary/TransactionDetails.tsx
@@ -0,0 +1,51 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { DisplayStats } from '@iota/apps-ui-kit';
+import { formatDate, useResolveIotaNSName } from '@iota/core';
+
+interface TransactionDetailsProps {
+    sender?: string;
+    checkpoint?: string | null;
+    executedEpoch?: string;
+    timestamp?: string | null;
+}
+
+export function TransactionDetails({
+    sender,
+    checkpoint,
+    executedEpoch,
+    timestamp,
+}: TransactionDetailsProps): JSX.Element {
+    const { data: domainName } = useResolveIotaNSName(sender);
+
+    return (
+        <div className="grid grid-cols-1 gap-sm md:grid-cols-4">
+            {sender && (
+                <DisplayStats
+                    label="Sender"
+                    value={sender}
+                    valueLink={domainName ?? `/address/${sender}`}
+                    isTruncated
+                />
+            )}
+            {checkpoint && (
+                <DisplayStats
+                    label="Checkpoint"
+                    value={Number(checkpoint).toLocaleString()}
+                    valueLink={`/checkpoint/${checkpoint}`}
+                />
+            )}
+            {executedEpoch && (
+                <DisplayStats
+                    label="Epoch"
+                    value={executedEpoch}
+                    valueLink={`/epoch/${executedEpoch}`}
+                />
+            )}
+
+            {timestamp && <DisplayStats label="Date" value={formatDate(Number(timestamp))} />}
+        </div>
+    );
+}
diff --git a/apps/ui-kit/src/lib/components/molecules/display-stats/DisplayStats.tsx b/apps/ui-kit/src/lib/components/molecules/display-stats/DisplayStats.tsx
index 8293aa9a0dd..a33f350c637 100644
--- a/apps/ui-kit/src/lib/components/molecules/display-stats/DisplayStats.tsx
+++ b/apps/ui-kit/src/lib/components/molecules/display-stats/DisplayStats.tsx
@@ -56,6 +56,10 @@ interface DisplayStatsProps {
      * The value link is external.
      */
     isExternalLink?: boolean;
+    /**
+     * The value is truncated
+     */
+    isTruncated?: boolean;
 }
 
 export function DisplayStats({
@@ -69,6 +73,7 @@ export function DisplayStats({
     icon,
     valueLink,
     isExternalLink = false,
+    isTruncated = false,
 }: DisplayStatsProps): React.JSX.Element {
     const backgroundClass = BACKGROUND_CLASSES[type];
     const sizeClass = SIZE_CLASSES[size];
@@ -76,6 +81,11 @@ export function DisplayStats({
     const valueTextClass = VALUE_TEXT_CLASSES[size];
     const labelTextClass = LABEL_TEXT_CLASSES[size];
     const supportingLabelTextClass = SUPPORTING_LABEL_TEXT_CLASSES[size];
+    function truncate(value: string, startLength: number, endLength: number): string {
+        return value.length > startLength + endLength && isTruncated
+            ? `${value.slice(0, startLength)}...${value.slice(-endLength)}`
+            : value;
+    }
     return (
         <div
             className={cx(
@@ -100,7 +110,7 @@ export function DisplayStats({
                 </div>
                 {icon && <span className="text-neutral-10 dark:text-neutral-92">{icon}</span>}
             </div>
-            <div className="flex flex-row items-baseline gap-xxs break-all">
+            <div className="flex w-full flex-row items-baseline gap-xxs">
                 {valueLink ? (
                     <a
                         href={valueLink}
@@ -108,11 +118,11 @@ export function DisplayStats({
                         rel="noreferrer"
                         className={cx('text-primary-30 dark:text-primary-80', valueTextClass)}
                     >
-                        {value}
+                        {truncate(value, 6, 6)}
                     </a>
                 ) : (
                     <>
-                        <span className={cx(valueTextClass)}>{value}</span>
+                        <span className={cx(valueTextClass)}>{truncate(value, 6, 6)}</span>
                         {supportingLabel && (
                             <span className={cx('opacity-40', supportingLabelTextClass)}>
                                 {supportingLabel}
diff --git a/apps/ui-kit/src/storybook/stories/molecules/DisplayStats.stories.tsx b/apps/ui-kit/src/storybook/stories/molecules/DisplayStats.stories.tsx
index 690c9c7a2cc..18a1c6a2c9b 100644
--- a/apps/ui-kit/src/storybook/stories/molecules/DisplayStats.stories.tsx
+++ b/apps/ui-kit/src/storybook/stories/molecules/DisplayStats.stories.tsx
@@ -66,5 +66,8 @@ export const Default: Story = {
         isExternalLink: {
             control: 'boolean',
         },
+        isTruncated: {
+            control: 'boolean',
+        },
     },
 };