diff --git a/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue b/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue
index 39a5768..df95dd8 100644
--- a/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue
+++ b/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue
@@ -81,8 +81,13 @@
                         <div class="space-y-2 pt-4 pb-3" v-if="transaction.transactionId">
                             <dt class="text-base font-medium text-gray-500">Transaction ID</dt>
                             <dd class="flex items-center mt-1 text-sm text-gray-900">
-                                {{ transaction.transactionId }}
-                                <CopyTextIcon :text="transaction.transactionId" />
+                                <a
+                                    :href="getSubscanUrl(transaction.transactionId)"
+                                    target="_blank"
+                                    class="text-primary font-medium"
+                                >
+                                    {{ transaction.transactionId }}
+                                </a>
                             </dd>
                         </div>
 
@@ -188,6 +193,14 @@ const events = computed(() => transaction.value?.events);
 
 const advancedEvents = computed(() => transaction.value?.advancedEvents);
 
+const getSubscanUrl = (transactionId) => {
+    if (appStore.config.network === 'canary') {
+        return `https://canary-matrix.subscan.io/extrinsic/${transactionId}`;
+    }
+
+    return `https://matrix.subscan.io/extrinsic/${transactionId}`;
+};
+
 const isAddressKey = (key) => ['who', 'operator', 'account', 'owner'].includes(key);
 
 const getTransaction = async () => {