diff --git a/assets/icons.json b/assets/icons.json
index 535f8fa5..70e69d55 100644
--- a/assets/icons.json
+++ b/assets/icons.json
@@ -3,6 +3,16 @@
 	"explorable": "M8.393 2.67C7.883 3.172 7.423 3.76 7.026 4.401C5.795 6.381 5 9.067 5 12.001C5 14.946 5.847 17.633 7.1 19.607C7.50413 20.2519 7.98276 20.847 8.526 21.38C6.61034 20.6703 4.95799 19.3909 3.79127 17.7139C2.62455 16.037 1.99942 14.0429 2 12C2 7.75 4.653 4.117 8.393 2.67ZM11 3.236V20.735C10.29 20.381 9.505 19.665 8.788 18.535C7.745 16.892 7 14.578 7 12C7 9.41 7.705 7.096 8.724 5.457C9.385 4.394 10.121 3.693 10.824 3.322L11 3.236ZM15.607 2.67C17.4898 3.39815 19.1082 4.67909 20.2492 6.34437C21.3903 8.00965 22.0006 9.98129 22 12C22 16.251 19.347 19.883 15.607 21.33C16.117 20.828 16.577 20.24 16.974 19.6C18.205 17.618 19 14.932 19 12C19 9.068 18.205 6.381 16.974 4.401C16.5878 3.7727 16.129 3.19104 15.607 2.67ZM13 3.236C13.755 3.579 14.56 4.306 15.276 5.457C16.295 7.097 17 9.411 17 12C17 14.589 16.295 16.904 15.276 18.543C14.615 19.606 13.879 20.307 13.176 20.679L13 20.765V3.235V3.236Z",
 	"widgets": "M2 6.5C2 5.30653 2.47411 4.16193 3.31802 3.31802C4.16193 2.47411 5.30653 2 6.5 2C7.69347 2 8.83807 2.47411 9.68198 3.31802C10.5259 4.16193 11 5.30653 11 6.5V9.5C11 9.849 11 10.023 10.962 10.166C10.9109 10.3569 10.8105 10.531 10.6707 10.6707C10.531 10.8105 10.3569 10.9109 10.166 10.962C10.023 11 9.85 11 9.5 11H6.5C5.30653 11 4.16193 10.5259 3.31802 9.68198C2.47411 8.83807 2 7.69348 2 6.5ZM13 14.5C13 14.151 13 13.977 13.038 13.834C13.142 13.446 13.446 13.142 13.834 13.038C13.977 13 14.151 13 14.5 13H17.5C18.39 13 19.26 13.2639 20.0001 13.7584C20.7401 14.2529 21.3169 14.9557 21.6575 15.7779C21.998 16.6002 22.0872 17.505 21.9135 18.3779C21.7399 19.2508 21.3113 20.0526 20.682 20.682C20.0526 21.3113 19.2508 21.7399 18.3779 21.9135C17.505 22.0872 16.6002 21.9981 15.7779 21.6575C14.9557 21.3169 14.2529 20.7401 13.7584 20.0001C13.2639 19.26 13 18.39 13 17.5V14.5ZM2 17.5C2 16.3065 2.47411 15.1619 3.31802 14.318C4.16193 13.4741 5.30653 13 6.5 13H9.2C9.83 13 10.145 13 10.386 13.123C10.597 13.23 10.77 13.403 10.877 13.614C11 13.854 11 14.17 11 14.8V17.5C11 18.0909 10.8836 18.6761 10.6575 19.2221C10.4313 19.768 10.0998 20.2641 9.68198 20.682C9.26412 21.0998 8.76804 21.4313 8.22207 21.6575C7.67611 21.8836 7.09095 22 6.5 22C5.90905 22 5.32389 21.8836 4.77792 21.6575C4.23196 21.4313 3.73588 21.0998 3.31802 20.682C2.90016 20.2641 2.56869 19.768 2.34254 19.2221C2.1164 18.6761 2 18.0909 2 17.5ZM13 6.5C13 5.60999 13.2639 4.73996 13.7584 3.99994C14.2529 3.25991 14.9557 2.68314 15.7779 2.34254C16.6002 2.00195 17.505 1.91283 18.3779 2.08647C19.2508 2.2601 20.0526 2.68868 20.682 3.31802C21.3113 3.94736 21.7399 4.74918 21.9135 5.62209C22.0872 6.49501 21.998 7.39981 21.6575 8.22208C21.3169 9.04434 20.7401 9.74715 20.0001 10.2416C19.26 10.7361 18.39 11 17.5 11H14.286C14.136 11 14.062 11 13.999 10.993C13.7457 10.9645 13.5097 10.8508 13.3294 10.6706C13.1492 10.4903 13.0355 10.2543 13.007 10.001C13 9.938 13 9.864 13 9.714V6.5Z",
 	"zap": "M 13.398 1.083 C 13.805 1.26 14.047 1.684 13.992 2.124 L 13.132 9 L 19.328 9 C 19.568 9 19.813 9 20.012 9.018 C 20.201 9.035 20.562 9.08 20.875 9.333 C 21.234 9.623 21.439 10.062 21.432 10.523 C 21.426 10.925 21.23 11.232 21.122 11.387 C 21.008 11.552 20.852 11.74 20.698 11.925 L 11.768 22.64 C 11.484 22.98 11.009 23.093 10.602 22.916 C 10.195 22.74 9.953 22.316 10.008 21.876 L 10.868 15 L 4.671 15 C 4.431 15 4.186 15 3.987 14.982 C 3.798 14.965 3.437 14.92 3.124 14.667 C 2.765 14.377 2.56 13.938 2.567 13.477 C 2.573 13.075 2.769 12.768 2.877 12.613 C 2.991 12.448 3.147 12.26 3.301 12.075 L 3.324 12.048 L 12.232 1.36 C 12.516 1.019 12.991 0.906 13.398 1.083 Z",
