diff --git a/assets/icons.json b/assets/icons.json
index 4e406237..421bc45f 100644
--- a/assets/icons.json
+++ b/assets/icons.json
@@ -1,4 +1,5 @@
 {
+	"ibc": "M18.5 3a2.5 2.5 0 1 1-.912 4.828l-4.556 4.555a5.48 5.48 0 0 1 .936 3.714l2.624.787a2.5 2.5 0 1 1-.575 1.916l-2.623-.788a5.5 5.5 0 0 1-10.39-2.29L3 15.5l.004-.221a5.5 5.5 0 0 1 2.984-4.673L5.2 7.982a2.5 2.5 0 0 1-2.194-2.304L3 5.5l.005-.164a2.5 2.5 0 1 1 4.111 2.071l.787 2.625a5.48 5.48 0 0 1 3.714.936l4.555-4.556a2.5 2.5 0 0 1-.167-.748L16 5.5l.005-.164A2.5 2.5 0 0 1 18.5 3",
 	"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",
 	"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",
 	"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",
@@ -130,6 +131,7 @@
 	"stop-circle": "M 2 12 C 2 6.477 6.477 2 12 2 C 17.523 2 22 6.477 22 12 C 22 17.523 17.523 22 12 22 C 6.477 22 2 17.523 2 12 Z M 8.586 8.586 C 8 9.172 8 10.114 8 12 C 8 13.886 8 14.828 8.586 15.414 C 9.172 16 10.114 16 12 16 C 13.886 16 14.828 16 15.414 15.414 C 16 14.828 16 13.886 16 12 C 16 10.114 16 9.172 15.414 8.586 C 14.828 8 13.886 8 12 8 C 10.114 8 9.172 8 8.586 8.586 Z",
 	"play-circle": "M 2 12 C 2 6.477 6.477 2 12 2 C 17.523 2 22 6.477 22 12 C 22 17.523 17.523 22 12 22 C 6.477 22 2 17.523 2 12 Z M 10.694 15.846 L 15.414 13.059 C 16.195 12.597 16.195 11.403 15.414 10.941 L 10.694 8.154 C 9.934 7.706 9 8.29 9 9.214 L 9 14.787 C 9 15.71 9.934 16.294 10.694 15.846 Z",
 	"alt-arrow-down": "M12.3698 15.835L18.7998 9.205C19.2008 8.79 18.9578 8 18.4298 8H5.56982C5.04182 8 4.79882 8.79 5.19982 9.205L11.6298 15.835C11.8428 16.055 12.1568 16.055 12.3698 15.835Z",
+	"arrow-down-circle": "M17 3.34C18.5083 4.21085 19.7629 5.46053 20.6398 6.9653C21.5167 8.47007 21.9854 10.1778 21.9994 11.9193C22.0135 13.6609 21.5725 15.376 20.72 16.8947C19.8676 18.4134 18.6332 19.6832 17.1392 20.5783C15.6452 21.4734 13.9434 21.9628 12.2021 21.9981C10.4608 22.0333 8.74055 21.6132 7.21156 20.7792C5.68256 19.9453 4.39787 18.7265 3.48467 17.2435C2.57146 15.7605 2.06141 14.0647 2.005 12.324L2 12L2.005 11.676C2.061 9.94899 2.56355 8.26596 3.46364 6.79099C4.36373 5.31602 5.63065 4.09945 7.14089 3.25988C8.65113 2.42031 10.3531 1.9864 12.081 2.00044C13.8089 2.01448 15.5036 2.476 17 3.34ZM12 7C11.7348 7 11.4804 7.10536 11.2929 7.29289C11.1054 7.48043 11 7.73478 11 8V13.585L8.707 11.293L8.613 11.21C8.41201 11.0546 8.1594 10.9815 7.90648 11.0056C7.65355 11.0297 7.41928 11.1492 7.25125 11.3397C7.08322 11.5303 6.99402 11.7777 7.00177 12.0316C7.00953 12.2856 7.11365 12.527 7.293 12.707L11.293 16.707C11.3197 16.7337 11.351 16.7613 11.387 16.79L11.479 16.854L11.577 16.906L11.658 16.94L11.771 16.974L11.883 16.994L12 17L12.115 16.993L12.229 16.973L12.371 16.929L12.484 16.875L12.595 16.804C12.6347 16.7745 12.6721 16.7421 12.707 16.707L16.707 12.707L16.79 12.613C16.9454 12.412 17.0185 12.1594 16.9944 11.9065C16.9703 11.6536 16.8508 11.4193 16.6603 11.2512C16.4697 11.0832 16.2223 10.994 15.9684 11.0018C15.7144 11.0095 15.473 11.1137 15.293 11.293L13 13.584V8L12.993 7.883C12.9643 7.63975 12.8474 7.41547 12.6644 7.25271C12.4813 7.08996 12.2449 7.00003 12 7Z",
 	"arrow-left": "M12.7071 5.70711C13.0976 5.31658 13.0976 4.68342 12.7071 4.29289C12.3166 3.90237 11.6834 3.90237 11.2929 4.29289L4.29289 11.2929C3.90237 11.6834 3.90237 12.3166 4.29289 12.7071L11.2929 19.7071C11.6834 20.0976 12.3166 20.0976 12.7071 19.7071C13.0976 19.3166 13.0976 18.6834 12.7071 18.2929L7.41421 13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H7.41421L12.7071 5.70711Z",
 	"arrow-left-stop": "M4 3C4 2.44772 3.55229 2 3 2C2.44772 2 2 2.44772 2 3V21C2 21.5523 2.44772 22 3 22C3.55228 22 4 21.5523 4 21V3ZM14.7071 5.70711L9.41421 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H9.41421L14.7071 18.2929C15.0976 18.6834 15.0976 19.3166 14.7071 19.7071C14.3166 20.0976 13.6834 20.0976 13.2929 19.7071L6.29289 12.7071C5.90237 12.3166 5.90237 11.6834 6.29289 11.2929L13.2929 4.29289C13.6834 3.90237 14.3166 3.90237 14.7071 4.29289C15.0976 4.68342 15.0976 5.31658 14.7071 5.70711Z",
 	"arrow-right": "M12.7071 4.29289C12.3166 3.90237 11.6834 3.90237 11.2929 4.29289C10.9024 4.68342 10.9024 5.31658 11.2929 5.70711L16.5858 11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H16.5858L11.2929 18.2929C10.9024 18.6834 10.9024 19.3166 11.2929 19.7071C11.6834 20.0976 12.3166 20.0976 12.7071 19.7071L19.7071 12.7071C20.0976 12.3166 20.0976 11.6834 19.7071 11.2929L12.7071 4.29289Z",
diff --git a/components/LeftSidebar.vue b/components/LeftSidebar.vue
index dd2dfe07..f94b86fd 100644
--- a/components/LeftSidebar.vue
+++ b/components/LeftSidebar.vue
@@ -126,6 +126,23 @@ const modularLinks = reactive([
 			},
 		],
 	},
