diff --git a/explorer/src/components/AccountDetails.tsx b/explorer/src/components/AccountDetails.tsx
index 59985fdfb4..25edab1f5b 100644
--- a/explorer/src/components/AccountDetails.tsx
+++ b/explorer/src/components/AccountDetails.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import { PublicKey, StakeProgram, TokenAccountInfo } from "@solana/web3.js";
 import {
   FetchStatus,
@@ -9,8 +8,6 @@ import {
   Account,
 } from "providers/accounts";
 import { lamportsToSolString } from "utils";
-import Copyable from "./Copyable";
-import { displayAddress } from "utils/tx";
 import { StakeAccountCards } from "components/account/StakeAccountCards";
 import ErrorCard from "components/common/ErrorCard";
 import LoadingCard from "components/common/LoadingCard";
@@ -21,6 +18,8 @@ import {
   useAccountOwnedTokens,
 } from "providers/accounts/tokens";
 import { useCluster, ClusterStatus } from "providers/cluster";
+import Address from "./common/Address";
+import Signature from "./common/Signature";
 
 type Props = { address: string };
 export default function AccountDetails({ address }: Props) {
@@ -92,9 +91,7 @@ function UnknownAccountCard({ account }: { account: Account }) {
         <tr>
           <td>Address</td>
           <td className="text-right">
-            <Copyable text={account.pubkey.toBase58()} right bottom>
-              <code>{displayAddress(account.pubkey.toBase58())}</code>
-            </Copyable>
+            <Address pubkey={account.pubkey} alignRight />
           </td>
         </tr>
         <tr>
@@ -115,9 +112,7 @@ function UnknownAccountCard({ account }: { account: Account }) {
           <tr>
             <td>Owner</td>
             <td className="text-right">
-              <Copyable text={details.owner.toBase58()} right>
-                <code>{displayAddress(details.owner.toBase58())}</code>
-              </Copyable>
+              <Address pubkey={details.owner} alignRight link />
             </td>
           </tr>
         )}
@@ -178,24 +173,9 @@ function TokensCard({ pubkey }: { pubkey: PublicKey }) {
     detailsList.push(
       <tr key={mintAddress}>
         <td>
-          <Copyable text={mintAddress}>
-            <code>{mintAddress}</code>
-          </Copyable>
+          <Address pubkey={new PublicKey(mintAddress)} link />
         </td>
-
         <td>{balance}</td>
-
-        <td>
-          <Link
-            to={(location) => ({
-              ...location,
-              pathname: "/account/" + mintAddress,
-            })}
-            className="btn btn-rounded-circle btn-white btn-sm"
-          >
-            <span className="fe fe-arrow-right"></span>
-          </Link>
-        </td>
       </tr>
     );
   });
@@ -229,7 +209,6 @@ function TokensCard({ pubkey }: { pubkey: PublicKey }) {
             <tr>
               <th className="text-muted">Token Address</th>
               <th className="text-muted">Balance</th>
-              <th className="text-muted">Details</th>
             </tr>
           </thead>
           <tbody className="list">{detailsList}</tbody>
@@ -317,21 +296,7 @@ function HistoryCard({ pubkey }: { pubkey: PublicKey }) {
           </td>
 
           <td>
-            <Copyable text={signature}>
-              <code>{signature}</code>
-            </Copyable>
-          </td>
-
-          <td>
-            <Link
-              to={(location) => ({
-                ...location,
-                pathname: "/tx/" + signature,
-              })}
-              className="btn btn-rounded-circle btn-white btn-sm"
-            >
-              <span className="fe fe-arrow-right"></span>
-            </Link>
+            <Signature signature={signature} link />
           </td>
         </tr>
       );
@@ -369,7 +334,6 @@ function HistoryCard({ pubkey }: { pubkey: PublicKey }) {
               <th className="text-muted w-1">Slot</th>
               <th className="text-muted">Result</th>
               <th className="text-muted">Transaction Signature</th>
-              <th className="text-muted">Details</th>
             </tr>
           </thead>
           <tbody className="list">{detailsList}</tbody>
diff --git a/explorer/src/components/TopAccountsCard.tsx b/explorer/src/components/TopAccountsCard.tsx
index 3cbb293be9..1b69349407 100644
--- a/explorer/src/components/TopAccountsCard.tsx
+++ b/explorer/src/components/TopAccountsCard.tsx
@@ -2,13 +2,13 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { Location } from "history";
 import { AccountBalancePair } from "@solana/web3.js";
-import Copyable from "./Copyable";
 import { useRichList, useFetchRichList, Status } from "providers/richList";
 import LoadingCard from "./common/LoadingCard";
 import ErrorCard from "./common/ErrorCard";
 import { lamportsToSolString } from "utils";
 import { useQuery } from "utils/url";
 import { useSupply } from "providers/supply";
+import Address from "./common/Address";
 
 type Filter = "circulating" | "nonCirculating" | "all" | null;
 
@@ -91,8 +91,7 @@ export default function TopAccountsCard() {
                 <th className="text-muted">Rank</th>
                 <th className="text-muted">Address</th>
                 <th className="text-muted text-right">Balance (SOL)</th>
-                <th className="text-muted text-center">% of {header} Supply</th>
-                <th className="text-muted">Details</th>
+                <th className="text-muted text-right">% of {header} Supply</th>
               </tr>
             </thead>
             <tbody className="list">
@@ -112,33 +111,19 @@ const renderAccountRow = (
   index: number,
   supply: number
 ) => {
-  const base58AccountPubkey = account.address.toBase58();
   return (
     <tr key={index}>
       <td>
         <span className="badge badge-soft-dark badge-pill">{index + 1}</span>
       </td>
       <td>
-        <Copyable text={base58AccountPubkey}>
-          <code>{base58AccountPubkey}</code>
-        </Copyable>
+        <Address pubkey={account.address} link />
       </td>
       <td className="text-right">{lamportsToSolString(account.lamports, 0)}</td>
-      <td className="text-center">{`${(
+      <td className="text-right">{`${(
         (100 * account.lamports) /
         supply
       ).toFixed(3)}%`}</td>
-      <td>
-        <Link
-          to={(location) => ({
-            ...location,
-            pathname: "/account/" + base58AccountPubkey,
-          })}
-          className="btn btn-rounded-circle btn-white btn-sm"
-        >
-          <span className="fe fe-arrow-right"></span>
-        </Link>
-      </td>
     </tr>
   );
 };
diff --git a/explorer/src/components/TransactionDetails.tsx b/explorer/src/components/TransactionDetails.tsx
index e4c71c6c21..b28e96116d 100644
--- a/explorer/src/components/TransactionDetails.tsx
+++ b/explorer/src/components/TransactionDetails.tsx
@@ -14,8 +14,6 @@ import {
   SystemInstruction,
 } from "@solana/web3.js";
 import { lamportsToSolString } from "utils";
-import { displayAddress } from "utils/tx";
-import Copyable from "./Copyable";
 import { UnknownDetailsCard } from "./instruction/UnknownDetailsCard";
 import { SystemDetailsCard } from "./instruction/system/SystemDetailsCard";
 import { StakeDetailsCard } from "./instruction/stake/StakeDetailsCard";
@@ -25,6 +23,8 @@ import TableCardBody from "./common/TableCardBody";
 import { displayTimestamp } from "utils/date";
 import InfoTooltip from "components/InfoTooltip";
 import { isCached } from "providers/transactions/cached";
+import Address from "./common/Address";
+import Signature from "./common/Signature";
 
 type Props = { signature: TransactionSignature };
 export default function TransactionDetails({ signature }: Props) {
@@ -115,9 +115,7 @@ function StatusCard({ signature }: Props) {
         <tr>
           <td>Signature</td>
           <td className="text-right">
-            <Copyable text={signature} right bottom>
-              <code>{signature}</code>
-            </Copyable>
+            <Signature signature={signature} />
           </td>
         </tr>
 
@@ -239,9 +237,7 @@ function AccountsCard({ signature }: Props) {
     return (
       <tr key={key}>
         <td>
-          <Copyable text={key}>
-            <code>{displayAddress(pubkey.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={pubkey} link />
         </td>
         <td>{renderChange()}</td>
         <td>{lamportsToSolString(post)}</td>
diff --git a/explorer/src/components/account/StakeAccountCards.tsx b/explorer/src/components/account/StakeAccountCards.tsx
index 35219948dc..c6f06f2024 100644
--- a/explorer/src/components/account/StakeAccountCards.tsx
+++ b/explorer/src/components/account/StakeAccountCards.tsx
@@ -2,10 +2,9 @@ import React from "react";
 import { StakeAccount, Meta } from "solana-sdk-wasm";
 import TableCardBody from "components/common/TableCardBody";
 import { lamportsToSolString } from "utils";
-import Copyable from "components/Copyable";
-import { displayAddress } from "utils/tx";
 import { displayTimestamp } from "utils/date";
 import { Account, useFetchAccountInfo } from "providers/accounts";
+import Address from "components/common/Address";
 
 export function StakeAccountCards({
   account,
@@ -65,9 +64,7 @@ function OverviewCard({
         <tr>
           <td>Address</td>
           <td className="text-right">
-            <Copyable text={account.pubkey.toBase58()} bottom right>
-              <code>{account.pubkey.toBase58()}</code>
-            </Copyable>
+            <Address pubkey={account.pubkey} alignRight />
           </td>
         </tr>
         <tr>
@@ -130,11 +127,11 @@ function DelegationCard({ stakeAccount }: { stakeAccount: StakeAccount }) {
             <tr>
               <td>Delegated Vote Address</td>
               <td className="text-right">
-                <Copyable text={stake.delegation.voterPubkey.toBase58()} right>
-                  <code>
-                    {displayAddress(stake.delegation.voterPubkey.toBase58())}
-                  </code>
-                </Copyable>
+                <Address
+                  pubkey={stake.delegation.voterPubkey}
+                  alignRight
+                  link
+                />
               </td>
             </tr>
 
@@ -175,18 +172,14 @@ function AuthoritiesCard({ meta }: { meta: Meta }) {
         <tr>
           <td>Stake Authority Address</td>
           <td className="text-right">
-            <Copyable text={meta.authorized.staker.toBase58()} bottom right>
-              <code>{meta.authorized.staker.toBase58()}</code>
-            </Copyable>
+            <Address pubkey={meta.authorized.staker} alignRight link />
           </td>
         </tr>
 
         <tr>
           <td>Withdraw Authority Address</td>
           <td className="text-right">
-            <Copyable text={meta.authorized.withdrawer.toBase58()} right>
-              <code>{meta.authorized.withdrawer.toBase58()}</code>
-            </Copyable>
+            <Address pubkey={meta.authorized.withdrawer} alignRight link />
           </td>
         </tr>
 
@@ -194,9 +187,7 @@ function AuthoritiesCard({ meta }: { meta: Meta }) {
           <tr>
             <td>Lockup Authority Address</td>
             <td className="text-right">
-              <Copyable text={meta.lockup.custodian.toBase58()} right>
-                <code>{displayAddress(meta.lockup.custodian.toBase58())}</code>
-              </Copyable>
+              <Address pubkey={meta.lockup.custodian} alignRight link />
             </td>
           </tr>
         )}
diff --git a/explorer/src/components/common/Address.tsx b/explorer/src/components/common/Address.tsx
new file mode 100644
index 0000000000..263219d604
--- /dev/null
+++ b/explorer/src/components/common/Address.tsx
@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { PublicKey } from "@solana/web3.js";
+import { clusterPath } from "utils/url";
+import { displayAddress } from "utils/tx";
+import { Pubkey } from "solana-sdk-wasm";
+
+type CopyState = "copy" | "copied";
+type Props = {
+  pubkey: PublicKey | Pubkey;
+  alignRight?: boolean;
+  link?: boolean;
+};
+
+export default function Address({ pubkey, alignRight, link }: Props) {
+  const [state, setState] = useState<CopyState>("copy");
+  const address = pubkey.toBase58();
+
+  const copyToClipboard = () => navigator.clipboard.writeText(address);
+  const handleClick = () =>
+    copyToClipboard().then(() => {
+      setState("copied");
+      setTimeout(() => setState("copy"), 1000);
+    });
+
+  const copyIcon =
+    state === "copy" ? (
+      <span className="fe fe-copy" onClick={handleClick}></span>
+    ) : (
+      <span className="fe fe-check-circle"></span>
+    );
+
+  const copyButton = (
+    <span className="c-pointer font-size-tiny mr-2">{copyIcon}</span>
+  );
+
+  return (
+    <div
+      className={`d-flex align-items-center ${
+        alignRight ? "justify-content-end" : ""
+      }`}
+    >
+      {copyButton}
+      <span className="text-monospace">
+        {link ? (
+          <Link className="" to={clusterPath(`/accounts/${address}`)}>
+            {displayAddress(address)}
+            <span className="fe fe-external-link ml-2"></span>
+          </Link>
+        ) : (
+          displayAddress(address)
+        )}
+      </span>
+    </div>
+  );
+}
diff --git a/explorer/src/components/common/Signature.tsx b/explorer/src/components/common/Signature.tsx
new file mode 100644
index 0000000000..9b136d0aa2
--- /dev/null
+++ b/explorer/src/components/common/Signature.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { TransactionSignature } from "@solana/web3.js";
+import { clusterPath } from "utils/url";
+
+type CopyState = "copy" | "copied";
+type Props = { signature: TransactionSignature; link?: boolean };
+
+export default function Signature({ signature, link }: Props) {
+  const [state, setState] = useState<CopyState>("copy");
+
+  const copyToClipboard = () => navigator.clipboard.writeText(signature);
+  const handleClick = () =>
+    copyToClipboard().then(() => {
+      setState("copied");
+      setTimeout(() => setState("copy"), 1000);
+    });
+
+  const copyIcon =
+    state === "copy" ? (
+      <span className="fe fe-copy" onClick={handleClick}></span>
+    ) : (
+      <span className="fe fe-check-circle"></span>
+    );
+
+  const copyButton = (
+    <span className="c-pointer font-size-tiny mr-2">{copyIcon}</span>
+  );
+
+  return (
+    <div className="d-flex align-items-center justify-content-end">
+      {copyButton}
+      <span className="text-monospace">
+        {link ? (
+          <Link className="" to={clusterPath(`/tx/${signature}`)}>
+            {signature}
+            <span className="fe fe-external-link ml-2"></span>
+          </Link>
+        ) : (
+          signature
+        )}
+      </span>
+    </div>
+  );
+}
diff --git a/explorer/src/components/instruction/RawDetails.tsx b/explorer/src/components/instruction/RawDetails.tsx
index 7677297380..84357ebec2 100644
--- a/explorer/src/components/instruction/RawDetails.tsx
+++ b/explorer/src/components/instruction/RawDetails.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import bs58 from "bs58";
 import { TransactionInstruction } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import Copyable from "components/Copyable";
+import Address from "components/common/Address";
 
 function displayData(data: string) {
   if (data.length > 50) {
@@ -18,9 +18,7 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
       <tr>
         <td>Program</td>
         <td className="text-right">
-          <Copyable text={ix.programId.toBase58()} bottom right>
-            <code>{displayAddress(ix.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={ix.programId} alignRight link />
         </td>
       </tr>
 
@@ -36,9 +34,7 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
             )}
           </td>
           <td className="text-right">
-            <Copyable text={pubkey.toBase58()} right>
-              <code>{pubkey.toBase58()}</code>
-            </Copyable>
+            <Address pubkey={pubkey} alignRight link />
           </td>
         </tr>
       ))}
diff --git a/explorer/src/components/instruction/stake/AuthorizeDetailsCard.tsx b/explorer/src/components/instruction/stake/AuthorizeDetailsCard.tsx
index 4aec1e2f5f..511e9e199e 100644
--- a/explorer/src/components/instruction/stake/AuthorizeDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/AuthorizeDetailsCard.tsx
@@ -5,10 +5,9 @@ import {
   StakeInstruction,
   StakeProgram,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";
 
 export function AuthorizeDetailsCard(props: {
   ix: TransactionInstruction;
@@ -25,10 +24,6 @@ export function AuthorizeDetailsCard(props: {
     return <UnknownDetailsCard {...props} />;
   }
 
-  const stakePubkey = params.stakePubkey.toBase58();
-  const authorizedPubkey = params.authorizedPubkey.toBase58();
-  const newAuthorizedPubkey = params.newAuthorizedPubkey.toBase58();
-
   let authorizationType;
   switch (params.stakeAuthorizationType.index) {
     case 0:
@@ -52,36 +47,28 @@ export function AuthorizeDetailsCard(props: {
       <tr>
         <td>Program</td>
         <td className="text-right">
-          <Copyable bottom right text={StakeProgram.programId.toBase58()}>
-            <code>{displayAddress(StakeProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Address</td>
         <td className="text-right">
-          <Copyable right text={stakePubkey}>
-            <code>{stakePubkey}</code>
-          </Copyable>
+          <Address pubkey={params.stakePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Old Authority Address</td>
         <td className="text-right">
-          <Copyable right text={authorizedPubkey}>
-            <code>{authorizedPubkey}</code>
-          </Copyable>
+          <Address pubkey={params.authorizedPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>New Authority Address</td>
         <td className="text-right">
-          <Copyable right text={newAuthorizedPubkey}>
-            <code>{newAuthorizedPubkey}</code>
-          </Copyable>
+          <Address pubkey={params.newAuthorizedPubkey} alignRight link />
         </td>
       </tr>
 
diff --git a/explorer/src/components/instruction/stake/DeactivateDetailsCard.tsx b/explorer/src/components/instruction/stake/DeactivateDetailsCard.tsx
index 45b6ed8155..ccf988e58f 100644
--- a/explorer/src/components/instruction/stake/DeactivateDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/DeactivateDetailsCard.tsx
@@ -5,10 +5,9 @@ import {
   StakeInstruction,
   StakeProgram,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";
 
 export function DeactivateDetailsCard(props: {
   ix: TransactionInstruction;
@@ -25,9 +24,6 @@ export function DeactivateDetailsCard(props: {
     return <UnknownDetailsCard {...props} />;
   }
 
-  const stakePubkey = params.stakePubkey.toBase58();
-  const authorizedPubkey = params.authorizedPubkey.toBase58();
-
   return (
     <InstructionCard
       ix={ix}
@@ -38,27 +34,21 @@ export function DeactivateDetailsCard(props: {
       <tr>
         <td>Program</td>
         <td className="text-right">
-          <Copyable bottom right text={StakeProgram.programId.toBase58()}>
-            <code>{displayAddress(StakeProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Address</td>
         <td className="text-right">
-          <Copyable right text={stakePubkey}>
-            <code>{stakePubkey}</code>
-          </Copyable>
+          <Address pubkey={params.stakePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
         <td className="text-right">
-          <Copyable right text={authorizedPubkey}>
-            <code>{authorizedPubkey}</code>
-          </Copyable>
+          <Address pubkey={params.authorizedPubkey} alignRight link />
         </td>
       </tr>
     </InstructionCard>
diff --git a/explorer/src/components/instruction/stake/DelegateDetailsCard.tsx b/explorer/src/components/instruction/stake/DelegateDetailsCard.tsx
index 3b8380a986..607d2abd24 100644
--- a/explorer/src/components/instruction/stake/DelegateDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/DelegateDetailsCard.tsx
@@ -5,10 +5,9 @@ import {
   StakeInstruction,
   StakeProgram,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";
 
 export function DelegateDetailsCard(props: {
   ix: TransactionInstruction;
@@ -25,10 +24,6 @@ export function DelegateDetailsCard(props: {
     return <UnknownDetailsCard {...props} />;
   }
 
-  const stakePubkey = params.stakePubkey.toBase58();
-  const votePubkey = params.votePubkey.toBase58();
-  const authorizedPubkey = params.authorizedPubkey.toBase58();
-
   return (
     <InstructionCard
       ix={ix}
@@ -39,36 +34,28 @@ export function DelegateDetailsCard(props: {
       <tr>
         <td>Program</td>
         <td className="text-right">
-          <Copyable bottom right text={StakeProgram.programId.toBase58()}>
-            <code>{displayAddress(StakeProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Address</td>
         <td className="text-right">
-          <Copyable right text={stakePubkey}>
-            <code>{stakePubkey}</code>
-          </Copyable>
+          <Address pubkey={params.stakePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Delegated Vote Address</td>
         <td className="text-right">
-          <Copyable right text={votePubkey}>
-            <code>{votePubkey}</code>
-          </Copyable>
+          <Address pubkey={params.votePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
         <td className="text-right">
-          <Copyable right text={authorizedPubkey}>
-            <code>{authorizedPubkey}</code>
-          </Copyable>
+          <Address pubkey={params.authorizedPubkey} alignRight link />
         </td>
       </tr>
     </InstructionCard>
diff --git a/explorer/src/components/instruction/stake/InitializeDetailsCard.tsx b/explorer/src/components/instruction/stake/InitializeDetailsCard.tsx
index a4459737e4..9fe5329419 100644
--- a/explorer/src/components/instruction/stake/InitializeDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/InitializeDetailsCard.tsx
@@ -6,10 +6,9 @@ import {
   StakeProgram,
   SystemProgram,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";
 
 export function InitializeDetailsCard(props: {
   ix: TransactionInstruction;
@@ -26,10 +25,6 @@ export function InitializeDetailsCard(props: {
     return <UnknownDetailsCard {...props} />;
   }
 
-  const stakerPubkey = params.authorized.staker.toBase58();
-  const withdrawerPubkey = params.authorized.withdrawer.toBase58();
-  const stakePubkey = params.stakePubkey.toBase58();
-
   return (
     <InstructionCard
       ix={ix}
@@ -40,36 +35,28 @@ export function InitializeDetailsCard(props: {
       <tr>
         <td>Program</td>
         <td className="text-right">
-          <Copyable bottom right text={StakeProgram.programId.toBase58()}>
-            <code>{displayAddress(StakeProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Address</td>
         <td className="text-right">
-          <Copyable right text={stakePubkey}>
-            <code>{stakePubkey}</code>
-          </Copyable>
+          <Address pubkey={params.stakePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Authority Address</td>
         <td className="text-right">
-          <Copyable right text={stakerPubkey}>
-            <code>{stakerPubkey}</code>
-          </Copyable>
+          <Address pubkey={params.authorized.staker} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Withdraw Authority Address</td>
         <td className="text-right">
-          <Copyable right text={withdrawerPubkey}>
-            <code>{withdrawerPubkey}</code>
-          </Copyable>
+          <Address pubkey={params.authorized.withdrawer} alignRight link />
         </td>
       </tr>
 
@@ -93,9 +80,7 @@ export function InitializeDetailsCard(props: {
         <tr>
           <td>Lockup Custodian Address</td>
           <td className="text-right">
-            <Copyable right text={params.lockup.custodian.toBase58()}>
-              <code>{displayAddress(params.lockup.custodian.toBase58())}</code>
-            </Copyable>
+            <Address pubkey={params.lockup.custodian} alignRight link />
           </td>
         </tr>
       )}
diff --git a/explorer/src/components/instruction/stake/SplitDetailsCard.tsx b/explorer/src/components/instruction/stake/SplitDetailsCard.tsx
index 46d34d6277..9b2da9af0b 100644
--- a/explorer/src/components/instruction/stake/SplitDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/SplitDetailsCard.tsx
@@ -5,11 +5,10 @@ import {
   StakeInstruction,
   StakeProgram,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { lamportsToSolString } from "utils";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";
 
 export function SplitDetailsCard(props: {
   ix: TransactionInstruction;
@@ -26,45 +25,33 @@ export function SplitDetailsCard(props: {
     return <UnknownDetailsCard {...props} />;
   }
 
-  const stakePubkey = params.stakePubkey.toBase58();
-  const authorizedPubkey = params.authorizedPubkey.toBase58();
-  const splitStakePubkey = params.splitStakePubkey.toBase58();
-
   return (
     <InstructionCard ix={ix} index={index} result={result} title="Split Stake">
       <tr>
         <td>Program</td>
         <td className="text-right">
-          <Copyable bottom right text={StakeProgram.programId.toBase58()}>
-            <code>{displayAddress(StakeProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Address</td>
         <td className="text-right">
-          <Copyable right text={stakePubkey}>
-            <code>{stakePubkey}</code>
-          </Copyable>
+          <Address pubkey={params.stakePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
         <td className="text-right">
-          <Copyable right text={authorizedPubkey}>
-            <code>{authorizedPubkey}</code>
-          </Copyable>
+          <Address pubkey={params.authorizedPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>New Stake Address</td>
         <td className="text-right">
-          <Copyable right text={splitStakePubkey}>
-            <code>{splitStakePubkey}</code>
-          </Copyable>
+          <Address pubkey={params.splitStakePubkey} alignRight link />
         </td>
       </tr>
 
diff --git a/explorer/src/components/instruction/stake/WithdrawDetailsCard.tsx b/explorer/src/components/instruction/stake/WithdrawDetailsCard.tsx
index a8dc68a416..1e7fb7b9d0 100644
--- a/explorer/src/components/instruction/stake/WithdrawDetailsCard.tsx
+++ b/explorer/src/components/instruction/stake/WithdrawDetailsCard.tsx
@@ -6,10 +6,9 @@ import {
   StakeProgram,
 } from "@solana/web3.js";
 import { lamportsToSolString } from "utils";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";
 
 export function WithdrawDetailsCard(props: {
   ix: TransactionInstruction;
@@ -26,10 +25,6 @@ export function WithdrawDetailsCard(props: {
     return <UnknownDetailsCard {...props} />;
   }
 
-  const stakePubkey = params.stakePubkey.toBase58();
-  const toPubkey = params.toPubkey.toBase58();
-  const authorizedPubkey = params.authorizedPubkey.toBase58();
-
   return (
     <InstructionCard
       ix={ix}
@@ -40,36 +35,28 @@ export function WithdrawDetailsCard(props: {
       <tr>
         <td>Program</td>
         <td className="text-right">
-          <Copyable bottom right text={StakeProgram.programId.toBase58()}>
-            <code>{displayAddress(StakeProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Address</td>
         <td className="text-right">
-          <Copyable right text={stakePubkey}>
-            <code>{stakePubkey}</code>
-          </Copyable>
+          <Address pubkey={params.stakePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
         <td className="text-right">
-          <Copyable right text={authorizedPubkey}>
-            <code>{authorizedPubkey}</code>
-          </Copyable>
+          <Address pubkey={params.authorizedPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>To Address</td>
         <td className="text-right">
-          <Copyable right text={toPubkey}>
-            <code>{toPubkey}</code>
-          </Copyable>
+          <Address pubkey={params.toPubkey} alignRight link />
         </td>
       </tr>
 
diff --git a/explorer/src/components/instruction/system/AllocateDetailsCard.tsx b/explorer/src/components/instruction/system/AllocateDetailsCard.tsx
index f51670d7e8..0845326d01 100644
--- a/explorer/src/components/instruction/system/AllocateDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/AllocateDetailsCard.tsx
@@ -5,10 +5,9 @@ import {
   SignatureResult,
   SystemInstruction,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";
 
 export function AllocateDetailsCard(props: {
   ix: TransactionInstruction;
@@ -25,8 +24,6 @@ export function AllocateDetailsCard(props: {
     return <UnknownDetailsCard {...props} />;
   }
 
-  const accountKey = params.accountPubkey.toBase58();
-
   return (
     <InstructionCard
       ix={ix}
@@ -37,18 +34,14 @@ export function AllocateDetailsCard(props: {
       <tr>
         <td>Program</td>
         <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Account Address</td>
         <td className="text-right">
-          <Copyable right text={accountKey}>
-            <code>{accountKey}</code>
-          </Copyable>
+          <Address pubkey={params.accountPubkey} alignRight link />
         </td>
       </tr>
 
diff --git a/explorer/src/components/instruction/system/AllocateWithSeedDetailsCard.tsx b/explorer/src/components/instruction/system/AllocateWithSeedDetailsCard.tsx
index 45f535f27e..06cac096a1 100644
--- a/explorer/src/components/instruction/system/AllocateWithSeedDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/AllocateWithSeedDetailsCard.tsx
@@ -5,10 +5,10 @@ import {
   SignatureResult,
   SystemInstruction,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
 import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";
 
 export function AllocateWithSeedDetailsCard(props: {
   ix: TransactionInstruction;
@@ -25,9 +25,6 @@ export function AllocateWithSeedDetailsCard(props: {
     return <UnknownDetailsCard {...props} />;
   }
 
-  const accountKey = params.accountPubkey.toBase58();
-  const baseKey = params.basePubkey.toBase58();
-
   return (
     <InstructionCard
       ix={ix}
@@ -38,27 +35,21 @@ export function AllocateWithSeedDetailsCard(props: {
       <tr>
         <td>Program</td>
         <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Account Address</td>
         <td className="text-right">
-          <Copyable right text={accountKey}>
-            <code>{accountKey}</code>
-          </Copyable>
+          <Address pubkey={params.accountPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Base Address</td>
         <td className="text-right">
-          <Copyable right text={baseKey}>
-            <code>{baseKey}</code>
-          </Copyable>
+          <Address pubkey={params.basePubkey} alignRight link />
         </td>
       </tr>
 
@@ -79,9 +70,7 @@ export function AllocateWithSeedDetailsCard(props: {
       <tr>
         <td>Assigned Owner</td>
         <td className="text-right">
-          <Copyable right text={params.programId.toBase58()}>
-            <code>{displayAddress(params.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={params.programId} alignRight link />
         </td>
       </tr>
     </InstructionCard>
diff --git a/explorer/src/components/instruction/system/AssignDetailsCard.tsx b/explorer/src/components/instruction/system/AssignDetailsCard.tsx
index 5122239bba..de489c4255 100644
--- a/explorer/src/components/instruction/system/AssignDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/AssignDetailsCard.tsx
@@ -5,10 +5,9 @@ import {
   SignatureResult,
   SystemInstruction,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";
 
 export function AssignDetailsCard(props: {
   ix: TransactionInstruction;
@@ -25,8 +24,6 @@ export function AssignDetailsCard(props: {
     return <UnknownDetailsCard {...props} />;
   }
 
-  const accountKey = params.accountPubkey.toBase58();
-
   return (
     <InstructionCard
       ix={ix}
@@ -37,27 +34,21 @@ export function AssignDetailsCard(props: {
       <tr>
         <td>Program</td>
         <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Account Address</td>
         <td className="text-right">
-          <Copyable right text={accountKey}>
-            <code>{accountKey}</code>
-          </Copyable>
+          <Address pubkey={params.accountPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Assigned Owner</td>
         <td className="text-right">
-          <Copyable right text={params.programId.toBase58()}>
-            <code>{displayAddress(params.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={params.programId} alignRight link />
         </td>
       </tr>
     </InstructionCard>
diff --git a/explorer/src/components/instruction/system/AssignWithSeedDetailsCard.tsx b/explorer/src/components/instruction/system/AssignWithSeedDetailsCard.tsx
index d53e97275f..5e08023a05 100644
--- a/explorer/src/components/instruction/system/AssignWithSeedDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/AssignWithSeedDetailsCard.tsx
@@ -5,10 +5,10 @@ import {
   SignatureResult,
   SystemInstruction,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
 import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";
 
 export function AssignWithSeedDetailsCard(props: {
   ix: TransactionInstruction;
@@ -25,9 +25,6 @@ export function AssignWithSeedDetailsCard(props: {
     return <UnknownDetailsCard {...props} />;
   }
 
-  const accountKey = params.accountPubkey.toBase58();
-  const baseKey = params.basePubkey.toBase58();
-
   return (
     <InstructionCard
       ix={ix}
@@ -38,27 +35,21 @@ export function AssignWithSeedDetailsCard(props: {
       <tr>
         <td>Program</td>
         <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Account Address</td>
         <td className="text-right">
-          <Copyable right text={accountKey}>
-            <code>{accountKey}</code>
-          </Copyable>
+          <Address pubkey={params.accountPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Base Address</td>
         <td className="text-right">
-          <Copyable right text={baseKey}>
-            <code>{baseKey}</code>
-          </Copyable>
+          <Address pubkey={params.basePubkey} alignRight link />
         </td>
       </tr>
 
@@ -74,9 +65,7 @@ export function AssignWithSeedDetailsCard(props: {
       <tr>
         <td>Assigned Owner</td>
         <td className="text-right">
-          <Copyable right text={params.programId.toBase58()}>
-            <code>{displayAddress(params.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={params.programId} alignRight link />
         </td>
       </tr>
     </InstructionCard>
diff --git a/explorer/src/components/instruction/system/CreateDetailsCard.tsx b/explorer/src/components/instruction/system/CreateDetailsCard.tsx
index 0f6ef33dac..ea6fb61cc4 100644
--- a/explorer/src/components/instruction/system/CreateDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/CreateDetailsCard.tsx
@@ -6,10 +6,9 @@ import {
   SystemInstruction,
 } from "@solana/web3.js";
 import { lamportsToSolString } from "utils";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";
 
 export function CreateDetailsCard(props: {
   ix: TransactionInstruction;
@@ -26,9 +25,6 @@ export function CreateDetailsCard(props: {
     return <UnknownDetailsCard {...props} />;
   }
 
-  const from = params.fromPubkey.toBase58();
-  const newKey = params.newAccountPubkey.toBase58();
-
   return (
     <InstructionCard
       ix={ix}
@@ -39,27 +35,21 @@ export function CreateDetailsCard(props: {
       <tr>
         <td>Program</td>
         <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>From Address</td>
         <td className="text-right">
-          <Copyable right text={from}>
-            <code>{from}</code>
-          </Copyable>
+          <Address pubkey={params.fromPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>New Address</td>
         <td className="text-right">
-          <Copyable right text={newKey}>
-            <code>{newKey}</code>
-          </Copyable>
+          <Address pubkey={params.newAccountPubkey} alignRight link />
         </td>
       </tr>
 
@@ -76,9 +66,7 @@ export function CreateDetailsCard(props: {
       <tr>
         <td>Assigned Owner</td>
         <td className="text-right">
-          <Copyable right text={params.programId.toBase58()}>
-            <code>{displayAddress(params.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={params.programId} alignRight link />
         </td>
       </tr>
     </InstructionCard>
diff --git a/explorer/src/components/instruction/system/CreateWithSeedDetailsCard.tsx b/explorer/src/components/instruction/system/CreateWithSeedDetailsCard.tsx
index 4c1f6dd26c..fb9b2e25d6 100644
--- a/explorer/src/components/instruction/system/CreateWithSeedDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/CreateWithSeedDetailsCard.tsx
@@ -6,10 +6,10 @@ import {
   SystemInstruction,
 } from "@solana/web3.js";
 import { lamportsToSolString } from "utils";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
 import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";
 
 export function CreateWithSeedDetailsCard(props: {
   ix: TransactionInstruction;
@@ -26,10 +26,6 @@ export function CreateWithSeedDetailsCard(props: {
     return <UnknownDetailsCard {...props} />;
   }
 
-  const from = params.fromPubkey.toBase58();
-  const newKey = params.newAccountPubkey.toBase58();
-  const baseKey = params.basePubkey.toBase58();
-
   return (
     <InstructionCard
       ix={ix}
@@ -40,36 +36,28 @@ export function CreateWithSeedDetailsCard(props: {
       <tr>
         <td>Program</td>
         <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>From Address</td>
         <td className="text-right">
-          <Copyable right text={from}>
-            <code>{from}</code>
-          </Copyable>
+          <Address pubkey={params.fromPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>New Address</td>
         <td className="text-right">
-          <Copyable right text={newKey}>
-            <code>{newKey}</code>
-          </Copyable>
+          <Address pubkey={params.newAccountPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Base Address</td>
         <td className="text-right">
-          <Copyable right text={baseKey}>
-            <code>{baseKey}</code>
-          </Copyable>
+          <Address pubkey={params.basePubkey} alignRight link />
         </td>
       </tr>
 
@@ -95,9 +83,7 @@ export function CreateWithSeedDetailsCard(props: {
       <tr>
         <td>Assigned Owner</td>
         <td className="text-right">
-          <Copyable right text={params.programId.toBase58()}>
-            <code>{displayAddress(params.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={params.programId} alignRight link />
         </td>
       </tr>
     </InstructionCard>
diff --git a/explorer/src/components/instruction/system/NonceAdvanceDetailsCard.tsx b/explorer/src/components/instruction/system/NonceAdvanceDetailsCard.tsx
index 17d8bc97db..dbedf60968 100644
--- a/explorer/src/components/instruction/system/NonceAdvanceDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/NonceAdvanceDetailsCard.tsx
@@ -5,10 +5,9 @@ import {
   SignatureResult,
   SystemInstruction,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";
 
 export function NonceAdvanceDetailsCard(props: {
   ix: TransactionInstruction;
@@ -25,9 +24,6 @@ export function NonceAdvanceDetailsCard(props: {
     return <UnknownDetailsCard {...props} />;
   }
 
-  const nonceKey = params.noncePubkey.toBase58();
-  const authorizedKey = params.authorizedPubkey.toBase58();
-
   return (
     <InstructionCard
       ix={ix}
@@ -38,27 +34,21 @@ export function NonceAdvanceDetailsCard(props: {
       <tr>
         <td>Program</td>
         <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Nonce Address</td>
         <td className="text-right">
-          <Copyable right text={nonceKey}>
-            <code>{nonceKey}</code>
-          </Copyable>
+          <Address pubkey={params.noncePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
         <td className="text-right">
-          <Copyable right text={authorizedKey}>
-            <code>{authorizedKey}</code>
-          </Copyable>
+          <Address pubkey={params.authorizedPubkey} alignRight link />
         </td>
       </tr>
     </InstructionCard>
diff --git a/explorer/src/components/instruction/system/NonceAuthorizeDetailsCard.tsx b/explorer/src/components/instruction/system/NonceAuthorizeDetailsCard.tsx
index f228d44935..c0e2700a5f 100644
--- a/explorer/src/components/instruction/system/NonceAuthorizeDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/NonceAuthorizeDetailsCard.tsx
@@ -5,10 +5,9 @@ import {
   SignatureResult,
   SystemInstruction,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";
 
 export function NonceAuthorizeDetailsCard(props: {
   ix: TransactionInstruction;
@@ -25,10 +24,6 @@ export function NonceAuthorizeDetailsCard(props: {
     return <UnknownDetailsCard {...props} />;
   }
 
-  const nonceKey = params.noncePubkey.toBase58();
-  const authorizedKey = params.authorizedPubkey.toBase58();
-  const newAuthorizedKey = params.newAuthorizedPubkey.toBase58();
-
   return (
     <InstructionCard
       ix={ix}
@@ -39,36 +34,28 @@ export function NonceAuthorizeDetailsCard(props: {
       <tr>
         <td>Program</td>
         <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Nonce Address</td>
         <td className="text-right">
-          <Copyable right text={nonceKey}>
-            <code>{nonceKey}</code>
-          </Copyable>
+          <Address pubkey={params.noncePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Old Authority Address</td>
         <td className="text-right">
-          <Copyable right text={authorizedKey}>
-            <code>{authorizedKey}</code>
-          </Copyable>
+          <Address pubkey={params.authorizedPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>New Authority Address</td>
         <td className="text-right">
-          <Copyable right text={newAuthorizedKey}>
-            <code>{newAuthorizedKey}</code>
-          </Copyable>
+          <Address pubkey={params.newAuthorizedPubkey} alignRight link />
         </td>
       </tr>
     </InstructionCard>
diff --git a/explorer/src/components/instruction/system/NonceInitializeDetailsCard.tsx b/explorer/src/components/instruction/system/NonceInitializeDetailsCard.tsx
index 3195f144db..1c86920c49 100644
--- a/explorer/src/components/instruction/system/NonceInitializeDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/NonceInitializeDetailsCard.tsx
@@ -5,10 +5,9 @@ import {
   SignatureResult,
   SystemInstruction,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";
 
 export function NonceInitializeDetailsCard(props: {
   ix: TransactionInstruction;
@@ -25,9 +24,6 @@ export function NonceInitializeDetailsCard(props: {
     return <UnknownDetailsCard {...props} />;
   }
 
-  const nonceKey = params.noncePubkey.toBase58();
-  const authorizedKey = params.authorizedPubkey.toBase58();
-
   return (
     <InstructionCard
       ix={ix}
@@ -38,27 +34,21 @@ export function NonceInitializeDetailsCard(props: {
       <tr>
         <td>Program</td>
         <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Nonce Address</td>
         <td className="text-right">
-          <Copyable right text={nonceKey}>
-            <code>{nonceKey}</code>
-          </Copyable>
+          <Address pubkey={params.noncePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
         <td className="text-right">
-          <Copyable right text={authorizedKey}>
-            <code>{authorizedKey}</code>
-          </Copyable>
+          <Address pubkey={params.authorizedPubkey} alignRight link />
         </td>
       </tr>
     </InstructionCard>
diff --git a/explorer/src/components/instruction/system/NonceWithdrawDetailsCard.tsx b/explorer/src/components/instruction/system/NonceWithdrawDetailsCard.tsx
index dc4fff48d8..2db610a9cf 100644
--- a/explorer/src/components/instruction/system/NonceWithdrawDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/NonceWithdrawDetailsCard.tsx
@@ -5,11 +5,10 @@ import {
   SignatureResult,
   SystemInstruction,
 } from "@solana/web3.js";
-import { displayAddress } from "utils/tx";
 import { lamportsToSolString } from "utils";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";
 
 export function NonceWithdrawDetailsCard(props: {
   ix: TransactionInstruction;
@@ -26,11 +25,6 @@ export function NonceWithdrawDetailsCard(props: {
     return <UnknownDetailsCard {...props} />;
   }
 
-  const nonceKey = params.noncePubkey.toBase58();
-  const toKey = params.toPubkey.toBase58();
-  const authorizedKey = params.authorizedPubkey.toBase58();
-  const lamports = params.lamports;
-
   return (
     <InstructionCard
       ix={ix}
@@ -41,42 +35,34 @@ export function NonceWithdrawDetailsCard(props: {
       <tr>
         <td>Program</td>
         <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Nonce Address</td>
         <td className="text-right">
-          <Copyable right text={nonceKey}>
-            <code>{nonceKey}</code>
-          </Copyable>
+          <Address pubkey={params.noncePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
         <td className="text-right">
-          <Copyable right text={authorizedKey}>
-            <code>{authorizedKey}</code>
-          </Copyable>
+          <Address pubkey={params.authorizedPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>To Address</td>
         <td className="text-right">
-          <Copyable right text={toKey}>
-            <code>{toKey}</code>
-          </Copyable>
+          <Address pubkey={params.toPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Withdraw Amount (SOL)</td>
-        <td className="text-right">{lamportsToSolString(lamports)}</td>
+        <td className="text-right">{lamportsToSolString(params.lamports)}</td>
       </tr>
     </InstructionCard>
   );
diff --git a/explorer/src/components/instruction/system/TransferDetailsCard.tsx b/explorer/src/components/instruction/system/TransferDetailsCard.tsx
index fbea06e75c..c7a45d73c2 100644
--- a/explorer/src/components/instruction/system/TransferDetailsCard.tsx
+++ b/explorer/src/components/instruction/system/TransferDetailsCard.tsx
@@ -6,10 +6,9 @@ import {
   SystemInstruction,
 } from "@solana/web3.js";
 import { lamportsToSolString } from "utils";
-import { displayAddress } from "utils/tx";
 import { InstructionCard } from "../InstructionCard";
-import Copyable from "components/Copyable";
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import Address from "components/common/Address";
 
 export function TransferDetailsCard(props: {
   ix: TransactionInstruction;
@@ -26,34 +25,26 @@ export function TransferDetailsCard(props: {
     return <UnknownDetailsCard {...props} />;
   }
 
-  const from = transfer.fromPubkey.toBase58();
-  const to = transfer.toPubkey.toBase58();
   return (
     <InstructionCard ix={ix} index={index} result={result} title="Transfer">
       <tr>
         <td>Program</td>
         <td className="text-right">
-          <Copyable bottom right text={SystemProgram.programId.toBase58()}>
-            <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
-          </Copyable>
+          <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>From Address</td>
         <td className="text-right">
-          <Copyable right text={from}>
-            <code>{from}</code>
-          </Copyable>
+          <Address pubkey={transfer.fromPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>To Address</td>
         <td className="text-right">
-          <Copyable right text={to}>
-            <code>{to}</code>
-          </Copyable>
+          <Address pubkey={transfer.toPubkey} alignRight link />
         </td>
       </tr>
 
diff --git a/explorer/src/scss/_solana-variables.scss b/explorer/src/scss/_solana-variables.scss
index 154f8e1612..2ea0d090d8 100644
--- a/explorer/src/scss/_solana-variables.scss
+++ b/explorer/src/scss/_solana-variables.scss
@@ -20,7 +20,7 @@ $gray-300: #e5ebe9;
 $gray-400: #c6e6de;
 $gray-500: #abd5c6;
 $gray-600: #86b8b6;
-$gray-700: #409088;
+$gray-700: #698582;
 $gray-800: #387462;
 $gray-900: #1b4e3f;
 $black: #232323;
@@ -31,8 +31,8 @@ $rainbow-3: #79abd2;
 $rainbow-4: #38d0bd;
 $rainbow-5: #1dd79b;
 
+$primary: #358c70;
 $success: #42ba96;
-$primary: $success;
 $primary-desat: #42ba96;
 $secondary: $gray-700;
 $info: #b45be1;
diff --git a/explorer/src/utils/tx.ts b/explorer/src/utils/tx.ts
index 702586e747..ef21e902fd 100644
--- a/explorer/src/utils/tx.ts
+++ b/explorer/src/utils/tx.ts
@@ -18,6 +18,7 @@ const PROGRAM_IDS = {
   [SystemProgram.programId.toBase58()]: "System",
   Vest111111111111111111111111111111111111111: "Vest",
   [VOTE_PROGRAM_ID.toBase58()]: "Vote",
+  TokenSVp5gheXUvJ6jGWGeCsgPKgnE3YgdGKRVCMY9o: "Token",
 };
 
 const LOADER_IDS = {