+	"hyperlane": [
+		{
+			"path": "M5.06664 3.59961C4.87226 3.59968 4.73659 3.78055 4.80297 3.95117L7.88695 11.834L4.79515 20.1094C4.73162 20.2795 4.86706 20.4578 5.0598 20.458H3.08031C2.88752 20.4579 2.75211 20.2795 2.81566 20.1094L5.90746 11.834L2.82347 3.95117C2.75707 3.78062 2.89192 3.59986 3.08617 3.59961H5.06664ZM14.0217 3.59961C13.8273 3.59961 13.6916 3.7805 13.758 3.95117L16.842 11.834L13.7502 20.1094C13.6867 20.2795 13.8221 20.4579 14.0149 20.458H12.0354C11.8425 20.458 11.7071 20.2795 11.7707 20.1094L14.8625 11.834L11.7786 3.95117C11.7121 3.78057 11.8469 3.5998 12.0412 3.59961H14.0217Z",
+			"opacity": 0.5
+		},
+		{
+			"path": "M8.49683 3.6001C8.96483 3.6001 9.38386 3.87195 9.54722 4.28174L11.916 10.2235H16.2125L13.7582 3.95166C13.6914 3.7809 13.8269 3.6001 14.0214 3.6001H17.4519C17.9199 3.60013 18.3385 3.87197 18.5019 4.28174L21.5129 11.8341C21.5361 11.8923 21.5364 11.9565 21.5136 12.0149L21.4968 12.0583V12.0587L18.4984 19.7685C18.3375 20.1823 17.9165 20.4578 17.4453 20.4579H14.0152C13.8223 20.4579 13.6872 20.28 13.7507 20.1099L16.0793 13.8771H11.8347L9.54332 19.7685C9.38236 20.1824 8.96151 20.4579 8.49019 20.4579H5.06011C4.86732 20.4578 4.73211 20.28 4.79566 20.1099L7.88746 11.8341L4.80347 3.95166C4.73669 3.78091 4.87181 3.60017 5.06636 3.6001H8.49683Z",
+			"opacity": 1
+		}
+	],
 	"moon": "M9.06693 2.41209C9.23841 2.03292 9.15714 1.58718 8.86288 1.29292C8.56862 0.998664 8.12289 0.917397 7.74371 1.08887C3.76893 2.88642 1 6.88764 1 11.5377C1 17.8682 6.13185 23 12.4623 23C17.1124 23 21.1136 20.2311 22.9112 16.2563C23.0826 15.8771 23.0014 15.4314 22.7071 15.1371C22.4128 14.8429 21.9671 14.7616 21.5879 14.9331C20.4015 15.4697 19.0838 15.7689 17.6935 15.7689C12.4676 15.7689 8.23116 11.5325 8.23116 6.30656C8.23116 4.91628 8.53036 3.59857 9.06693 2.41209Z",
 	"sun": "M13 2C13 1.44772 12.5523 1 12 1C11.4477 1 11 1.44772 11 2V4C11 4.55228 11.4477 5 12 5C12.5523 5 13 4.55228 13 4V2ZM13 20C13 19.4477 12.5523 19 12 19C11.4477 19 11 19.4477 11 20V22C11 22.5523 11.4477 23 12 23C12.5523 23 13 22.5523 13 22V20ZM2 11C1.44772 11 1 11.4477 1 12C1 12.5523 1.44772 13 2 13H4C4.55228 13 5 12.5523 5 12C5 11.4477 4.55228 11 4 11H2ZM5.60701 4.1928C5.21649 3.80227 4.58332 3.80227 4.1928 4.1928C3.80227 4.58332 3.80227 5.21649 4.1928 5.60701L5.60701 7.02122C5.99753 7.41175 6.6307 7.41175 7.02122 7.02122C7.41175 6.6307 7.41175 5.99753 7.02122 5.60701L5.60701 4.1928ZM19.8073 5.60701C20.1979 5.21649 20.1979 4.58332 19.8073 4.1928C19.4168 3.80227 18.7836 3.80227 18.3931 4.1928L16.9789 5.60701C16.5884 5.99753 16.5884 6.6307 16.9789 7.02122C17.3694 7.41175 18.0026 7.41175 18.3931 7.02122L19.8073 5.60701ZM7.02122 18.397C7.41175 18.0065 7.41175 17.3734 7.02122 16.9828C6.6307 16.5923 5.99753 16.5923 5.60701 16.9828L4.1928 18.397C3.80227 18.7876 3.80227 19.4207 4.1928 19.8113C4.58332 20.2018 5.21649 20.2018 5.60701 19.8113L7.02122 18.397ZM18.3931 16.9828C18.0026 16.5923 17.3694 16.5923 16.9789 16.9828C16.5884 17.3734 16.5884 18.0065 16.9789 18.397L18.3931 19.8113C18.7836 20.2018 19.4168 20.2018 19.8073 19.8113C20.1979 19.4207 20.1979 18.7876 19.8073 18.397L18.3931 16.9828ZM20 11C19.4477 11 19 11.4477 19 12C19 12.5523 19.4477 13 20 13H22C22.5523 13 23 12.5523 23 12C23 11.4477 22.5523 11 22 11H20ZM6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12Z",
 	"namespace": "M 1 6.162 C 1 5.635 1 5.18 1.03 4.805 C 1.063 4.41 1.134 4.017 1.327 3.638 C 1.615 3.074 2.074 2.615 2.638 2.328 C 3.016 2.134 3.41 2.063 3.805 2.031 C 4.18 2 4.635 2 5.161 2 L 9.147 2 C 9.74 1.998 10.262 1.998 10.742 2.163 C 11.162 2.308 11.545 2.545 11.863 2.856 C 12.226 3.211 12.459 3.678 12.723 4.21 L 13.618 6 L 17.241 6 C 18.046 6 18.711 6 19.251 6.044 C 19.814 6.09 20.331 6.189 20.816 6.436 C 21.569 6.819 22.181 7.431 22.564 8.184 C 22.811 8.669 22.91 9.186 22.956 9.748 C 23 10.289 23 10.954 23 11.758 L 23 16.241 C 23 17.046 23 17.711 22.956 18.251 C 22.91 18.814 22.811 19.331 22.564 19.816 C 22.181 20.569 21.569 21.181 20.816 21.564 C 20.331 21.811 19.814 21.91 19.252 21.956 C 18.711 22 18.046 22 17.242 22 L 6.758 22 C 5.953 22 5.288 22 4.748 21.956 C 4.185 21.91 3.668 21.811 3.183 21.564 C 2.43 21.181 1.818 20.569 1.435 19.816 C 1.188 19.331 1.089 18.814 1.043 18.252 C 1 17.71 1 17.046 1 16.242 Z M 5.2 4 C 4.623 4 4.25 4.001 3.968 4.024 C 3.696 4.046 3.596 4.084 3.546 4.109 C 3.358 4.205 3.205 4.358 3.109 4.546 C 3.084 4.596 3.046 4.696 3.024 4.968 C 3.004 5.217 3 5.535 3 6 L 11.382 6 L 10.99 5.216 C 10.637 4.509 10.554 4.375 10.464 4.285 C 10.358 4.182 10.23 4.103 10.09 4.055 C 9.969 4.013 9.812 4 9.022 4 Z",
diff --git a/components/LeftSidebar.vue b/components/LeftSidebar.vue
index eca36556..8e487898 100644
--- a/components/LeftSidebar.vue
+++ b/components/LeftSidebar.vue
@@ -128,6 +128,18 @@ const modularLinks = reactive([
 			},
 		],
 	},
+	{
+		icon: "hyperlane",
+		name: "Interop",
+		path: "/hyperlane",
+		children: [
+			{
+				name: "Transfers",
+				path: "/hyperlane/transfers",
+				show: true,
+			},
+		],
+	},
 	{
 		icon: "ibc",
 		name: "IBC",
diff --git a/components/cmd/CommandMenu.vue b/components/cmd/CommandMenu.vue
index bd18c1c4..5e5abb5b 100644
--- a/components/cmd/CommandMenu.vue
+++ b/components/cmd/CommandMenu.vue
@@ -238,6 +238,15 @@ const rawNavigationActions = [
 			router.push("/rollups")
 		},
 	},
