diff --git a/components/Transaction/TransactionCredential.js b/components/Transaction/TransactionCredential.js
new file mode 100644
index 000000000..b2261bc5b
--- /dev/null
+++ b/components/Transaction/TransactionCredential.js
@@ -0,0 +1,153 @@
+import { TData } from '../Table'
+import { TransactionCard } from './TransactionCard'
+import { AddressWithIconFilled, fullDateAndTime } from '../../utils/format'
+import { decode } from '../../utils'
+import CopyButton from '../UI/CopyButton'
+
+const CredentialList = ({ credentials, title }) => {
+  if (!credentials || credentials.length === 0) return null
+
+  return (
+    <tr>
+      <TData className="bold">{title}</TData>
+      <TData>
+        <div>
+          {credentials.map((credential, index) => (
+            <div
+              key={index}
+              style={{ marginBottom: '8px', padding: '8px', border: '1px solid #ddd', borderRadius: '4px' }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  flexWrap: 'wrap',
+                  gap: '4px'
+                }}
+              >
+                <div
+                  style={{
+                    flex: '0 0 auto',
+                    minWidth: 'fit-content'
+                  }}
+                >
+                  <strong>Issuer:</strong>
+                </div>
+                <div
+                  style={{
+                    flex: '1 1 auto',
+                    minWidth: '140px'
+                  }}
+                >
+                  <AddressWithIconFilled data={credential} name="issuer" />
+                </div>
+              </div>
+              <div>
+                <strong>Type:</strong> {credential.type || <span className="orange">Unknown</span>}
+              </div>
+            </div>
+          ))}
+        </div>
+      </TData>
+    </tr>
+  )
+}
+
+export const TransactionCredential = ({ data, pageFiatRate, selectedCurrency }) => {
+  if (!data) return null
+  const { specification, outcome, tx } = data
+  const txType = tx?.TransactionType
+  const isDepositPreauth = txType === 'DepositPreauth'
+
+  return (
+    <TransactionCard data={data} pageFiatRate={pageFiatRate} selectedCurrency={selectedCurrency}>
+      <tr>
+        <TData>
+          Initiated by
+          {txType === 'CredentialCreate' && (
+            <>
+              <br />
+              issuer
+            </>
+          )}
+          {outcome?.credentialChanges.subject === specification?.source && (
+            <>
+              <br />
+              subject
+            </>
+          )}
+        </TData>
+        <TData>
+          <AddressWithIconFilled data={specification?.source} name="address" />
+        </TData>
+      </tr>
+      {isDepositPreauth && tx.Authorize && (
+        <tr>
+          <TData className="bold">Authorize</TData>
+          <TData>
+            <AddressWithIconFilled data={tx.Authorize} name="address" />
+          </TData>
+        </tr>
+      )}
+      {isDepositPreauth && tx.Unauthorize && (
+        <tr>
+          <TData className="bold">Unauthorize</TData>
+          <TData>
+            <AddressWithIconFilled data={tx.Unauthorize} name="address" />
+          </TData>
+        </tr>
+      )}
+      {!isDepositPreauth && (
+        <>
+          {specification.issuer && (
+            <tr>
+              <TData>Issuer</TData>
+              <TData>
+                <AddressWithIconFilled data={specification} name="issuer" />
+              </TData>
+            </tr>
+          )}
+          {specification?.subject && (
+            <tr>
+              <TData>Subject</TData>
+              <TData>
+                <AddressWithIconFilled data={specification} name="subject" />
+              </TData>
+            </tr>
+          )}
+          <tr>
+            <TData>Credential type</TData>
+            <TData>
+              {outcome?.credentialChanges?.credentialType}{' '}
+              <CopyButton text={outcome?.credentialChanges?.credentialType} />
+            </TData>
+          </tr>
+          {outcome?.credentialChanges?.flags && (
+            <tr>
+              <TData>Flag</TData>
+              <TData>
+                <span className={outcome.credentialChanges.flags.accepted ? 'green' : 'red'}>
+                  {outcome.credentialChanges.flags.accepted ? 'Accepted' : 'Not accepted'}
+                </span>
+              </TData>
+            </tr>
+          )}
+        </>
+      )}
+      <CredentialList credentials={specification?.authorizeCredentials} title="Authorize Credentials" />
+      <CredentialList credentials={specification?.unauthorizeCredentials} title="Unauthorize Credentials" />
+      {!isDepositPreauth && specification?.expiration && (
+        <tr>
+          <TData>Expiration</TData>
+          <TData>{fullDateAndTime(specification.expiration, 'ripple')}</TData>
+        </tr>
+      )}
+      {!isDepositPreauth && specification?.uri && (
+        <tr>
+          <TData>URI</TData>
+          <TData>{decode(specification.uri)}</TData>
+        </tr>
+      )}
+    </TransactionCard>
+  )
+}
diff --git a/components/Transaction/index.js b/components/Transaction/index.js
index e722479d6..dd44f773f 100644
--- a/components/Transaction/index.js
+++ b/components/Transaction/index.js
@@ -4,6 +4,7 @@ export { TransactionDetails } from './TransactionDetails'
 export { TransactionAccountDelete } from './TransactionAccountDelete'
 export { TransactionAccountSet } from './TransactionAccountSet'
 export { TransactionCheck } from './TransactionCheck'
+export { TransactionCredential } from './TransactionCredential'
 export { TransactionDelegateSet } from './TransactionDelegateSet'
 export { TransactionEscrow } from './TransactionEscrow'
 export { TransactionNFToken } from './TransactionNFToken'
diff --git a/pages/transaction/[id].js b/pages/transaction/[id].js
index d60efc2f2..618af7840 100644
--- a/pages/transaction/[id].js
+++ b/pages/transaction/[id].js
@@ -12,6 +12,7 @@ import {
   TransactionAccountSet,
   TransactionAMM,
   TransactionCheck,
+  TransactionCredential,
   TransactionDID,
   TransactionEscrow,
   TransactionImport,
@@ -94,6 +95,8 @@ export default function Transaction({ data, selectedCurrency }) {
     TransactionComponent = TransactionAMM
   } else if (txType?.includes('Check')) {
     TransactionComponent = TransactionCheck
+  } else if (txType === 'CredentialCreate' || txType === 'CredentialAccept' || txType === 'CredentialDelete' || txType === 'DepositPreauth') {
+    TransactionComponent = TransactionCredential
   } else if (txType?.includes('Escrow')) {
     TransactionComponent = TransactionEscrow
   } else if (txType === 'Import') {