diff --git a/assets/icons.json b/assets/icons.json
index bb4e2784..3c5628f7 100644
--- a/assets/icons.json
+++ b/assets/icons.json
@@ -8,6 +8,9 @@
 	"coins": "M 7.5 2 C 5.896 2 4.4 2.235 3.27 2.646 L 3.164 2.685 C 2.643 2.884 2.158 3.138 1.78 3.463 C 1.38 3.807 1 4.323 1 5 L 1 6.5 C 1 7.177 1.38 7.693 1.78 8.037 C 2.183 8.383 2.708 8.65 3.27 8.854 C 4.4 9.265 5.896 9.5 7.5 9.5 C 7.732 9.5 7.962 9.495 8.189 9.485 C 8.329 9.479 8.399 9.476 8.461 9.457 C 8.517 9.44 8.569 9.413 8.615 9.377 C 8.668 9.337 8.721 9.268 8.827 9.13 C 9.041 8.853 9.269 8.625 9.477 8.447 C 10.129 7.886 10.897 7.517 11.586 7.267 C 12.151 7.065 12.73 6.908 13.319 6.795 C 13.572 6.745 13.699 6.721 13.785 6.661 C 13.862 6.609 13.922 6.536 13.958 6.451 C 14 6.355 14 6.233 14 5.988 L 14 5 C 14 4.323 13.62 3.807 13.22 3.463 C 12.817 3.117 12.292 2.85 11.73 2.646 C 10.6 2.235 9.105 2 7.5 2 Z M 8 11.992 C 7.999 11.86 7.946 11.735 7.852 11.642 C 7.758 11.55 7.632 11.499 7.5 11.5 C 5.896 11.5 4.4 11.265 3.27 10.854 C 2.708 10.65 2.183 10.384 1.78 10.037 C 1.624 9.905 1.485 9.754 1.365 9.589 C 1.327 9.534 1.264 9.501 1.197 9.5 C 1.088 9.5 1 9.588 1 9.697 L 1 11.5 C 1 12.177 1.38 12.693 1.78 13.037 C 2.183 13.383 2.708 13.65 3.27 13.854 C 4.4 14.265 5.896 14.5 7.5 14.5 L 7.512 14.5 C 7.785 14.489 8 14.265 8 13.992 Z M 7.5 16.5 C 7.774 16.5 8 16.719 8 16.992 L 8 19 C 8 19.126 8.006 19.249 8.018 19.368 L 8.026 19.454 C 8.056 19.772 7.85 19.999 7.529 20 L 7.5 20 C 5.896 20 4.4 19.765 3.27 19.354 C 2.708 19.15 2.183 18.884 1.78 18.537 C 1.38 18.193 1 17.677 1 17 L 1 14.697 C 1 14.588 1.088 14.5 1.197 14.5 C 1.264 14.5 1.327 14.534 1.365 14.589 C 1.489 14.761 1.633 14.911 1.78 15.037 C 2.183 15.383 2.708 15.65 3.27 15.854 C 4.4 16.265 5.896 16.5 7.5 16.5 Z M 14.207 8.169 C 14.966 8.055 15.732 7.998 16.5 8 C 18.104 8 19.6 8.235 20.73 8.646 L 20.836 8.685 C 21.357 8.884 21.842 9.138 22.22 9.463 C 22.62 9.807 23 10.323 23 11 L 23 13 C 23 13.677 22.62 14.193 22.22 14.537 C 21.817 14.883 21.292 15.15 20.73 15.354 C 19.6 15.765 18.104 16 16.5 16 C 14.896 16 13.4 15.765 12.27 15.354 C 11.708 15.15 11.183 14.884 10.78 14.537 C 10.38 14.193 10 13.677 10 13 L 10 11 C 10 10.323 10.38 9.807 10.78 9.463 C 11.183 9.117 11.708 8.85 12.27 8.646 C 12.34 8.62 12.412 8.596 12.485 8.571 C 13.047 8.389 13.623 8.254 14.207 8.169 Z M 10 16.197 C 10 16.088 10.088 16 10.197 16 C 10.264 16 10.327 16.034 10.365 16.089 C 10.489 16.261 10.633 16.411 10.78 16.537 C 11.183 16.883 11.708 17.15 12.27 17.354 C 13.4 17.765 14.896 18 16.5 18 C 18.104 18 19.6 17.765 20.73 17.354 C 21.292 17.15 21.817 16.884 22.22 16.537 C 22.367 16.41 22.51 16.261 22.635 16.089 C 22.673 16.034 22.736 16.001 22.803 16 C 22.912 16 23 16.088 23 16.197 L 23 18.5 C 23 19.177 22.62 19.693 22.22 20.037 C 21.817 20.383 21.292 20.65 20.73 20.854 C 19.6 21.265 18.104 21.5 16.5 21.5 C 14.896 21.5 13.4 21.265 12.27 20.854 C 11.708 20.65 11.183 20.384 10.78 20.037 C 10.38 19.693 10 19.177 10 18.5 Z",
 	"coins_down": "M 9 5 C 8.678 5 8.359 5.015 8.044 5.045 C 9.714 2.112 13.045 0.542 16.37 1.121 C 19.695 1.7 22.299 4.304 22.878 7.629 C 23.457 10.954 21.887 14.285 18.954 15.955 C 18.984 15.641 19 15.322 19 15 C 19 9.477 14.523 5 9 5 Z M 7.202 7.202 C 11.509 6.209 15.805 8.895 16.798 13.202 C 17.791 17.509 15.105 21.805 10.798 22.798 C 6.492 23.791 2.196 21.104 1.203 16.798 C 0.21 12.492 2.897 8.196 7.203 7.203 Z M 10 12 C 10 11.448 9.552 11 9 11 C 8.448 11 8 11.448 8 12 L 8 16.586 L 6.707 15.293 C 6.315 14.914 5.691 14.919 5.305 15.305 C 4.919 15.691 4.914 16.315 5.293 16.707 L 8.293 19.707 C 8.683 20.097 9.317 20.097 9.707 19.707 L 12.707 16.707 C 13.086 16.315 13.081 15.691 12.695 15.305 C 12.309 14.919 11.685 14.914 11.293 15.293 L 10 16.586 Z",
 	"coins_up": "M 9 5 C 8.678 5 8.359 5.015 8.044 5.045 C 9.714 2.112 13.045 0.542 16.37 1.121 C 19.695 1.7 22.299 4.304 22.878 7.629 C 23.457 10.954 21.887 14.285 18.954 15.955 C 18.984 15.641 19 15.322 19 15 C 19 9.477 14.523 5 9 5 Z M 7.202 7.202 C 11.509 6.209 15.805 8.895 16.798 13.202 C 17.791 17.509 15.105 21.805 10.798 22.798 C 6.492 23.791 2.196 21.104 1.203 16.798 C 0.21 12.492 2.897 8.196 7.203 7.203 Z M 9.707 11.293 C 9.317 10.903 8.683 10.903 8.293 11.293 L 5.293 14.293 C 5.033 14.544 4.929 14.916 5.02 15.266 C 5.112 15.615 5.385 15.888 5.734 15.98 C 6.084 16.071 6.456 15.967 6.707 15.707 L 8 14.414 L 8 19 C 8 19.552 8.448 20 9 20 C 9.552 20 10 19.552 10 19 L 10 14.414 L 11.293 15.707 C 11.685 16.086 12.309 16.081 12.695 15.695 C 13.081 15.309 13.086 14.685 12.707 14.293 Z",