+	{
+		icon: "ibc",
+		name: "IBC",
+		path: "/ibc",
+		children: [
+			{
+				name: "Transfers",
+				path: "/ibc/transfers",
+				show: true,
+			},
+			{
+				name: "Chains",
+				path: "/ibc/chains",
+				show: true,
+			},
+		],
+	},
 	{
 		icon: "namespace",
 		name: "Namespaces",
diff --git a/components/cmd/CommandMenu.vue b/components/cmd/CommandMenu.vue
index af8df65b..bd18c1c4 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 IBC",
+		runText: "Open IBC",
+		callback: () => {
+			router.push("/ibc")
+		},
+	},
 	{
 		type: "callback",
 		icon: "arrow-narrow-right",
diff --git a/components/modals/IBCClientModal.vue b/components/modals/IBCClientModal.vue
new file mode 100644
index 00000000..e3dd51c6
--- /dev/null
+++ b/components/modals/IBCClientModal.vue
@@ -0,0 +1,172 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** UI */
+import Modal from "@/components/ui/Modal.vue"
+import Button from "@/components/ui/Button.vue"
+import Tooltip from "@/components/ui/Tooltip.vue"
+
+/** Components */
+import ConnectionCard from "@/components/modules/ibc/ConnectionCard"
+
+/** Services */
+import { comma } from "@/services/utils"
+import { IbcChainName } from "@/services/constants/ibc"
+
+/** API */
+import { fetchIbcConnections } from "@/services/api/ibc"
+
+/** Stores */
+import { useAppStore } from "@/store/app.store"
+import { useCacheStore } from "@/store/cache.store"
+const appStore = useAppStore()
+const cacheStore = useCacheStore()
+
+const emit = defineEmits(["onClose"])
+const props = defineProps({
+	show: Boolean,
+})
+
+const client = computed(() => cacheStore.current.client)
+
+const connections = ref([])
+
+const getConnections = async () => {
+	connections.value = await fetchIbcConnections({ client_id: client.value.id })
+}
+
+watch(
+	() => props.show,
+	async () => {
+		if (props.show) {
+			await getConnections()
+		} else {
+			connections.value = []
+		}
+	},
+)
+
+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="address" size="14" color="primary" />
+				<Text size="14" weight="600" color="primary">IBC Client</Text>
+			</Flex>
+
+			<Flex wide gap="8" :class="$style.card">
+				<Icon name="address" size="16" color="secondary" :class="$style.icon" />
+
+				<Flex direction="column" gap="4">
+					<Text size="12" weight="600" color="primary">
+						{{ client.id }}
+					</Text>
+					<Text size="12" weight="600" color="tertiary" mono>
+						{{ client.type }}
+					</Text>
+				</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">Chain</Text>
+					<Text size="12" weight="600" color="primary">
+						{{ IbcChainName[client.chain_id] ? IbcChainName[client.chain_id] : "Unknown Chain" }}
+						<Text color="tertiary" mono>({{ client.chain_id }})</Text>
+					</Text>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Updated at</Text>
+
+					<Tooltip position="end">
+						<Text size="12" weight="600" color="primary">
+							{{ DateTime.fromISO(client.updated_at).toRelative() }}
+						</Text>
+
+						<template #content> {{ DateTime.fromISO(client.updated_at).setLocale("en").toFormat("LLL d, t") }}</template>
+					</Tooltip>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Created at</Text>
+
+					<Tooltip position="end">
+						<Text size="12" weight="600" color="primary">
+							{{ DateTime.fromISO(client.created_at).toRelative() }}
+						</Text>
+
+						<template #content> {{ DateTime.fromISO(client.created_at).setLocale("en").toFormat("LLL d, t") }}</template>
+					</Tooltip>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Height</Text>
+					<Text @click="handleNavigate(`/block/${client.height}`)" size="12" weight="600" color="primary" class="clickable">
+						{{ comma(client.height) }}
+					</Text>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Created by</Text>
+
+					<Flex @click="handleNavigate(`/address/${client.creator.hash}`)" align="center" gap="6" class="clickable">
+						<Text size="12" weight="600" color="primary" mono>celestia</Text>
+						<Flex align="center" gap="4">
+							<div v-for="dot in 3" class="dot" />
+						</Flex>
+						<Text size="12" weight="600" color="primary" mono>
+							{{ client.creator.hash.slice(-4) }}
+						</Text>
+					</Flex>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Known connections</Text>
+					<Text size="12" weight="600" color="primary">
+						{{ client.connection_count }}
+					</Text>
+				</Flex>
+			</Flex>
+
+			<Flex wide direction="column" gap="8">
+				<Text size="12" weight="600" color="secondary">Client connections</Text>
+				<ConnectionCard v-for="connection in connections" :connection @onClose="emit('onClose')" />
+			</Flex>
+
+			<Flex wide direction="column" gap="8">
+				<Button @click="emit('onClose')" wide type="tertiary" size="small">Close</Button>
+			</Flex>
+		</Flex>
+	</Modal>
+</template>
+
+<style module>
+.card {
+	border-radius: 8px;
+	background: var(--op-5);
+
+	padding: 8px 12px 8px 8px;
+}
+
+.address_text {
+	flex: 1;
+}
+
+.icon {
+	border-radius: 50px;
+	border: 2px solid var(--op-5);
+	box-sizing: content-box;
+
+	padding: 2px;
+}
+</style>
diff --git a/components/modals/IBCTransferModal.vue b/components/modals/IBCTransferModal.vue
new file mode 100644
index 00000000..7d66a1b0
--- /dev/null
+++ b/components/modals/IBCTransferModal.vue
@@ -0,0 +1,198 @@
+<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"
+import { IbcChainLogo } from "@/services/constants/ibc"
+
+/** Stores */
+import { useAppStore } from "@/store/app.store"
+import { useCacheStore } from "@/store/cache.store"
+const appStore = useAppStore()
+const cacheStore = useCacheStore()
+
+const emit = defineEmits(["onClose"])
+const props = defineProps({
+	show: Boolean,
+})
+
+const transfer = computed(() => cacheStore.current.transfer)
+
+const currentPrice = computed(() => appStore.currentPrice.close)
+
+const getChainLogo = (target) => {
+	return transfer.value[target].hash.startsWith("celestia")
+		? IbcChainLogo["_celestia"]
+		: IbcChainLogo[transfer.value.chain_id] ?? IbcChainLogo["_unknown"]
+}
+
+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="arrow-narrow-up-right-circle" size="14" color="primary" />
+				<Text size="14" weight="600" color="primary">IBC Transfer</Text>
+			</Flex>
+
+			<Flex wide direction="column" gap="4">
+				<Flex direction="column" gap="8" :class="[$style.card, $style.sender]">
+					<Text size="12" weight="600" color="secondary">Sender</Text>
+					<Flex align="center" gap="8">
+						<img :src="getChainLogo('sender')" width="24px" height="24px" />
+						<Text size="13" weight="600" color="primary" mono :class="['overflow_ellipsis', $style.address_text]">
+							{{ transfer.sender.hash }}
+						</Text>
+						<CopyButton :text="transfer.sender.hash" />
+					</Flex>
+				</Flex>
+
+				<Flex justify="between" align="center" :class="[$style.card, $style.amount]">
+					<Flex direction="column" gap="8">
+						<Text size="12" weight="600" color="secondary">Amount</Text>
+
+						<Flex align="center" gap="8">
+							<Icon name="arrow-down-circle" size="16" color="brand" :class="$style.receipient_icon" />
+
+							<Text v-if="transfer.amount / 1_000_000 < 0.01" size="13" weight="600" color="primary" mono>
+								< 0.01 TIA <Text color="tertiary">({{ transfer.amount }} {{ transfer.denom }})</Text>
+							</Text>
+							<Text v-else size="13" weight="600" color="primary" mono>
+								{{ comma(transfer.amount / 1_000_000) }} TIA
+								<Text color="tertiary"> (${{ ((transfer.amount / 1_000_000) * currentPrice).toFixed(2) }}) </Text>
+							</Text>
+						</Flex>
+					</Flex>
+				</Flex>
+			</Flex>
+
+			<Flex wide direction="column" gap="8" :class="$style.card">
+				<Text size="12" weight="600" color="secondary">Recipient</Text>
+
+				<Flex align="center" gap="8">
+					<img :src="getChainLogo('receiver')" width="24px" height="24px" />
+
+					<Text size="13" weight="600" color="primary" mono :class="['overflow_ellipsis', $style.address_text]">
+						{{ transfer.receiver.hash }}
+					</Text>
+					<CopyButton :text="transfer.receiver.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">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">Hash</Text>
+
+					<Flex align="center" gap="6">
+						<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">Channel</Text>
+					<Text size="12" weight="600" :color="transfer.channel_id.length ? 'primary' : 'tertiary'" mono>
+						{{ transfer.channel_id.length ? transfer.channel_id : "Unknown" }}
+					</Text>
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Connection</Text>
+					<Text size="12" weight="600" :color="transfer.connection_id.length ? 'primary' : 'tertiary'" mono>
+						{{ transfer.connection_id.length ? transfer.connection_id : "Unknown" }}
+					</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">Sequence</Text>
+
+					<Text size="12" weight="600" color="primary" mono>
+						{{ comma(transfer.sequence) }}
+					</Text>
+				</Flex>
+			</Flex>
+
+			<Flex wide direction="column" gap="8">
+				<Button @click="emit('onClose')" :link="`/tx/${transfer.tx_hash}`" wide type="secondary" size="small">
+					View transaction
+				</Button>
+				<Button wide type="tertiary" size="small">Close</Button>
+			</Flex>
+		</Flex>
+	</Modal>
+</template>
+
+<style module>
+.card {
+	border-radius: 8px;
+	background: var(--op-5);
+
+	padding: 8px 12px 8px 8px;
+
+	&.sender {
+		border-radius: 8px 8px 2px 2px;
+	}
+
+	&.amount {
+		border-radius: 2px 2px 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 2b777aa9..1e80238d 100644
--- a/components/modals/ModalsManager.vue
+++ b/components/modals/ModalsManager.vue
@@ -20,6 +20,8 @@ import LightNodeModal from "./LightNodeModal.vue"
 import LightNodeSettingsModal from "./LightNodeSettingsModal.vue"
 import ConnectModal from "./ConnectModal.vue"
 import RollupRankModal from "./RollupRankModal.vue"
+import IBCTransferModal from "./IBCTransferModal.vue"
+import IBCClientModal from "./IBCClientModal.vue"
 
 /** Store */
 import { useModalsStore } from "@/store/modals.store"
@@ -48,4 +50,6 @@ 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')" />
+	<IBCTransferModal :show="modalsStore.modals.ibcTransfer" @onClose="modalsStore.close('ibcTransfer')" />
+	<IBCClientModal :show="modalsStore.modals.ibcClient" @onClose="modalsStore.close('ibcClient')" />
 </template>
diff --git a/components/modules/ibc/ChainClientsTable.vue b/components/modules/ibc/ChainClientsTable.vue
new file mode 100644
index 00000000..745092a1
--- /dev/null
+++ b/components/modules/ibc/ChainClientsTable.vue
@@ -0,0 +1,270 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** API */
+import { fetchIbcClients } from "@/services/api/ibc"
+
+/** 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 props = defineProps({
+	chain: {
+		type: Object,
+		default: {},
+	},
+})
+
+const clients = ref([])
+const isLoading = ref(true)
+
+/** Pagination */
+const page = ref(1)
+const handlePrevPage = () => {
+	if (page.value === 1) return
+	page.value -= 1
+}
+
+const isNextPageDisabled = computed(() => {
+	return !clients.value.length || clients.value.length !== 10
+})
+const handleNextPage = () => {
+	if (isNextPageDisabled.value) return
+	page.value += 1
+}
+
+const getClients = async () => {
+	isLoading.value = true
+
+	const { data } = await useAsyncData(`ibc-clients-${props.chain.chain}-${page.value}`, () =>
+		fetchIbcClients({
+			chain_id: props.chain.chain,
+			offset: (page.value - 1) * 10,
+			limit: 10,
+		}),
+	)
+	clients.value = data.value
+	clients.value.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
+
+	isLoading.value = false
+}
+
+await getClients()
+
+/** Refetch clients */
+watch(
+	() => page.value,
+	async () => {
+		const data = await fetchIbcClients({
+			chain_id: props.chain.chain,
+			offset: (page.value - 1) * 10,
+			limit: 10,
+		})
+		clients.value = data
+		clients.value.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
+	},
+)
+
+const handleOpenClientModal = (client) => {
+	cacheStore.current.client = client
+	modalsStore.open("ibcClient")
+}
+</script>
+
+<template>
+	<Flex wide direction="column" :class="[$style.wrapper, isLoading && $style.disabled]">
+		<Flex v-if="clients.length" :class="$style.scroller">
+			<table>
+				<thead>
+					<tr>
+						<th><Text size="12" weight="600" color="tertiary">Name</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Updated at</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Created at</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Created by</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Type</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Connections</Text></th>
+					</tr>
+				</thead>
+
+				<tbody>
+					<tr v-for="client in clients" @click="handleOpenClientModal(client)">
+						<td>
+							<Flex align="center" gap="8">
+								<Text size="13" weight="600" color="primary" mono>
+									{{ client.id }}
+								</Text>
+							</Flex>
+						</td>
+						<td>
+							<Flex justify="center" direction="column" gap="4">
+								<Text size="12" weight="600" color="primary">
+									{{ DateTime.fromISO(client.updated_at).toRelative({ locale: "en", style: "short" }) }}
+								</Text>
+								<Text size="12" weight="500" color="tertiary">
+									{{ DateTime.fromISO(client.updated_at).setLocale("en").toFormat("LLL d, t") }}
+								</Text>
+							</Flex>
+						</td>
+						<td>
+							<Flex justify="center" direction="column" gap="4">
+								<Text size="12" weight="600" color="primary">
+									{{ DateTime.fromISO(client.created_at).toRelative({ locale: "en", style: "short" }) }}
+								</Text>
+								<Text size="12" weight="500" color="tertiary">
+									{{ DateTime.fromISO(client.created_at).setLocale("en").toFormat("LLL d, t") }}
+								</Text>
+							</Flex>
+						</td>
+						<td>
+							<Flex align="center" gap="6">
+								<Text size="13" weight="600" color="primary" mono> celestia </Text>
+								<Flex align="center" gap="3">
+									<div v-for="dot in 3" class="dot" />
+								</Flex>
+								<Text size="13" weight="600" color="primary" mono>
+									{{ client.creator.hash.slice(-4) }}
+								</Text>
+							</Flex>
+						</td>
+						<td>
+							<Text size="13" weight="600" color="primary">
+								{{ client.type }}
+							</Text>
+						</td>
+						<td>
+							<Text size="13" weight="600" color="primary">
+								{{ client.connection_count }}
+							</Text>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</Flex>
+
+		<TablePlaceholderView
+			v-else
+			title="There's no clients"
+			description="Perhaps we haven't found them yet"
+			icon="address"
+			subIcon="search"
+			:descriptionWidth="260"
+			style="height: 100%"
+		/>
+
+		<!-- Pagination -->
+		<Flex align="center" gap="6" :class="$style.pagination">
+			<Button @click="page = 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/components/modules/ibc/ChainOverview.vue b/components/modules/ibc/ChainOverview.vue
new file mode 100644
index 00000000..6e64fac0
--- /dev/null
+++ b/components/modules/ibc/ChainOverview.vue
@@ -0,0 +1,270 @@
+<script setup>
+/** Services */
+import { IbcChainName, IbcChainLogo } from "@/services/constants/ibc"
+
+/** Components */
+import ChainTransfersTable from "./ChainTransfersTable.vue"
+import ChainClientsTable from "./ChainClientsTable.vue"
+
+const route = useRoute()
+const router = useRouter()
+
+const props = defineProps({
+	chain: {
+		type: Object,
+		required: true,
+	},
+})
+
+const preselectedTab = route.query.tab && ["transfers", "clients"].includes(route.query.tab) ? route.query.tab : "transfers"
+const activeTab = ref(preselectedTab)
+
+watch(
+	() => activeTab.value,
+	() =>
+		router.replace({
+			query: {
+				tab: activeTab.value,
+			},
+		}),
+)
+
+onMounted(async () => {
+	router.replace({
+		query: {
+			tab: activeTab.value,
+		},
+	})
+})
+</script>
+
+<template>
+	<Flex direction="column" gap="4">
+		<Flex align="center" justify="between" :class="$style.header">
+			<Flex align="center" gap="8">
+				<img :src="IbcChainLogo[chain.chain] ?? IbcChainLogo['_unknown']" width="14px" height="14px" />
+				<Text as="h1" size="13" weight="600" color="primary">
+					Chain <Text color="secondary">{{ IbcChainName[chain.chain] ?? chain.chain }}</Text>
+				</Text>
+			</Flex>
+		</Flex>
+
+		<Flex direction="column" gap="4" wide :class="$style.content">
+			<Flex align="center" justify="between" :class="$style.tabs_wrapper">
+				<Flex gap="4" :class="$style.tabs">
+					<Flex
+						@click="activeTab = 'transfers'"
+						align="center"
+						gap="6"
+						:class="[$style.tab, activeTab === 'transfers' && $style.active]"
+					>
+						<Icon name="arrow-narrow-up-right-circle" size="12" color="secondary" />
+						<Text size="13" weight="600">Transfers</Text>
+					</Flex>
+
+					<Flex
+						@click="activeTab = 'clients'"
+						align="center"
+						gap="6"
+						:class="[$style.tab, activeTab === 'clients' && $style.active]"
+					>
+						<Icon name="address" size="12" color="secondary" />
+						<Text size="13" weight="600">Clients</Text>
+					</Flex>
+				</Flex>
+			</Flex>
+
+			<Flex v-if="activeTab === 'transfers'" :class="$style.inner">
+				<ChainTransfersTable :chain />
+			</Flex>
+			<Flex v-if="activeTab === 'clients'" :class="$style.inner">
+				<ChainClientsTable :chain />
+			</Flex>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.header {
+	height: 40px;
+
+	border-radius: 8px 8px 4px 4px;
+	background: var(--card-background);
+
+	padding: 0 12px;
+}
+
+.content {
+	min-width: 0;
+}
+
+.tabs_wrapper {
+	min-height: 44px;
+	overflow-x: auto;
+
+	border-radius: 4px;
+	background: var(--card-background);
+
+	padding: 0 8px;
+}
+
+.tabs_wrapper::-webkit-scrollbar {
+	display: none;
+}
+
+.tab {
+	height: 28px;
+
+	cursor: pointer;
+	border-radius: 6px;
+
+	padding: 0 8px;
+
+	transition: all 0.1s ease;
+
+	& span {
+		color: var(--txt-tertiary);
+
+		transition: all 0.1s ease;
+	}
+
+	&:hover {
+		& span {
+			color: var(--txt-secondary);
+		}
+	}
+}
+
+.tab.active {
+	background: var(--op-8);
+
+	& span {
+		color: var(--txt-primary);
+	}
+}
+
+.inner {
+	height: 100%;
+
+	border-radius: 4px 4px 8px 4px;
+	background: var(--card-background);
+}
+
+.events {
+	padding: 16px;
+}
+
+.message_types {
+	width: fit-content;
+
+	border-radius: 50px;
+	background: var(--op-5);
+	border: 1px solid var(--op-5);
+
+	padding: 6px 10px;
+	margin-bottom: 8px;
+}
+
+.event {
+	height: 36px;
+
+	cursor: pointer;
+
+	& .left {
+		height: 100%;
+
+		& div {
+			width: 2px;
+			height: 100%;
+			background: var(--op-5);
+		}
+	}
+
+	& .left.first {
+		& div {
+			&:first-child {
+				background: transparent;
+			}
+		}
+	}
+
+	& .left.last {
+		& div {
+			&:last-child {
+				background: transparent;
+			}
+		}
+	}
+
+	& .right {
+		min-width: 0;
+		height: 100%;
+
+		border-bottom: 1px solid var(--op-5);
+
+		& .text {
+			display: inline-block;
+			color: var(--txt-tertiary);
+
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+
+			& > * {
+				margin-right: 4px;
+			}
+
+			& .tooltip {
+				display: inline-block;
+			}
+		}
+	}
+}
+
+.memo {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+@media (max-width: 800px) {
+	.content {
+		grid-template-columns: 1fr;
+	}
+
+	.data {
+		max-width: initial;
+		min-width: 0;
+
+		border-radius: 4px;
+	}
+}
+
+@media (max-width: 550px) {
+	.header {
+		height: initial;
+		flex-direction: column;
+		gap: 12px;
+
+		padding: 12px 0;
+	}
+}
+
+@media (max-width: 500px) {
+	.data {
+		.main {
+			min-width: initial;
+		}
+	}
+}
+
+@media (max-width: 400px) {
+	.tabs_wrapper {
+		overflow-x: auto;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+}
+</style>
diff --git a/components/modules/ibc/ChainTransfersTable.vue b/components/modules/ibc/ChainTransfersTable.vue
new file mode 100644
index 00000000..128172c1
--- /dev/null
+++ b/components/modules/ibc/ChainTransfersTable.vue
@@ -0,0 +1,311 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** API */
+import { fetchIbcTransfers } from "@/services/api/ibc"
+
+/** Services */
+import { comma } from "@/services/utils"
+import { IbcChainName, IbcChainLogo } from "@/services/constants/ibc"
+
+/** 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 props = defineProps({
+	chain: {
+		type: Object,
+		default: {},
+	},
+})
+
+const transfers = ref([])
+const isLoading = ref(true)
+
+/** Pagination */
+const page = ref(1)
+const handlePrevPage = () => {
+	if (page.value === 1) return
+	page.value -= 1
+}
+
+const isNextPageDisabled = computed(() => {
+	return !transfers.value.length || transfers.value.length !== 10
+})
+const handleNextPage = () => {
+	if (isNextPageDisabled.value) return
+	page.value += 1
+}
+
+const getTransfers = async () => {
+	isLoading.value = true
+
+	const { data } = await useAsyncData(`ibc-transfers-${props.chain.chain}-${page.value}`, () =>
+		fetchIbcTransfers({
+			chain_id: props.chain.chain,
+			offset: (page.value - 1) * 10,
+			limit: 10,
+		}),
+	)
+	transfers.value = data.value
+	transfers.value.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
+
+	isLoading.value = false
+}
+
+await getTransfers()
+
+/** Refetch transfers */
+watch(
+	() => page.value,
+	async () => {
+		const data = await fetchIbcTransfers({
+			chain_id: props.chain.chain,
+			offset: (page.value - 1) * 10,
+			limit: 10,
+		})
+		transfers.value = data
+		transfers.value.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
+	},
+)
+
+const handleOpenTransferModal = (transfer) => {
+	cacheStore.current.transfer = transfer
+	modalsStore.open("ibcTransfer")
+}
+
+const getChainLogo = (transfer, target) => {
+	return transfer[target].hash.startsWith("celestia")
+		? IbcChainLogo["_celestia"]
+		: IbcChainLogo[transfer.chain_id] ?? IbcChainLogo["_unknown"]
+}
+</script>
+
+<template>
+	<Flex wide 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">From</Text></th>
+						<th></th>
+						<th><Text size="12" weight="600" color="tertiary">To</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Chain</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Time</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Amount</Text></th>
+					</tr>
+				</thead>
+
+				<tbody>
+					<tr v-for="transfer in transfers" @click="handleOpenTransferModal(transfer)">
+						<td style="width: 1px">
+							<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>
+						</td>
+						<td style="width: 1px">
+							<Flex align="center" gap="6">
+								<img :src="getChainLogo(transfer, 'sender')" width="12px" height="12px" />
+								<Text size="13" weight="600" color="primary" mono>
+									{{ transfer.sender.hash.slice(0, 6) }}
+								</Text>
+								<Flex align="center" gap="3">
+									<div v-for="_ in 3" class="dot" />
+								</Flex>
+								<Text size="13" weight="600" color="primary" mono>
+									{{ transfer.sender.hash.slice(-6) }}
+								</Text>
+							</Flex>
+						</td>
+						<td style="width: 1px">
+							<Text size="13" weight="600" color="tertiary">-></Text>
+						</td>
+						<td>
+							<Flex align="center" gap="6">
+								<img :src="getChainLogo(transfer, 'receiver')" width="12px" height="12px" />
+								<Text size="13" weight="600" color="primary" mono>
+									{{ transfer.receiver.hash.slice(0, 6) }}
+								</Text>
+								<Flex align="center" gap="3">
+									<div v-for="_ in 3" class="dot" />
+								</Flex>
+								<Text size="13" weight="600" color="primary" mono>
+									{{ transfer.receiver.hash.slice(-6) }}
+								</Text>
+							</Flex>
+						</td>
+						<td>
+							<Flex direction="column" gap="4">
+								<Text size="12" weight="600" color="primary">
+									{{ IbcChainName[transfer.chain_id] ?? "Celestia" }}
+								</Text>
+								<Text size="12" weight="500" color="tertiary" mono>
+									<template v-if="transfer.chain_id"> {{ transfer.chain_id }} ⋅ </template> {{ transfer.channel_id }}
+								</Text>
+							</Flex>
+						</td>
+						<td>
+							<Flex justify="center" direction="column" gap="4">
+								<Text size="12" weight="600" color="primary">
+									{{ DateTime.fromISO(transfer.time).toRelative({ locale: "en", style: "short" }) }}
+								</Text>
+								<Text size="12" weight="500" color="tertiary">
+									{{ DateTime.fromISO(transfer.time).setLocale("en").toFormat("LLL d, t") }}
+								</Text>
+							</Flex>
+						</td>
+						<td>
+							<Flex align="center" gap="6">
+								<Text v-if="transfer.amount / 1_000_000 < 0.01" size="13" weight="600" color="tertiary" mono>
+									< 0.01 TIA
+								</Text>
+								<Text v-else size="13" weight="600" color="primary" mono>
+									{{ comma(transfer.amount / 1_000_000) }}
+									<Text color="tertiary">TIA</Text>
+								</Text>
+							</Flex>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</Flex>
+
+		<TablePlaceholderView
+			v-else
+			title="There's no transfers"
+			description="Perhaps we haven't found them yet"
+			icon="arrow-narrow-up-right-circle"
+			subIcon="search"
+			:descriptionWidth="260"
+			style="height: 100%"
+		/>
+
+		<!-- Pagination -->
+		<Flex align="center" gap="6" :class="$style.pagination">
+			<Button @click="page = 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/components/modules/ibc/ChainsTable.vue b/components/modules/ibc/ChainsTable.vue
new file mode 100644
index 00000000..adbbc0e7
--- /dev/null
+++ b/components/modules/ibc/ChainsTable.vue
@@ -0,0 +1,231 @@
+<script setup>
+/** Services */
+import { comma, abbreviate } from "@/services/utils"
+import { IbcChainName, IbcChainLogo } from "@/services/constants/ibc"
+
+/** UI */
+import Button from "@/components/ui/Button.vue"
+
+/** Shared Components */
+import TablePlaceholderView from "@/components/shared/TablePlaceholderView.vue"
+
+const emit = defineEmits(["onPrevPage", "onNextPage", "updatePage"])
+const props = defineProps({
+	chains: {
+		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.chains.length || props.chains.length !== 10
+})
+const handleNextPage = () => {
+	if (isNextPageDisabled.value) return
+	emit("onNextPage")
+}
+</script>
+
+<template>
+	<Flex direction="column" :class="[$style.wrapper, isLoading && $style.disabled]">
+		<Flex v-if="chains.length" :class="$style.scroller">
+			<table>
+				<thead>
+					<tr>
+						<th><Text size="12" weight="600" color="tertiary">Chain</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Sent</Text></th>
+						<th></th>
+						<th><Text size="12" weight="600" color="tertiary">Received</Text></th>
+						<th></th>
+						<th><Text size="12" weight="600" color="tertiary">Flow</Text></th>
+					</tr>
+				</thead>
+
+				<tbody>
+					<tr v-for="chain in chains" @click="navigateTo(`/ibc/chain/${chain.chain}`)">
+						<td>
+							<NuxtLink :to="`/ibc/chain/${chain.chain}`">
+								<Flex align="center" gap="12">
+									<img :src="IbcChainLogo[chain.chain] ?? IbcChainLogo['_unknown']" width="20px" height="20px" />
+
+									<Flex direction="column" gap="4">
+										<Text size="12" weight="600" color="primary">
+											{{ IbcChainName[chain.chain] ? IbcChainName[chain.chain] : "Unknown Chain" }}
+										</Text>
+										<Text size="12" weight="600" color="tertiary" mono>
+											{{ chain.chain }}
+										</Text>
+									</Flex>
+								</Flex>
+							</NuxtLink>
+						</td>
+						<td>
+							<NuxtLink :to="`/ibc/chain/${chain.chain}`">
+								<Flex align="center" gap="6">
+									<Icon name="arrow-narrow-up-right-circle" size="14" color="purple" />
+									<Text size="13" weight="600" color="primary" mono>
+										{{ abbreviate(chain.sent / 1_000_000) }} <Text color="secondary">TIA</Text>
+									</Text>
+								</Flex>
+							</NuxtLink>
+						</td>
+						<td style="width: 1px">
+							<Text size="13" weight="600" color="tertiary" mono>+</Text>
+						</td>
+						<td>
+							<NuxtLink :to="`/ibc/chain/${chain.chain}`">
+								<Flex align="center" gap="6">
+									<Icon name="arrow-narrow-up-right-circle" size="14" color="brand" style="transform: scale(1, -1)" />
+									<Text size="13" weight="600" color="primary" mono>
+										{{ abbreviate(chain.received / 1_000_000) }} <Text color="tertiary">TIA</Text>
+									</Text>
+								</Flex>
+							</NuxtLink>
+						</td>
+						<td style="width: 1px">
+							<Text size="13" weight="600" color="tertiary" mono>=</Text>
+						</td>
+						<td>
+							<NuxtLink :to="`/ibc/chain/${chain.chain}`">
+								<Flex align="center" gap="6">
+									<Icon name="coins" size="14" color="secondary" />
+									<Text size="13" weight="600" color="primary" mono>
+										{{ abbreviate(chain.flow / 1_000_000) }} <Text color="tertiary">TIA</Text>
+									</Text>
+								</Flex>
+							</NuxtLink>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</Flex>
+
+		<TablePlaceholderView
+			v-else
+			title="There's no transfers"
+			description="Probably something went wrong... ?"
+			icon="ibc"
+			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/components/modules/ibc/ConnectionCard.vue b/components/modules/ibc/ConnectionCard.vue
new file mode 100644
index 00000000..82421eec
--- /dev/null
+++ b/components/modules/ibc/ConnectionCard.vue
@@ -0,0 +1,296 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** UI */
+import Tooltip from "@/components/ui/Tooltip.vue"
+import Button from "@/components/ui/Button.vue"
+
+/** Services */
+import { comma } from "@/services/utils"
+
+/** API */
+import { fetchIbcChannels } from "@/services/api/ibc"
+
+const emit = defineEmits(["onClose"])
+const props = defineProps({
+	connection: {
+		type: Object,
+		default: {},
+	},
+})
+
+const isOpened = ref(false)
+
+const channels = ref([])
+
+const hasOpenedChannels = ref(false)
+
+const expandedChannelId = ref()
+const handleOpenChannel = (target) => {
+	if (!expandedChannelId.value) {
+		expandedChannelId.value = target.id
+	} else if (expandedChannelId.value === target.id) {
+		expandedChannelId.value = null
+	} else {
+		expandedChannelId.value = target.id
+	}
+}
+
+const getChannels = async () => {
+	channels.value = await fetchIbcChannels({ connection_id: props.connection.id })
+}
+
+onMounted(async () => {
+	await getChannels()
+
+	hasOpenedChannels.value = channels.value.some((c) => c.status === "opened")
+})
+
+const handleNavigate = (target) => {
+	emit("onClose")
+	navigateTo(target)
+}
+</script>
+
+<template>
+	<Flex wide direction="column" gap="16" :class="$style.wrapper">
+		<Flex @click="isOpened = !isOpened" align="center" justify="between" class="clickable">
+			<Flex align="center" gap="6">
+				<Icon name="zap" size="12" :color="hasOpenedChannels ? 'brand' : 'secondary'" />
+				<Text size="12" weight="600" color="secondary">{{ connection.id }}</Text>
+			</Flex>
+
+			<Icon name="chevron" size="12" color="secondary" :style="{ transform: `rotate(${isOpened ? '180deg' : '0deg'})` }" />
+		</Flex>
+
+		<template v-if="isOpened">
+			<template v-if="channels.length">
+				<Flex v-for="channel in channels" @click="handleOpenChannel(channel)" direction="column" gap="16" :class="$style.channel">
+					<Flex wide align="center" justify="between" :class="$style.header">
+						<Text size="13" weight="600" color="primary" mono>
+							{{ channel.id }}
+						</Text>
+
+						<Flex align="center" gap="6" :class="$style.status">
+							<div
+								v-for="dot in 3"
+								class="dot"
+								:style="{ background: channel.status === 'opened' ? 'var(--brand)' : 'var(--red)' }"
+							/>
+							<Icon
+								:name="channel.status === 'opened' ? 'check-circle' : 'close-circle'"
+								size="12"
+								:color="channel.status === 'opened' ? 'brand' : 'red'"
+							/>
+							<div
+								v-for="dot in 3"
+								class="dot"
+								:style="{ background: channel.status === 'opened' ? 'var(--brand)' : 'var(--red)' }"
+							/>
+						</Flex>
+
+						<Text size="13" weight="600" color="primary" mono>
+							{{ channel.counterparty_channel_id }}
+						</Text>
+					</Flex>
+
+					<template v-if="expandedChannelId === channel.id">
+						<Flex align="center" justify="between">
+							<Text size="12" weight="600" color="tertiary">Port</Text>
+							<Text size="12" weight="600" color="primary">
+								{{ channel.port_id }}
+							</Text>
+						</Flex>
+
+						<Flex align="center" justify="between" gap="12">
+							<Text size="12" weight="600" color="tertiary">Version</Text>
+							<Text size="12" weight="600" color="primary" class="overflow_ellipsis">
+								{{ channel.version }}
+							</Text>
+						</Flex>
+
+						<Flex v-if="channel.confirmation_tx_hash" align="center" justify="between">
+							<Text size="12" weight="600" color="tertiary">Confirmed at</Text>
+
+							<Tooltip position="end">
+								<Text size="12" weight="600" color="primary">
+									{{ DateTime.fromISO(channel.confirmed_at).toRelative() }}
+								</Text>
+
+								<template #content>
+									{{ DateTime.fromISO(channel.confirmed_at).setLocale("en").toFormat("LLL d, t") }}</template
+								>
+							</Tooltip>
+						</Flex>
+
+						<Flex align="center" justify="between">
+							<Text size="12" weight="600" color="tertiary">Created at</Text>
+
+							<Tooltip position="end">
+								<Text size="12" weight="600" color="primary">
+									{{ DateTime.fromISO(channel.created_at).toRelative() }}
+								</Text>
+
+								<template #content>
+									{{ DateTime.fromISO(channel.created_at).setLocale("en").toFormat("LLL d, t") }}</template
+								>
+							</Tooltip>
+						</Flex>
+
+						<Flex align="center" justify="between">
+							<Text size="12" weight="600" color="tertiary">Height</Text>
+							<Text
+								@click="handleNavigate(`/block/${channel.height}`)"
+								size="12"
+								weight="600"
+								color="primary"
+								class="clickable"
+							>
+								{{ comma(channel.height) }}
+							</Text>
+						</Flex>
+
+						<Flex v-if="channel.confirmation_tx_hash" align="center" justify="between">
+							<Text size="12" weight="600" color="tertiary">Confirmed with txn</Text>
+
+							<Flex @click="handleNavigate(`/tx/${channel.confirmation_tx_hash}`)" align="center" gap="6" class="clickable">
+								<Text size="12" weight="600" color="primary" mono>
+									{{ channel.confirmation_tx_hash.slice(0, 4).toUpperCase() }}
+								</Text>
+								<Flex align="center" gap="4">
+									<div v-for="dot in 3" class="dot" />
+								</Flex>
+								<Text size="12" weight="600" color="primary" mono>
+									{{ channel.confirmation_tx_hash.slice(-4).toUpperCase() }}
+								</Text>
+							</Flex>
+						</Flex>
+
+						<Flex align="center" justify="between">
+							<Text size="12" weight="600" color="tertiary">Created with txn</Text>
+
+							<Flex @click="handleNavigate(`/tx/${channel.created_tx_hash}`)" align="center" gap="6" class="clickable">
+								<Text size="12" weight="600" color="primary" mono>
+									{{ channel.created_tx_hash.slice(0, 4).toUpperCase() }}
+								</Text>
+								<Flex align="center" gap="4">
+									<div v-for="dot in 3" class="dot" />
+								</Flex>
+								<Text size="12" weight="600" color="primary" mono>
+									{{ channel.created_tx_hash.slice(-4).toUpperCase() }}
+								</Text>
+							</Flex>
+						</Flex>
+					</template>
+				</Flex>
+			</template>
+			<template v-else>
+				<Flex justify="center" :class="$style.channel">
+					<Text size="12" weight="600" color="tertiary">There is no channels</Text>
+				</Flex>
+			</template>
+
+			<Text size="12" weight="600" color="secondary"> Connection details </Text>
+
+			<Flex v-if="connection.connected_tx_hash" align="center" justify="between">
+				<Text size="12" weight="600" color="tertiary">Connected at</Text>
+
+				<Tooltip position="end">
+					<Text size="12" weight="600" color="primary"> {{ DateTime.fromISO(connection.connected_at).toRelative() }} </Text>
+
+					<template #content> {{ DateTime.fromISO(connection.connected_at).setLocale("en").toFormat("LLL d, t") }}</template>
+				</Tooltip>
+			</Flex>
+
+			<Flex align="center" justify="between">
+				<Text size="12" weight="600" color="tertiary">Created at</Text>
+
+				<Tooltip position="end">
+					<Text size="12" weight="600" color="primary"> {{ DateTime.fromISO(connection.created_at).toRelative() }} </Text>
+
+					<template #content> {{ DateTime.fromISO(connection.created_at).setLocale("en").toFormat("LLL d, t") }}</template>
+				</Tooltip>
+			</Flex>
+
+			<Flex align="center" justify="between">
+				<Text size="12" weight="600" color="tertiary">Height</Text>
+				<Text @click="handleNavigate(`/block/${connection.height}`)" size="12" weight="600" color="primary" class="clickable">
+					{{ comma(connection.height) }}
+				</Text>
+			</Flex>
+
+			<Flex align="center" justify="between">
+				<Text size="12" weight="600" color="tertiary">Created with txn</Text>
+
+				<Flex @click="handleNavigate(`/tx/${connection.created_tx_hash}`)" align="center" gap="6" class="clickable">
+					<Text size="12" weight="600" color="primary" mono>
+						{{ connection.created_tx_hash.slice(0, 4).toUpperCase() }}
+					</Text>
+					<Flex align="center" gap="4">
+						<div v-for="dot in 3" class="dot" />
+					</Flex>
+					<Text size="12" weight="600" color="primary" mono>
+						{{ connection.created_tx_hash.slice(-4).toUpperCase() }}
+					</Text>
+				</Flex>
+			</Flex>
+
+			<Flex v-if="connection.connected_tx_hash" align="center" justify="between">
+				<Text size="12" weight="600" color="tertiary">Connected with txn</Text>
+
+				<Flex @click="handleNavigate(`/tx/${connection.connected_tx_hash}`)" align="center" gap="6" class="clickable">
+					<Text size="12" weight="600" color="primary" mono>
+						{{ connection.connected_tx_hash.slice(0, 4).toUpperCase() }}
+					</Text>
+					<Flex align="center" gap="4">
+						<div v-for="dot in 3" class="dot" />
+					</Flex>
+					<Text size="12" weight="600" color="primary" mono>
+						{{ connection.connected_tx_hash.slice(-4).toUpperCase() }}
+					</Text>
+				</Flex>
+			</Flex>
+
+			<Flex align="center" justify="between">
+				<Text size="12" weight="600" color="tertiary">Known channels</Text>
+				<Text size="12" weight="600" color="primary">
+					{{ connection.channels_count }}
+				</Text>
+			</Flex>
+		</template>
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+	border-radius: 8px;
+	background: var(--op-5);
+
+	padding: 8px 12px 8px 8px;
+}
+
+.channel {
+	border-radius: 10px;
+	background: var(--card-background);
+	cursor: pointer;
+
+	padding: 12px;
+
+	transition: all 0.2s ease;
+
+	&:hover {
+		box-shadow: 0 0 0 1px var(--op-5);
+	}
+
+	& .header {
+		position: relative;
+	}
+
+	& .status {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}
+</style>
diff --git a/components/modules/ibc/GraphSidebar.vue b/components/modules/ibc/GraphSidebar.vue
new file mode 100644
index 00000000..18a2c4bd
--- /dev/null
+++ b/components/modules/ibc/GraphSidebar.vue
@@ -0,0 +1,269 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** Components */
+import Button from "@/components/ui/Button.vue"
+import Tooltip from "@/components/ui/Tooltip.vue"
+
+/** Services */
+import { abbreviate, comma } from "@/services/utils"
+
+/** Constants */
+import { IbcChainName } from "@/services/constants/ibc"
+
+/** API */
+import { fetchIbcClients, fetchIbcTransfers } from "@/services/api/ibc"
+
+/** Store */
+import { useModalsStore } from "@/store/modals.store"
+import { useCacheStore } from "@/store/cache.store"
+const modalsStore = useModalsStore()
+const cacheStore = useCacheStore()
+
+const emit = defineEmits(["onClose"])
+const props = defineProps({
+	chain: {
+		type: Object,
+		default: {},
+	},
+})
+
+const associatedClients = ref()
+const latestTransfers = ref()
+
+const getChainClients = async () => {
+	const data = await fetchIbcClients({ chain_id: props.chain.name })
+	associatedClients.value = data
+}
+
+const getChainTransfers = async () => {
+	const data = await fetchIbcTransfers({ limit: 3, chain_id: props.chain.name })
+	latestTransfers.value = data
+	latestTransfers.value.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
+}
+
+const handleOpenTransferModal = (transfer) => {
+	cacheStore.current.transfer = transfer
+	modalsStore.open("ibcTransfer")
+}
+
+const handleOpenClientModal = (client) => {
+	cacheStore.current.client = client
+	modalsStore.open("ibcClient")
+}
+
+watch(
+	() => props.chain,
+	() => {
+		getChainClients()
+		getChainTransfers()
+	},
+)
+onMounted(() => {
+	getChainClients()
+	getChainTransfers()
+})
+</script>
+
+<template>
+	<Flex direction="column" justify="between" :class="$style.wrapper">
+		<Flex direction="column" gap="24" :class="$style.body">
+			<Flex align="center" gap="12">
+				<img :src="chain.image" width="32" height="32" />
+
+				<Flex direction="column" gap="6">
+					<Flex align="center" gap="4">
+						<Text size="13" weight="600" color="primary">
+							{{ IbcChainName[chain.name] ?? "Unknown Chain" }}
+						</Text>
+						<Icon v-if="chain.known" name="verified" size="12" color="brand" />
+					</Flex>
+					<Text size="12" weight="500" color="tertiary" mono>
+						{{ chain.name }}
+					</Text>
+				</Flex>
+			</Flex>
+
+			<Flex direction="column" gap="10">
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="secondary"> Flow </Text>
+					<Text size="12" weight="600" color="secondary" mono> {{ abbreviate(chain.raw.flow / 1_000_000) }} TIA</Text>
+				</Flex>
+
+				<Flex gap="6" :class="$style.flow_bar">
+					<div :style="{ width: `${(chain.raw.sent * 100) / chain.raw.flow}%` }" :class="$style.sent_bar" />
+					<div :style="{ width: `${(chain.raw.received * 100) / chain.raw.flow}%` }" :class="$style.received_bar" />
+				</Flex>
+
+				<Flex align="center" justify="between">
+					<Tooltip position="start">
+						<Flex align="center" gap="4">
+							<Icon name="arrow-narrow-up-right-circle" size="12" color="green" />
+							<Text size="12" weight="600" color="secondary" mono>
+								{{ Number(chain.raw.flow) ? ((chain.raw.sent * 100) / chain.raw.flow).toFixed(0) : 50 }}%
+								<Text color="tertiary"> {{ abbreviate(chain.raw.sent / 1_000_000) }} TIA </Text>
+							</Text>
+						</Flex>
+
+						<template #content> Sent funds </template>
+					</Tooltip>
+
+					<Tooltip>
+						<Flex align="center" gap="4">
+							<Text size="12" weight="600" color="secondary" mono>
+								<Text color="tertiary"> {{ abbreviate(chain.raw.received / 1_000_000) }} TIA </Text>
+								{{ Number(chain.raw.flow) ? ((chain.raw.received * 100) / chain.raw.flow).toFixed(0) : 50 }}%
+							</Text>
+							<Icon name="arrow-narrow-up-right-circle" size="12" color="purple" style="transform: scale(1, -1)" />
+						</Flex>
+
+						<template #content> Received funds </template>
+					</Tooltip>
+				</Flex>
+			</Flex>
+
+			<Flex direction="column" gap="10">
+				<Text size="12" weight="600" color="tertiary">Latest transfers</Text>
+
+				<template v-if="latestTransfers?.length">
+					<Outline
+						v-for="transfer in latestTransfers"
+						@click="handleOpenTransferModal(transfer)"
+						wide
+						height="32"
+						padding="8"
+						radius="6"
+					>
+						<Flex wide align="center" justify="between">
+							<Flex align="center" gap="8">
+								<Icon name="zap" size="14" color="tertiary" />
+
+								<Text v-if="transfer.amount / 1_000_000 < 0.01" size="13" weight="600" color="tertiary" mono>
+									< 0.01 TIA
+								</Text>
+								<Text v-else size="13" weight="600" color="primary" mono>
+									{{ comma(transfer.amount / 1_000_000) }} <Text color="tertiary">TIA</Text>
+								</Text>
+							</Flex>
+
+							<Text size="12" weight="600" color="tertiary">
+								{{ DateTime.fromISO(transfer.time).toRelative({ style: "short" }) }}
+							</Text>
+						</Flex>
+					</Outline>
+				</template>
+				<Text v-else size="12" weight="500" color="tertiary" class="overflow_ellipsis">
+					There is no transfers for {{ chain.name }}
+				</Text>
+			</Flex>
+
+			<Flex direction="column" gap="10">
+				<Flex align="center" justify="between">
+					<Text size="12" weight="600" color="tertiary">Associated clients</Text>
+					<Text size="12" weight="600" color="secondary">{{ associatedClients?.length }}</Text>
+				</Flex>
+
+				<template v-if="associatedClients">
+					<Outline
+						v-for="client in associatedClients"
+						@click="handleOpenClientModal(client)"
+						wide
+						height="32"
+						padding="8"
+						radius="6"
+					>
+						<Flex wide align="center" justify="between">
+							<Flex align="center" gap="8">
+								<Icon name="address" size="14" color="tertiary" />
+								<Text size="13" weight="600" color="primary">
+									{{ client.id }}
+								</Text>
+							</Flex>
+
+							<Text size="12" weight="600" color="tertiary">
+								{{ DateTime.fromISO(client.updated_at).toRelative({ style: "short" }) }}
+							</Text>
+						</Flex>
+					</Outline>
+				</template>
+				<Text v-else size="12" weight="500" color="tertiary" class="overflow_ellipsis">
+					There is no clients for {{ chain.name }}
+				</Text>
+			</Flex>
+		</Flex>
+
+		<div :class="$style.gradient" />
+
+		<Flex direction="column" gap="8" :class="$style.buttons">
+			<Button :link="`/ibc/chain/${chain.name}`" type="secondary" size="small"> Explore more </Button>
+			<Button @click="emit('onClose')" type="tertiary" size="small"> Close </Button>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+	position: relative;
+
+	min-width: 350px;
+	max-width: 350px;
+	max-height: 500px;
+
+	background: var(--card-background);
+	border-left: 4px solid var(--app-background);
+
+	padding: 16px;
+}
+
+.body {
+	overflow: auto;
+
+	padding-bottom: 20px;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+.gradient {
+	position: absolute;
+	bottom: 92px;
+	left: 0;
+	right: 0;
+	height: 16px;
+
+	pointer-events: none;
+	background: linear-gradient(transparent, var(--card-background));
+}
+
+.buttons {
+	padding-top: 12px;
+}
+
+.flow_bar {
+	width: 100%;
+	height: 12px;
+
+	border-radius: 50px;
+	background: var(--op-8);
+
+	padding: 4px;
+}
+
+.sent_bar {
+	min-width: 3%;
+	height: 100%;
+
+	background: var(--green);
+	border-radius: 50px;
+}
+
+.received_bar {
+	min-width: 3%;
+	height: 100%;
+
+	background: var(--purple);
+	border-radius: 4px;
+}
+</style>
diff --git a/components/modules/ibc/IBCGraph.vue b/components/modules/ibc/IBCGraph.vue
new file mode 100644
index 00000000..c4bc1566
--- /dev/null
+++ b/components/modules/ibc/IBCGraph.vue
@@ -0,0 +1,273 @@
+<script setup>
+/** Vendor */
+import * as d3 from "d3"
+
+/** Constants */
+import { IbcChainLogo } from "@/services/constants/ibc"
+
+/** Components */
+import GraphSidebar from "./GraphSidebar.vue"
+
+const props = defineProps({
+	chains: {
+		type: Array,
+		default: [],
+	},
+})
+
+const classes = useCssModule()
+
+const canvasEl = useTemplateRef("canvasEl")
+
+const data = {
+	name: "Celestia",
+	image: "/img/chains/celestia.png",
+	known: true,
+	children: [],
+}
+
+let svg
+let simulation = null
+
+const isDrawn = ref(false)
+
+const drag = (simulation) => {
+	function dragstarted(event, d) {
+		if (!event.active) simulation.alphaTarget(1).restart()
+		d.fx = d.x
+		d.fy = d.y
+	}
+
+	function dragged(event, d) {
+		d.fx = event.x
+		d.fy = event.y
+	}
+
+	function dragended(event, d) {
+		if (!event.active) simulation.alphaTarget(0)
+		d.fx = null
+		d.fy = null
+	}
+
+	return d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended)
+}
+
+const linkArc = (d) => {
+	const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y)
+	return `
+    M${d.source.x},${d.source.y}
+    A${r},${r} 0 0,1 ${d.target.x},${d.target.y}
+  `
+}
+
+const KNOWN_LOGO_SIZE = 40
+const UNKNOWN_LOGO_SIZE = 24
+
+const prepareData = () => {
+	props.chains.forEach((chain) => {
+		data.children.push({
+			name: chain.chain,
+			value: chain.flow,
+			image: IbcChainLogo[chain.chain] ?? IbcChainLogo["_unknown"],
+			known: !!IbcChainLogo[chain.chain],
+			raw: chain,
+		})
+	})
+}
+
+const updateSvgSizes = () => {
+	const { width, height } = canvasEl.value.getBoundingClientRect()
+	svg.attr("width", width)
+		.attr("height", height)
+		.attr("viewBox", [-width / 2, -height / 2, width, height])
+}
+
+const draw = () => {
+	const { $d3Force } = useNuxtApp()
+
+	const { width, height } = canvasEl.value.getBoundingClientRect()
+
+	const root = d3.hierarchy(data)
+	const links = root.links()
+	const nodes = root.descendants()
+
+	simulation = $d3Force
+		.forceSimulation(nodes)
+		.force(
+			"link",
+			d3
+				.forceLink(links)
+				.id((d) => d.id)
+				.distance(70)
+				.strength(0.8),
+		)
+		.force("charge", d3.forceManyBody().strength(-900))
+		.force("x", d3.forceX())
+		.force("y", d3.forceY())
+
+	svg = d3
+		.create("svg")
+		.attr("width", width)
+		.attr("height", height)
+		.attr("viewBox", [-width / 2, -height / 2, width, height])
+		.attr("style", "max-width: 100%; height: 100%;")
+
+	const link = svg.append("g").selectAll("path").data(links).join("path").classed(classes.link, true)
+
+	const node = svg
+		.append("g")
+		.selectAll("image")
+		.data(nodes)
+		.join("image")
+		.attr("href", (d) => d.data.image)
+		.classed(classes.node, true)
+		.classed(classes.unknown, (d) => !d.data.known)
+		.call(drag(simulation))
+		.on("click", async (_, n) => {
+			if (!n.index) return
+
+			selectedChain.value = n.data
+			await nextTick()
+			updateSvgSizes()
+		})
+
+	simulation.on("tick", () => {
+		link.attr("d", linkArc)
+			.attr("x1", (d) => d.source.x)
+			.attr("y1", (d) => d.source.y)
+			.attr("x2", (d) => d.target.x)
+			.attr("y2", (d) => d.target.y)
+
+		node.attr("x", (d) => d.x - (d.data.known ? KNOWN_LOGO_SIZE : UNKNOWN_LOGO_SIZE) / 2).attr(
+			"y",
+			(d) => d.y - (d.data.known ? UNKNOWN_LOGO_SIZE : UNKNOWN_LOGO_SIZE) / 2,
+		)
+	})
+
+	canvasEl.value.append(svg.node())
+
+	isDrawn.value = true
+}
+
+const selectedChain = ref()
+const handleCloseSidebar = async () => {
+	selectedChain.value = null
+	await nextTick()
+	updateSvgSizes()
+}
+
+onMounted(() => {
+	if (!isDrawn.value && props.chains.length) {
+		prepareData()
+		draw()
+	}
+})
+
+watch(
+	() => props.chains,
+	() => {
+		if (!props.chains.length) return
+		if (!isDrawn.value) {
+			prepareData()
+			draw()
+		}
+	},
+)
+
+onBeforeUnmount(() => {
+	simulation.stop()
+})
+</script>
+
+<template>
+	<Flex wide direction="column" gap="4">
+		<Flex align="center" gap="8" :class="$style.header">
+			<Icon name="globe" size="14" color="tertiary" />
+			<Text size="13" weight="600" color="primary">Celestia IBC Visualization</Text>
+		</Flex>
+
+		<Flex direction="column">
+			<Flex :class="$style.body">
+				<div ref="canvasEl" :class="$style.canvas" />
+
+				<GraphSidebar v-if="selectedChain" :chain="selectedChain" @onClose="handleCloseSidebar" />
+			</Flex>
+
+			<Flex align="center" justify="between" :class="$style.bottom">
+				<Flex align="center" gap="6">
+					<Icon name="info" size="12" color="tertiary" />
+					<Text size="12" weight="600" color="tertiary">
+						Live updates currently is not supported. Refresh the page to update the data.
+					</Text>
+				</Flex>
+			</Flex>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.header {
+	height: 40px;
+
+	border-radius: 8px 8px 4px 4px;
+	background: var(--card-background);
+
+	padding: 0 12px;
+}
+
+.body {
+	position: relative;
+	flex: 1;
+	min-height: 500px;
+
+	border-radius: 4px 4px 8px 8px;
+	background: var(--card-background);
+	background-image: radial-gradient(rgba(255, 255, 255, 8%) 2px, transparent 0);
+	background-size: 44px 44px;
+	background-position: 12px 12px;
+
+	& svg {
+		display: flex;
+	}
+}
+
+.canvas {
+	width: 100%;
+	height: 100%;
+}
+
+.bottom {
+	background: var(--card-background);
+	border-radius: 0 0 8px 8px;
+	opacity: 0.5;
+
+	padding: 16px 12px 12px 12px;
+	margin-top: -4px;
+}
+
+.node {
+	width: 40px;
+	height: 40px;
+
+	cursor: pointer;
+
+	filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.15));
+
+	transition: filter 0.2s ease;
+
+	&.unknown {
+		width: 32px;
+		height: 32px;
+	}
+
+	&:hover {
+		filter: drop-shadow(0 0 4px var(--brand));
+	}
+}
+
+.link {
+	stroke: var(--op-5);
+	stroke-width: 2px;
+	fill: none;
+}
+</style>
diff --git a/components/modules/ibc/LargestChainsTable.vue b/components/modules/ibc/LargestChainsTable.vue
new file mode 100644
index 00000000..6bb5783f
--- /dev/null
+++ b/components/modules/ibc/LargestChainsTable.vue
@@ -0,0 +1,208 @@
+<script setup>
+/** UI */
+import Button from "@/components/ui/Button.vue"
+
+/** Constants */
+import { IbcChainName } from "@/services/constants/ibc"
+
+/** Services */
+import { abbreviate } from "@/services/utils"
+
+const props = defineProps({
+	chainsStats: {
+		type: Array,
+		default: [],
+	},
+})
+
+const largestChains = computed(() => props.chainsStats.slice(0, 5))
+</script>
+
+<template>
+	<Flex wide direction="column" gap="4">
+		<Flex align="center" gap="8" :class="$style.header">
+			<Icon name="globe" size="14" color="tertiary" />
+			<Text size="13" weight="600" color="primary">Largest chains</Text>
+		</Flex>
+
+		<Flex direction="column" gap="16" :class="$style.transfers_body">
+			<div v-if="largestChains?.length" :class="$style.table_scroller">
+				<table>
+					<thead>
+						<tr>
+							<th><Text size="12" weight="600" color="tertiary">Chain</Text></th>
+							<th><Text size="12" weight="600" color="tertiary">Sent</Text></th>
+							<th><Text size="12" weight="600" color="tertiary"></Text></th>
+							<th><Text size="12" weight="600" color="tertiary">Received</Text></th>
+							<th><Text size="12" weight="600" color="tertiary"></Text></th>
+							<th><Text size="12" weight="600" color="tertiary">Flow</Text></th>
+						</tr>
+					</thead>
+
+					<tbody>
+						<tr v-for="chain in largestChains" @click="navigateTo(`/ibc/chain/${chain.chain}`)">
+							<td>
+								<NuxtLink>
+									<Flex align="center">
+										<Text size="13" weight="600" color="primary">
+											{{ IbcChainName[chain.chain] ?? chain.chain }}
+										</Text>
+									</Flex>
+								</NuxtLink>
+							</td>
+							<td>
+								<NuxtLink>
+									<Flex align="center" gap="6">
+										<Icon name="arrow-narrow-up-right-circle" size="14" color="purple" />
+										<Text size="13" weight="600" color="primary" mono>
+											{{ abbreviate(chain.sent / 1_000_000) }} <Text color="secondary">TIA</Text>
+										</Text>
+									</Flex>
+								</NuxtLink>
+							</td>
+							<td>
+								<Text size="13" weight="600" color="tertiary" mono>+</Text>
+							</td>
+							<td>
+								<NuxtLink>
+									<Flex align="center" gap="6">
+										<Icon name="arrow-narrow-up-right-circle" size="14" color="brand" style="transform: scale(1, -1)" />
+										<Text size="13" weight="600" color="primary" mono>
+											{{ abbreviate(chain.received / 1_000_000) }} <Text color="tertiary">TIA</Text>
+										</Text>
+									</Flex>
+								</NuxtLink>
+							</td>
+							<td>
+								<Text size="13" weight="600" color="tertiary" mono>=</Text>
+							</td>
+							<td>
+								<NuxtLink>
+									<Flex align="center" gap="6">
+										<Icon name="coins" size="14" color="secondary" />
+										<Text size="13" weight="600" color="primary" mono>
+											{{ abbreviate(chain.flow / 1_000_000) }} <Text color="tertiary">TIA</Text>
+										</Text>
+									</Flex>
+								</NuxtLink>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+
+			<Flex v-else align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
+				<Text size="13" weight="600" color="secondary" align="center"> Largest chains 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="/ibc/chains" type="secondary" size="small" wide>
+					<Icon name="table" size="12" color="secondary" />
+					<Text size="12" weight="600" color="primary">View All Chains</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 {
+			padding: 0;
+
+			white-space: nowrap;
+
+			&:first-child {
+				padding-left: 16px;
+			}
+
+			& > a {
+				display: flex;
+
+				min-height: 40px;
+
+				padding-right: 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/ibc/LatestTransfersTable.vue b/components/modules/ibc/LatestTransfersTable.vue
new file mode 100644
index 00000000..09fe8905
--- /dev/null
+++ b/components/modules/ibc/LatestTransfersTable.vue
@@ -0,0 +1,240 @@
+<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 { fetchIbcTransfers } from "@/services/api/ibc"
+
+/** Store */
+import { useModalsStore } from "@/store/modals.store"
+import { useCacheStore } from "@/store/cache.store"
+const modalsStore = useModalsStore()
+const cacheStore = useCacheStore()
+
+const isLoading = ref(true)
+const transfers = ref([])
+
+const getTransfers = async () => {
+	isLoading.value = true
+
+	const { data } = await useAsyncData(`latest-ibc-transfers`, () =>
+		fetchIbcTransfers({
+			offset: 0,
+			limit: 5,
+			sort: "desc",
+		}),
+	)
+	transfers.value = data.value
+	transfers.value.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
+
+	isLoading.value = false
+}
+
+await getTransfers()
+
+const handleOpenTransferModal = (transfer) => {
+	cacheStore.current.transfer = transfer
+	modalsStore.open("ibcTransfer")
+}
+</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">Latest IBC 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">From</Text></th>
+							<th><Text size="12" weight="600" color="tertiary">To</Text></th>
+							<th><Text size="12" weight="600" color="tertiary">Amount</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>
+								<NuxtLink>
+									<Flex align="center" gap="6">
+										<Text size="13" weight="600" color="primary" mono>
+											{{ transfer.sender.hash.slice(0, 6) }}
+										</Text>
+										<Flex align="center" gap="3">
+											<div v-for="_ in 3" class="dot" />
+										</Flex>
+										<Text size="13" weight="600" color="primary" mono>
+											{{ transfer.sender.hash.slice(-6) }}
+										</Text>
+									</Flex>
+								</NuxtLink>
+							</td>
+							<td>
+								<NuxtLink>
+									<Flex align="center" gap="6">
+										<Text size="13" weight="600" color="primary" mono>
+											{{ transfer.receiver.hash.slice(0, 6) }}
+										</Text>
+										<Flex align="center" gap="3">
+											<div v-for="_ in 3" class="dot" />
+										</Flex>
+										<Text size="13" weight="600" color="primary" mono>
+											{{ transfer.receiver.hash.slice(-6) }}
+										</Text>
+									</Flex>
+								</NuxtLink>
+							</td>
+							<td>
+								<NuxtLink>
+									<Flex align="center" gap="6">
+										<Text size="13" weight="600" color="primary" mono>
+											{{ comma(transfer.amount / 1_000_000) }} <Text color="tertiary">TIA</Text>
+										</Text>
+									</Flex>
+								</NuxtLink>
+							</td>
+							<td style="width: 1px">
+								<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>
+			</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="/ibc/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 {
+			padding: 0;
+
+			white-space: nowrap;
+
+			&:first-child {
+				padding-left: 16px;
+			}
+
+			& > a {
+				display: flex;
+
+				min-height: 40px;
+
+				padding-right: 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/ibc/NotableStats.vue b/components/modules/ibc/NotableStats.vue
new file mode 100644
index 00000000..be9bcf45
--- /dev/null
+++ b/components/modules/ibc/NotableStats.vue
@@ -0,0 +1,134 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** UI */
+import Tooltip from "@/components/ui/Tooltip.vue"
+
+/** Services */
+import { comma } from "@/services/utils"
+
+/** Constants */
+import { IbcChainName } from "@/services/constants/ibc"
+
+/** Store */
+import { useModalsStore } from "@/store/modals.store"
+import { useCacheStore } from "@/store/cache.store"
+const modalsStore = useModalsStore()
+const cacheStore = useCacheStore()
+
+const props = defineProps({
+	ibcData: {
+		type: Object,
+	},
+})
+
+const largestChain = ref(props.ibcData.rawChainsStats[0])
+props.ibcData.rawChainsStats.forEach((chainStats) => {
+	if (Number(chainStats.flow) > Number(largestChain.value.flow)) {
+		largestChain.value = chainStats
+	}
+})
+const largestTransfer = props.ibcData.rawSummary.largest_transfer
+const busiestChannel = props.ibcData.rawSummary.busiest_channel
+
+const handleOpenTransferModal = (transfer) => {
+	cacheStore.current.transfer = transfer
+	modalsStore.open("ibcTransfer")
+}
+
+const getChainName = (target) => {
+	return largestTransfer[target].hash.startsWith("celestia")
+		? "Celestia"
+		: IbcChainName[largestTransfer.chain_id] ?? largestTransfer.chain_id
+}
+</script>
+
+<template>
+	<Flex align="center" gap="16" :class="$style.wrapper">
+		<Tooltip wide position="start">
+			<Flex wide direction="column" gap="12" :class="$style.card">
+				<Flex align="center" justify="between">
+					<Flex align="center" gap="8">
+						<Icon name="coins" size="14" color="orange" />
+						<Text size="13" weight="600" color="secondary">Largest connected chain</Text>
+					</Flex>
+
+					<Icon name="info" size="14" color="support" />
+				</Flex>
+
+				<Text size="15" weight="600" color="primary">{{ IbcChainName[largestChain?.chain] ?? "Unknown" }} </Text>
+
+				<Text size="13" weight="500" color="support">
+					<Text color="tertiary" mono>{{ comma(largestChain?.flow / 1_000_000) }} TIA</Text>
+				</Text>
+			</Flex>
+
+			<template #content> The amount shown is the chain flow, sent and received tokens </template>
+		</Tooltip>
+
+		<Flex @click="handleOpenTransferModal(largestTransfer)" wide direction="column" gap="12" :class="[$style.card, $style.hoverable]">
+			<Flex align="center" justify="between">
+				<Flex align="center" gap="8">
+					<Icon name="arrow-circle-broken-right" size="14" color="brand" />
+					<Text size="13" weight="600" color="secondary">Largest transfer today</Text>
+				</Flex>
+
+				<Icon name="arrow-narrow-up-right-circle" size="14" color="tertiary" />
+			</Flex>
+
+			<Text size="15" weight="600" color="primary"
+				>{{ getChainName("sender") }} <Text color="tertiary">-></Text> {{ getChainName("receiver") }}
+			</Text>
+
+			<Text size="13" weight="500" color="support">
+				<Text color="tertiary" mono>{{ comma(largestTransfer.amount / 1_000_000) }} TIA</Text>
+			</Text>
+		</Flex>
+
+		<Flex wide direction="column" gap="12" :class="$style.card">
+			<Flex align="center" justify="between">
+				<Flex align="center" gap="8">
+					<Icon name="zap" size="14" color="red" />
+					<Text size="13" weight="600" color="secondary">Busiest channel</Text>
+				</Flex>
+
+				<Text size="12" weight="600" color="tertiary">30 days</Text>
+			</Flex>
+
+			<Text size="15" weight="600" color="primary">
+				{{ busiestChannel.channel_id }}
+				<Text size="12" color="tertiary">{{ IbcChainName[busiestChannel.chain_id] ?? "Unknown" }}</Text>
+			</Text>
+
+			<Text size="13" weight="500" color="support">
+				<Text color="tertiary" mono>{{ comma(busiestChannel.transfers_count) }} transfers</Text>
+			</Text>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.card {
+	border-radius: 8px;
+	background: var(--card-background);
+
+	padding: 12px;
+
+	&.hoverable {
+		cursor: pointer;
+
+		transition: all 0.2s ease;
+
+		&:hover {
+			box-shadow: 0 0 0 2px var(--op-10);
+		}
+	}
+}
+
+@media (max-width: 800px) {
+	.wrapper {
+		flex-direction: column;
+	}
+}
+</style>
diff --git a/components/modules/ibc/TransfersTable.vue b/components/modules/ibc/TransfersTable.vue
new file mode 100644
index 00000000..cf0b65b0
--- /dev/null
+++ b/components/modules/ibc/TransfersTable.vue
@@ -0,0 +1,281 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** Services */
+import { comma } from "@/services/utils"
+import { IbcChainName, IbcChainLogo } from "@/services/constants/ibc"
+
+/** 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.transfer = transfer
+	modalsStore.open("ibcTransfer")
+}
+
+const getChainLogo = (transfer, target) => {
+	return transfer[target].hash.startsWith("celestia")
+		? IbcChainLogo["_celestia"]
+		: IbcChainLogo[transfer.chain_id] ?? IbcChainLogo["_unknown"]
+}
+</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">From</Text></th>
+						<th></th>
+						<th><Text size="12" weight="600" color="tertiary">To</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Chain</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Time</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Amount</Text></th>
+					</tr>
+				</thead>
+
+				<tbody>
+					<tr v-for="transfer in transfers" @click="handleOpenTransferModal(transfer)">
+						<td style="width: 1px">
+							<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>
+						</td>
+						<td style="width: 1px">
+							<Flex align="center" gap="6">
+								<img :src="getChainLogo(transfer, 'sender')" width="12px" height="12px" />
+								<Text size="13" weight="600" color="primary" mono>
+									{{ transfer.sender.hash.slice(0, 6) }}
+								</Text>
+								<Flex align="center" gap="3">
+									<div v-for="_ in 3" class="dot" />
+								</Flex>
+								<Text size="13" weight="600" color="primary" mono>
+									{{ transfer.sender.hash.slice(-6) }}
+								</Text>
+							</Flex>
+						</td>
+						<td style="width: 1px">
+							<Text size="13" weight="600" color="tertiary">-></Text>
+						</td>
+						<td>
+							<Flex align="center" gap="6">
+								<img :src="getChainLogo(transfer, 'receiver')" width="12px" height="12px" />
+								<Text size="13" weight="600" color="primary" mono>
+									{{ transfer.receiver.hash.slice(0, 6) }}
+								</Text>
+								<Flex align="center" gap="3">
+									<div v-for="_ in 3" class="dot" />
+								</Flex>
+								<Text size="13" weight="600" color="primary" mono>
+									{{ transfer.receiver.hash.slice(-6) }}
+								</Text>
+							</Flex>
+						</td>
+						<td>
+							<Flex direction="column" gap="4">
+								<Text size="12" weight="600" color="primary">
+									{{ IbcChainName[transfer.chain_id] ?? "Celestia" }}
+								</Text>
+								<Text size="12" weight="500" color="tertiary" mono>
+									<template v-if="transfer.chain_id"> {{ transfer.chain_id }} ⋅ </template> {{ transfer.channel_id }}
+								</Text>
+							</Flex>
+						</td>
+						<td>
+							<Flex justify="center" direction="column" gap="4">
+								<Text size="12" weight="600" color="primary">
+									{{ DateTime.fromISO(transfer.time).toRelative({ locale: "en", style: "short" }) }}
+								</Text>
+								<Text size="12" weight="500" color="tertiary">
+									{{ DateTime.fromISO(transfer.time).setLocale("en").toFormat("LLL d, t") }}
+								</Text>
+							</Flex>
+						</td>
+						<td>
+							<Flex align="center" gap="6">
+								<Text v-if="transfer.amount / 1_000_000 < 0.01" size="13" weight="600" color="tertiary" mono>
+									< 0.01 TIA
+								</Text>
+								<Text v-else size="13" weight="600" color="primary" mono>
+									{{ comma(transfer.amount / 1_000_000) }}
+									<Text color="tertiary">TIA</Text>
+								</Text>
+							</Flex>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</Flex>
+
+		<TablePlaceholderView
+			v-else
+			title="There's no transfers"
+			description="Probably something went wrong... ?"
+			icon="ibc"
+			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/nuxt.config.ts b/nuxt.config.ts
index 943ef4e0..75d265bd 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -134,6 +134,8 @@ export default defineNuxtConfig({
 		enabled: true,
 	},
 
+	plugins: ["~/plugins/force.client.js"],
+
 	vite: {
 		define: {
 			global: "globalThis",
diff --git a/package.json b/package.json
index 47f9f5da..22de3353 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,8 @@
 		"buffer": "^6.0.3",
 		"codemirror": "^6.0.1",
 		"crypto-js": "^4.2.0",
-		"d3": "^7.8.5",
+		"d3": "7.9.0",
+		"d3-force": "^3.0.0",
 		"d3-geo": "^3.1.1",
 		"d3-hierarchy": "^3.1.2",
 		"focus-trap": "7.5.2",
diff --git a/pages/ibc/chain/[id].vue b/pages/ibc/chain/[id].vue
new file mode 100644
index 00000000..132a685f
--- /dev/null
+++ b/pages/ibc/chain/[id].vue
@@ -0,0 +1,93 @@
+<script setup>
+/** Components: Modules */
+import ChainOverview from "@/components/modules/ibc/ChainOverview.vue"
+
+/** Services */
+import { IbcChainName } from "@/services/constants/ibc"
+
+/** API */
+import { fetchIbcChainsStats } from "@/services/api/stats"
+
+const route = useRoute()
+const router = useRouter()
+
+const { data } = await useAsyncData(`ibc-chains`, () => fetchIbcChainsStats({ limit: 100 }))
+const chain = ref(data.value.find((c) => c.chain === route.params.id))
+
+if (!chain.value) {
+	router.push("/")
+}
+
+useHead({
+	title: `Chain ${IbcChainName[chain.value.chain] ?? chain.value.chain} - Celenium`,
+	link: [
+		{
+			rel: "canonical",
+			href: `${useRequestURL().origin}${useRequestURL().pathname}`,
+		},
+	],
+	meta: [
+		{
+			name: "description",
+			content: `IBC Chain ${chain.value.chain} information`,
+		},
+		{
+			property: "og:title",
+			content: `Chain ${IbcChainName[chain.value.chain] ?? chain.value.chain} - Celenium`,
+		},
+		{
+			property: "og:description",
+			content: `IBC Chain ${chain.value.chain} information`,
+		},
+		{
+			property: "og:url",
+			content: `${useRequestURL().origin}${useRequestURL().pathname}`,
+		},
+		{
+			name: "twitter:title",
+			content: `Chain ${IbcChainName[chain.value.chain] ?? chain.value.chain} - Celenium`,
+		},
+		{
+			name: "twitter:description",
+			content: `IBC Chain ${chain.value.chain} information`,
+		},
+		{
+			name: "twitter:card",
+			content: "summary_large_image",
+		},
+	],
+})
+</script>
+
+<template>
+	<Flex direction="column" gap="32" wide :class="$style.wrapper">
+		<Flex direction="column" gap="16">
+			<Breadcrumbs
+				v-if="chain"
+				:items="[
+					{ link: '/', name: 'Explore' },
+					{ link: '/ibc', name: 'IBC' },
+					{ link: '/ibc/chains', name: 'Chains' },
+					{ link: route.fullPath, name: chain.chain },
+				]"
+				:class="$style.breadcrumbs"
+			/>
+
+			<ChainOverview v-if="chain" :chain />
+		</Flex>
+
+		<!-- Clients & Connections & Channels -->
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+	padding: 20px 24px 60px 24px;
+}
+
+@media (max-width: 500px) {
+	.wrapper {
+		padding: 32px 12px;
+	}
+}
+</style>
diff --git a/pages/ibc/chains.vue b/pages/ibc/chains.vue
new file mode 100644
index 00000000..1e3781fa
--- /dev/null
+++ b/pages/ibc/chains.vue
@@ -0,0 +1,137 @@
+<script setup>
+/** API */
+import { fetchIbcChainsStats } from "@/services/api/stats"
+
+/** Components */
+import ChainsTable from "@/components/modules/ibc/ChainsTable.vue"
+
+useHead({
+	title: `Celestia IBC Chains - Celenium`,
+	link: [
+		{
+			rel: "canonical",
+			href: "https://celenium.io/ibc/chains",
+		},
+	],
+	meta: [
+		{
+			name: "description",
+			content: "Explore Celestia IBC transfers, clients, connections, channels and other IBC activity.",
+		},
+		{
+			property: "og:title",
+			content: "Celestia IBC Chains - Celenium",
+		},
+		{
+			property: "og:description",
+			content: "Explore Celestia IBC transfers, clients, connections, channels and other IBC activity.",
+		},
+		{
+			property: "og:url",
+			content: "https://celenium.io/ibc/chains",
+		},
+		{
+			property: "og:image",
+			content: "/img/seo/ibc-networks.png",
+		},
+		{
+			name: "twitter:title",
+			content: "Celestia IBC Chains - Celenium",
+		},
+		{
+			name: "twitter:description",
+			content: "Explore Celestia IBC transfers, clients, connections, channels and other IBC activity.",
+		},
+		{
+			name: "twitter:card",
+			content: "summary_large_image",
+		},
+		{
+			name: "twitter:image",
+			content: "https://celenium.io/img/seo/ibc-networks.png",
+		},
+	],
+})
+
+const allChains = ref([])
+const showedChains = computed(() => allChains.value.slice((page.value - 1) * 10, page.value * 10))
+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 getChains = async () => {
+	isLoading.value = true
+
+	const { data } = await useAsyncData(`ibc-chains`, () => fetchIbcChainsStats({ limit: 100 }))
+	allChains.value = data.value
+
+	isLoading.value = false
+}
+
+await getChains()
+</script>
+
+<template>
+	<Flex direction="column" wide :class="$style.wrapper">
+		<Breadcrumbs
+			:items="[
+				{ link: '/', name: 'Explore' },
+				{ link: '/ibc', name: `IBC` },
+				{ link: '/ibc/chains', name: `Chains` },
+			]"
+			:class="$style.breadcrumbs"
+		/>
+
+		<Flex wide direction="column" gap="4">
+			<Flex justify="between" :class="$style.header">
+				<Flex align="center" gap="8">
+					<Icon name="ibc" size="16" color="secondary" />
+					<Text size="13" weight="600" color="primary">IBC Chains</Text>
+				</Flex>
+			</Flex>
+
+			<ChainsTable
+				:chains="showedChains"
+				:page
+				:isLoading="isLoading"
+				@onRefetch="getChains"
+				@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/pages/ibc/graph.vue b/pages/ibc/graph.vue
new file mode 100644
index 00000000..85ab532d
--- /dev/null
+++ b/pages/ibc/graph.vue
@@ -0,0 +1,98 @@
+<script setup>
+useHead({
+	title: `Celestia IBC Graph - Celenium`,
+	link: [
+		{
+			rel: "canonical",
+			href: "https://celenium.io/ibc/graph",
+		},
+	],
+	meta: [
+		{
+			name: "description",
+			content: "Explore Celestia IBC transfers, clients, connections, channels and other IBC activity.",
+		},
+		{
+			property: "og:title",
+			content: "Celestia IBC Graph - Celenium",
+		},
+		{
+			property: "og:description",
+			content: "Explore Celestia IBC transfers, clients, connections, channels and other IBC activity.",
+		},
+		{
+			property: "og:url",
+			content: "https://celenium.io/ibc/graph",
+		},
+		{
+			property: "og:image",
+			content: "/img/seo/ibc-graph.png",
+		},
+		{
+			name: "twitter:title",
+			content: "Celestia IBC Graph - Celenium",
+		},
+		{
+			name: "twitter:description",
+			content: "Explore Celestia IBC transfers, clients, connections, channels and other IBC activity.",
+		},
+		{
+			name: "twitter:card",
+			content: "summary_large_image",
+		},
+		{
+			name: "twitter:image",
+			content: "https://celenium.io/img/seo/ibc-graph.png",
+		},
+	],
+})
+</script>
+
+<template>
+	<Flex direction="column" wide :class="$style.wrapper">
+		<Breadcrumbs
+			:items="[
+				{ link: '/', name: 'Explore' },
+				{ link: '/ibc', name: `IBC` },
+				{ link: '/ibc/graph', name: `Graph` },
+			]"
+			:class="$style.breadcrumbs"
+		/>
+
+		<Flex wide direction="column" gap="4">
+			<Flex justify="between" :class="$style.header">
+				<Flex align="center" gap="8">
+					<Icon name="ibc" size="16" color="secondary" />
+					<Text size="13" weight="600" color="primary">IBC</Text>
+				</Flex>
+			</Flex>
+
+			Content
+		</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/pages/ibc/index.vue b/pages/ibc/index.vue
new file mode 100644
index 00000000..89259d5a
--- /dev/null
+++ b/pages/ibc/index.vue
@@ -0,0 +1,108 @@
+<script setup>
+/** API */
+import { fetchIbcChainsStats, fetchIbcSummary } from "@/services/api/stats"
+
+/** Components */
+import NotableStats from "@/components/modules/ibc/NotableStats.vue"
+import IBCGraph from "@/components/modules/ibc/IBCGraph.vue"
+import LatestTransfersTable from "@/components/modules/ibc/LatestTransfersTable.vue"
+import LargestChainsTable from "@/components/modules/ibc/LargestChainsTable.vue"
+
+useHead({
+	title: `Celestia IBC - Celenium`,
+	link: [
+		{
+			rel: "canonical",
+			href: "https://celenium.io/ibc",
+		},
+	],
+	meta: [
+		{
+			name: "description",
+			content: "Explore Celestia IBC transfers, clients, connections, channels and other IBC activity.",
+		},
+		{
+			property: "og:title",
+			content: "Celestia IBC - Celenium",
+		},
+		{
+			property: "og:description",
+			content: "Explore Celestia IBC transfers, clients, connections, channels and other IBC activity.",
+		},
+		{
+			property: "og:url",
+			content: "https://celenium.io/ibc",
+		},
+		{
+			property: "og:image",
+			content: "/img/seo/ibc.png",
+		},
+		{
+			name: "twitter:title",
+			content: "Celestia IBC - Celenium",
+		},
+		{
+			name: "twitter:description",
+			content: "Explore Celestia IBC transfers, clients, connections, channels and other IBC activity.",
+		},
+		{
+			name: "twitter:card",
+			content: "summary_large_image",
+		},
+		{
+			name: "twitter:image",
+			content: "https://celenium.io/img/seo/ibc.png",
+		},
+	],
+})
+
+const { data: ibcData } = await useAsyncData("ibc-data", async () => {
+	const [rawChainsStats, rawSummary] = await Promise.all([fetchIbcChainsStats({ limit: 100 }), fetchIbcSummary()])
+	return { rawChainsStats, rawSummary }
+})
+</script>
+
+<template>
+	<Flex direction="column" wide :class="$style.wrapper">
+		<Breadcrumbs
+			:items="[
+				{ link: '/', name: 'Explore' },
+				{ link: '/ibc', name: `IBC` },
+			]"
+			:class="$style.breadcrumbs"
+		/>
+
+		<Flex direction="column" gap="24">
+			<NotableStats :ibcData />
+
+			<IBCGraph :chains="ibcData.rawChainsStats" />
+
+			<Flex gap="24" :class="$style.tables">
+				<LatestTransfersTable />
+				<LargestChainsTable :chainsStats="ibcData.rawChainsStats" />
+			</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/ibc/transfer/[id].vue b/pages/ibc/transfer/[id].vue
new file mode 100644
index 00000000..6749a927
--- /dev/null
+++ b/pages/ibc/transfer/[id].vue
@@ -0,0 +1,3 @@
+<script setup></script>
+
+<template>1</template>
diff --git a/pages/ibc/transfers.vue b/pages/ibc/transfers.vue
new file mode 100644
index 00000000..c7fd119d
--- /dev/null
+++ b/pages/ibc/transfers.vue
@@ -0,0 +1,155 @@
+<script setup>
+/** Components */
+import TransfersTable from "@/components/modules/ibc/TransfersTable.vue"
+
+/** API */
+import { fetchIbcTransfers } from "@/services/api/ibc"
+
+useHead({
+	title: `Celestia IBC Transfers - Celenium`,
+	link: [
+		{
+			rel: "canonical",
+			href: "https://celenium.io/ibc/transfers",
+		},
+	],
+	meta: [
+		{
+			name: "description",
+			content: "Explore Celestia IBC transfers, clients, connections, channels and other IBC activity.",
+		},
+		{
+			property: "og:title",
+			content: "Celestia IBC Transfers - Celenium",
+		},
+		{
+			property: "og:description",
+			content: "Explore Celestia IBC transfers, clients, connections, channels and other IBC activity.",
+		},
+		{
+			property: "og:url",
+			content: "https://celenium.io/ibc/transfers",
+		},
+		{
+			property: "og:image",
+			content: "/img/seo/ibc-transfers.png",
+		},
+		{
+			name: "twitter:title",
+			content: "Celestia IBC Transfers - Celenium",
+		},
+		{
+			name: "twitter:description",
+			content: "Explore Celestia IBC transfers, clients, connections, channels and other IBC activity.",
+		},
+		{
+			name: "twitter:card",
+			content: "summary_large_image",
+		},
+		{
+			name: "twitter:image",
+			content: "https://celenium.io/img/seo/ibc-transfers.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(`ibc-transfers-${page.value}`, () =>
+		fetchIbcTransfers({
+			offset: (page.value - 1) * 10,
+			limit: 10,
+		}),
+	)
+	transfers.value = data.value
+	transfers.value.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
+
+	isLoading.value = false
+}
+
+await getTransfers()
+
+/** Refetch transfers */
+watch(
+	() => page.value,
+	async () => {
+		const data = await fetchIbcTransfers({
+			offset: (page.value - 1) * 10,
+			limit: 10,
+		})
+		transfers.value = data
+		transfers.value.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
+	},
+)
+</script>
+
+<template>
+	<Flex direction="column" wide :class="$style.wrapper">
+		<Breadcrumbs
+			:items="[
+				{ link: '/', name: 'Explore' },
+				{ link: '/ibc', name: `IBC` },
+				{ link: '/ibc/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">IBC 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/plugins/force.client.js b/plugins/force.client.js
new file mode 100644
index 00000000..0833d2da
--- /dev/null
+++ b/plugins/force.client.js
@@ -0,0 +1,5 @@
+import * as d3Force from "d3-force"
+
+export default defineNuxtPlugin((nuxtApp) => {
+	nuxtApp.provide("d3Force", d3Force)
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 303d6b97..091d4163 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,8 +36,11 @@ dependencies:
     specifier: ^4.2.0
     version: 4.2.0
   d3:
-    specifier: ^7.8.5
+    specifier: 7.9.0
     version: 7.9.0
+  d3-force:
+    specifier: ^3.0.0
+    version: 3.0.0
   d3-geo:
     specifier: ^3.1.1
     version: 3.1.1
@@ -2857,7 +2860,7 @@ packages:
       mitt: 3.0.1
       nanoid: 5.1.5
       pathe: 2.0.3
-      vite-hot-client: 2.0.4(vite@6.2.6)
+      vite-hot-client: 2.1.0(vite@6.2.6)
       vue: 3.5.13
     transitivePeerDependencies:
       - vite
@@ -8443,14 +8446,6 @@ packages:
       vite-hot-client: 2.1.0(vite@6.2.6)
     dev: true
 
-  /vite-hot-client@2.0.4(vite@6.2.6):
-    resolution: {integrity: sha512-W9LOGAyGMrbGArYJN4LBCdOC5+Zwh7dHvOHC0KmGKkJhsOzaKbpo/jEjpPKVHIW0/jBWj8RZG0NUxfgA8BxgAg==}
-    peerDependencies:
-      vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0
-    dependencies:
-      vite: 6.2.6(jiti@2.4.2)(sass@1.66.1)
-    dev: true
-
   /vite-hot-client@2.1.0(vite@6.2.6):
     resolution: {integrity: sha512-7SpgZmU7R+dDnSmvXE1mfDtnHLHQSisdySVR7lO8ceAXvM0otZeuQQ6C8LrS5d/aYyP/QZ0hI0L+dIPrm4YlFQ==}
     peerDependencies:
@@ -8746,7 +8741,7 @@ packages:
       '@webassemblyjs/ast': 1.14.1
       '@webassemblyjs/wasm-edit': 1.14.1
       '@webassemblyjs/wasm-parser': 1.14.1
-      acorn: 8.14.1
+      acorn: 8.15.0
       browserslist: 4.24.4
       chrome-trace-event: 1.0.4
       enhanced-resolve: 5.18.1
diff --git a/public/img/chains/archway.png b/public/img/chains/archway.png
new file mode 100644
index 00000000..c4c0cdb8
Binary files /dev/null and b/public/img/chains/archway.png differ
diff --git a/public/img/chains/celestia.png b/public/img/chains/celestia.png
new file mode 100644
index 00000000..2c9ef952
Binary files /dev/null and b/public/img/chains/celestia.png differ
diff --git a/public/img/chains/coreum.png b/public/img/chains/coreum.png
new file mode 100644
index 00000000..904a10c9
Binary files /dev/null and b/public/img/chains/coreum.png differ
diff --git a/public/img/chains/dymension.png b/public/img/chains/dymension.png
new file mode 100644
index 00000000..fc86f5eb
Binary files /dev/null and b/public/img/chains/dymension.png differ
diff --git a/public/img/chains/elys.png b/public/img/chains/elys.png
new file mode 100644
index 00000000..9dafe768
Binary files /dev/null and b/public/img/chains/elys.png differ
diff --git a/public/img/chains/injective.png b/public/img/chains/injective.png
new file mode 100644
index 00000000..b34494ce
Binary files /dev/null and b/public/img/chains/injective.png differ
diff --git a/public/img/chains/jackal.png b/public/img/chains/jackal.png
new file mode 100644
index 00000000..861a3183
Binary files /dev/null and b/public/img/chains/jackal.png differ
diff --git a/public/img/chains/kyve.png b/public/img/chains/kyve.png
new file mode 100644
index 00000000..2d06bc74
Binary files /dev/null and b/public/img/chains/kyve.png differ
diff --git a/public/img/chains/neutron.png b/public/img/chains/neutron.png
new file mode 100644
index 00000000..1228762c
Binary files /dev/null and b/public/img/chains/neutron.png differ
diff --git a/public/img/chains/osmosis.png b/public/img/chains/osmosis.png
new file mode 100644
index 00000000..4da81728
Binary files /dev/null and b/public/img/chains/osmosis.png differ
diff --git a/public/img/chains/pryzm.png b/public/img/chains/pryzm.png
new file mode 100644
index 00000000..5517ee76
Binary files /dev/null and b/public/img/chains/pryzm.png differ
diff --git a/public/img/chains/quicksilver.png b/public/img/chains/quicksilver.png
new file mode 100644
index 00000000..ed1e09d6
Binary files /dev/null and b/public/img/chains/quicksilver.png differ
diff --git a/public/img/chains/secret.png b/public/img/chains/secret.png
new file mode 100644
index 00000000..70d4a841
Binary files /dev/null and b/public/img/chains/secret.png differ
diff --git a/public/img/chains/stargaze.png b/public/img/chains/stargaze.png
new file mode 100644
index 00000000..47026d41
Binary files /dev/null and b/public/img/chains/stargaze.png differ
diff --git a/public/img/chains/stride.png b/public/img/chains/stride.png
new file mode 100644
index 00000000..bf5041b0
Binary files /dev/null and b/public/img/chains/stride.png differ
diff --git a/public/img/chains/umee.png b/public/img/chains/umee.png
new file mode 100644
index 00000000..18d43b2a
Binary files /dev/null and b/public/img/chains/umee.png differ
diff --git a/public/img/chains/unknown.png b/public/img/chains/unknown.png
new file mode 100644
index 00000000..ef2977d2
Binary files /dev/null and b/public/img/chains/unknown.png differ
diff --git a/public/img/seo/ibc-graph.png b/public/img/seo/ibc-graph.png
new file mode 100644
index 00000000..4dcaaaa1
Binary files /dev/null and b/public/img/seo/ibc-graph.png differ
diff --git a/public/img/seo/ibc-networks.png b/public/img/seo/ibc-networks.png
new file mode 100644
index 00000000..7a31ed54
Binary files /dev/null and b/public/img/seo/ibc-networks.png differ
diff --git a/public/img/seo/ibc-transfers.png b/public/img/seo/ibc-transfers.png
new file mode 100644
index 00000000..5a1ed3e2
Binary files /dev/null and b/public/img/seo/ibc-transfers.png differ
diff --git a/public/img/seo/ibc.png b/public/img/seo/ibc.png
new file mode 100644
index 00000000..56408197
Binary files /dev/null and b/public/img/seo/ibc.png differ
diff --git a/services/api/ibc.js b/services/api/ibc.js
new file mode 100644
index 00000000..e8d48241
--- /dev/null
+++ b/services/api/ibc.js
@@ -0,0 +1,71 @@
+/** Services */
+import { useServerURL } from "@/services/config"
+
+export const fetchIbcTransfers = async ({ limit, offset, sort = "desc", chain_id, client_id, connection_id }) => {
+	try {
+		const url = new URL(`${useServerURL()}/ibc/transfer`)
+
+		if (limit) url.searchParams.append("limit", limit)
+		if (offset) url.searchParams.append("offset", offset)
+		if (sort) url.searchParams.append("sort", sort)
+		if (chain_id) url.searchParams.append("chain_id", chain_id)
+		if (client_id) url.searchParams.append("client_id", client_id)
+		if (connection_id) url.searchParams.append("connection_id", connection_id)
+
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+export const fetchIbcClients = async ({ limit, offset, sort, chain_id, creator }) => {
+	try {
+		const url = new URL(`${useServerURL()}/ibc/client`)
+
+		if (limit) url.searchParams.append("limit", limit)
+		if (offset) url.searchParams.append("offset", offset)
+		if (sort) url.searchParams.append("sort", sort)
+		if (chain_id) url.searchParams.append("chain_id", chain_id)
+		if (creator) url.searchParams.append("creator", creator)
+
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+export const fetchIbcConnections = async ({ limit, offset, sort, client_id }) => {
+	try {
+		const url = new URL(`${useServerURL()}/ibc/connection`)
+
+		if (limit) url.searchParams.append("limit", limit)
+		if (offset) url.searchParams.append("offset", offset)
+		if (sort) url.searchParams.append("sort", sort)
+		if (client_id) url.searchParams.append("client_id", client_id)
+
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+export const fetchIbcChannels = async ({ limit, offset, sort, client_id, connection_id, status }) => {
+	try {
+		const url = new URL(`${useServerURL()}/ibc/channel`)
+
+		if (limit) url.searchParams.append("limit", limit)
+		if (offset) url.searchParams.append("offset", offset)
+		if (sort) url.searchParams.append("sort", sort)
+		if (client_id) url.searchParams.append("client_id", client_id)
+		if (connection_id) url.searchParams.append("connection_id", connection_id)
+		if (status) url.searchParams.append("status", status)
+
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
diff --git a/services/api/stats.js b/services/api/stats.js
index c681b50a..b47515f5 100644
--- a/services/api/stats.js
+++ b/services/api/stats.js
@@ -17,7 +17,7 @@ export const fetchSeries = async ({ table, period, column, from, to }) => {
 		if (column) url.searchParams.append("column", column)
 		if (from) url.searchParams.append("from", from)
 		if (to) url.searchParams.append("to", to)
-		
+
 		const data = await $fetch(url.href)
 		return data
 	} catch (error) {
@@ -31,7 +31,7 @@ export const fetchSeriesCumulative = async ({ name, period, from, to }) => {
 
 		if (from) url.searchParams.append("from", from)
 		if (to) url.searchParams.append("to", to)
-		
+
 		const data = await $fetch(url.href)
 		return data
 	} catch (error) {
@@ -46,7 +46,7 @@ export const fetchSummary = async ({ table, func, column, from, to }) => {
 		if (column) url.searchParams.append("column", column)
 		if (from) url.searchParams.append("from", from)
 		if (to) url.searchParams.append("to", to)
-		
+
 		const data = await $fetch(url.href)
 		return data
 	} catch (error) {
@@ -205,7 +205,7 @@ export const fetchSquareSize = async (from) => {
 		const url = new URL(`${useServerURL()}/stats/square_size`)
 
 		if (from) url.searchParams.append("from", from)
-			
+
 		const data = await $fetch(url.href)
 		return data
 	} catch (error) {
@@ -240,3 +240,32 @@ export const fetchNodeVersionStats = async ({ name, timeframe, from, to }) => {
 		console.error(error)
 	}
 }
+
+/**
+ * IBC
+ */
+
+export const fetchIbcChainsStats = async ({ limit, offset }) => {
+	try {
+		const url = new URL(`${useServerURL()}/stats/ibc/chains`)
+
+		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 fetchIbcSummary = async () => {
+	try {
+		const url = new URL(`${useServerURL()}/stats/ibc/summary`)
+
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
diff --git a/services/config.js b/services/config.js
index b625fe45..d67df3e3 100644
--- a/services/config.js
+++ b/services/config.js
@@ -42,7 +42,7 @@ export const useServerURL = () => {
 			return Server.API.dev
 
 		default:
-			return Server.API.dev
+			return Server.API.mainnet
 	}
 }
 
@@ -69,7 +69,7 @@ export const useSocketURL = () => {
 			return Server.WSS.dev
 
 		default:
-			return Server.WSS.dev
+			return Server.WSS.mainnet
 	}
 }
 
diff --git a/services/constants/ibc.js b/services/constants/ibc.js
new file mode 100644
index 00000000..1f25b9f7
--- /dev/null
+++ b/services/constants/ibc.js
@@ -0,0 +1,37 @@
+export const IbcChainName = {
+	"injective-1": "Injective",
+	"neutron-1": "Neutron",
+	"osmosis-1": "Osmosis",
+	"stride-1": "Stride",
+	"dymension_1100-1": "Dymension",
+	"stargaze-1": "Stargaze",
+	"elys-1": "Elys",
+	"secret-4": "Secret",
+	"umee-1": "Umee",
+	"pryzm-1": "Pryzm",
+	"archway-1": "Archway",
+	"kyve-1": "Kyve",
+	"coreum-mainnet-1": "Coreum",
+	"quicksilver-2": "Quicksilver",
+	"jackal-1": "Jackal",
+}
+
+export const IbcChainLogo = {
+	_unknown: "/img/chains/unknown.png",
+	_celestia: "/img/chains/celestia.png",
+	"injective-1": "/img/chains/injective.png",
+	"neutron-1": "/img/chains/neutron.png",
+	"osmosis-1": "/img/chains/osmosis.png",
+	"stride-1": "/img/chains/stride.png",
+	"dymension_1100-1": "/img/chains/dymension.png",
+	"stargaze-1": "/img/chains/stargaze.png",
+	"elys-1": "/img/chains/elys.png",
+	"secret-4": "/img/chains/secret.png",
+	"umee-1": "/img/chains/umee.png",
+	"pryzm-1": "/img/chains/pryzm.png",
+	"archway-1": "/img/chains/archway.png",
+	"kyve-1": "/img/chains/kyve.png",
+	"coreum-mainnet-1": "/img/chains/coreum.png",
+	"quicksilver-2": "/img/chains/quicksilver.png",
+	"jackal-1": "/img/chains/jackal.png",
+}