diff --git a/components/dataViews/TransactionInfo/TxMsgClaimRewardsDetails.tsx b/components/dataViews/TransactionInfo/TxMsgClaimRewardsDetails.tsx
new file mode 100644
index 0000000..85357e3
--- /dev/null
+++ b/components/dataViews/TransactionInfo/TxMsgClaimRewardsDetails.tsx
@@ -0,0 +1,47 @@
+import { TxMsgClaimRewards } from "../../../types/txMsg";
+import HashView from "../HashView";
+
+interface TxMsgClaimRewardsDetailsProps {
+  readonly msg: TxMsgClaimRewards;
+}
+
+const TxMsgClaimRewardsDetails = ({ msg }: TxMsgClaimRewardsDetailsProps) => (
+  <>
+    <li>
+      <h2>MsgWithdrawDelegatorReward</h2>
+    </li>
+    <li>
+      <label>Validator Address:</label>
+      <div title={msg.value.validatorAddress}>
+        <HashView hash={msg.value.validatorAddress} />
+      </div>
+    </li>
+    <style jsx>{`
+      li:not(:has(h2)) {
+        background: rgba(255, 255, 255, 0.03);
+        padding: 6px 10px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+      }
+      li + li:nth-child(2) {
+        margin-top: 25px;
+      }
+      li + li {
+        margin-top: 10px;
+      }
+      li div {
+        padding: 3px 6px;
+      }
+      label {
+        font-size: 12px;
+        background: rgba(255, 255, 255, 0.1);
+        padding: 3px 6px;
+        border-radius: 5px;
+        display: block;
+      }
+    `}</style>
+  </>
+);
+
+export default TxMsgClaimRewardsDetails;
diff --git a/components/dataViews/TransactionInfo/TxMsgDelegateDetails.tsx b/components/dataViews/TransactionInfo/TxMsgDelegateDetails.tsx
new file mode 100644
index 0000000..7b36a44
--- /dev/null
+++ b/components/dataViews/TransactionInfo/TxMsgDelegateDetails.tsx
@@ -0,0 +1,57 @@
+import { useAppContext } from "../../../context/AppContext";
+import { printableCoins } from "../../../lib/displayHelpers";
+import { TxMsgDelegate } from "../../../types/txMsg";
+import HashView from "../HashView";
+
+interface TxMsgDelegateDetailsProps {
+  readonly msg: TxMsgDelegate;
+}
+
+const TxMsgDelegateDetails = ({ msg }: TxMsgDelegateDetailsProps) => {
+  const { state } = useAppContext();
+
+  return (
+    <>
+      <li>
+        <h2>MsgDelegate</h2>
+      </li>
+      <li>
+        <label>Amount:</label>
+        <div>{printableCoins(msg.value.amount, state.chain)}</div>
+      </li>
+      <li>
+        <label>Validator Address:</label>
+        <div title={msg.value.validatorAddress}>
+          <HashView hash={msg.value.validatorAddress} />
+        </div>
+      </li>
+      <style jsx>{`
+        li:not(:has(h2)) {
+          background: rgba(255, 255, 255, 0.03);
+          padding: 6px 10px;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+        }
+        li + li:nth-child(2) {
+          margin-top: 25px;
+        }
+        li + li {
+          margin-top: 10px;
+        }
+        li div {
+          padding: 3px 6px;
+        }
+        label {
+          font-size: 12px;
+          background: rgba(255, 255, 255, 0.1);
+          padding: 3px 6px;
+          border-radius: 5px;
+          display: block;
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default TxMsgDelegateDetails;
diff --git a/components/dataViews/TransactionInfo/TxMsgRedelegateDetails.tsx b/components/dataViews/TransactionInfo/TxMsgRedelegateDetails.tsx
new file mode 100644
index 0000000..eb04b44
--- /dev/null
+++ b/components/dataViews/TransactionInfo/TxMsgRedelegateDetails.tsx
@@ -0,0 +1,63 @@
+import { useAppContext } from "../../../context/AppContext";
+import { printableCoins } from "../../../lib/displayHelpers";
+import { TxMsgRedelegate } from "../../../types/txMsg";
+import HashView from "../HashView";
+
+interface TxMsgRedelegateDetailsProps {
+  readonly msg: TxMsgRedelegate;
+}
+
+const TxMsgRedelegateDetails = ({ msg }: TxMsgRedelegateDetailsProps) => {
+  const { state } = useAppContext();
+
+  return (
+    <>
+      <li>
+        <h2>MsgBeginRedelegate</h2>
+      </li>
+      <li>
+        <label>Amount:</label>
+        <div>{printableCoins(msg.value.amount, state.chain)}</div>
+      </li>
+      <li>
+        <label>Src Validator Address:</label>
+        <div title={msg.value.validatorSrcAddress}>
+          <HashView hash={msg.value.validatorSrcAddress} />
+        </div>
+      </li>
+      <li>
+        <label>Dst Validator Address:</label>
+        <div title={msg.value.validatorDstAddress}>
+          <HashView hash={msg.value.validatorDstAddress} />
+        </div>
+      </li>
+      <style jsx>{`
+        li:not(:has(h2)) {
+          background: rgba(255, 255, 255, 0.03);
+          padding: 6px 10px;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+        }
+        li + li:nth-child(2) {
+          margin-top: 25px;
+        }
+        li + li {
+          margin-top: 10px;
+        }
+        li div {
+          padding: 3px 6px;
+        }
+        label {
+          font-size: 12px;
+          background: rgba(255, 255, 255, 0.1);
+          padding: 3px 6px;
+          border-radius: 5px;
+          display: block;
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default TxMsgRedelegateDetails;
diff --git a/components/dataViews/TransactionInfo/TxMsgSendDetails.tsx b/components/dataViews/TransactionInfo/TxMsgSendDetails.tsx
new file mode 100644
index 0000000..6e1c4ee
--- /dev/null
+++ b/components/dataViews/TransactionInfo/TxMsgSendDetails.tsx
@@ -0,0 +1,57 @@
+import { useAppContext } from "../../../context/AppContext";
+import { printableCoins } from "../../../lib/displayHelpers";
+import { TxMsgSend } from "../../../types/txMsg";
+import HashView from "../HashView";
+
+interface TxMsgSendDetailsProps {
+  readonly msg: TxMsgSend;
+}
+
+const TxMsgSendDetails = ({ msg }: TxMsgSendDetailsProps) => {
+  const { state } = useAppContext();
+
+  return (
+    <>
+      <li>
+        <h2>MsgSend</h2>
+      </li>
+      <li>
+        <label>Amount:</label>
+        <div>{printableCoins(msg.value.amount, state.chain)}</div>
+      </li>
+      <li>
+        <label>To:</label>
+        <div title={msg.value.toAddress}>
+          <HashView hash={msg.value.toAddress} />
+        </div>
+      </li>
+      <style jsx>{`
+        li:not(:has(h2)) {
+          background: rgba(255, 255, 255, 0.03);
+          padding: 6px 10px;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+        }
+        li + li:nth-child(2) {
+          margin-top: 25px;
+        }
+        li + li {
+          margin-top: 10px;
+        }
+        li div {
+          padding: 3px 6px;
+        }
+        label {
+          font-size: 12px;
+          background: rgba(255, 255, 255, 0.1);
+          padding: 3px 6px;
+          border-radius: 5px;
+          display: block;
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default TxMsgSendDetails;
diff --git a/components/dataViews/TransactionInfo/TxMsgUndelegateDetails.tsx b/components/dataViews/TransactionInfo/TxMsgUndelegateDetails.tsx
new file mode 100644
index 0000000..26f7bd2
--- /dev/null
+++ b/components/dataViews/TransactionInfo/TxMsgUndelegateDetails.tsx
@@ -0,0 +1,57 @@
+import { useAppContext } from "../../../context/AppContext";
+import { printableCoins } from "../../../lib/displayHelpers";
+import { TxMsgUndelegate } from "../../../types/txMsg";
+import HashView from "../HashView";
+
+interface TxMsgUndelegateDetailsProps {
+  readonly msg: TxMsgUndelegate;
+}
+
+const TxMsgUndelegateDetails = ({ msg }: TxMsgUndelegateDetailsProps) => {
+  const { state } = useAppContext();
+
+  return (
+    <>
+      <li>
+        <h2>MsgUndelegate</h2>
+      </li>
+      <li>
+        <label>Amount:</label>
+        <div>{printableCoins(msg.value.amount, state.chain)}</div>
+      </li>
+      <li>
+        <label>Validator Address:</label>
+        <div title={msg.value.validatorAddress}>
+          <HashView hash={msg.value.validatorAddress} />
+        </div>
+      </li>
+      <style jsx>{`
+        li:not(:has(h2)) {
+          background: rgba(255, 255, 255, 0.03);
+          padding: 6px 10px;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+        }
+        li + li:nth-child(2) {
+          margin-top: 25px;
+        }
+        li + li {
+          margin-top: 10px;
+        }
+        li div {
+          padding: 3px 6px;
+        }
+        label {
+          font-size: 12px;
+          background: rgba(255, 255, 255, 0.1);
+          padding: 3px 6px;
+          border-radius: 5px;
+          display: block;
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default TxMsgUndelegateDetails;