+	"unlock": "m3.998 6.07c3.608-2.084 8.211-1.05 10.582 2.377 2.37 3.427 1.713 8.099-1.511 10.739-3.224 2.641-7.934 2.364-10.827-0.635s-2.999-7.716-0.244-10.843v-1.708c0-2.582 1.652-4.875 4.102-5.692 2.45-0.816 5.148 0.026 6.698 2.092 0.331 0.442 0.242 1.069-0.2 1.4-0.442 0.332-1.069 0.242-1.4-0.2-1.033-1.377-2.832-1.939-4.465-1.394-1.634 0.544-2.735 2.073-2.735 3.794zm5 5.93c0-0.552-0.448-1-1-1-0.553 0-1 0.448-1 1v2c0 0.553 0.447 1 1 1 0.552 0 1-0.447 1-1z",
+	"redelegate": "m8 9c-3.866 0-7 3.134-7 7s3.134 7 7 7c3.866 0 7-3.134 7-7s-3.134-7-7-7zm1.0625-1.938c0.45832-3.4225 3.3898-6.062 6.9377-6.062 3.866 0 7 3.134 7 7 0 3.5479-2.6395 6.4794-6.062 6.9377-0.4847-4.1215-3.7542-7.391-7.8757-7.8757zm9.6446 10.231c0.3905 0.3905 0.3905 1.0237 0 1.4142l-0.2598 0.2598c1.4447-0.216 2.5527-1.4621 2.5527-2.9669 0-0.5523 0.4477-1 1-1s1 0.4477 1 1c0 2.6273-2.0264 4.7813-4.6014 4.9843l0.3085 0.3086c0.3905 0.3905 0.3905 1.0237 0 1.4142s-1.0237 0.3905-1.4142 0l-2-2c-0.1875-0.1875-0.2929-0.4419-0.2929-0.7071s0.1054-0.5196 0.2929-0.7071l2-2c0.3905-0.3905 1.0237-0.3905 1.4142 0zm-13.414-16c0.39053-0.39052 1.0237-0.39052 1.4142 0l2 2c0.39052 0.39053 0.39052 1.0237 0 1.4142l-2 2c-0.39053 0.39052-1.0237 0.39052-1.4142 0-0.39052-0.39053-0.39052-1.0237 0-1.4142l0.25977-0.25976c-1.4447 0.21598-2.5527 1.462-2.5527 2.9669 0 0.55228-0.44772 1-1 1s-1-0.44772-1-1c0-2.6273 2.0264-4.7813 4.6014-4.9844l-0.30855-0.30854c-0.39052-0.39053-0.39052-1.0237 0-1.4142z",
+	"grid": "m8 2c0.55228 0 1 0.44772 1 1v4h6v-4c0-0.55228 0.4477-1 1-1s1 0.44772 1 1v4h3c0.5523 0 1 0.44772 1 1s-0.4477 1-1 1h-3v6h3c0.5523 0 1 0.4477 1 1s-0.4477 1-1 1h-3v4c0 0.5523-0.4477 1-1 1s-1-0.4477-1-1v-4h-6v4c0 0.5523-0.44772 1-1 1s-1-0.4477-1-1v-4h-3c-0.55228 0-1-0.4477-1-1s0.44772-1 1-1h3v-6h-3c-0.55228 0-1-0.44772-1-1s0.44772-1 1-1h3v-4c0-0.55228 0.44772-1 1-1zm7 13v-6h-6v6h6z",
 	"tag": "M 1.442 4.761 C 1.629 4.455 1.883 4.202 2.172 3.915 L 3.914 2.17 C 4.201 1.882 4.454 1.628 4.76 1.441 C 5.028 1.277 5.321 1.155 5.627 1.082 C 5.977 0.999 6.335 1 6.742 1 L 9.758 1 C 10.165 1 10.524 1 10.872 1.083 C 11.178 1.157 11.471 1.278 11.739 1.443 C 12.045 1.629 12.299 1.883 12.586 2.171 L 20.342 9.928 C 20.912 10.498 21.382 10.967 21.732 11.381 C 22.098 11.811 22.393 12.246 22.562 12.764 C 22.823 13.567 22.823 14.433 22.562 15.236 C 22.393 15.754 22.098 16.189 21.732 16.619 C 21.382 17.033 20.912 17.503 20.342 18.072 L 18.072 20.342 C 17.502 20.912 17.033 21.382 16.619 21.732 C 16.189 22.098 15.754 22.393 15.236 22.562 C 14.433 22.823 13.567 22.823 12.764 22.562 C 12.246 22.393 11.811 22.098 11.381 21.732 C 10.967 21.382 10.497 20.912 9.928 20.342 L 2.171 12.586 C 1.883 12.298 1.629 12.045 1.442 11.739 C 1.278 11.471 1.156 11.178 1.083 10.872 C 0.999 10.524 1 10.165 1 9.758 L 1 6.742 C 1 6.335 1 5.977 1.083 5.628 C 1.157 5.322 1.278 5.029 1.443 4.761 Z M 8 6 C 6.895 6 6 6.895 6 8 C 6 9.105 6.895 10 8 10 C 9.105 10 10 9.105 10 8 C 10 6.895 9.105 6 8 6 Z",
 	"table": "M 9 20 L 20 20 C 20.55 20 21.021 19.804 21.413 19.412 C 21.805 19.02 22 18.549 22 18 L 22 16 L 9 16 Z M 2 8 L 7 8 L 7 4 L 4 4 C 3.45 4 2.979 4.196 2.587 4.588 C 2.205 4.957 1.992 5.468 2 6 Z M 2 14 L 7 14 L 7 10 L 2 10 Z M 4 20 L 7 20 L 7 16 L 2 16 L 2 18 C 2 18.55 2.196 19.02 2.588 19.413 C 2.957 19.796 3.468 20.008 4 20 Z M 9 14 L 22 14 L 22 10 L 9 10 Z M 9 8 L 22 8 L 22 6 C 22 5.45 21.804 4.98 21.412 4.587 C 21.043 4.204 20.532 3.992 20 4 L 9 4 Z",
 	"price": "M 8.044 5.045 C 8.045 5.045 8.045 5.045 8.046 5.045 C 8.045 5.045 8.045 5.046 8.045 5.046 Z M 8.046 5.045 C 9.715 2.112 13.046 0.543 16.371 1.122 C 19.696 1.701 22.3 4.305 22.879 7.63 C 23.458 10.955 21.888 14.286 18.955 15.956 C 18.985 15.641 19 15.322 19 15 C 19 9.477 14.523 5 9 5 C 8.681 5 8.363 5.015 8.046 5.045 Z M 7.202 7.202 C 11.509 6.209 15.805 8.895 16.798 13.202 C 17.791 17.509 15.105 21.805 10.798 22.798 C 6.492 23.791 2.196 21.104 1.203 16.798 C 0.21 12.492 2.897 8.196 7.203 7.203 Z M 10 12 C 10 11.631 9.797 11.292 9.472 11.118 C 9.147 10.944 8.752 10.963 8.445 11.168 L 6.945 12.168 C 6.495 12.467 6.364 13.07 6.649 13.529 C 6.934 13.988 7.533 14.137 8 13.866 L 8 16.5 L 7.5 16.5 C 6.948 16.5 6.5 16.948 6.5 17.5 C 6.5 18.052 6.948 18.5 7.5 18.5 L 10.5 18.5 C 11.052 18.5 11.5 18.052 11.5 17.5 C 11.5 16.948 11.052 16.5 10.5 16.5 L 10 16.5 Z",
diff --git a/components/modules/block/BlockOverview.vue b/components/modules/block/BlockOverview.vue
index 4bf80f7a..05b56565 100644
--- a/components/modules/block/BlockOverview.vue
+++ b/components/modules/block/BlockOverview.vue
@@ -7,9 +7,13 @@ import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
 import Tooltip from "@/components/ui/Tooltip.vue"
 import Button from "@/components/ui/Button.vue"
 import Badge from "@/components/ui/Badge.vue"
+import Popover from "@/components/ui/Popover.vue"
+import Checkbox from "@/components/ui/Checkbox.vue"
+import Input from "@/components/ui/Input.vue"
 
 /** Shared Components */
 import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
+import Events from "@/components/shared/tables/Events.vue";
 
 /** Services */
 import { tia, comma, space, formatBytes, reverseMapping } from "@/services/utils"
@@ -27,16 +31,9 @@ const cacheStore = useCacheStore()
 const bookmarksStore = useBookmarksStore()
 const notificationsStore = useNotificationsStore()
 
+const route = useRoute()
 const router = useRouter()
 