+	{
+		type: "callback",
+		icon: "arrow-narrow-right",
+		title: "Go to Hyperlane",
+		runText: "Open Hyperlane",
+		callback: () => {
+			router.push("/hyperlane")
+		},
+	},
 	{
 		type: "callback",
 		icon: "arrow-narrow-right",
diff --git a/components/modals/HyperlaneMailboxModal.vue b/components/modals/HyperlaneMailboxModal.vue
new file mode 100644
index 00000000..4567756b
--- /dev/null
+++ b/components/modals/HyperlaneMailboxModal.vue
@@ -0,0 +1,156 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** UI */
+import Modal from "@/components/ui/Modal.vue"
+import Button from "@/components/ui/Button.vue"
+
+/** Services */
+import { comma } from "@/services/utils"
+
+/** Stores */
+import { useCacheStore } from "@/store/cache.store"
+const cacheStore = useCacheStore()
+
+const emit = defineEmits(["onClose"])
+const props = defineProps({
+	show: Boolean,
+})
+
+const mailbox = computed(() => cacheStore.current.hyperlaneMailbox)
+
+const handleNavigate = (target) => {
+	emit("onClose")
+	navigateTo(target)
+}
+</script>
+
+<template>
+	<Modal :show="show" @onClose="emit('onClose')" width="500" disable-trap>
+		<Flex align="center" direction="column" gap="16">
+			<Flex wide align="center" gap="6">
+				<Icon name="hyperlane" size="14" color="primary" />
+				<Text size="14" weight="600" color="primary">Hyperlane Mailbox</Text>
+			</Flex>
+
+			<Flex wide gap="16">
+				<Flex wide direction="column" gap="8" :class="[$style.card]">
+					<Flex align="center" gap="4">
+						<Icon name="arrow-narrow-up-right-circle" size="12" color="tertiary" />
+						<Text size="12" weight="600" color="secondary">Sent</Text>
+					</Flex>
+
+					<Text size="13" weight="600" color="primary" mono>
+						{{ mailbox.sent_messages }} <Text color="tertiary">messages</Text>
+					</Text>
+				</Flex>
+
+				<Flex wide direction="column" gap="8" :class="[$style.card]">
+					<Flex align="center" gap="4">
+						<Icon name="arrow-narrow-up-right-circle" size="12" color="tertiary" style="transform: scale(1, -1)" />
+						<Text size="12" weight="600" color="secondary">Received</Text>
+					</Flex>
+
+					<Text size="13" weight="600" color="primary" mono>
+						{{ mailbox.received_messages }} <Text color="tertiary">messages</Text>
+					</Text>
+				</Flex>
+			</Flex>
+
+			<Flex wide justify="between" align="center" :class="[$style.card]">
+				<Flex direction="column" gap="8">
+					<Text size="12" weight="600" color="secondary">Owner</Text>
+
+					<Flex align="center" gap="8">
+						<Text size="13" weight="600" color="primary" mono :class="['overflow_ellipsis', $style.address_text]">
+							{{ mailbox.owner.hash }}
+						</Text>
+						<CopyButton :text="mailbox.owner.hash" />
+					</Flex>
+				</Flex>
+			</Flex>
+
+			<Flex wide direction="column" gap="16" :class="$style.card">
+				<Text size="12" weight="600" color="secondary">Details</Text>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">ID</Text>
+
+					<Flex align="center" gap="6">
+						<Text size="12" weight="600" color="primary" mono>
+							{{ mailbox.mailbox.slice(0, 4).toUpperCase() }}
+						</Text>
+						<Flex align="center" gap="3">
+							<div v-for="dot in 3" class="dot" />
+						</Flex>
+						<Text size="12" weight="600" color="primary" mono>
+							{{ mailbox.mailbox.slice(-4).toUpperCase() }}
+						</Text>
+						<CopyButton :text="mailbox.mailbox" size="12" />
+					</Flex>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Height</Text>
+
+					<Text @click="handleNavigate(`/block/${mailbox.height}`)" size="12" weight="600" color="primary" mono class="clickable">
+						{{ comma(mailbox.height) }}
+					</Text>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Tx Hash</Text>
+
+					<Flex @click="handleNavigate(`/tx/${transfer.tx_hash}`)" align="center" gap="6" class="clickable">
+						<Text size="12" weight="600" color="primary" mono>
+							{{ mailbox.tx_hash.slice(0, 4).toUpperCase() }}
+						</Text>
+
+						<Flex align="center" gap="3">
+							<div v-for="dot in 3" class="dot" />
+						</Flex>
+
+						<Text size="12" weight="600" color="primary" mono>
+							{{ mailbox.tx_hash.slice(-4).toUpperCase() }}
+						</Text>
+
+						<CopyButton :text="mailbox.tx_hash" size="12" />
+					</Flex>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Created</Text>
+
+					<Text size="12" weight="600" color="primary">
+						{{ DateTime.fromISO(mailbox.time).setLocale("en").toFormat("LLL d, t") }}
+						<Text color="tertiary"> ({{ DateTime.fromISO(mailbox.time).toRelative({ style: "short" }) }})</Text>
+					</Text>
+				</Flex>
+			</Flex>
+
+			<Button @click="emit('onClose')" wide type="tertiary" size="small">Close</Button>
+		</Flex>
+	</Modal>
+</template>
+
+<style module>
+.card {
+	border-radius: 8px;
+	background: var(--op-5);
+
+	padding: 8px 12px 8px 8px;
+}
+
+.address_text {
+	flex: 1;
+}
+
+.receipient_icon {
+	border-radius: 50px;
+	border: 2px solid var(--op-5);
+	box-sizing: content-box;
+
+	padding: 2px;
+}
+</style>
diff --git a/components/modals/HyperlaneTokenModal.vue b/components/modals/HyperlaneTokenModal.vue
new file mode 100644
index 00000000..60820dd9
--- /dev/null
+++ b/components/modals/HyperlaneTokenModal.vue
@@ -0,0 +1,176 @@
+<script setup>
+/** UI */
+import Modal from "@/components/ui/Modal.vue"
+import Button from "@/components/ui/Button.vue"
+
+/** Services */
+import { comma } from "@/services/utils"
+
+/** Stores */
+import { useCacheStore } from "@/store/cache.store"
+const cacheStore = useCacheStore()
+
+const emit = defineEmits(["onClose"])
+const props = defineProps({
+	show: Boolean,
+})
+
+const token = computed(() => cacheStore.current.hyperlaneToken)
+
+const handleNavigate = (target) => {
+	emit("onClose")
+	navigateTo(target)
+}
+</script>
+
+<template>
+	<Modal :show="show" @onClose="emit('onClose')" width="500" disable-trap>
+		<Flex align="center" direction="column" gap="16">
+			<Flex wide align="center" gap="6">
+				<Icon name="hyperlane" size="14" color="primary" />
+				<Text size="14" weight="600" color="primary">Hyperlane Token</Text>
+			</Flex>
+
+			<Flex wide gap="16">
+				<Flex wide direction="column" gap="8" :class="[$style.card]">
+					<Flex align="center" gap="4">
+						<Icon name="arrow-narrow-up-right-circle" size="12" color="purple" />
+						<Text size="12" weight="600" color="secondary">Sent</Text>
+					</Flex>
+
+					<Text size="13" weight="600" color="primary" mono>
+						{{ comma(token.sent / 1_000_000) }} <Text color="tertiary">TIA</Text>
+					</Text>
+
+					<Text size="12" weight="600" color="tertiary" mono> {{ token.sent_transfers }} transfers </Text>
+				</Flex>
+
+				<Flex wide direction="column" gap="8" :class="[$style.card]">
+					<Flex align="center" gap="4">
+						<Icon name="arrow-narrow-up-right-circle" size="12" color="brand" style="transform: scale(1, -1)" />
+						<Text size="12" weight="600" color="secondary">Received</Text>
+					</Flex>
+
+					<Text size="13" weight="600" color="primary" mono>
+						{{ comma(token.received / 1_000_000) }} <Text color="tertiary">TIA</Text>
+					</Text>
+
+					<Text size="12" weight="600" color="tertiary" mono> {{ token.received_transfers }} transfers </Text>
+				</Flex>
+			</Flex>
+
+			<Flex wide justify="between" align="center" :class="[$style.card]">
+				<Flex direction="column" gap="8">
+					<Text size="12" weight="600" color="secondary">Owner</Text>
+
+					<Flex align="center" gap="8">
+						<Text size="13" weight="600" color="primary" mono :class="['overflow_ellipsis', $style.address_text]">
+							{{ token.owner.hash }}
+						</Text>
+						<CopyButton :text="token.owner.hash" />
+					</Flex>
+				</Flex>
+			</Flex>
+
+			<Flex wide direction="column" gap="16" :class="$style.card">
+				<Text size="12" weight="600" color="secondary">Details</Text>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Type</Text>
+
+					<Text size="12" weight="600" color="primary" style="text-transform: capitalize">
+						{{ token.type }}
+					</Text>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">ID</Text>
+
+					<Flex align="center" gap="6">
+						<Text size="12" weight="600" color="primary" mono>
+							{{ token.token_id.slice(0, 4).toUpperCase() }}
+						</Text>
+
+						<Flex align="center" gap="3">
+							<div v-for="dot in 3" class="dot" />
+						</Flex>
+
+						<Text size="12" weight="600" color="primary" mono>
+							{{ token.token_id.slice(-4).toUpperCase() }}
+						</Text>
+
+						<CopyButton :text="token.token_id" size="12" />
+					</Flex>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Height</Text>
+
+					<Text @click="handleNavigate(`/block/${token.height}`)" size="12" weight="600" color="primary" mono class="clickable">
+						{{ comma(token.height) }}
+					</Text>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Tx Hash</Text>
+
+					<Flex @click="handleNavigate(`/tx/${transfer.tx_hash}`)" align="center" gap="6" class="clickable">
+						<Text size="12" weight="600" color="primary" mono>
+							{{ token.tx_hash.slice(0, 4).toUpperCase() }}
+						</Text>
+
+						<Flex align="center" gap="3">
+							<div v-for="dot in 3" class="dot" />
+						</Flex>
+
+						<Text size="12" weight="600" color="primary" mono>
+							{{ token.tx_hash.slice(-4).toUpperCase() }}
+						</Text>
+
+						<CopyButton :text="token.tx_hash" size="12" />
+					</Flex>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Mailbox</Text>
+
+					<Flex align="center" gap="6">
+						<Text size="12" weight="600" color="primary" mono>
+							{{ token.mailbox.slice(0, 4).toUpperCase() }}
+						</Text>
+						<Flex align="center" gap="3">
+							<div v-for="dot in 3" class="dot" />
+						</Flex>
+						<Text size="12" weight="600" color="primary" mono>
+							{{ token.mailbox.slice(-4).toUpperCase() }}
+						</Text>
+						<CopyButton :text="token.mailbox" size="12" />
+					</Flex>
+				</Flex>
+			</Flex>
+
+			<Button @click="emit('onClose')" wide type="tertiary" size="small">Close</Button>
+		</Flex>
+	</Modal>
+</template>
+
+<style module>
+.card {
+	border-radius: 8px;
+	background: var(--op-5);
+
+	padding: 8px 12px 8px 8px;
+}
+
+.address_text {
+	flex: 1;
+}
+
+.receipient_icon {
+	border-radius: 50px;
+	border: 2px solid var(--op-5);
+	box-sizing: content-box;
+
+	padding: 2px;
+}
+</style>
diff --git a/components/modals/HyperlaneTransferModal.vue b/components/modals/HyperlaneTransferModal.vue
new file mode 100644
index 00000000..a70dd79a
--- /dev/null
+++ b/components/modals/HyperlaneTransferModal.vue
@@ -0,0 +1,215 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** UI */
+import Modal from "@/components/ui/Modal.vue"
+import Button from "@/components/ui/Button.vue"
+
+/** Services */
+import { comma } from "@/services/utils"
+
+/** Stores */
+import { useAppStore } from "@/store/app.store"
+import { useCacheStore } from "@/store/cache.store"
+import { useModalsStore } from "@/store/modals.store"
+const appStore = useAppStore()
+const cacheStore = useCacheStore()
+const modalsStore = useModalsStore()
+
+const emit = defineEmits(["onClose"])
+const props = defineProps({
+	show: Boolean,
+})
+
+const transfer = computed(() => cacheStore.current.hyperlaneTransfer)
+
+const currentPrice = computed(() => appStore.currentPrice.close)
+
+const handleNavigate = (target) => {
+	emit("onClose")
+	navigateTo(target)
+}
+</script>
+
+<template>
+	<Modal :show="show" @onClose="emit('onClose')" width="500" disable-trap>
+		<Flex align="center" direction="column" gap="16">
+			<Flex wide align="center" gap="6">
+				<Icon name="hyperlane" size="14" color="primary" />
+				<Text size="14" weight="600" color="primary">Hyperlane Transfer</Text>
+			</Flex>
+
+			<Flex wide justify="between" align="center" :class="[$style.card]">
+				<Flex direction="column" gap="8">
+					<Text size="12" weight="600" color="secondary">Amount</Text>
+
+					<Flex align="center" gap="8">
+						<Icon
+							name="arrow-narrow-up-right-circle"
+							size="14"
+							:color="transfer.type === 'send' ? 'purple' : 'brand'"
+							:style="{ transform: `scale(1, ${transfer.type === 'receive' ? '-' : ''}1)` }"
+						/>
+
+						<Text v-if="transfer.received / 1_000_000 < 0.01" size="13" weight="600" color="primary" mono>
+							< 0.01 TIA <Text color="tertiary">({{ transfer.received }} {{ transfer.denom }})</Text>
+						</Text>
+						<Text v-else size="13" weight="600" color="primary" mono>
+							{{ comma(transfer.received / 1_000_000) }} TIA
+							<Text color="tertiary"> (${{ ((transfer.received / 1_000_000) * currentPrice).toFixed(2) }}) </Text>
+						</Text>
+					</Flex>
+				</Flex>
+			</Flex>
+
+			<Flex wide direction="column" gap="8" :class="[$style.card]">
+				<Text size="12" weight="600" color="secondary">Address</Text>
+
+				<Flex align="center" gap="8">
+					<Text size="13" weight="600" color="primary" mono :class="['overflow_ellipsis', $style.address_text]">
+						{{ transfer.address.hash }}
+					</Text>
+					<CopyButton :text="transfer.address.hash" />
+				</Flex>
+			</Flex>
+
+			<Flex wide direction="column" gap="8" :class="$style.card">
+				<Text size="12" weight="600" color="secondary">Counterparty</Text>
+
+				<Text size="13" weight="600" color="primary" mono :class="['overflow_ellipsis', $style.address_text]">
+					{{ transfer.counterparty.chain_metadata.name }}
+				</Text>
+
+				<Flex align="center" justify="between">
+					<Text size="13" weight="600" color="tertiary" mono :class="['overflow_ellipsis', $style.address_text]">
+						{{ transfer.counterparty.hash }}
+					</Text>
+					<CopyButton :text="transfer.counterparty.hash" />
+				</Flex>
+			</Flex>
+
+			<Flex wide direction="column" gap="16" :class="$style.card">
+				<Text size="12" weight="600" color="secondary">Details</Text>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Type</Text>
+
+					<Text size="12" weight="600" color="primary" style="text-transform: capitalize">
+						{{ transfer.type }}
+					</Text>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Time</Text>
+
+					<Text size="12" weight="600" color="primary">
+						{{ DateTime.fromISO(transfer.time).setLocale("en").toFormat("LLL d, t") }}
+						<Text color="tertiary"> ({{ DateTime.fromISO(transfer.time).toRelative({ style: "short" }) }})</Text>
+					</Text>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Height</Text>
+
+					<Text
+						@click="handleNavigate(`/block/${transfer.height}`)"
+						size="12"
+						weight="600"
+						color="primary"
+						mono
+						class="clickable"
+					>
+						{{ comma(transfer.height) }}
+					</Text>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Tx Hash</Text>
+
+					<Flex @click="handleNavigate(`/tx/${transfer.tx_hash}`)" align="center" gap="6" class="clickable">
+						<Text size="12" weight="600" color="primary" mono>
+							{{ transfer.tx_hash.slice(0, 4).toUpperCase() }}
+						</Text>
+
+						<Flex align="center" gap="3">
+							<div v-for="dot in 3" class="dot" />
+						</Flex>
+
+						<Text size="12" weight="600" color="primary" mono>
+							{{ transfer.tx_hash.slice(-4).toUpperCase() }}
+						</Text>
+
+						<CopyButton :text="transfer.tx_hash" size="12" />
+					</Flex>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Mailbox</Text>
+
+					<Flex align="center" gap="6">
+						<Text size="12" weight="600" color="primary" mono>
+							{{ transfer.mailbox.slice(0, 4).toUpperCase() }}
+						</Text>
+						<Flex align="center" gap="3">
+							<div v-for="dot in 3" class="dot" />
+						</Flex>
+						<Text size="12" weight="600" color="primary" mono>
+							{{ transfer.mailbox.slice(-4).toUpperCase() }}
+						</Text>
+						<CopyButton :text="transfer.mailbox" size="12" />
+					</Flex>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Token ID</Text>
+
+					<Flex align="center" gap="6">
+						<Text size="12" weight="600" color="primary" mono>
+							{{ transfer.token_id.slice(0, 4).toUpperCase() }}
+						</Text>
+						<Flex align="center" gap="3">
+							<div v-for="dot in 3" class="dot" />
+						</Flex>
+						<Text size="12" weight="600" color="primary" mono>
+							{{ transfer.token_id.slice(-4).toUpperCase() }}
+						</Text>
+						<CopyButton :text="transfer.token_id" size="12" />
+					</Flex>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Body</Text>
+
+					<Flex align="center" gap="6">
+						<Text size="12" weight="600" color="secondary" mono>{{ transfer.body.length }} chars string </Text>
+						<CopyButton :text="transfer.body" size="12" />
+					</Flex>
+				</Flex>
+			</Flex>
+
+			<Button @click="emit('onClose')" wide type="tertiary" size="small">Close</Button>
+		</Flex>
+	</Modal>
+</template>
+
+<style module>
+.card {
+	border-radius: 8px;
+	background: var(--op-5);
+
+	padding: 8px 12px 8px 8px;
+}
+
+.address_text {
+	flex: 1;
+}
+
+.receipient_icon {
+	border-radius: 50px;
+	border: 2px solid var(--op-5);
+	box-sizing: content-box;
+
+	padding: 2px;
+}
+</style>
diff --git a/components/modals/ModalsManager.vue b/components/modals/ModalsManager.vue
index 1e80238d..abf31798 100644
--- a/components/modals/ModalsManager.vue
+++ b/components/modals/ModalsManager.vue
@@ -20,6 +20,9 @@ import LightNodeModal from "./LightNodeModal.vue"
 import LightNodeSettingsModal from "./LightNodeSettingsModal.vue"
 import ConnectModal from "./ConnectModal.vue"
 import RollupRankModal from "./RollupRankModal.vue"
+import HyperlaneTransferModal from "./HyperlaneTransferModal.vue"
+import HyperlaneTokenModal from "./HyperlaneTokenModal.vue"
+import HyperlaneMailboxModal from "./HyperlaneMailboxModal.vue"
 import IBCTransferModal from "./IBCTransferModal.vue"
 import IBCClientModal from "./IBCClientModal.vue"
 
@@ -50,6 +53,9 @@ const modalsStore = useModalsStore()
 	<ConnectModal :show="modalsStore.modals.connect" @onClose="modalsStore.close('connect')" />
 	<ChartModal :show="modalsStore.modals.chart" @onClose="modalsStore.close('chart')" />
 	<RollupRankModal :show="modalsStore.modals.rollupRank" @onClose="modalsStore.close('rollupRank')" />
+	<HyperlaneTransferModal :show="modalsStore.modals.hyperlaneTransfer" @onClose="modalsStore.close('hyperlaneTransfer')" />
+	<HyperlaneTokenModal :show="modalsStore.modals.hyperlaneToken" @onClose="modalsStore.close('hyperlaneToken')" />
+	<HyperlaneMailboxModal :show="modalsStore.modals.hyperlaneMailbox" @onClose="modalsStore.close('hyperlaneMailbox')" />
 	<IBCTransferModal :show="modalsStore.modals.ibcTransfer" @onClose="modalsStore.close('ibcTransfer')" />
 	<IBCClientModal :show="modalsStore.modals.ibcClient" @onClose="modalsStore.close('ibcClient')" />
 </template>
diff --git a/components/modules/hyperlane/LatestTransfersTable.vue b/components/modules/hyperlane/LatestTransfersTable.vue
new file mode 100644
index 00000000..657206b1
--- /dev/null
+++ b/components/modules/hyperlane/LatestTransfersTable.vue
@@ -0,0 +1,262 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** UI */
+import Button from "@/components/ui/Button.vue"
+import Spinner from "@/components/ui/Spinner.vue"
+
+/** Services */
+import { comma } from "@/services/utils"
+
+/** API */
+import { fetchHyperlaneTransfers } from "@/services/api/hyperlane"
+
+/** Store */
+import { useModalsStore } from "@/store/modals.store"
+import { useCacheStore } from "@/store/cache.store"
+const modalsStore = useModalsStore()
+const cacheStore = useCacheStore()
+
+const router = useRouter()
+
+const isLoading = ref(true)
+const transfers = ref([])
+
+const getTransfers = async () => {
+	isLoading.value = true
+
+	const { data } = await useAsyncData(`hyperlane-transfers`, () =>
+		fetchHyperlaneTransfers({
+			offset: 0,
+			limit: 10,
+			sort: "desc",
+		}),
+	)
+	transfers.value = data.value
+
+	isLoading.value = false
+}
+
+await getTransfers()
+
+const handleOpenTransferModal = (transfer) => {
+	cacheStore.current.hyperlaneTransfer = transfer
+	modalsStore.open("hyperlaneTransfer")
+}
+</script>
+
+<template>
+	<Flex wide direction="column" gap="4">
+		<Flex align="center" gap="8" :class="$style.header">
+			<Icon name="arrow-circle-broken-right" size="14" color="tertiary" />
+			<Text size="13" weight="600" color="primary">Hyperlane Transfers</Text>
+		</Flex>
+
+		<Flex direction="column" gap="16" :class="$style.transfers_body">
+			<div v-if="transfers?.length" :class="$style.table_scroller">
+				<table>
+					<thead>
+						<tr>
+							<th><Text size="12" weight="600" color="tertiary">Amount</Text></th>
+							<th><Text size="12" weight="600" color="tertiary">Address</Text></th>
+							<th><Text size="12" weight="600" color="tertiary">Counterparty</Text></th>
+							<th><Text size="12" weight="600" color="tertiary">Height</Text></th>
+							<th><Text size="12" weight="600" color="tertiary">Transaction</Text></th>
+							<th><Text size="12" weight="600" color="tertiary">Time</Text></th>
+						</tr>
+					</thead>
+
+					<tbody>
+						<tr v-for="transfer in transfers" @click="handleOpenTransferModal(transfer)">
+							<td>
+								<Flex align="center" gap="6">
+									<Icon
+										name="arrow-narrow-up-right-circle"
+										size="14"
+										:color="transfer.type === 'send' ? 'purple' : 'brand'"
+										:style="{ transform: `scale(1, ${transfer.type === 'receive' ? '-' : ''}1)` }"
+									/>
+									<Text size="13" weight="600" color="primary" mono>
+										{{ comma(transfer.received / 1_000_000) }} <Text color="tertiary">TIA</Text>
+									</Text>
+								</Flex>
+							</td>
+							<td>
+								<Flex align="center">
+									<NuxtLink @click.stop :to="`/address/${transfer.address.hash}`">
+										<Flex align="center" gap="6">
+											<Text size="13" weight="600" color="primary" mono>
+												{{ transfer.address.hash.slice(0, 8) }}
+											</Text>
+											<Flex align="center" gap="3">
+												<div v-for="_ in 3" class="dot" />
+											</Flex>
+											<Text size="13" weight="600" color="primary" mono>
+												{{ transfer.address.hash.slice(-4) }}
+											</Text>
+										</Flex>
+									</NuxtLink>
+								</Flex>
+							</td>
+							<td>
+								<Flex align="center" gap="6">
+									<Text size="13" weight="600" color="primary" mono>
+										{{ transfer.counterparty.chain_metadata.name }}
+									</Text>
+								</Flex>
+							</td>
+							<td>
+								<Flex align="center">
+									<Outline @click.prevent="router.push(`/block/${transfer.height}`)">
+										<Flex align="center" gap="6">
+											<Icon name="block" size="14" color="secondary" />
+											<Text size="13" weight="600" color="primary" tabular>{{ comma(transfer.height) }}</Text>
+										</Flex>
+									</Outline>
+								</Flex>
+							</td>
+							<td>
+								<Flex align="center">
+									<NuxtLink @click.stop :to="`/tx/${transfer.tx_hash}`">
+										<Flex align="center" gap="6">
+											<Text size="13" weight="600" color="primary" mono>
+												{{ transfer.tx_hash.slice(0, 4).toUpperCase() }}
+											</Text>
+											<Flex align="center" gap="3">
+												<div v-for="_ in 3" class="dot" />
+											</Flex>
+											<Text size="13" weight="600" color="primary" mono>
+												{{ transfer.tx_hash.slice(-4).toUpperCase() }}
+											</Text>
+
+											<CopyButton :text="transfer.tx_hash" />
+										</Flex>
+									</NuxtLink>
+								</Flex>
+							</td>
+							<td>
+								<Flex align="center" gap="6">
+									<Text size="13" weight="600" color="primary">
+										{{ DateTime.fromISO(transfer.time).toRelative({ style: "short" }) }}
+									</Text>
+								</Flex>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<Flex v-else-if="isLoading" align="center" justify="center" gap="8" wide :class="$style.empty">
+				<Spinner size="14" />
+				<Text size="13" weight="500" color="secondary"> Loading recent transfers </Text>
+			</Flex>
+
+			<Flex v-else align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
+				<Text size="13" weight="600" color="secondary" align="center"> Recent transfers not found </Text>
+				<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
+					This data is temporarily unavailable
+				</Text>
+			</Flex>
+
+			<div :class="$style.bottom">
+				<Button link="/hyperlane/transfers" type="secondary" size="small" wide>
+					<Icon name="table" size="12" color="secondary" />
+					<Text size="12" weight="600" color="primary">View All Transfers</Text>
+				</Button>
+			</div>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.header {
+	height: 40px;
+
+	border-radius: 8px 8px 4px 4px;
+	background: var(--card-background);
+
+	padding: 0 12px;
+}
+
+.transfers_body {
+	flex: 1;
+
+	border-radius: 4px 4px 8px 8px;
+	background: var(--card-background);
+
+	& table {
+		width: 100%;
+
+		border-spacing: 0px;
+
+		& tbody {
+			& tr {
+				cursor: pointer;
+
+				transition: all 0.05s ease;
+
+				&:hover {
+					background: var(--op-5);
+				}
+
+				&:active {
+					background: var(--op-8);
+				}
+			}
+		}
+
+		& tr th {
+			text-align: left;
+
+			padding: 0;
+			padding-right: 16px;
+			padding-top: 16px;
+			padding-bottom: 8px;
+
+			&:first-child {
+				padding-left: 16px;
+			}
+
+			& span {
+				display: flex;
+			}
+
+			&.sortable {
+				cursor: pointer;
+			}
+
+			&.sortable:hover {
+				& span {
+					color: var(--txt-secondary);
+				}
+			}
+		}
+
+		& tr td {
+			height: 40px;
+
+			padding: 0;
+
+			white-space: nowrap;
+
+			&:first-child {
+				padding-left: 16px;
+			}
+		}
+	}
+}
+
+.empty {
+	margin: 32px 0 16px 0;
+}
+
+.bottom {
+	padding: 0 16px 16px 16px;
+}
+
+.table_scroller {
+	flex: 1;
+
+	overflow-x: auto;
+}
+</style>
diff --git a/components/modules/hyperlane/MailboxesTable.vue b/components/modules/hyperlane/MailboxesTable.vue
new file mode 100644
index 00000000..29d97864
--- /dev/null
+++ b/components/modules/hyperlane/MailboxesTable.vue
@@ -0,0 +1,216 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** UI */
+import Spinner from "@/components/ui/Spinner.vue"
+
+/** API */
+import { fetchHyperlaneMailboxes } from "@/services/api/hyperlane"
+
+/** Store */
+import { useModalsStore } from "@/store/modals.store"
+import { useCacheStore } from "@/store/cache.store"
+const modalsStore = useModalsStore()
+const cacheStore = useCacheStore()
+
+const isLoading = ref(true)
+const mailboxes = ref([])
+
+const getMailboxes = async () => {
+	isLoading.value = true
+
+	const { data } = await useAsyncData(`hyperlane-mailboxes`, () =>
+		fetchHyperlaneMailboxes({
+			offset: 0,
+			limit: 10,
+			sort: "desc",
+		}),
+	)
+	mailboxes.value = data.value
+
+	isLoading.value = false
+}
+
+await getMailboxes()
+
+const handleOpenMailboxModal = (mailbox) => {
+	cacheStore.current.hyperlaneMailbox = mailbox
+	modalsStore.open("hyperlaneMailbox")
+}
+</script>
+
+<template>
+	<Flex wide direction="column" gap="4">
+		<Flex align="center" gap="8" :class="$style.header">
+			<Icon name="message" size="14" color="tertiary" />
+			<Text size="13" weight="600" color="primary">Mailboxes</Text>
+		</Flex>
+
+		<Flex direction="column" gap="16" :class="$style.transfers_body">
+			<div v-if="mailboxes?.length" :class="$style.table_scroller">
+				<table>
+					<thead>
+						<tr>
+							<th><Text size="12" weight="600" color="tertiary">Owner</Text></th>
+							<th><Text size="12" weight="600" color="tertiary">Messages</Text></th>
+							<th></th>
+							<th><Text size="12" weight="600" color="tertiary">Created</Text></th>
+						</tr>
+					</thead>
+
+					<tbody>
+						<tr v-for="mailbox in mailboxes" @click="handleOpenMailboxModal(mailbox)">
+							<td>
+								<Flex align="center">
+									<NuxtLink @click.stop :to="`/address/${mailbox.owner.hash}`">
+										<Flex align="center" gap="6">
+											<Text size="13" weight="600" color="primary" mono>
+												{{ mailbox.owner.hash.slice(0, 8) }}
+											</Text>
+											<Flex align="center" gap="3">
+												<div v-for="_ in 3" class="dot" />
+											</Flex>
+											<Text size="13" weight="600" color="primary" mono>
+												{{ mailbox.owner.hash.slice(-4) }}
+											</Text>
+										</Flex>
+									</NuxtLink>
+								</Flex>
+							</td>
+							<td>
+								<Flex align="center" gap="6">
+									<Icon name="arrow-narrow-up-right-circle" size="14" color="tertiary" />
+									<Text size="13" weight="600" color="secondary"> Sent:</Text>
+									<Text size="13" weight="600" color="primary">
+										{{ mailbox.sent_messages }}
+									</Text>
+								</Flex>
+							</td>
+							<td>
+								<Flex align="center" gap="6">
+									<Icon name="arrow-narrow-up-right-circle" size="14" color="tertiary" style="transform: scale(1, -1)" />
+									<Text size="13" weight="600" color="secondary">Received:</Text>
+									<Text size="13" weight="600" color="primary">
+										{{ mailbox.received_messages }}
+									</Text>
+								</Flex>
+							</td>
+							<td>
+								<Flex align="center" gap="6">
+									<Text size="13" weight="600" color="primary">
+										{{ DateTime.fromISO(mailbox.time).toRelative({ style: "short" }) }}
+									</Text>
+								</Flex>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<Flex v-else-if="isLoading" align="center" justify="center" gap="8" wide :class="$style.empty">
+				<Spinner size="14" />
+				<Text size="13" weight="500" color="secondary"> Loading mailboxes </Text>
+			</Flex>
+
+			<Flex v-else align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
+				<Text size="13" weight="600" color="secondary" align="center"> Mailboxes not found </Text>
+				<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
+					This data is temporarily unavailable
+				</Text>
+			</Flex>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.header {
+	height: 40px;
+
+	border-radius: 8px 8px 4px 4px;
+	background: var(--card-background);
+
+	padding: 0 12px;
+}
+
+.transfers_body {
+	flex: 1;
+
+	border-radius: 4px 4px 8px 8px;
+	background: var(--card-background);
+
+	& table {
+		width: 100%;
+
+		border-spacing: 0px;
+
+		& tbody {
+			& tr {
+				cursor: pointer;
+
+				transition: all 0.05s ease;
+
+				&:hover {
+					background: var(--op-5);
+				}
+
+				&:active {
+					background: var(--op-8);
+				}
+			}
+		}
+
+		& tr th {
+			text-align: left;
+
+			padding: 0;
+			padding-right: 16px;
+			padding-top: 16px;
+			padding-bottom: 8px;
+
+			&:first-child {
+				padding-left: 16px;
+			}
+
+			& span {
+				display: flex;
+			}
+
+			&.sortable {
+				cursor: pointer;
+			}
+
+			&.sortable:hover {
+				& span {
+					color: var(--txt-secondary);
+				}
+			}
+		}
+
+		& tr td {
+			height: 40px;
+
+			padding: 0;
+
+			white-space: nowrap;
+
+			&:first-child {
+				padding-left: 16px;
+			}
+		}
+	}
+}
+
+.empty {
+	margin: 32px 0 16px 0;
+}
+
+.bottom {
+	padding: 0 16px 16px 16px;
+}
+
+.table_scroller {
+	flex: 1;
+
+	overflow-x: auto;
+}
+</style>
diff --git a/components/modules/hyperlane/TokensTable.vue b/components/modules/hyperlane/TokensTable.vue
new file mode 100644
index 00000000..5d67c5d1
--- /dev/null
+++ b/components/modules/hyperlane/TokensTable.vue
@@ -0,0 +1,214 @@
+<script setup>
+/** UI */
+import Spinner from "@/components/ui/Spinner.vue"
+
+/** Services */
+import { comma } from "@/services/utils"
+
+/** API */
+import { fetchHyperlaneTokens } from "@/services/api/hyperlane"
+
+/** Store */
+import { useModalsStore } from "@/store/modals.store"
+import { useCacheStore } from "@/store/cache.store"
+const modalsStore = useModalsStore()
+const cacheStore = useCacheStore()
+
+const router = useRouter()
+
+const isLoading = ref(true)
+const tokens = ref([])
+
+const getTokens = async () => {
+	isLoading.value = true
+
+	const { data } = await useAsyncData(`hyperlane-tokens`, () =>
+		fetchHyperlaneTokens({
+			offset: 0,
+			limit: 10,
+			sort: "desc",
+		}),
+	)
+	tokens.value = data.value
+
+	isLoading.value = false
+}
+
+await getTokens()
+
+const handleOpenTokenModal = (token) => {
+	cacheStore.current.hyperlaneToken = token
+	modalsStore.open("hyperlaneToken")
+}
+</script>
+
+<template>
+	<Flex wide direction="column" gap="4">
+		<Flex align="center" gap="8" :class="$style.header">
+			<Icon name="coin" size="14" color="tertiary" />
+			<Text size="13" weight="600" color="primary">Tokens</Text>
+		</Flex>
+
+		<Flex direction="column" gap="16" :class="$style.transfers_body">
+			<div v-if="tokens?.length" :class="$style.table_scroller">
+				<table>
+					<thead>
+						<tr>
+							<th><Text size="12" weight="600" color="tertiary">Type</Text></th>
+							<th><Text size="12" weight="600" color="tertiary">Owner</Text></th>
+							<th><Text size="12" weight="600" color="tertiary">Sent</Text></th>
+							<th><Text size="12" weight="600" color="tertiary">Received</Text></th>
+						</tr>
+					</thead>
+
+					<tbody>
+						<tr v-for="token in tokens" @click="handleOpenTokenModal(token)">
+							<td>
+								<Flex align="center">
+									<Text size="13" weight="600" color="primary" style="text-transform: capitalize">
+										{{ token.type }}
+									</Text>
+								</Flex>
+							</td>
+							<td>
+								<Flex align="center">
+									<NuxtLink @click.stop :to="`/address/${token.owner.hash}`">
+										<Flex align="center" gap="6">
+											<Text size="13" weight="600" color="primary" mono>
+												{{ token.owner.hash.slice(0, 8) }}
+											</Text>
+											<Flex align="center" gap="3">
+												<div v-for="_ in 3" class="dot" />
+											</Flex>
+											<Text size="13" weight="600" color="primary" mono>
+												{{ token.owner.hash.slice(-4) }}
+											</Text>
+										</Flex>
+									</NuxtLink>
+								</Flex>
+							</td>
+							<td>
+								<Flex align="center">
+									<Text size="13" weight="600" color="primary" mono>
+										{{ comma(token.sent / 1_000_000) }} <Text color="tertiary">TIA</Text>
+									</Text>
+								</Flex>
+							</td>
+							<td>
+								<Flex align="center">
+									<Text size="13" weight="600" color="primary" mono>
+										{{ comma(token.received / 1_000_000) }} <Text color="tertiary">TIA</Text>
+									</Text>
+								</Flex>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<Flex v-else-if="isLoading" align="center" justify="center" gap="8" wide :class="$style.empty">
+				<Spinner size="14" />
+				<Text size="13" weight="500" color="secondary"> Loading tokens </Text>
+			</Flex>
+
+			<Flex v-else align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
+				<Text size="13" weight="600" color="secondary" align="center"> Tokens not found </Text>
+				<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
+					This data is temporarily unavailable
+				</Text>
+			</Flex>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.header {
+	height: 40px;
+
+	border-radius: 8px 8px 4px 4px;
+	background: var(--card-background);
+
+	padding: 0 12px;
+}
+
+.transfers_body {
+	flex: 1;
+
+	border-radius: 4px 4px 8px 8px;
+	background: var(--card-background);
+
+	& table {
+		width: 100%;
+
+		border-spacing: 0px;
+
+		& tbody {
+			& tr {
+				cursor: pointer;
+
+				transition: all 0.05s ease;
+
+				&:hover {
+					background: var(--op-5);
+				}
+
+				&:active {
+					background: var(--op-8);
+				}
+			}
+		}
+
+		& tr th {
+			text-align: left;
+
+			padding: 0;
+			padding-right: 16px;
+			padding-top: 16px;
+			padding-bottom: 8px;
+
+			&:first-child {
+				padding-left: 16px;
+			}
+
+			& span {
+				display: flex;
+			}
+
+			&.sortable {
+				cursor: pointer;
+			}
+
+			&.sortable:hover {
+				& span {
+					color: var(--txt-secondary);
+				}
+			}
+		}
+
+		& tr td {
+			height: 40px;
+
+			padding: 0;
+
+			white-space: nowrap;
+
+			&:first-child {
+				padding-left: 16px;
+			}
+		}
+	}
+}
+
+.empty {
+	margin: 32px 0 16px 0;
+}
+
+.bottom {
+	padding: 0 16px 16px 16px;
+}
+
+.table_scroller {
+	flex: 1;
+
+	overflow-x: auto;
+}
+</style>
diff --git a/components/modules/hyperlane/TransfersTable.vue b/components/modules/hyperlane/TransfersTable.vue
new file mode 100644
index 00000000..177d8a1b
--- /dev/null
+++ b/components/modules/hyperlane/TransfersTable.vue
@@ -0,0 +1,273 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** Services */
+import { comma } from "@/services/utils"
+
+/** UI */
+import Button from "@/components/ui/Button.vue"
+
+/** Shared Components */
+import TablePlaceholderView from "@/components/shared/TablePlaceholderView.vue"
+
+/** Store */
+import { useModalsStore } from "@/store/modals.store"
+import { useCacheStore } from "@/store/cache.store"
+const modalsStore = useModalsStore()
+const cacheStore = useCacheStore()
+
+const emit = defineEmits(["onPrevPage", "onNextPage", "updatePage"])
+const props = defineProps({
+	transfers: {
+		type: Array,
+		default: [],
+	},
+	page: {
+		type: Number,
+		default: 1,
+	},
+	isLoading: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+/** Pagination */
+const handlePrevPage = () => {
+	if (props.page === 1) return
+	emit("onPrevPage")
+}
+
+const isNextPageDisabled = computed(() => {
+	return !props.transfers.length || props.transfers.length !== 10
+})
+const handleNextPage = () => {
+	if (isNextPageDisabled.value) return
+	emit("onNextPage")
+}
+
+const handleOpenTransferModal = (transfer) => {
+	cacheStore.current.hyperlaneTransfer = transfer
+	modalsStore.open("hyperlaneTransfer")
+}
+</script>
+
+<template>
+	<Flex direction="column" :class="[$style.wrapper, isLoading && $style.disabled]">
+		<Flex v-if="transfers.length" :class="$style.scroller">
+			<table>
+				<thead>
+					<tr>
+						<th><Text size="12" weight="600" color="tertiary">Source Hash</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Amount</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Address</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Counterparty</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Height</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Time</Text></th>
+					</tr>
+				</thead>
+
+				<tbody>
+					<tr v-for="transfer in transfers" @click="handleOpenTransferModal(transfer)">
+						<td>
+							<Flex align="center">
+								<NuxtLink @click.stop :to="`/tx/${transfer.tx_hash}`">
+									<Flex align="center" gap="8">
+										<Icon name="check-circle" size="13" color="brand" />
+
+										<Text size="13" weight="600" color="primary" mono>
+											{{ transfer.tx_hash.slice(0, 4).toUpperCase() }}
+										</Text>
+
+										<Flex align="center" gap="3">
+											<div v-for="dot in 3" class="dot" />
+										</Flex>
+
+										<Text size="13" weight="600" color="primary" mono>
+											{{ transfer.tx_hash.slice(-4).toUpperCase() }}
+										</Text>
+
+										<CopyButton :text="transfer.tx_hash" />
+									</Flex>
+								</NuxtLink>
+							</Flex>
+						</td>
+						<td>
+							<Flex align="center" gap="6">
+								<Icon
+									name="arrow-narrow-up-right-circle"
+									size="14"
+									:color="transfer.type === 'send' ? 'purple' : 'brand'"
+									:style="{ transform: `scale(1, ${transfer.type === 'receive' ? '-' : ''}1)` }"
+								/>
+								<Text size="13" weight="600" color="primary" mono>
+									{{ comma(transfer.received / 1_000_000) }} <Text color="tertiary">TIA</Text>
+								</Text>
+							</Flex>
+						</td>
+						<td>
+							<Flex align="center">
+								<NuxtLink @click.stop :to="`/address/${transfer.address.hash}`">
+									<Flex align="center" gap="6">
+										<Text size="13" weight="600" color="primary" mono>
+											{{ transfer.address.hash.slice(0, 8) }}
+										</Text>
+										<Flex align="center" gap="3">
+											<div v-for="_ in 3" class="dot" />
+										</Flex>
+										<Text size="13" weight="600" color="primary" mono>
+											{{ transfer.address.hash.slice(-4) }}
+										</Text>
+									</Flex>
+								</NuxtLink>
+							</Flex>
+						</td>
+						<td>
+							<NuxtLink>
+								<Flex align="center" gap="6">
+									<Text size="13" weight="600" color="primary" mono>
+										{{ transfer.counterparty.chain_metadata.name }}
+									</Text>
+								</Flex>
+							</NuxtLink>
+						</td>
+						<td>
+							<Flex align="center">
+								<Outline @click.prevent="router.push(`/block/${transfer.height}`)">
+									<Flex align="center" gap="6">
+										<Icon name="block" size="14" color="secondary" />
+										<Text size="13" weight="600" color="primary" tabular>{{ comma(transfer.height) }}</Text>
+									</Flex>
+								</Outline>
+							</Flex>
+						</td>
+						<td>
+							<NuxtLink>
+								<Flex align="center" gap="6">
+									<Text size="13" weight="600" color="primary">
+										{{ DateTime.fromISO(transfer.time).toRelative({ style: "short" }) }}
+									</Text>
+								</Flex>
+							</NuxtLink>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</Flex>
+
+		<TablePlaceholderView
+			v-else
+			title="There's no transfers"
+			description="Probably something went wrong... ?"
+			icon="hyperlane"
+			subIcon="warning"
+			:descriptionWidth="260"
+			style="height: 100%"
+		/>
+
+		<!-- Pagination -->
+		<Flex align="center" gap="6" :class="$style.pagination">
+			<Button @click="emit('updatePage', 1)" type="secondary" size="mini" :disabled="page === 1">
+				<Icon name="arrow-left-stop" size="12" color="primary" />
+			</Button>
+			<Button type="secondary" @click="handlePrevPage" size="mini" :disabled="page === 1">
+				<Icon name="arrow-left" size="12" color="primary" />
+			</Button>
+
+			<Button type="secondary" size="mini" disabled>
+				<Text size="12" weight="600" color="primary"> Page {{ comma(page) }} </Text>
+			</Button>
+
+			<Button @click="handleNextPage" type="secondary" size="mini" :disabled="isNextPageDisabled">
+				<Icon name="arrow-right" size="12" color="primary" />
+			</Button>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+	height: 100%;
+
+	border-radius: 4px 4px 8px 8px;
+	background: var(--card-background);
+
+	& table {
+		width: 100%;
+		height: fit-content;
+
+		border-spacing: 0px;
+
+		padding-bottom: 8px;
+
+		& tbody {
+			& tr {
+				cursor: pointer;
+
+				transition: all 0.05s ease;
+
+				&:hover {
+					background: var(--op-5);
+				}
+
+				&:active {
+					background: var(--op-8);
+				}
+			}
+		}
+
+		& tr th {
+			text-align: left;
+			padding: 0;
+			padding-right: 16px;
+			padding-top: 12px;
+			padding-bottom: 8px;
+
+			&:first-child {
+				padding-left: 16px;
+			}
+
+			& span {
+				display: flex;
+			}
+		}
+
+		& tr td {
+			padding: 0;
+			padding-right: 24px;
+			padding-top: 8px;
+			padding-bottom: 8px;
+
+			white-space: nowrap;
+
+			&:first-child {
+				padding-left: 16px;
+			}
+		}
+	}
+}
+
+.scroller {
+	min-width: 100%;
+	width: 0;
+	height: 100%;
+
+	overflow-x: auto;
+}
+
+.table.disabled {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.pagination {
+	padding: 8px 16px 16px 16px;
+}
+
+@media (max-width: 800px) {
+	.table {
+		border-radius: 4px 4px 8px 8px;
+	}
+}
+</style>
diff --git a/pages/hyperlane/index.vue b/pages/hyperlane/index.vue
new file mode 100644
index 00000000..fa099046
--- /dev/null
+++ b/pages/hyperlane/index.vue
@@ -0,0 +1,97 @@
+<script setup>
+/** Components */
+import LatestTransfersTable from "@/components/modules/hyperlane/LatestTransfersTable.vue"
+import MailboxesTable from "@/components/modules/hyperlane/MailboxesTable.vue"
+import TokensTable from "@/components/modules/hyperlane/TokensTable.vue"
+
+useHead({
+	title: `Celestia Hyperlane - Celenium`,
+	link: [
+		{
+			rel: "canonical",
+			href: "https://celenium.io/hyperlane",
+		},
+	],
+	meta: [
+		{
+			name: "description",
+			content: "Explore Celestia Hyperlane transfers, mailboxes, and tokens.",
+		},
+		{
+			property: "og:title",
+			content: "Celestia Hyperlane - Celenium",
+		},
+		{
+			property: "og:description",
+			content: "Explore Celestia Hyperlane transfers, mailboxes, and tokens.",
+		},
+		{
+			property: "og:url",
+			content: "https://celenium.io/hyperlane",
+		},
+		{
+			property: "og:image",
+			content: "/img/seo/hyperlane.png",
+		},
+		{
+			name: "twitter:title",
+			content: "Celestia Hyperlane - Celenium",
+		},
+		{
+			name: "twitter:description",
+			content: "Explore Celestia Hyperlane transfers, mailboxes, and tokens.",
+		},
+		{
+			name: "twitter:card",
+			content: "summary_large_image",
+		},
+		{
+			name: "twitter:image",
+			content: "https://celenium.io/img/seo/hyperlane.png",
+		},
+	],
+})
+</script>
+
+<template>
+	<Flex direction="column" wide :class="$style.wrapper">
+		<Breadcrumbs
+			:items="[
+				{ link: '/', name: 'Explore' },
+				{ link: '/hyperlane', name: `Interop Hyperlane` },
+			]"
+			:class="$style.breadcrumbs"
+		/>
+
+		<Flex direction="column" gap="24">
+			<LatestTransfersTable />
+
+			<Flex gap="24" :class="$style.tables">
+				<TokensTable />
+				<MailboxesTable />
+			</Flex>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+	padding: 20px 24px 60px 24px;
+}
+
+.breadcrumbs {
+	margin-bottom: 16px;
+}
+
+@media (max-width: 1020px) {
+	.tables {
+		flex-direction: column;
+	}
+}
+
+@media (max-width: 500px) {
+	.wrapper {
+		padding: 32px 12px;
+	}
+}
+</style>
diff --git a/pages/hyperlane/transfers.vue b/pages/hyperlane/transfers.vue
new file mode 100644
index 00000000..f43fd06d
--- /dev/null
+++ b/pages/hyperlane/transfers.vue
@@ -0,0 +1,153 @@
+<script setup>
+/** Components */
+import TransfersTable from "@/components/modules/hyperlane/TransfersTable.vue"
+
+/** API */
+import { fetchHyperlaneTransfers } from "@/services/api/hyperlane"
+
+useHead({
+	title: `Celestia Hyperlane Transfers - Celenium`,
+	link: [
+		{
+			rel: "canonical",
+			href: "https://celenium.io/hyperlane/transfers",
+		},
+	],
+	meta: [
+		{
+			name: "description",
+			content: "Explore Celestia Hyperlane transfers - amount, address, counterparty, and more.",
+		},
+		{
+			property: "og:title",
+			content: "Celestia Hyperlane Transfers - Celenium",
+		},
+		{
+			property: "og:description",
+			content: "Explore Celestia Hyperlane transfers - amount, address, counterparty, and more.",
+		},
+		{
+			property: "og:url",
+			content: "https://celenium.io/hyperlane/transfers",
+		},
+		{
+			property: "og:image",
+			content: "/img/seo/hyperlane.png",
+		},
+		{
+			name: "twitter:title",
+			content: "Celestia Hyperlane Transfers - Celenium",
+		},
+		{
+			name: "twitter:description",
+			content: "Explore Celestia Hyperlane transfers - amount, address, counterparty, and more.",
+		},
+		{
+			name: "twitter:card",
+			content: "summary_large_image",
+		},
+		{
+			name: "twitter:image",
+			content: "https://celenium.io/img/seo/hyperlane.png",
+		},
+	],
+})
+
+const transfers = ref([])
+const isLoading = ref(true)
+
+/** Pagination */
+const page = ref(1)
+const handleNext = () => {
+	page.value += 1
+}
+const handlePrev = () => {
+	if (page.value === 1) return
+	page.value -= 1
+}
+
+const getTransfers = async () => {
+	isLoading.value = true
+
+	const { data } = await useAsyncData(`hyperlane-transfers-${page.value}`, () =>
+		fetchHyperlaneTransfers({
+			offset: (page.value - 1) * 10,
+			limit: 10,
+		}),
+	)
+	transfers.value = data.value
+
+	isLoading.value = false
+}
+
+await getTransfers()
+
+/** Refetch transfers */
+watch(
+	() => page.value,
+	async () => {
+		const data = await fetchHyperlaneTransfers({
+			offset: (page.value - 1) * 10,
+			limit: 10,
+		})
+		transfers.value = data
+	},
+)
+</script>
+
+<template>
+	<Flex direction="column" wide :class="$style.wrapper">
+		<Breadcrumbs
+			:items="[
+				{ link: '/', name: 'Explore' },
+				{ link: '/hyperlane', name: `Hyperlane` },
+				{ link: '/hyperlane/transfers', name: `Transfers` },
+			]"
+			:class="$style.breadcrumbs"
+		/>
+
+		<Flex wide direction="column" gap="4">
+			<Flex justify="between" :class="$style.header">
+				<Flex align="center" gap="8">
+					<Icon name="arrow-narrow-up-right-circle" size="16" color="secondary" />
+					<Text size="13" weight="600" color="primary">Hyperlane Transfers</Text>
+				</Flex>
+			</Flex>
+
+			<TransfersTable
+				:transfers
+				:page
+				:isLoading="isLoading"
+				@onRefetch="getTransfers"
+				@onPrevPage="handlePrev"
+				@onNextPage="handleNext"
+				@updatePage="(newPage) => (page = newPage)"
+			/>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+	padding: 20px 24px 60px 24px;
+}
+
+.breadcrumbs {
+	margin-bottom: 16px;
+}
+
+.header {
+	height: 40px;
+
+	border-radius: 8px 8px 4px 4px;
+	background: var(--card-background);
+
+	padding: 0 12px;
+}
+
+@media (max-width: 500px) {
+	.wrapper {
+		padding: 32px 12px;
+	}
+}
+</style>
diff --git a/public/img/seo/hyperlane.png b/public/img/seo/hyperlane.png
new file mode 100644
index 00000000..4fb62ccc
Binary files /dev/null and b/public/img/seo/hyperlane.png differ
diff --git a/services/api/hyperlane.js b/services/api/hyperlane.js
new file mode 100644
index 00000000..ecd735b4
--- /dev/null
+++ b/services/api/hyperlane.js
@@ -0,0 +1,54 @@
+/** Services */
+import { useServerURL } from "@/services/config"
+
+export const fetchHyperlaneTransfers = async ({ limit, offset, sort, address, relayer, mailbox, token, type, domain }) => {
+	try {
+		const url = new URL(`${useServerURL()}/hyperlane/transfer`)
+
+		if (limit) url.searchParams.append("limit", limit)
+		if (offset) url.searchParams.append("offset", offset)
+		if (sort) url.searchParams.append("sort", sort)
+		if (address) url.searchParams.append("address", address)
+		if (relayer) url.searchParams.append("relayer", relayer)
+		if (mailbox) url.searchParams.append("mailbox", mailbox)
+		if (token) url.searchParams.append("token", token)
+		if (type) url.searchParams.append("type", type)
+		if (domain) url.searchParams.append("domain", domain)
+
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+export const fetchHyperlaneMailboxes = async ({ limit, offset }) => {
+	try {
+		const url = new URL(`${useServerURL()}/hyperlane/mailbox`)
+
+		if (limit) url.searchParams.append("limit", limit)
+		if (offset) url.searchParams.append("offset", offset)
+
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+export const fetchHyperlaneTokens = async ({ limit, offset, owner, mailbox, type }) => {
+	try {
+		const url = new URL(`${useServerURL()}/hyperlane/token`)
+
+		if (limit) url.searchParams.append("limit", limit)
+		if (offset) url.searchParams.append("offset", offset)
+		if (owner) url.searchParams.append("owner", owner)
+		if (mailbox) url.searchParams.append("mailbox", mailbox)
+		if (type) url.searchParams.append("type", type)
+
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
diff --git a/services/config.js b/services/config.js
index 2cca95e5..4189ad46 100644
--- a/services/config.js
+++ b/services/config.js
@@ -29,16 +29,16 @@ export const getServerURL = (network) => {
 
 	switch (network) {
 		case "mainnet":
-			return p.API_MAINNET;
+			return p.API_MAINNET
 		case "mocha":
-			return p.API_MOCHA;
+			return p.API_MOCHA
 		case "arabica":
-			return p.API_ARABICA;
+			return p.API_ARABICA
 		case "mammoth":
-			return p.API_MAMMOTH;
-	
+			return p.API_MAMMOTH
+
 		default:
-			return p.API_DEV;
+			return p.API_DEV
 	}
 }