-const MapTabsTypes = {
-	PFBs: "MsgPayForBlobs",
-	Transfers: "MsgSend",
-	Register: "MsgRegisterEVMAddress",
-	Delegate: "MsgDelegate",
-}
-const ReverseMapTabsTypes = reverseMapping(MapTabsTypes)
-
 const props = defineProps({
 	block: {
 		type: Object,
@@ -54,16 +51,15 @@ const bookmarkText = computed(() => {
 	return isBookmarked.value ? "Saved" : "Save"
 })
 
-const tabs = ref(["PFBs", "Transfers", "Register", "Delegate", "Other"])
-const activeTab = ref(tabs.value[0])
+const activeTab = ref("transactions")
 
-const isRefetching = ref(false)
+const isLoading = ref(false)
 const transactions = ref([])
 
+
 const page = ref(1)
-const pages = computed(() => Math.ceil(props.block.stats.messages_counts[MapTabsTypes[activeTab.value]] / 10))
+const pages = computed(() => 1)
 const handleNext = () => {
-	if (page.value === pages.value) return
 	page.value += 1
 }
 const handlePrev = () => {
@@ -71,8 +67,146 @@ const handlePrev = () => {
 	page.value -= 1
 }
 
+/** Filters */
+const filters = reactive({
+	status: {
+		success: false,
+		failed: false,
+	},
+	message_type: props.block.message_types.sort().reduce((a, b) => ({ ...a, [b]: false }), {}),
+})
+const hasActiveFilters = computed(() => {
+	let has = false
+
+	Object.keys(filters.status).forEach((s) => {
+		if (filters.status[s]) has = true
+	})
+	Object.keys(filters.message_type).forEach((t) => {
+		if (filters.message_type[t]) has = true
+	})
+
+	return has
+})
+const savedFiltersBeforeChanges = ref(null)
+
+const handleClearAllFilters = () => {
+	Object.keys(filters.status).forEach((f) => {
+		filters.status[f] = false
+	})
+
+	Object.keys(filters.message_type).forEach((f) => {
+		filters.message_type[f] = false
+	})
+
+	router.replace({
+		query: null,
+	})
+
+	getTransactions()
+}
+
+const searchTerm = ref("")
+
+/** Parse route query */
+Object.keys(route.query).forEach((key) => {
+	if (key === "page") return
+
+	if (route.query[key].split(",").length) {
+		route.query[key].split(",").forEach((item) => {
+			filters[key][item] = true
+		})
+	} else {
+		filters[key][route.query[key]] = true
+	}
+})
+
+const updateRouteQuery = () => {
+	router.replace({
+		query: {
+			status:
+				Object.keys(filters.status).find((f) => filters.status[f]) &&
+				Object.keys(filters.status)
+					.filter((f) => filters.status[f])
+					.join(","),
+			message_type:
+				Object.keys(filters.message_type).find((f) => filters.message_type[f]) &&
+				Object.keys(filters.message_type)
+					.filter((f) => filters.message_type[f])
+					.join(","),
+		},
+	})
+}
+
+const isStatusPopoverOpen = ref(false)
+const handleOpenStatusPopover = () => {
+	isStatusPopoverOpen.value = true
+
+	if (Object.keys(filters.status).find((f) => filters.status[f])) {
+		savedFiltersBeforeChanges.value = { ...filters.status }
+	}
+}
+const onStatusPopoverClose = () => {
+	isStatusPopoverOpen.value = false
+
+	if (savedFiltersBeforeChanges.value) {
+		filters.status = savedFiltersBeforeChanges.value
+		savedFiltersBeforeChanges.value = null
+	} else {
+		resetFilters("status")
+	}
+}
+const handleApplyStatusFilters = () => {
+	savedFiltersBeforeChanges.value = null
+	isStatusPopoverOpen.value = false
+
+	getTransactions()
+
+	updateRouteQuery()
+}
+
+const isMessageTypePopoverOpen = ref(false)
+const handleOpenMessageTypePopover = () => {
+	isMessageTypePopoverOpen.value = true
+
+	if (Object.keys(filters.message_type).find((f) => filters.message_type[f])) {
+		savedFiltersBeforeChanges.value = { ...filters.message_type }
+	}
+}
+const onMessageTypePopoverClose = () => {
+	isMessageTypePopoverOpen.value = false
+
+	searchTerm.value = ""
+
+	if (savedFiltersBeforeChanges.value) {
+		filters.message_type = savedFiltersBeforeChanges.value
+		savedFiltersBeforeChanges.value = null
+	} else {
+		resetFilters("message_type")
+	}
+}
+const handleApplyMessageTypeFilters = () => {
+	savedFiltersBeforeChanges.value = null
+	isMessageTypePopoverOpen.value = false
+
+	getTransactions()
+
+	updateRouteQuery()
+}
+
+const resetFilters = (target, refetch) => {
+	Object.keys(filters[target]).forEach((f) => {
+		filters[target][f] = false
+	})
+
+	if (refetch) {
+		updateRouteQuery()
+
+		getTransactions()
+	}
+}
+
 const getTransactions = async () => {
-	isRefetching.value = true
+	isLoading.value = true
 
 	const { data } = await fetchTransactionsByBlock({
 		height: props.block.height,
@@ -80,25 +214,23 @@ const getTransactions = async () => {
 		limit: 10,
 		offset: (page.value - 1) * 10,
 		sort: "desc",
-		type: MapTabsTypes[activeTab.value],
-		excluded_types: activeTab.value === "Other" && "MsgSend,MsgDelegate,MsgPayForBlobs,MsgRegisterEVMAddress",
+		status:
+			Object.keys(filters.status).find((f) => filters.status[f]) &&
+			Object.keys(filters.status)
+				.filter((f) => filters.status[f])
+				.join(","),
+		type:
+			Object.keys(filters.message_type).find((f) => filters.message_type[f]) &&
+			Object.keys(filters.message_type)
+				.filter((f) => filters.message_type[f])
+				.join(","),
 	})
-	if (data.value?.length) {
-		transactions.value = data.value
-		cacheStore.current.transactions = transactions.value
-	}
 
-	isRefetching.value = false
-}
+	transactions.value = data.value
+	cacheStore.current.transactions = transactions.value
 
-/** Find active tab by messages count */
-let finded = false
-tabs.value.forEach((t) => {
-	if (props.block.stats.messages_counts[MapTabsTypes[t]] && !finded) {
-		finded = true
-		activeTab.value = t
-	}
-})
+	isLoading.value = false
+}
 
 await getTransactions()
 
@@ -110,7 +242,9 @@ onMounted(() => {
 watch(
 	() => page.value,
 	() => {
-		getTransactions()
+		if (activeTab.value === 'transactions') {
+			getTransactions()
+		}
 	},
 )
 
@@ -118,48 +252,11 @@ watch(
 	() => activeTab.value,
 	() => {
 		page.value = 1
-
+		
 		getTransactions()
 	},
 )
 
-const filteredTransactions = computed(() => {
-	const supportedTypes = Object.values(MapTabsTypes)
-
-	if (activeTab.value === "Other") {
-		return transactions.value.filter((t) => {
-			let f = false
-
-			t.message_types.forEach((type) => {
-				if (!supportedTypes.includes(type)) f = true
-			})
-
-			return f
-		})
-	}
-
-	return transactions.value.filter((t) => t.message_types.includes(MapTabsTypes[activeTab.value]))
-})
-
-const getTxnsCountByTab = (tab) => {
-	if (tab !== "Other") {
-		return props.block.stats.messages_counts[MapTabsTypes[tab]]
-	} else {
-		let unsupportedCounter = 0
-		const unsupportedTypes = []
-
-		Object.keys(props.block.stats.messages_counts).forEach((type) => {
-			if (!Object.values(MapTabsTypes).includes(type)) unsupportedTypes.push(type)
-		})
-
-		unsupportedTypes.forEach((type) => {
-			unsupportedCounter += props.block.stats.messages_counts[type]
-		})
-
-		return unsupportedCounter
-	}
-}
-
 const handleBookmark = () => {
 	if (!isBookmarked.value) {
 		bookmarksStore.bookmarks.blocks.push({
@@ -363,23 +460,136 @@ const handleViewRawTransactions = () => {
 				<Flex align="center" justify="between" :class="$style.tabs_wrapper">
 					<Flex gap="4" :class="$style.tabs">
 						<Flex
-							@click="activeTab = tab"
-							v-for="tab in tabs"
+							@click="activeTab = 'transactions'"
 							align="center"
 							gap="6"
-							:class="[$style.tab, activeTab === tab && $style.active, !getTxnsCountByTab(tab) && $style.hide]"
+							:class="[$style.tab, activeTab === 'transactions' && $style.active]"
 						>
-							<Text size="13" weight="600">{{ tab }}</Text>
+							<Icon name="tx" size="12" color="secondary" />
 
-							<Text v-if="getTxnsCountByTab(tab)" size="11" height="110" weight="600" :class="$style.badge">
-								{{ getTxnsCountByTab(tab) }}
-							</Text>
+							<Text size="13" weight="600">Transactions</Text>
+						</Flex>
+
+						<Flex
+							@click="activeTab = 'events'"
+							align="center"
+							gap="6"
+							:class="[$style.tab, activeTab === 'events' && $style.active]"
+						>
+							<Icon name="zap" size="12" color="secondary" />
+
+							<Text size="13" weight="600">Events</Text>
 						</Flex>
 					</Flex>
 				</Flex>
 
-				<Flex direction="column" justify="center" gap="8" :class="[$style.table, isRefetching && $style.disabled]">
-					<div v-if="filteredTransactions.length" :class="$style.table_scroller">
+				<Flex v-if="activeTab === 'transactions'" direction="column" :class="[$style.table, isLoading && $style.disabled]">
+					<Flex wrap="wrap" align="center" justify="start" gap="8" :class="$style.filters">
+						<Popover :open="isStatusPopoverOpen" @on-close="onStatusPopoverClose" width="200">
+							<Button @click="handleOpenStatusPopover" type="secondary" size="mini" :disabled="!transactions.length">
+								<Icon name="plus-circle" size="12" color="tertiary" />
+								<Text color="secondary">Status</Text>
+
+								<template v-if="Object.keys(filters.status).find((f) => filters.status[f])">
+									<div :class="$style.vertical_divider" />
+
+									<Text size="12" weight="600" color="primary" style="text-transform: capitalize">
+										{{
+											Object.keys(filters.status)
+												.filter((f) => filters.status[f])
+												.join(", ")
+										}}
+									</Text>
+
+									<Icon @click.stop="resetFilters('status', true)" name="close-circle" size="12" color="secondary" />
+								</template>
+							</Button>
+
+							<template #content>
+								<Flex direction="column" gap="12">
+									<Text size="12" weight="500" color="secondary">Filter by Status</Text>
+
+									<Flex direction="column" gap="8">
+										<Checkbox v-model="filters.status.success">
+											<Text size="12" weight="500" color="primary">Success</Text>
+										</Checkbox>
+										<Checkbox v-model="filters.status.failed">
+											<Text size="12" weight="500" color="primary">Failed</Text>
+										</Checkbox>
+									</Flex>
+
+									<Button @click="handleApplyStatusFilters" type="secondary" size="mini" wide>Apply</Button>
+								</Flex>
+							</template>
+						</Popover>
+
+						<Popover :open="isMessageTypePopoverOpen" @on-close="onMessageTypePopoverClose" width="250">
+							<Button @click="handleOpenMessageTypePopover" type="secondary" size="mini" :disabled="!transactions.length">
+								<Icon name="plus-circle" size="12" color="tertiary" />
+								<Text color="secondary">Message Type</Text>
+
+								<template v-if="Object.keys(filters.message_type).find((f) => filters.message_type[f])">
+									<div :class="$style.vertical_divider" />
+
+									<Text size="12" weight="600" color="primary">
+										{{
+											Object.keys(filters.message_type).filter((f) => filters.message_type[f]).length < 3
+												? Object.keys(filters.message_type)
+														.filter((f) => filters.message_type[f])
+														.map((f) => f.replace("Msg", ""))
+														.join(", ")
+												: `${Object.keys(filters.message_type)
+														.filter((f) => filters.message_type[f])[0]
+														.replace("Msg", "")} and ${
+														Object.keys(filters.message_type).filter((f) => filters.message_type[f]).length - 1
+												  } more`
+										}}
+									</Text>
+
+									<Icon
+										@click.stop="resetFilters('message_type', true)"
+										name="close-circle"
+										size="12"
+										color="secondary"
+									/>
+								</template>
+							</Button>
+
+							<template #content>
+								<Flex direction="column" gap="12">
+									<Text size="12" weight="500" color="secondary">Filter by Message Type</Text>
+
+									<Input v-model="searchTerm" size="small" placeholder="Search" autofocus />
+
+									<Flex direction="column" gap="8" :class="$style.message_types_list">
+										<template
+											v-if="
+												Object.keys(filters.message_type).filter((t) =>
+													t.toLowerCase().includes(searchTerm.trim().toLowerCase()),
+												).length
+											"
+										>
+											<Checkbox
+												v-for="msg_type in Object.keys(filters.message_type).filter((t) =>
+													t.toLowerCase().includes(searchTerm.trim().toLowerCase()),
+												)"
+												v-model="filters.message_type[msg_type]"
+											>
+												<Text size="12" weight="500" color="primary">{{ msg_type.replace("Msg", "") }}</Text>
+											</Checkbox>
+										</template>
+										<Flex v-else direction="column" gap="8">
+											<Text size="12" weight="500" color="tertiary">Nothing was found</Text>
+										</Flex>
+									</Flex>
+
+									<Button @click="handleApplyMessageTypeFilters" type="secondary" size="mini" wide>Apply</Button>
+								</Flex>
+							</template>
+						</Popover>
+					</Flex>					
+
+					<Flex v-if="transactions.length" :class="$style.table_scroller">
 						<table>
 							<thead>
 								<tr>
@@ -391,7 +601,7 @@ const handleViewRawTransactions = () => {
 							</thead>
 
 							<tbody>
-								<tr v-for="tx in filteredTransactions">
+								<tr v-for="tx in transactions">
 									<td style="width: 1px">
 										<NuxtLink :to="`/tx/${tx.hash}`">
 											<Tooltip position="start" delay="500">
@@ -491,36 +701,56 @@ const handleViewRawTransactions = () => {
 								</tr>
 							</tbody>
 						</table>
-					</div>
+					</Flex>
+					<Flex
+						v-else-if="hasActiveFilters && !transactions.length"
+						align="center"
+						justify="center"
+						direction="column"
+						gap="20"
+						wide
+						:class="$style.empty"
+					>
+						<Icon name="search" size="24" color="support" />
+
+						<Flex direction="column" gap="8">
+							<Text size="13" weight="600" color="secondary" align="center"> Nothing was found </Text>
+							<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
+								Clear filters to see all transactions
+							</Text>
+						</Flex>
+
+						<Button @click="handleClearAllFilters" type="secondary" size="small">Clear all filters</Button>
+					</Flex>
 
-					<Flex v-else-if="!isRefetching" align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
+					<Flex v-else direction="column" align="center" justify="center" gap="8" :class="$style.empty">
 						<Text size="13" weight="600" color="secondary" align="center"> No transactions </Text>
 						<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
-							This block does not contain transactions of the selected type
+							This block does not contain any transactions
 						</Text>
 					</Flex>
 
 					<!-- Pagination -->
-					<Flex v-if="filteredTransactions.length && pages > 1" align="center" gap="6" :class="$style.pagination">
-						<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1">
+					<Flex v-if="transactions.length < 10" align="center" gap="6" :class="$style.pagination">
+						<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1 || transactions.length !== 10">
 							<Icon name="arrow-left-stop" size="12" color="primary" />
 						</Button>
-						<Button type="secondary" @click="handlePrev" size="mini" :disabled="page === 1">
+						<Button type="secondary" @click="handlePrev" size="mini" :disabled="page === 1 || transactions.length !== 10">
 							<Icon name="arrow-left" size="12" color="primary" />
 						</Button>
 
 						<Button type="secondary" size="mini" disabled>
-							<Text size="12" weight="600" color="primary"> {{ page }} of {{ pages }} </Text>
+							<Text size="12" weight="600" color="primary">Page {{ page }}</Text>
 						</Button>
 
-						<Button @click="handleNext" type="secondary" size="mini" :disabled="page === pages">
+						<Button @click="handleNext" type="secondary" size="mini" :disabled="transactions.length !== 10">
 							<Icon name="arrow-right" size="12" color="primary" />
 						</Button>
-						<Button @click="page = pages" type="secondary" size="mini" :disabled="page === pages">
-							<Icon name="arrow-right-stop" size="12" color="primary" />
-						</Button>
 					</Flex>
 				</Flex>
+				<Events v-else :block="block">
+
+				</Events>
 			</Flex>
 		</Flex>
 	</Flex>
@@ -618,6 +848,17 @@ const handleViewRawTransactions = () => {
 	overflow-x: auto;
 }
 
+.inner {
+	height: 100%;
+
+	border-radius: 4px 4px 8px 4px;
+	background: var(--card-background);
+}
+
+.events {
+	padding: 16px;
+}
+
 .table {
 	height: 100%;
 
@@ -652,7 +893,7 @@ const handleViewRawTransactions = () => {
 			text-align: left;
 			padding: 0;
 			padding-right: 16px;
-			padding-top: 16px;
+			padding-top: 4px;
 			padding-bottom: 8px;
 
 			&:first-child {
@@ -697,12 +938,19 @@ const handleViewRawTransactions = () => {
 	padding: 4px 6px;
 }
 
+.filters {
+	border-bottom: 1px dashed var(--op-8);
+
+	padding: 12px 8px 12px 8px;
+}
+
 .empty {
+	flex: 1;
 	padding: 16px 0;
 }
 
 .pagination {
-	padding: 0 16px 16px 16px;
+	padding: 8px 16px 16px 16px;
 }
 
 @media (max-width: 800px) {
diff --git a/components/modules/tx/MessagesTable.vue b/components/modules/tx/MessagesTable.vue
index fceb47af..1f7d7745 100644
--- a/components/modules/tx/MessagesTable.vue
+++ b/components/modules/tx/MessagesTable.vue
@@ -3,7 +3,7 @@
 import { DateTime } from "luxon"
 
 /** UI */
-import Tooltip from "@/components/ui/Tooltip.vue"
+import Button from "~/components/ui/Button.vue"
 
 /** Shared Components */
 import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
@@ -31,51 +31,101 @@ const handleViewRawMessage = (message) => {
 	cacheStore.current.message = message
 	modalsStore.open("rawData")
 }
+
+// Pagination
+const page = ref(1)
+const itemsPerPage = 10
+const pages = computed(() => Math.ceil(props.messages.length / itemsPerPage))
+const messagesToShow = computed(() => {
+	let start = (page.value - 1) * itemsPerPage;
+	let end = start + itemsPerPage;
+	return props.messages.slice(start, end); 
+})
+const handleNext = () => {
+	if (page.value === pages.value) return
+	page.value += 1
+}
+const handlePrev = () => {
+	if (page.value === 1) return
+	page.value -= 1
+}
 </script>
 
 <template>
-	<div :class="$style.wrapper_tx_messages">
-		<table :class="$style.table">
-			<thead>
-				<tr>
-					<th><Text size="12" weight="600" color="tertiary">Type</Text></th>
-					<th><Text size="12" weight="600" color="tertiary">Time</Text></th>
-					<th><Text size="12" weight="600" color="tertiary">Block</Text></th>
-				</tr>
-			</thead>
-
-			<tbody>
-				<tr v-for="message in messages" @click="handleViewRawMessage(message)">
-					<td style="width: 1px">
-						<Flex align="center">
-							<MessageTypeBadge :types="[message.type]" />
-						</Flex>
-					</td>
-					<td>
-						<Flex align="center">
-							<Text size="13" weight="600" color="primary">
-								{{ DateTime.fromISO(message.time).toRelative({ locale: "en", style: "short" }) }}
-							</Text>
-						</Flex>
-					</td>
-					<td>
-						<Flex align="center">
-							<Outline @click.stop="router.push(`/block/${message.height}`)">
-								<Flex align="center" gap="6">
-									<Icon name="block" size="14" color="secondary" />
-
-									<Text size="13" weight="600" color="primary" tabular>{{ comma(message.height) }}</Text>
-								</Flex>
-							</Outline>
-						</Flex>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</div>
+	<Flex direction="column" justify="between" :class="$style.data">
+		<div :class="$style.wrapper_tx_messages">
+			<table :class="$style.table">
+				<thead>
+					<tr>
+						<th><Text size="12" weight="600" color="tertiary">Type</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Time</Text></th>
+						<th><Text size="12" weight="600" color="tertiary">Block</Text></th>
+					</tr>
+				</thead>
+
+				<tbody>
+					<tr v-for="message in messagesToShow" @click="handleViewRawMessage(message)">
+						<td style="width: 1px">
+							<Flex align="center">
+								<MessageTypeBadge :types="[message.type]" />
+							</Flex>
+						</td>
+						<td>
+							<Flex align="center">
+								<Text size="13" weight="600" color="primary">
+									{{ DateTime.fromISO(message.time).toRelative({ locale: "en", style: "short" }) }}
+								</Text>
+							</Flex>
+						</td>
+						<td>
+							<Flex align="center">
+								<Outline @click.stop="router.push(`/block/${message.height}`)">
+									<Flex align="center" gap="6">
+										<Icon name="block" size="14" color="secondary" />
+
+										<Text size="13" weight="600" color="primary" tabular>{{ comma(message.height) }}</Text>
+									</Flex>
+								</Outline>
+							</Flex>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+
+		<!-- Pagination -->
+		<Flex v-if="messagesToShow.length && pages === 1" 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="handlePrev" 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 }} of {{ pages }} </Text>
+			</Button>
+
+			<Button @click="handleNext" type="secondary" size="mini" :disabled="page === pages">
+				<Icon name="arrow-right" size="12" color="primary" />
+			</Button>
+			<Button @click="page = pages" type="secondary" size="mini" :disabled="page === pages">
+				<Icon name="arrow-right-stop" size="12" color="primary" />
+			</Button>
+		</Flex>
+	</Flex>
 </template>
 
 <style module>
+.data {
+	min-width: 100%;
+	height: 100%;
+
+	overflow-x: auto;
+
+	background: var(--card-background);
+}
+
 .wrapper_tx_messages {
 	min-width: 100%;
 	width: 0;
@@ -137,4 +187,8 @@ const handleViewRawMessage = (message) => {
 		}
 	}
 }
-</style>
+
+.pagination {
+	padding: 0 16px 16px 16px;
+}
+</style>
\ No newline at end of file
diff --git a/components/modules/tx/TxOverview.vue b/components/modules/tx/TxOverview.vue
index 9a271993..fe03fbf5 100644
--- a/components/modules/tx/TxOverview.vue
+++ b/components/modules/tx/TxOverview.vue
@@ -3,8 +3,8 @@
 import { DateTime } from "luxon"
 
 /** UI */
+import Events from "@/components/shared/tables/Events.vue"
 import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
-import Tooltip from "~/components/ui/Tooltip.vue"
 import Button from "~/components/ui/Button.vue"
 
 /** Shared Components */
@@ -12,10 +12,10 @@ import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
 import MessagesTable from "@/components/modules/tx/MessagesTable.vue"
 
 /** Services */
-import { comma, tia, splitAddress } from "@/services/utils"
+import { comma, tia } from "@/services/utils"
 
 /** API */
-import { fetchTxEvents, fetchTxMessages } from "@/services/api/tx"
+import { fetchTxMessages } from "@/services/api/tx"
 
 /** Store */
 import { useModalsStore } from "@/store/modals"
@@ -29,16 +29,6 @@ const notificationsStore = useNotificationsStore()
 
 const router = useRouter()
 
-const EventIconMapping = {
-	message: "message",
-	coin_received: "coins_down",
-	coin_spent: "coins_up",
-	transfer: "arrow-circle-right-up",
-	withdraw_rewards: "coins",
-	withdraw_commission: "tag",
-	tx: "zap",
-}
-
 const props = defineProps({
 	tx: {
 		type: Object,
@@ -54,31 +44,13 @@ const bookmarkText = computed(() => {
 })
 
 const activeTab = ref("messages")
-
 const messages = ref([])
 
-const offset = ref(0)
-const events = ref([])
-
-const handleLoadMore = async () => {
-	if (events.length === props.tx.events_count) return
-
-	offset.value += 10
-
-	const rawEvents = await fetchTxEvents({ hash: props.tx.hash, offset: offset.value })
-	events.value = [...events.value, ...rawEvents].sort((a, b) => a.position - b.position)
-	cacheStore.current.events = events.value
-}
-
 onMounted(async () => {
 	isBookmarked.value = !!bookmarksStore.bookmarks.txs.find((t) => t.id === props.tx.hash)
 
 	const data = await fetchTxMessages(props.tx.hash)
 	messages.value = data
-
-	const rawEvents = await fetchTxEvents({ hash: props.tx.hash })
-	events.value = rawEvents.sort((a, b) => a.position - b.position)
-	cacheStore.current.events = events.value
 })
 
 const handleBookmark = () => {
@@ -127,17 +99,6 @@ const handleViewRawTransaction = () => {
 	cacheStore.current._target = "transaction"
 	modalsStore.open("rawData")
 }
-
-const handleViewRawEvents = () => {
-	cacheStore.current._target = "events"
-	modalsStore.open("rawData")
-}
-
-const handleViewRawEvent = (event) => {
-	cacheStore.current._target = "event"
-	cacheStore.current.event = event
-	modalsStore.open("rawData")
-}
 </script>
 
 <template>
@@ -172,7 +133,6 @@ const handleViewRawEvent = (event) => {
 
 					<template #popup>
 						<DropdownItem @click="handleViewRawTransaction"> View Raw Transaction </DropdownItem>
-						<DropdownItem @click="handleViewRawEvents"> View Raw Events </DropdownItem>
 					</template>
 				</Dropdown>
 			</Flex>
@@ -324,292 +284,12 @@ const handleViewRawEvent = (event) => {
 					</Flex>
 				</Flex>
 
-				<Flex v-if="activeTab === 'events'" direction="column" :class="[$style.inner, $style.events]">
-					<Flex v-for="(event, idx) in events" @click="handleViewRawEvent(event)" align="center" gap="12" :class="$style.event">
-						<Flex
-							direction="column"
-							align="center"
-							gap="6"
-							:class="[$style.left, idx === 0 && $style.first, idx === events.length - 1 && $style.last]"
-						>
-							<div />
-							<Icon :name="EventIconMapping[event.type] ? EventIconMapping[event.type] : 'zap'" size="12" color="tertiary" />
-							<div />
-						</Flex>
-
-						<Flex wide justify="between" align="center" gap="6" :class="$style.right">
-							<!-- Event: coin_spent -->
-							<Flex v-if="event.type === 'coin_spent'" align="center" gap="4" color="secondary" :class="$style.text">
-								<Text size="12" weight="500" color="secondary">Address</Text>
-
-								<Tooltip :class="$style.tooltip">
-									<NuxtLink :to="`/address/${event.data.spender}`" @click.stop>
-										<Text size="12" weight="500" color="primary" mono>
-											{{ splitAddress(event.data.spender) }}
-										</Text>
-									</NuxtLink>
-
-									<template #content>
-										{{ event.data.spender }}
-									</template>
-								</Tooltip>
-
-								<Text size="12" weight="500" color="secondary">spent</Text>
-
-								<Text size="12" weight="500" color="primary" mono no-wrap>
-									{{ tia(event.data.amount.replace("utia", "")) }} TIA</Text
-								>
-							</Flex>
-							<!-- Event: coin_received -->
-							<Flex v-else-if="event.type === 'coin_received'" align="center" gap="4" color="secondary" :class="$style.text">
-								<Text size="12" weight="500" color="secondary">Address</Text>
-
-								<Tooltip :class="$style.tooltip">
-									<NuxtLink :to="`/address/${event.data.receiver}`" @click.stop>
-										<Text size="12" weight="500" color="primary" mono>
-											{{ splitAddress(event.data.receiver) }}
-										</Text>
-									</NuxtLink>
-
-									<template #content>
-										{{ event.data.receiver }}
-									</template>
-								</Tooltip>
-
-								<Text size="12" weight="500" color="secondary">received</Text>
-
-								<Text size="12" weight="500" color="primary" mono no-wrap>
-									{{ tia(event.data.amount.replace("utia", "")) }} TIA
-								</Text>
-							</Flex>
-							<!-- Event: delegate -->
-							<Flex v-else-if="event.type === 'delegate'" align="center" gap="4" color="secondary" :class="$style.text">
-								<Text size="12" weight="500" color="secondary">Validator</Text>
-
-								<Tooltip :class="$style.tooltip">
-									<NuxtLink :to="`/address/${event.data.validator}`" @click.stop>
-										<Text size="12" weight="500" color="primary" mono>
-											{{ splitAddress(event.data.validator) }}
-										</Text>
-									</NuxtLink>
-
-									<template #content>
-										{{ event.data.validator }}
-									</template>
-								</Tooltip>
-
-								<Text size="12" weight="500" color="secondary">for</Text>
-
-								<Text size="12" weight="500" color="primary" mono>
-									{{ event.data.amount }}
-								</Text>
-							</Flex>
-							<!-- Event: transfer -->
-							<Flex v-else-if="event.type === 'transfer'" align="center" gap="4" color="secondary" :class="$style.text">
-								<Text size="12" weight="500" color="secondary">Address</Text>
-
-								<Tooltip :class="$style.tooltip">
-									<NuxtLink :to="`/address/${event.data.sender}`" @click.stop>
-										<Text size="12" weight="500" color="primary" mono>
-											{{ splitAddress(event.data.sender) }}
-										</Text>
-									</NuxtLink>
-
-									<template #content>
-										{{ event.data.sender }}
-									</template>
-								</Tooltip>
-
-								<Text size="12" weight="500" color="secondary">sent</Text>
-
-								<Text size="12" weight="500" color="primary" mono no-wrap>
-									{{ tia(event.data.amount.replace("utia", "")) }} TIA</Text
-								>
-
-								<Text size="12" weight="500" color="secondary">to</Text>
-
-								<Tooltip :class="$style.tooltip">
-									<NuxtLink :to="`/address/${event.data.recipient}`" @click.stop>
-										<Text size="12" weight="500" color="primary" mono>
-											{{ splitAddress(event.data.recipient) }}
-										</Text>
-									</NuxtLink>
-
-									<template #content>
-										{{ event.data.recipient }}
-									</template>
-								</Tooltip>
-							</Flex>
-							<!-- Event: tx -->
-							<Flex v-else-if="event.type === 'tx'" align="center" gap="4" color="secondary" :class="$style.text">
-								<!-- Signature -->
-								<template v-if="event.data.signature">
-									<Text size="12" weight="500" color="secondary">Signature</Text>
-
-									<Tooltip :class="$style.tooltip">
-										<Text size="12" weight="500" color="primary" mono>
-											{{ event.data.signature.slice(event.data.signature.length - 4, event.data.signature.length) }}
-										</Text>
-
-										<template #content>
-											{{ event.data.signature }}
-										</template>
-									</Tooltip>
-								</template>
-								<!-- acc_seq -->
-								<template v-if="event.data.acc_seq">
-									<Text size="12" weight="500" color="secondary">Acc</Text>
-
-									<Tooltip :class="$style.tooltip">
-										<NuxtLink :to="`/address/${event.data.acc_seq.split('/')[0]}`" @click.stop>
-											<Text size="12" weight="500" color="primary" mono>
-												{{ splitAddress(event.data.acc_seq.split("/")[0]) }}
-											</Text>
-										</NuxtLink>
-
-										<template #content>
-											{{ event.data.acc_seq.split("/")[0] }}
-										</template>
-									</Tooltip>
-
-									<template v-if="event.data.acc_seq.split('/')[1]">
-										<Text size="12" weight="500" color="secondary">Seq</Text>
-
-										<Text size="12" weight="500" color="primary" mono>
-											{{ event.data.acc_seq.split("/")[1] }}
-										</Text>
-									</template>
-								</template>
-								<!-- fee -->
-								<template v-if="event.data.fee">
-									<Text size="12" weight="500" color="secondary">Address</Text>
-
-									<Tooltip :class="$style.tooltip">
-										<NuxtLink :to="`/address/${event.data.fee_payer}`" @click.stop>
-											<Text size="12" weight="500" color="primary" mono>
-												{{ splitAddress(event.data.fee_payer) }}
-											</Text>
-										</NuxtLink>
-
-										<template #content>
-											{{ event.data.fee_payer }}
-										</template>
-									</Tooltip>
-
-									<Text size="12" weight="500" color="secondary">paid</Text>
-
-									<Text size="12" weight="500" color="primary" mono no-wrap>
-										{{ tia(event.data.fee.replace("utia", "")) }} TIA</Text
-									>
-
-									<Text size="12" weight="500" color="secondary">fee</Text>
-								</template>
-							</Flex>
-							<!-- Event: message -->
-							<Flex v-else-if="event.type === 'message'" align="center" gap="4" color="secondary" :class="$style.text">
-								<!-- action -->
-								<template v-if="event.data.action">
-									<Text size="12" weight="500" color="secondary" no-wrap>Call action</Text>
-
-									<Text size="12" weight="500" color="primary" mono>
-										{{ event.data.action }}
-									</Text>
-								</template>
-								<!-- sender -->
-								<template v-else-if="event.data.sender">
-									<Text size="12" weight="500" color="secondary">Sender</Text>
-
-									<Tooltip :class="$style.tooltip">
-										<NuxtLink :to="`/address/${event.data.sender}`" @click.stop>
-											<Text size="12" weight="500" color="primary" mono>
-												{{ splitAddress(event.data.sender) }}
-											</Text>
-										</NuxtLink>
-
-										<template #content>
-											{{ event.data.sender }}
-										</template>
-									</Tooltip>
-								</template>
-								<!-- sender -->
-								<template v-else-if="event.data.module">
-									<Text size="12" weight="500" color="secondary">Module</Text>
-
-									<Text size="12" weight="500" color="primary" mono>
-										{{ event.data.module }}
-									</Text>
-								</template>
-							</Flex>
-							<!-- Event: withdraw_rewards -->
-							<Flex
-								v-else-if="event.type === 'withdraw_rewards'"
-								align="center"
-								gap="4"
-								color="secondary"
-								:class="$style.text"
-							>
-								<Text size="12" weight="500" color="secondary">Delegator</Text>
-
-								<Tooltip :class="$style.tooltip">
-									<NuxtLink :to="`/address/${event.data.delegator}`" @click.stop>
-										<Text size="12" weight="500" color="primary" mono>
-											{{ splitAddress(event.data.delegator) }}
-										</Text>
-									</NuxtLink>
-
-									<template #content>
-										{{ event.data.delegator }}
-									</template>
-								</Tooltip>
-
-								<Text size="12" weight="500" color="secondary">validator</Text>
-
-								<Tooltip :class="$style.tooltip">
-									<NuxtLink :to="`/address/${event.data.validator}`" @click.stop>
-										<Text size="12" weight="500" color="primary" mono>
-											{{ splitAddress(event.data.validator) }}
-										</Text>
-									</NuxtLink>
-
-									<template #content>
-										{{ event.data.validator }}
-									</template>
-								</Tooltip>
-
-								<Text size="12" weight="500" color="secondary">Amount:</Text>
-
-								<Text size="12" weight="500" color="primary" mono no-wrap>
-									{{ tia(event.data.amount.replace("utia", "")) }} TIA
-								</Text>
-							</Flex>
-							<!-- Event: withdraw_commission -->
-							<Flex
-								v-else-if="event.type === 'withdraw_commission'"
-								align="center"
-								gap="4"
-								color="secondary"
-								:class="$style.text"
-							>
-								<Text size="12" weight="500" color="secondary">Commission</Text>
-
-								<Text size="12" weight="500" color="primary" mono no-wrap>
-									{{ tia(event.data.amount.replace("utia", "")) }} TIA
-								</Text>
-							</Flex>
-
-							<Text size="12" weight="600" color="tertiary" mono>
-								{{ event.type }}
-							</Text>
-						</Flex>
-					</Flex>
-
-					<Button v-if="tx.events_count !== events.length" @click="handleLoadMore" type="secondary" size="mini">
-						Load More
-					</Button>
-				</Flex>
 				<Flex v-if="activeTab === 'messages'" :class="$style.inner">
 					<MessagesTable :messages="messages" />
 				</Flex>
+				<Flex v-if="activeTab === 'events'" :class="$style.inner">
+					<Events :tx="tx" />
+				</Flex>
 			</Flex>
 		</Flex>
 	</Flex>
diff --git a/components/shared/tables/Events.vue b/components/shared/tables/Events.vue
new file mode 100644
index 00000000..edfacf74
--- /dev/null
+++ b/components/shared/tables/Events.vue
@@ -0,0 +1,835 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** UI */
+import Tooltip from "~/components/ui/Tooltip.vue"
+import Button from "~/components/ui/Button.vue"
+
+/** Services */
+import { tia, splitAddress } from "@/services/utils"
+
+/** API */
+import { fetchTxEvents } from "@/services/api/tx"
+import { fetchBlockEvents } from "@/services/api/block"
+
+/** Store */
+import { useModalsStore } from "@/store/modals"
+import { useCacheStore } from "@/store/cache"
+const modalsStore = useModalsStore()
+const cacheStore = useCacheStore()
+
+const router = useRouter()
+
+const props = defineProps({
+	block: {
+		type: Object,
+	},
+	tx: {
+		type: Object,
+	},
+})
+
+const isLoading = ref(false)
+const events = ref([])
+
+const EventIconMapping = {
+	message: "message",
+	coin_received: "coins_down",
+	coin_spent: "coins_up",
+	transfer: "arrow-circle-right-up",
+	withdraw_rewards: "coins",
+	withdraw_commission: "tag",
+	tx: "zap",
+	proposer_reward: "coins_down",
+	commission: "coins_down",
+	rewards: "coins_down",
+	mint: "coins_down",
+	coinbase: "coins_down",
+	unbond: "unlock",
+	redelegate: "redelegate",
+	complete_unbonding: "unlock",
+	complete_redelegation: "redelegate",
+	slash: "grid",
+	cancel_unbonding_delegation: "unlock",
+	liveness: "close-circle",
+}
+
+const getEvents = async () => {
+	isLoading.value = true
+
+	if (props.block) {
+		events.value = await fetchBlockEvents({ 
+			height: props.block.height,
+			limit: 10,
+			offset: (page.value - 1) * 10,
+		}) 
+	} else if (props.tx) {
+		events.value = await fetchTxEvents({
+			hash: props.tx.hash,
+			limit: 10,
+			offset: (page.value - 1) * 10,
+		})
+	}
+
+	isLoading.value = false
+}
+
+const handleViewRawEvent = (event) => {
+	cacheStore.current._target = "event"
+	cacheStore.current.event = event
+	modalsStore.open("rawData")
+}
+
+const page = ref(1)
+const pages = computed(() => (
+	props.block
+		? Math.ceil(props.block.stats.events_count / 10)
+		: Math.ceil(props.tx.events_count / 10))
+)
+const handleNext = () => {
+	if (page.value === pages.value) return
+	page.value += 1
+}
+const handlePrev = () => {
+	if (page.value === 1) return
+	page.value -= 1
+}
+
+onMounted(() => {
+	getEvents();
+})
+
+/** Refetch events */
+watch(
+	() => page.value,
+	() => {
+		getEvents()
+	},
+)
+</script>
+
+<template>
+	<Flex direction="column" justify="between" :class="$style.data">
+		<Flex direction="column" :class="[$style.inner, $style.events]">
+			<Flex v-for="(event, idx) in events" @click="handleViewRawEvent(event)" align="center" gap="12" :class="$style.event">
+				<Flex
+					direction="column"
+					align="center"
+					gap="6"
+					:class="[$style.left, idx === 0 && $style.first, idx === events.length - 1 && $style.last]"
+				>
+					<div />
+					<Icon :name="EventIconMapping[event.type] ? EventIconMapping[event.type] : 'zap'" size="12" color="tertiary" />
+					<div />
+				</Flex>
+
+				<Flex wide justify="between" align="center" gap="6" :class="$style.right">
+					<!-- Event: coin_spent -->
+					<Flex v-if="event.type === 'coin_spent'" align="center" gap="4" color="secondary" :class="$style.text">
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.spender}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.spender) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.spender }}
+							</template>
+						</Tooltip>
+
+						<Text size="12" weight="500" color="secondary">spent</Text>
+
+						<Text size="12" weight="500" color="primary" mono no-wrap>
+							{{ tia(event.data.amount.replace("utia", "")) }} TIA</Text
+						>
+					</Flex>
+					<!-- Event: coin_received -->
+					<Flex v-else-if="event.type === 'coin_received'" align="center" gap="4" color="secondary" :class="$style.text">
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.receiver}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.receiver) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.receiver }}
+							</template>
+						</Tooltip>
+
+						<Text size="12" weight="500" color="secondary">received</Text>
+
+						<Text size="12" weight="500" color="primary" mono no-wrap>
+							{{ tia(event.data.amount.replace("utia", "")) }} TIA
+						</Text>
+					</Flex>
+					<!-- Event: delegate -->
+					<Flex v-else-if="event.type === 'delegate'" align="center" gap="4" color="secondary" :class="$style.text">
+						<Text size="12" weight="500" color="secondary">Validator</Text>
+
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.validator}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.validator) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.validator }}
+							</template>
+						</Tooltip>
+
+						<Text size="12" weight="500" color="secondary">for</Text>
+
+						<Text size="12" weight="500" color="primary" mono>
+							{{ event.data.amount }}
+						</Text>
+					</Flex>
+					<!-- Event: transfer -->
+					<Flex v-else-if="event.type === 'transfer'" align="center" gap="4" color="secondary" :class="$style.text">
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.sender}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.sender) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.sender }}
+							</template>
+						</Tooltip>
+
+						<Text size="12" weight="500" color="secondary">sent</Text>
+
+						<Text size="12" weight="500" color="primary" mono no-wrap>
+							{{ tia(event.data.amount.replace("utia", "")) }} TIA</Text
+						>
+
+						<Text size="12" weight="500" color="secondary">to</Text>
+
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.recipient}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.recipient) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.recipient }}
+							</template>
+						</Tooltip>
+					</Flex>
+					<!-- Event: tx -->
+					<Flex v-else-if="event.type === 'tx'" align="center" gap="4" color="secondary" :class="$style.text">
+						<!-- Signature -->
+						<template v-if="event.data.signature">
+							<Text size="12" weight="500" color="secondary">Signature</Text>
+
+							<Tooltip :class="$style.tooltip">
+								<Text size="12" weight="500" color="primary" mono>
+									{{ event.data.signature.slice(event.data.signature.length - 4, event.data.signature.length) }}
+								</Text>
+
+								<template #content>
+									{{ event.data.signature }}
+								</template>
+							</Tooltip>
+						</template>
+						<!-- acc_seq -->
+						<template v-if="event.data.acc_seq">
+							<Text size="12" weight="500" color="secondary">Acc</Text>
+
+							<Tooltip :class="$style.tooltip">
+								<NuxtLink :to="`/address/${event.data.acc_seq.split('/')[0]}`" @click.stop>
+									<Text size="12" weight="500" color="primary" mono>
+										{{ splitAddress(event.data.acc_seq.split("/")[0]) }}
+									</Text>
+								</NuxtLink>
+
+								<template #content>
+									{{ event.data.acc_seq.split("/")[0] }}
+								</template>
+							</Tooltip>
+
+							<template v-if="event.data.acc_seq.split('/')[1]">
+								<Text size="12" weight="500" color="secondary">Seq</Text>
+
+								<Text size="12" weight="500" color="primary" mono>
+									{{ event.data.acc_seq.split("/")[1] }}
+								</Text>
+							</template>
+						</template>
+						<!-- fee -->
+						<template v-if="event.data.fee">
+							<Tooltip :class="$style.tooltip">
+								<NuxtLink :to="`/address/${event.data.fee_payer}`" @click.stop>
+									<Text size="12" weight="500" color="primary" mono>
+										{{ splitAddress(event.data.fee_payer) }}
+									</Text>
+								</NuxtLink>
+
+								<template #content>
+									{{ event.data.fee_payer }}
+								</template>
+							</Tooltip>
+
+							<Text size="12" weight="500" color="secondary">paid</Text>
+
+							<Text size="12" weight="500" color="primary" mono no-wrap>
+								{{ tia(event.data.fee.replace("utia", "")) }} TIA</Text
+							>
+
+							<Text size="12" weight="500" color="secondary">fee</Text>
+						</template>
+					</Flex>
+					<!-- Event: message -->
+					<Flex v-else-if="event.type === 'message'" align="center" gap="4" color="secondary" :class="$style.text">
+						<!-- action -->
+						<template v-if="event.data.action">
+							<Text size="12" weight="500" color="secondary" no-wrap>Call action</Text>
+
+							<Text size="12" weight="500" color="primary" mono>
+								{{ event.data.action }}
+							</Text>
+						</template>
+						<!-- sender -->
+						<template v-else-if="event.data.sender">
+							<Text size="12" weight="500" color="secondary">Sender</Text>
+
+							<Tooltip :class="$style.tooltip">
+								<NuxtLink :to="`/address/${event.data.sender}`" @click.stop>
+									<Text size="12" weight="500" color="primary" mono>
+										{{ splitAddress(event.data.sender) }}
+									</Text>
+								</NuxtLink>
+
+								<template #content>
+									{{ event.data.sender }}
+								</template>
+							</Tooltip>
+						</template>
+						<!-- sender -->
+						<template v-else-if="event.data.module">
+							<Text size="12" weight="500" color="secondary">Module</Text>
+
+							<Text size="12" weight="500" color="primary" mono>
+								{{ event.data.module }}
+							</Text>
+						</template>
+					</Flex>
+					<!-- Event: withdraw_rewards -->
+					<Flex
+						v-else-if="event.type === 'withdraw_rewards'"
+						align="center"
+						gap="4"
+						color="secondary"
+						:class="$style.text"
+					>
+						<Text size="12" weight="500" color="secondary">Delegator</Text>
+
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.delegator}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.delegator) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.delegator }}
+							</template>
+						</Tooltip>
+
+						<Text size="12" weight="500" color="secondary">validator</Text>
+
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.validator}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.validator) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.validator }}
+							</template>
+						</Tooltip>
+
+						<Text size="12" weight="500" color="secondary">Amount:</Text>
+
+						<Text size="12" weight="500" color="primary" mono no-wrap>
+							{{ tia(event.data.amount.replace("utia", "")) }} TIA
+						</Text>
+					</Flex>
+					<!-- Event: withdraw_commission -->
+					<Flex
+						v-else-if="event.type === 'withdraw_commission'"
+						align="center"
+						gap="4"
+						color="secondary"
+						:class="$style.text"
+					>
+						<Text size="12" weight="500" color="secondary">Commission</Text>
+
+						<Text size="12" weight="500" color="primary" mono no-wrap>
+							{{ tia(event.data.amount.replace("utia", "")) }} TIA
+						</Text>
+					</Flex>
+					<!-- Event: proposer_reward -->
+					<Flex v-else-if="event.type === 'proposer_reward'" align="center" gap="4" color="secondary" :class="$style.text">
+						<Text size="12" weight="500" color="secondary">Proposer</Text>
+
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.validator}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.validator) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.validator }}
+							</template>
+						</Tooltip>
+
+						<Text size="12" weight="500" color="secondary">received rewards</Text>
+
+						<Text size="12" weight="500" color="primary" mono no-wrap>
+							{{ event.data.amount ? tia(event.data.amount.replace("utia", "")) : 0 }} TIA
+						</Text>
+					</Flex>
+					<!-- Event: rewards -->
+					<Flex v-else-if="event.type === 'rewards'" align="center" gap="4" color="secondary" :class="$style.text">
+						<Text size="12" weight="500" color="secondary">Validator</Text>
+
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.validator}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.validator) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.validator }}
+							</template>
+						</Tooltip>
+
+						<Text size="12" weight="500" color="secondary">received rewards</Text>
+
+						<Text size="12" weight="500" color="primary" mono no-wrap>
+							{{ event.data.amount ? tia(event.data.amount.replace("utia", "")) : 0 }} TIA
+						</Text>
+					</Flex>
+					<!-- Event: commission -->
+					<Flex v-else-if="event.type === 'commission'" align="center" gap="4" color="secondary" :class="$style.text">
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.validator}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.validator) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.validator }}
+							</template>
+						</Tooltip>
+
+						<Text size="12" weight="500" color="secondary">received commission of</Text>
+
+						<Text size="12" weight="500" color="primary" mono no-wrap>
+							{{ event.data.amount ? tia(event.data.amount.replace("utia", "")) : 0 }} TIA
+						</Text>
+					</Flex>
+					<!-- Event: coinbase -->
+					<Flex v-else-if="event.type === 'coinbase'" align="center" gap="4" color="secondary" :class="$style.text">
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.minter}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.minter) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.minter }}
+							</template>
+						</Tooltip>
+
+						<Text size="12" weight="500" color="secondary">received</Text>
+
+						<Text size="12" weight="500" color="primary" mono no-wrap>
+							{{ event.data.amount ? tia(event.data.amount.replace("utia", "")) : 0 }} TIA
+						</Text>
+					</Flex>
+					<!-- Event: mint -->
+					<Flex v-else-if="event.type === 'mint'" align="center" gap="4" color="secondary" :class="$style.text">
+						<Text size="12" weight="500" color="primary" mono no-wrap>
+							{{ event.data.amount ? tia(event.data.amount.replace("utia", "")) : 0 }} TIA</Text
+						>
+
+						<Text size="12" weight="500" color="secondary">was minted</Text>
+					</Flex>
+					<!-- Event: undond -->
+					<Flex v-else-if="event.type === 'unbond'" align="center" gap="4" color="secondary" :class="$style.text">
+						<Text size="12" weight="500" color="primary" mono no-wrap>
+							{{ event.data.amount ? tia(event.data.amount.replace("utia", "")) : 0 }} TIA</Text
+						>
+
+						<Text size="12" weight="500" color="secondary">will unbond from</Text>
+
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.validator}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.validator) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.validator }}
+							</template>
+						</Tooltip>
+
+						<Text size="12" weight="500" color="secondary">at</Text>
+
+						<Tooltip :class="$style.tooltip">
+							<Text size="12" weight="500" color="primary" mono>
+								{{ DateTime.fromISO(event.data.completion_time).setLocale("en").toFormat("MMMM d h:mm a") }}
+							</Text>
+
+							<template #content>
+								{{ DateTime.fromISO(event.data.completion_time).setLocale("en").toFormat("ff") }}
+							</template>
+						</Tooltip>
+					</Flex>
+					<!-- Event: redelegate -->
+					<Flex v-else-if="event.type === 'redelegate'" align="center" gap="4" color="secondary" :class="$style.text">
+						<Text size="12" weight="500" color="primary" mono no-wrap>
+							{{ event.data.amount ? tia(event.data.amount.replace("utia", "")) : 0 }} TIA</Text
+						>
+
+						<Text size="12" weight="500" color="secondary">will redelegate from</Text>
+
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.source_validator}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.source_validator) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.source_validator }}
+							</template>
+						</Tooltip>
+
+						<Text size="12" weight="500" color="secondary">to</Text>
+
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.destination_validator}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.destination_validator) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.destination_validator }}
+							</template>
+						</Tooltip>
+
+						<Text size="12" weight="500" color="secondary">at</Text>
+
+						<Tooltip :class="$style.tooltip">
+							<Text size="12" weight="500" color="primary" mono>
+								{{ DateTime.fromISO(event.data.completion_time).setLocale("en").toFormat("MMMM d h:mm a") }}
+							</Text>
+
+							<template #content>
+								{{ DateTime.fromISO(event.data.completion_time).setLocale("en").toFormat("ff") }}
+							</template>
+						</Tooltip>
+					</Flex>
+					<!-- Event: complete_unbonding -->
+					<Flex v-else-if="event.type === 'complete_unbonding'" align="center" gap="4" color="secondary" :class="$style.text">
+						<Text size="12" weight="500" color="primary" mono no-wrap>
+							{{ event.data.amount ? tia(event.data.amount.replace("utia", "")) : 0 }} TIA</Text
+						>
+
+						<Text size="12" weight="500" color="secondary">was unbonded from</Text>
+
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.validator}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.validator) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.validator }}
+							</template>
+						</Tooltip>
+
+						<Text size="12" weight="500" color="secondary">to</Text>
+
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.delegator}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.delegator) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.delegator }}
+							</template>
+						</Tooltip>
+					</Flex>
+					<!-- Event: complete_redelegation -->
+					<Flex v-else-if="event.type === 'complete_redelegation'" align="center" gap="4" color="secondary" :class="$style.text">
+						<Text size="12" weight="500" color="primary" mono no-wrap>
+							{{ event.data.amount ? tia(event.data.amount.replace("utia", "")) : 0 }} TIA</Text
+						>
+
+						<Text size="12" weight="500" color="secondary">was redelegated from</Text>
+
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.source_validator}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.source_validator) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.source_validator }}
+							</template>
+						</Tooltip>
+
+						<Text size="12" weight="500" color="secondary">to</Text>
+
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.destination_validator}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.destination_validator) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.destination_validator }}
+							</template>
+						</Tooltip>
+					</Flex>
+					<!-- Event: slash -->
+					<Flex v-else-if="event.type === 'slash'" align="center" gap="4" color="secondary" :class="$style.text">
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.jailed}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.jailed) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.jailed }}
+							</template>
+						</Tooltip>
+
+						<Text size="12" weight="500" color="secondary">was jailed for</Text>
+
+						<Tooltip :class="$style.tooltip">
+								<Text size="12" weight="500" color="primary" mono>
+									{{ event.data.reason }}
+								</Text>
+
+							<template #content>
+								{{ event.data.reason }}
+							</template>
+						</Tooltip>
+					</Flex>
+					<!-- Event: cancel_unbonding_delegation -->
+					<Flex v-else-if="event.type === 'cancel_unbonding_delegation'" align="center" gap="4" color="secondary" :class="$style.text">
+						<Text size="12" weight="500" color="secondary">Unbonding</Text>
+
+						<Text size="12" weight="500" color="primary" mono no-wrap>
+							{{ event.data.amount ? tia(event.data.amount.replace("utia", "")) : 0 }} TIA</Text
+						>
+
+						<Text size="12" weight="500" color="secondary">from</Text>
+
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.validator}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.validator) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.validator }}
+							</template>
+						</Tooltip>
+
+						<Text size="12" weight="500" color="secondary">was canceled</Text>
+					</Flex>
+					<!-- Event: liveness -->
+					<Flex v-else-if="event.type === 'liveness'" align="center" gap="4" color="secondary" :class="$style.text">
+						<Tooltip :class="$style.tooltip">
+							<NuxtLink :to="`/address/${event.data.address}`" @click.stop>
+								<Text size="12" weight="500" color="primary" mono>
+									{{ splitAddress(event.data.address) }}
+								</Text>
+							</NuxtLink>
+
+							<template #content>
+								{{ event.data.address }}
+							</template>
+						</Tooltip>
+
+						<Text size="12" weight="500" color="secondary">missed</Text>
+
+						<Text size="12" weight="500" color="primary" mono no-wrap>
+							{{ event.data.missed_blocks }}</Text
+						>
+
+						<Text size="12" weight="500" color="secondary">blocks</Text>
+					</Flex>
+
+					<Text size="12" weight="600" color="tertiary" mono>
+						{{ event.type }}
+					</Text>
+				</Flex>
+			</Flex>
+		</Flex>
+		<!-- Pagination -->
+		<Flex v-if="events.length && pages > 1" 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="handlePrev" 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 }} of {{ pages }} </Text>
+			</Button>
+
+			<Button @click="handleNext" type="secondary" size="mini" :disabled="page === pages">
+				<Icon name="arrow-right" size="12" color="primary" />
+			</Button>
+			<Button @click="page = pages" type="secondary" size="mini" :disabled="page === pages">
+				<Icon name="arrow-right-stop" size="12" color="primary" />
+			</Button>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.data {
+	min-width: 100%;
+	height: 100%;
+
+	overflow-x: auto;
+
+	background: var(--card-background);
+}
+
+.pagination {
+	padding: 0 16px 16px 16px;
+}
+
+.inner {
+	height: 100%;
+
+	border-radius: 4px 4px 8px 4px;
+	background: var(--card-background);
+}
+
+.events {
+	padding: 16px;
+}
+
+.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: 500px) {
+	.data {
+		.main {
+			min-width: initial;
+		}
+	}
+}
+
+@media (max-width: 400px) {
+	.tabs_wrapper {
+		overflow-x: auto;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+}
+</style>
diff --git a/services/api/block.js b/services/api/block.js
index 6fc6528b..42ed0865 100644
--- a/services/api/block.js
+++ b/services/api/block.js
@@ -113,3 +113,17 @@ export const fetchBlockBlobsCount = async (height) => {
 		console.error(error)
 	}
 }
+
+export const fetchBlockEvents = async ({ height, limit, offset }) => {
+	try {
+		const url = new URL(`${useServerURL()}/block/${height}/events`)
+
+		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)
+	}
+}
diff --git a/services/api/tx.js b/services/api/tx.js
index cc6ce6d2..9561051e 100644
--- a/services/api/tx.js
+++ b/services/api/tx.js
@@ -52,10 +52,11 @@ export const fetchTxMessages = async (hash) => {
 	}
 }
 
-export const fetchTxEvents = async ({ hash, offset }) => {
+export const fetchTxEvents = async ({ hash, limit, offset }) => {
 	try {
 		const url = new URL(`${useServerURL()}/tx/${hash}/events`)
 
+		if (limit) url.searchParams.append("limit", limit)
 		if (offset) url.searchParams.append("offset", offset)
 
 		const data = await $fetch(url.href)
@@ -127,7 +128,7 @@ export const fetchLatestPFBs = async (height) => {
 	}
 }
 
-export const fetchTransactionsByBlock = async ({ limit, offset, sort, height, from, type, excluded_types }) => {
+export const fetchTransactionsByBlock = async ({ limit, offset, sort, height, from, status, type, excluded_types }) => {
 	try {
 		const url = new URL(`${useServerURL()}/tx`)
 
@@ -136,6 +137,7 @@ export const fetchTransactionsByBlock = async ({ limit, offset, sort, height, fr
 		if (limit) url.searchParams.append("limit", limit)
 		if (sort) url.searchParams.append("sort", sort)
 		if (offset) url.searchParams.append("offset", offset)
+		if (status) url.searchParams.append("status", status)
 		if (type) url.searchParams.append("msg_type", type)
 		if (excluded_types) url.searchParams.append("excluded_msg_type", excluded_types)