diff --git a/assets/icons.json b/assets/icons.json
index bb4e2784..0eab3a96 100644
--- a/assets/icons.json
+++ b/assets/icons.json
@@ -20,6 +20,7 @@
 	"bookmark-check": "M 14.242 2 C 15.046 2 15.71 2 16.252 2.044 C 16.814 2.09 17.331 2.189 17.816 2.436 C 18.569 2.819 19.181 3.431 19.564 4.184 C 19.811 4.669 19.91 5.186 19.956 5.749 C 20 6.289 20 6.954 20 7.759 L 20 21 C 20 21.356 19.81 21.686 19.502 21.865 C 19.194 22.043 18.813 22.045 18.504 21.868 L 12 18.152 L 5.496 21.868 C 5.187 22.045 4.806 22.043 4.498 21.865 C 4.19 21.686 4 21.356 4 21 L 4 7.758 C 4 6.954 4 6.29 4.045 5.748 C 4.091 5.186 4.19 4.669 4.437 4.184 C 4.82 3.431 5.432 2.819 6.185 2.436 C 6.67 2.189 7.187 2.09 7.75 2.044 C 8.29 2 8.955 2 9.76 2 Z M 16.207 8.707 C 16.586 8.315 16.581 7.691 16.195 7.305 C 15.809 6.919 15.185 6.914 14.793 7.293 L 11 11.086 L 9.707 9.793 C 9.315 9.414 8.691 9.419 8.305 9.805 C 7.919 10.191 7.914 10.815 8.293 11.207 L 10.293 13.207 C 10.683 13.597 11.317 13.597 11.707 13.207 Z",
 	"bookmark-x": "M14.2413 2H9.7587C8.95374 1.99999 8.28937 1.99998 7.74818 2.04419C7.18608 2.09012 6.66937 2.18868 6.18404 2.43598C5.43139 2.81947 4.81947 3.43139 4.43598 4.18404C4.18868 4.66937 4.09012 5.18608 4.04419 5.74818C3.99998 6.28937 3.99999 6.95372 4 7.75869V21C4 21.3565 4.18976 21.686 4.49807 21.8649C4.80639 22.0438 5.18664 22.0451 5.49614 21.8682L12 18.1518L18.5039 21.8682C18.8134 22.0451 19.1936 22.0438 19.5019 21.8649C19.8102 21.686 20 21.3565 20 21V7.75873C20 6.95376 20 6.28937 19.9558 5.74818C19.9099 5.18608 19.8113 4.66937 19.564 4.18404C19.1805 3.43139 18.5686 2.81947 17.816 2.43598C17.3306 2.18868 16.8139 2.09012 16.2518 2.04419C15.7106 1.99998 15.0463 1.99999 14.2413 2ZM8.79289 6.79289C9.18342 6.40237 9.81658 6.40237 10.2071 6.79289L12 8.58579L13.7929 6.79289C14.1834 6.40237 14.8166 6.40237 15.2071 6.79289C15.5976 7.18342 15.5976 7.81658 15.2071 8.20711L13.4142 10L15.2071 11.7929C15.5976 12.1834 15.5976 12.8166 15.2071 13.2071C14.8166 13.5976 14.1834 13.5976 13.7929 13.2071L12 11.4142L10.2071 13.2071C9.81658 13.5976 9.18342 13.5976 8.79289 13.2071C8.40237 12.8166 8.40237 12.1834 8.79289 11.7929L10.5858 10L8.79289 8.20711C8.40237 7.81658 8.40237 7.18342 8.79289 6.79289Z",
 	"address": "M9.5 2C6.73857 2 4.5 4.23858 4.5 7C4.5 9.76142 6.73857 12 9.5 12C12.2615 12 14.5 9.76142 14.5 7C14.5 4.23858 12.2615 2 9.5 2ZM15.8753 2.36385C15.3633 2.15663 14.7803 2.40364 14.5731 2.91557C14.3659 3.42751 14.6129 4.0105 15.1248 4.21773C16.2261 4.66351 17 5.74259 17 7.00003C17 8.25747 16.2261 9.33655 15.1248 9.78233C14.6129 9.98956 14.3659 10.5725 14.5731 11.0845C14.7803 11.5964 15.3633 11.8434 15.8753 11.6362C17.7058 10.8952 19 9.09997 19 7.00003C19 4.90009 17.7058 3.10484 15.8753 2.36385ZM19.2493 14.1576C18.7144 14.0199 18.1693 14.3419 18.0316 14.8768C17.8939 15.4116 18.2159 15.9568 18.7508 16.0944C20.0449 16.4275 21 17.6035 21 19V21C21 21.5522 21.4478 22 22 22C22.5523 22 23 21.5522 23 21V19C23 16.6688 21.4056 14.7126 19.2493 14.1576ZM7.17898 14C8.72635 14.0005 10.2737 14.0005 11.8211 14C12.9117 13.9996 13.6559 13.9994 14.2941 14.1704C16.0196 14.6327 17.3673 15.9804 17.8297 17.7059C18.0143 18.395 18.008 19.1222 18.0019 19.8373C18.0004 20.0139 17.9988 20.1897 18.0002 20.3641C18.0011 20.471 18.0028 20.6872 17.9489 20.8882C17.8102 21.4059 17.4059 21.8102 16.8883 21.9489C16.6879 22.0027 16.4724 22.001 16.3651 22.0002L16.3641 22.0002C11.7891 21.9637 7.21096 21.9637 2.63595 22.0002L2.63491 22.0002C2.52765 22.001 2.31217 22.0027 2.11181 21.9489C1.59417 21.8102 1.18985 21.4059 1.05115 20.8882C0.997288 20.6872 0.999012 20.471 0.999864 20.3641C1.00125 20.1903 0.999761 20.0147 0.998266 19.8383C0.992206 19.1234 0.986025 18.3941 1.17041 17.7059C1.63274 15.9804 2.98048 14.6327 4.70594 14.1704C5.34416 13.9994 6.08836 13.9996 7.17898 14Z",
+	"validator": "m11.109 15.977c-0.1 0.099-0.225 0.224-0.328 0.372-0.089 0.129-0.164 0.267-0.222 0.413-0.066 0.169-0.1 0.342-0.127 0.48-0.136 0.688-0.275 1.375-0.413 2.062-0.065 0.328 0.037 0.667 0.274 0.904 0.236 0.236 0.575 0.339 0.903 0.273l2.025-0.405c0.143-0.029 0.333-0.063 0.516-0.135 0.146-0.058 0.285-0.132 0.414-0.222 0.148-0.103 0.273-0.228 0.372-0.328 2.224-2.232 4.456-4.456 6.684-6.684 0.943-0.943 0.943-2.471 0-3.414-0.942-0.943-2.471-0.943-3.414 0-2.228 2.228-4.452 4.46-6.684 6.684zm-4.886-3.977-1.481 0.041c-0.608 0.04-1.146 0.128-1.656 0.34-1.225 0.507-2.198 1.481-2.706 2.706-0.406 0.978-0.375 2.092-0.38 3.131-1e-3 0.129 2e-3 0.258 0.01 0.387 0.013 0.198 0.064 0.392 0.151 0.571 0.144 0.284 0.373 0.515 0.656 0.66 0.179 0.089 0.373 0.141 0.572 0.154 0.126 0.01 0.268 0.01 0.388 0.01h4.446c0.119 0 0.262 0 0.387-0.01 0.199-0.013 0.393-0.065 0.571-0.154 0.283-0.144 0.512-0.373 0.656-0.655 0.089-0.178 0.141-0.372 0.153-0.571 0.01-0.125 0.01-0.267 0.01-0.387v-4.446c0-0.329-0.01-0.658-0.163-0.958-0.144-0.282-0.373-0.511-0.656-0.655-0.3-0.154-0.628-0.164-0.958-0.164zm7.902-9.782c1.134 0.459 1.876 1.559 1.876 2.782s-0.742 2.323-1.876 2.782c-0.508 0.21-0.751 0.79-0.545 1.299 0.206 0.51 0.785 0.758 1.295 0.555 1.89-0.764 3.126-2.598 3.126-4.636s-1.236-3.872-3.126-4.636c-0.511-0.207-1.094 0.04-1.302 0.552-0.207 0.512 0.041 1.095 0.552 1.302zm-5.625 7.782c2.762 0 5-2.239 5-5s-2.238-5-5-5c-2.761 0-5 2.239-5 5s2.239 5 5 5z",
 	"close": "M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z",
 	"chart": "M 12 23 C 5.925 23 1 18.075 1 12 C 1 5.925 5.925 1 12 1 C 18.075 1 23 5.925 23 12 C 23 18.075 18.075 23 12 23 Z M 10 11.414 L 12.744 14.158 C 12.828 14.242 12.928 14.343 13.024 14.424 C 13.174 14.556 13.348 14.656 13.537 14.72 C 13.838 14.818 14.162 14.818 14.463 14.72 C 14.652 14.656 14.826 14.555 14.976 14.424 C 15.072 14.343 15.172 14.242 15.257 14.157 L 18.707 10.707 C 18.967 10.456 19.071 10.084 18.98 9.734 C 18.888 9.385 18.615 9.112 18.266 9.02 C 17.916 8.929 17.544 9.033 17.293 9.293 L 14 12.586 L 11.256 9.842 C 11.172 9.758 11.072 9.657 10.976 9.576 C 10.864 9.481 10.696 9.356 10.464 9.281 C 10.162 9.183 9.838 9.183 9.536 9.281 C 9.304 9.356 9.135 9.482 9.024 9.576 C 8.928 9.657 8.828 9.758 8.743 9.843 L 5.293 13.293 C 4.914 13.685 4.919 14.309 5.305 14.695 C 5.691 15.081 6.315 15.086 6.707 14.707 Z",
 	"check": "M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z",
@@ -85,6 +86,8 @@
 	"github": "M12 1.5C6.20156 1.5 1.5 6.32344 1.5 12.2672C1.5 17.025 4.50937 21.0562 8.68125 22.4812C8.73977 22.494 8.79949 22.5002 8.85938 22.5C9.24844 22.5 9.39844 22.2141 9.39844 21.9656C9.39844 21.7078 9.38906 21.0328 9.38437 20.1328C9.03705 20.2142 8.68173 20.2567 8.325 20.2594C6.30469 20.2594 5.84531 18.6891 5.84531 18.6891C5.36719 17.4469 4.67813 17.1141 4.67813 17.1141C3.76406 16.4719 4.67344 16.4531 4.74375 16.4531H4.74844C5.80313 16.5469 6.35625 17.5687 6.35625 17.5687C6.88125 18.4875 7.58437 18.7453 8.2125 18.7453C8.62783 18.737 9.03673 18.6412 9.4125 18.4641C9.50625 17.7703 9.77812 17.2969 10.0781 17.025C7.74844 16.7531 5.29688 15.8297 5.29688 11.7047C5.29688 10.5281 5.70469 9.56719 6.375 8.81719C6.26719 8.54531 5.90625 7.44844 6.47812 5.96719C6.55483 5.94883 6.63368 5.94095 6.7125 5.94375C7.09219 5.94375 7.95 6.08906 9.36563 7.07344C11.0857 6.59218 12.9049 6.59218 14.625 7.07344C16.0406 6.08906 16.8984 5.94375 17.2781 5.94375C17.3569 5.94095 17.4358 5.94883 17.5125 5.96719C18.0844 7.44844 17.7234 8.54531 17.6156 8.81719C18.2859 9.57187 18.6937 10.5328 18.6937 11.7047C18.6937 15.8391 16.2375 16.7484 13.8984 17.0156C14.2734 17.3484 14.6109 18.0047 14.6109 19.0078C14.6109 20.4469 14.5969 21.6094 14.5969 21.9609C14.5969 22.2141 14.7422 22.5 15.1312 22.5C15.1942 22.5003 15.2571 22.494 15.3187 22.4812C19.4953 21.0562 22.5 17.0203 22.5 12.2672C22.5 6.32344 17.7984 1.5 12 1.5Z",
 	"discord": "M21.0576 1.47735C21.4953 1.91187 21.7441 2.5014 21.75 3.11812V23.25L16.6406 18.5625L17.25 20.625H4.57687C3.29437 20.625 2.25 19.6547 2.25 18.375V3.07125C2.25161 2.45514 2.49746 1.8648 2.93365 1.42967C3.36983 0.994542 3.96076 0.750122 4.57687 0.75L19.4119 0.796875C20.0286 0.798327 20.6199 1.04282 21.0576 1.47735ZM14.468 14.5542C14.8092 14.9728 15.218 15.4598 15.218 15.4598C17.584 15.3851 18.567 13.9302 18.6708 13.7765C18.6771 13.7672 18.6802 13.7627 18.6802 13.7634C18.6802 10.1512 17.0456 7.21875 17.0456 7.21875C15.4219 6.00516 13.867 6.03937 13.867 6.03937L13.7081 6.22031C15.638 6.79688 16.5347 7.64766 16.5347 7.64766C15.4748 7.07453 14.315 6.70938 13.118 6.57187C12.3556 6.48813 11.5859 6.49568 10.8253 6.59437C10.7604 6.59644 10.6958 6.60413 10.6322 6.61734C10.2338 6.66234 9.26859 6.79828 8.05406 7.33031C7.63406 7.51172 7.38469 7.64766 7.38469 7.64766C7.38469 7.64766 8.31516 6.75328 10.3584 6.17578L10.245 6.03984C10.245 6.03984 8.70141 6.00563 7.06687 7.21734C7.06687 7.21734 5.43234 10.1498 5.43234 13.762C5.43234 13.762 6.38578 15.3923 8.89406 15.4716C8.89406 15.4716 9.31406 14.9733 9.65484 14.543C8.21297 14.1131 7.66828 13.2183 7.66828 13.2183C7.66828 13.2183 7.78172 13.2975 7.98609 13.4109C7.99408 13.4109 8.00151 13.4154 8.01168 13.4216C8.01762 13.4251 8.0245 13.4293 8.03297 13.4334C8.05044 13.4452 8.06778 13.4538 8.08513 13.4625C8.10176 13.4708 8.1184 13.4791 8.13516 13.4902C8.40223 13.6373 8.67914 13.7659 8.96391 13.875C9.50221 14.0931 10.0611 14.2564 10.6322 14.3625C11.603 14.5485 12.6 14.5523 13.5722 14.3738C14.1364 14.27 14.6881 14.1067 15.218 13.8867C15.6769 13.7139 16.1148 13.4898 16.5234 13.2188C16.5234 13.2188 15.9558 14.1352 14.468 14.5542ZM8.78203 11.4642C8.78203 10.7738 9.29297 10.2188 9.93984 10.2188C10.5867 10.2188 11.1094 10.7723 11.0977 11.4642C11.0977 12.1552 10.5867 12.7097 9.93984 12.7097C9.30422 12.7097 8.78203 12.1547 8.78203 11.4642ZM12.9248 11.4642C12.9248 10.7738 13.4358 10.2188 14.0827 10.2188C14.7187 10.2188 15.2405 10.7733 15.2405 11.4642C15.2405 12.1552 14.73 12.7097 14.0827 12.7097C13.447 12.7097 12.9248 12.1547 12.9248 11.4642Z",
 	"twitter": "M23.25 5.13282C22.406 5.49955 21.513 5.74116 20.5992 5.85001C21.5595 5.28769 22.2817 4.39434 22.6303 3.33751C21.7224 3.86841 20.7307 4.24092 19.6978 4.43907C19.2629 3.98323 18.7397 3.62059 18.1603 3.3732C17.5808 3.12581 16.9571 2.99884 16.327 3.00001C13.7761 3.00001 11.7117 5.03438 11.7117 7.5422C11.7099 7.89102 11.7499 8.23881 11.8308 8.57813C10.0016 8.49238 8.2104 8.02575 6.57187 7.2081C4.93333 6.39044 3.48351 5.23977 2.31516 3.8297C1.90527 4.52069 1.6885 5.30909 1.6875 6.11251C1.6875 7.68751 2.50922 9.0797 3.75 9.89532C3.01487 9.87787 2.29481 9.68331 1.65094 9.32813V9.38438C1.65094 11.5875 3.24469 13.4203 5.35406 13.8375C4.9574 13.9433 4.54864 13.9968 4.13812 13.9969C3.84683 13.9974 3.5562 13.9691 3.27047 13.9125C3.85687 15.7172 5.56359 17.0297 7.58531 17.0672C5.94252 18.3333 3.9256 19.0175 1.85156 19.0125C1.48341 19.012 1.11561 18.9901 0.75 18.9469C2.85993 20.2942 5.31255 21.0068 7.81594 21C16.3172 21 20.9616 14.0766 20.9616 8.07188C20.9616 7.87501 20.9564 7.67813 20.947 7.48595C21.8485 6.84472 22.6283 6.04787 23.25 5.13282Z",
+	"email": "m20 8-8 5-8-5v-2l8 5 8-5m0-2h-16c-1.11 0-2 0.89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-12c0-1.11-0.9-2-2-2z",
+	"telegram": "m24 12c0 6.6289-5.3711 12-12 12s-12-5.3711-12-12 5.3711-12 12-12 12 5.3711 12 12m-11.57-3.1406c-1.168 0.48438-3.5 1.4922-7 3.0156-0.56641 0.22266-0.86328 0.44531-0.89063 0.66016-0.046874 0.36719 0.41406 0.51172 1.0352 0.70703l0.26172 0.082031c0.61328 0.19922 1.4375 0.43359 1.8633 0.44141 0.39062 0.011719 0.82422-0.14844 1.3047-0.48047 3.2695-2.207 4.957-3.3203 5.0586-3.3438 0.078125-0.019531 0.17969-0.039062 0.25 0.023438s0.0625 0.17969 0.054688 0.21094c-0.042969 0.19531-1.8398 1.8633-2.7695 2.7266-0.28906 0.26953-0.49219 0.46094-0.53516 0.50391-0.09375 0.09375-0.1875 0.1875-0.28125 0.27734-0.57031 0.55078-0.99609 0.96094 0.023438 1.6328 0.48828 0.32422 0.88281 0.58984 1.2734 0.85547 0.42578 0.29297 0.85156 0.58203 1.4023 0.94531 0.14062 0.089843 0.27734 0.18359 0.40625 0.28125 0.49609 0.35156 0.94531 0.67187 1.4961 0.62109 0.32031-0.03125 0.65234-0.33203 0.82031-1.2305 0.39844-2.125 1.1797-6.7305 1.3594-8.6289 0.011719-0.15625 0.003906-0.31641-0.019531-0.47266-0.015625-0.125-0.074219-0.24219-0.17188-0.32422-0.13672-0.09375-0.30078-0.14062-0.46484-0.14062-0.44922 0.007813-1.1445 0.25-4.4766 1.6367",
 	"terminal": "M4.70711 4.29289C4.31658 3.90237 3.68342 3.90237 3.29289 4.29289C2.90237 4.68342 2.90237 5.31658 3.29289 5.70711L8.58579 11L3.29289 16.2929C2.90237 16.6834 2.90237 17.3166 3.29289 17.7071C3.68342 18.0976 4.31658 18.0976 4.70711 17.7071L10.7071 11.7071C11.0976 11.3166 11.0976 10.6834 10.7071 10.2929L4.70711 4.29289ZM12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20H20C20.5523 20 21 19.5523 21 19C21 18.4477 20.5523 18 20 18H12Z",
 	"arrow-narrow-right": "M14.7071 5.29289C14.3166 4.90237 13.6834 4.90237 13.2929 5.29289C12.9024 5.68342 12.9024 6.31658 13.2929 6.70711L17.5858 11H4C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13H17.5858L13.2929 17.2929C12.9024 17.6834 12.9024 18.3166 13.2929 18.7071C13.6834 19.0976 14.3166 19.0976 14.7071 18.7071L20.7071 12.7071C21.0976 12.3166 21.0976 11.6834 20.7071 11.2929L14.7071 5.29289Z",
 	"arrow-narrow-left": "M10.7071 6.70711C11.0976 6.31658 11.0976 5.68342 10.7071 5.29289C10.3166 4.90237 9.68342 4.90237 9.29289 5.29289L3.29289 11.2929C2.90237 11.6834 2.90237 12.3166 3.29289 12.7071L9.29289 18.7071C9.68342 19.0976 10.3166 19.0976 10.7071 18.7071C11.0976 18.3166 11.0976 17.6834 10.7071 17.2929L6.41421 13H20C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11H6.41421L10.7071 6.70711Z",
diff --git a/components/AddressBadge.vue b/components/AddressBadge.vue
index 3bc821af..eb8ec7bd 100644
--- a/components/AddressBadge.vue
+++ b/components/AddressBadge.vue
@@ -4,6 +4,10 @@ defineProps({
 		type: String,
 		required: true,
 	},
+	color: {
+		type: String,
+		default: "primary"
+	}
 })
 </script>
 
@@ -11,35 +15,35 @@ defineProps({
 	<NuxtLink :to="`/address/${hash}`" @click.stop>
 		<Flex align="center" gap="6">
 			<template v-if="hash.startsWith('celestiavaloper')">
-				<Text size="13" weight="600" color="primary"> celestiavaloper </Text>
+				<Text size="13" weight="600" :color="color"> celestiavaloper </Text>
 
 				<Flex align="center" gap="3">
 					<div v-for="dot in 3" class="dot" />
 				</Flex>
 
-				<Text size="13" weight="600" color="primary">
+				<Text size="13" weight="600" :color="color">
 					{{ hash.slice(hash.length - 4, hash.length) }}
 				</Text>
 			</template>
 			<template v-else-if="hash.startsWith('celestiavalcons')">
-				<Text size="13" weight="600" color="primary"> celestiavalcons </Text>
+				<Text size="13" weight="600" :color="color"> celestiavalcons </Text>
 
 				<Flex align="center" gap="3">
 					<div v-for="dot in 3" class="dot" />
 				</Flex>
 
-				<Text size="13" weight="600" color="primary">
+				<Text size="13" weight="600" :color="color">
 					{{ hash.slice(hash.length - 4, hash.length) }}
 				</Text>
 			</template>
 			<template v-else>
-				<Text size="13" weight="600" color="primary"> celestia </Text>
+				<Text size="13" weight="600" :color="color"> celestia </Text>
 
 				<Flex align="center" gap="3">
 					<div v-for="dot in 3" class="dot" />
 				</Flex>
 
-				<Text size="13" weight="600" color="primary">
+				<Text size="13" weight="600" :color="color">
 					{{ hash.slice(hash.length - 4, hash.length) }}
 				</Text>
 			</template>
diff --git a/components/TheFooter.vue b/components/TheFooter.vue
index f4754e70..b6b62f03 100644
--- a/components/TheFooter.vue
+++ b/components/TheFooter.vue
@@ -145,15 +145,18 @@ const handleChangeTheme = (theme) => {
 					<NuxtLink to="/blocks" :class="$style.link">
 						<Text size="12" weight="500" color="tertiary"> Blocks </Text>
 					</NuxtLink>
+					<NuxtLink to="/validators" :class="$style.link">
+						<Text size="12" weight="500" color="tertiary"> Validators </Text>
+					</NuxtLink>
 					<NuxtLink to="/txs" :class="$style.link">
 						<Text size="12" weight="500" color="tertiary"> Transactions </Text>
 					</NuxtLink>
-					<NuxtLink to="/namespaces" :class="$style.link">
-						<Text size="12" weight="500" color="tertiary"> Namespaces </Text>
-					</NuxtLink>
 					<NuxtLink to="/rollups" :class="$style.link">
 						<Text size="12" weight="500" color="tertiary"> Rollups </Text>
 					</NuxtLink>
+					<NuxtLink to="/namespaces" :class="$style.link">
+						<Text size="12" weight="500" color="tertiary"> Namespaces </Text>
+					</NuxtLink>
 					<NuxtLink to="/addresses" :class="$style.link">
 						<Text size="12" weight="500" color="tertiary"> Addresses </Text>
 					</NuxtLink>
diff --git a/components/TheHeader.vue b/components/TheHeader.vue
index 34592c52..8fb6638b 100644
--- a/components/TheHeader.vue
+++ b/components/TheHeader.vue
@@ -75,6 +75,9 @@ const isActive = (link) => {
 		case "rollups":
 			return splittedPath.includes("rollup") || splittedPath.includes("rollups")
 
+		case "rollups":
+			return splittedPath.includes("validator") || splittedPath.includes("validators")
+
 		default:
 			break
 	}
@@ -117,6 +120,10 @@ const handleConnect = async () => {
 					<Text size="13" weight="600" color="tertiary">Explore</Text>
 				</NuxtLink>
 
+				<NuxtLink to="/rollups" :class="[$style.link, isActive('rollups') && $style.active]">
+					<Text size="13" weight="600" color="tertiary">Rollups</Text>
+				</NuxtLink>
+				
 				<NuxtLink to="/txs" :class="[$style.link, isActive('txs') && $style.active]">
 					<Text size="13" weight="600" color="tertiary">Transactions</Text>
 				</NuxtLink>
@@ -125,12 +132,12 @@ const handleConnect = async () => {
 					<Text size="13" weight="600" color="tertiary">Blocks</Text>
 				</NuxtLink>
 
-				<NuxtLink to="/namespaces" :class="[$style.link, isActive('namespaces') && $style.active]">
-					<Text size="13" weight="600" color="tertiary">Namespaces</Text>
+				<NuxtLink to="/validators" :class="[$style.link, isActive('validators') && $style.active]">
+					<Text size="13" weight="600" color="tertiary">Validators</Text>
 				</NuxtLink>
 
-				<NuxtLink to="/rollups" :class="[$style.link, isActive('rollups') && $style.active]">
-					<Text size="13" weight="600" color="tertiary">Rollups</Text>
+				<NuxtLink to="/namespaces" :class="[$style.link, isActive('namespaces') && $style.active]">
+					<Text size="13" weight="600" color="tertiary">Namespaces</Text>
 				</NuxtLink>
 			</Flex>
 
@@ -188,6 +195,10 @@ const handleConnect = async () => {
 				<Text size="13" weight="600" color="tertiary">Explore</Text>
 			</NuxtLink>
 
+			<NuxtLink to="/rollups" :class="[$style.link, isActive('rollups') && $style.active]">
+				<Text size="13" weight="600" color="tertiary">Rollups</Text>
+			</NuxtLink>
+
 			<NuxtLink to="/txs" :class="[$style.link, isActive('txs') && $style.active]">
 				<Text size="13" weight="600" color="tertiary">Transactions</Text>
 			</NuxtLink>
@@ -196,13 +207,14 @@ const handleConnect = async () => {
 				<Text size="13" weight="600" color="tertiary">Blocks</Text>
 			</NuxtLink>
 
+			<NuxtLink to="/validators" :class="[$style.link, isActive('validators') && $style.active]">
+				<Text size="13" weight="600" color="tertiary">Validators</Text>
+			</NuxtLink>
+
 			<NuxtLink to="/namespaces" :class="[$style.link, isActive('namespaces') && $style.active]">
 				<Text size="13" weight="600" color="tertiary">Namespaces</Text>
 			</NuxtLink>
 
-			<NuxtLink to="/rollups" :class="[$style.link, isActive('rollups') && $style.active]">
-				<Text size="13" weight="600" color="tertiary">Rollups</Text>
-			</NuxtLink>
 		</Flex>
 	</Flex>
 </template>
diff --git a/components/cmd/CommandMenu.vue b/components/cmd/CommandMenu.vue
index c7b07d99..721ec09d 100644
--- a/components/cmd/CommandMenu.vue
+++ b/components/cmd/CommandMenu.vue
@@ -251,6 +251,15 @@ const rawNavigationActions = [
 			router.push("/blocks")
 		},
 	},
+	{
+		type: "callback",
+		icon: "arrow-narrow-right",
+		title: "Go to Validators",
+		runText: "Open Validators",
+		callback: () => {
+			router.push("/validators")
+		},
+	},
 	{
 		type: "callback",
 		icon: "arrow-narrow-right",
@@ -1239,7 +1248,7 @@ const runBounce = () => {
 						<input
 							v-model="searchTerm"
 							ref="inputEl"
-							:placeholder="placeholder || 'Find blocks, namespaces, rollups, transactions or quick actions...'"
+							:placeholder="placeholder || 'Find blocks, validators, namespaces, rollups, transactions or quick actions...'"
 							tabindex="1"
 							autocomplete="off"
 							autocorrect="off"
diff --git a/components/data/BlocksTimeline/BlocksTimelineTable.vue b/components/data/BlocksTimeline/BlocksTimelineTable.vue
index 46aaee82..6090e142 100644
--- a/components/data/BlocksTimeline/BlocksTimelineTable.vue
+++ b/components/data/BlocksTimeline/BlocksTimelineTable.vue
@@ -7,7 +7,7 @@ import Button from "@/components/ui/Button.vue"
 import Tooltip from "@/components/ui/Tooltip.vue"
 
 /** Services */
-import { tia, comma, space, formatBytes, getNamespaceID } from "@/services/utils"
+import { comma, formatBytes, getNamespaceID, shortHex, space, tia } from "@/services/utils"
 
 /** API */
 import { fetchBlockNamespaces } from "@/services/api/block"
@@ -342,28 +342,17 @@ watch(
 							<Text size="12" weight="600" color="tertiary">Proposer</Text>
 
 							<Flex direction="column" gap="8">
-								<Text size="13" weight="600" color="primary">
-									{{ preview.block.proposer.moniker }}
-								</Text>
+								<NuxtLink :to="`/validator/${preview.block.proposer.id}`">
+									<Text size="13" weight="600" color="primary">
+										{{ preview.block.proposer.moniker }}
+									</Text>
+								</NuxtLink>
 
 								<Flex align="center" gap="6">
-									<Text size="12" weight="600" color="tertiary" mono>{{
-										preview.block.proposer.cons_address.slice(0, 4)
+									<Text size="12" weight="600" color="tertiary">{{
+										shortHex(preview.block.proposer.cons_address)
 									}}</Text>
 
-									<Flex align="center" gap="3">
-										<div v-for="dot in 3" class="dot" />
-									</Flex>
-
-									<Text size="12" weight="600" color="tertiary" mono>
-										{{
-											preview.block.proposer.cons_address.slice(
-												preview.block.proposer.cons_address.length - 4,
-												preview.block.proposer.cons_address.length,
-											)
-										}}
-									</Text>
-
 									<CopyButton :text="preview.block.proposer.cons_address" size="10" />
 								</Flex>
 							</Flex>
diff --git a/components/modules/block/BlockOverview.vue b/components/modules/block/BlockOverview.vue
index 4bf80f7a..048b9a9b 100644
--- a/components/modules/block/BlockOverview.vue
+++ b/components/modules/block/BlockOverview.vue
@@ -12,7 +12,7 @@ import Badge from "@/components/ui/Badge.vue"
 import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
 
 /** Services */
-import { tia, comma, space, formatBytes, reverseMapping } from "@/services/utils"
+import { comma, formatBytes, reverseMapping, space, shortHex, tia } from "@/services/utils"
 
 /** API */
 import { fetchTransactionsByBlock } from "@/services/api/tx"
@@ -301,25 +301,14 @@ const handleViewRawTransactions = () => {
 						<Text size="12" weight="600" color="tertiary">Proposer</Text>
 
 						<Flex direction="column" gap="8">
-							<Text size="13" weight="600" color="primary">
-								{{ block.proposer.moniker }}
-							</Text>
+							<NuxtLink :to="`/validator/${block.proposer.id}`">
+								<Text size="13" weight="600" color="primary">
+									{{ block.proposer.moniker }}
+								</Text>
+							</NuxtLink>
 
 							<Flex align="center" gap="6">
-								<Text size="12" weight="600" color="tertiary" mono>{{ block.proposer.cons_address.slice(0, 4) }}</Text>
-
-								<Flex align="center" gap="3">
-									<div v-for="dot in 3" class="dot" />
-								</Flex>
-
-								<Text size="12" weight="600" color="tertiary" mono>
-									{{
-										block.proposer.cons_address.slice(
-											block.proposer.cons_address.length - 4,
-											block.proposer.cons_address.length,
-										)
-									}}
-								</Text>
+								<Text size="12" weight="600" color="tertiary">{{ shortHex(block.proposer.cons_address) }}</Text>
 
 								<CopyButton :text="block.proposer.cons_address" size="10" />
 							</Flex>
diff --git a/components/modules/rollup/RollupOverview.vue b/components/modules/rollup/RollupOverview.vue
index 57706ddb..35e70f22 100644
--- a/components/modules/rollup/RollupOverview.vue
+++ b/components/modules/rollup/RollupOverview.vue
@@ -343,8 +343,6 @@ watch(
 
 .data {
 	min-width: 384px;
-	max-width: 384px;
-	/* max-height: 534px; */
 
 	border-radius: 4px 4px 4px 8px;
 	background: var(--card-background);
@@ -371,6 +369,7 @@ watch(
 	}
 
 	.memo {
+		max-width: 352px;
 		text-overflow: ellipsis;
 		overflow: hidden;
 	}
diff --git a/components/modules/validator/ValidatorCharts.vue b/components/modules/validator/ValidatorCharts.vue
new file mode 100644
index 00000000..ff29ab7e
--- /dev/null
+++ b/components/modules/validator/ValidatorCharts.vue
@@ -0,0 +1,601 @@
+<script setup>
+/** Vendor */
+import * as d3 from "d3"
+import { DateTime } from "luxon"
+import { useDebounceFn } from "@vueuse/core"
+
+/** UI */
+import Button from "@/components/ui/Button.vue"
+import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
+
+/** Services */
+import { abbreviate, formatBytes } from "@/services/utils"
+
+/** API */
+import { fetchRollupSeries } from "@/services/api/stats"
+
+const props = defineProps({
+	id: {
+		type: String,
+		required: true,
+	},
+})
+
+const selectedPeriodIdx = ref(1)
+const periods = ref([
+	{
+		title: "Last 24 hours",
+		value: 24,
+		timeframe: "hour",
+	},
+	{
+		title: "Last 7 days",
+		value: 7,
+		timeframe: "day",
+	},
+	{
+		title: "Last 31 days",
+		value: 30,
+		timeframe: "day",
+	},
+])
+const selectedPeriod = computed(() => periods.value[selectedPeriodIdx.value])
+
+/** Charts */
+const chartWrapperEl = ref()
+const sizeSeriesChartEl = ref()
+const pfbSeriesChartEl = ref()
+
+/** Data */
+const sizeSeries = ref([])
+const pfbSeries = ref([])
+
+/** Tooltip */
+const showSeriesTooltip = ref(false)
+const showPfbTooltip = ref(false)
+const tooltipEl = ref()
+const tooltipXOffset = ref(0)
+const tooltipYOffset = ref(0)
+const tooltipYDataOffset = ref(0)
+const tooltipDynamicXPosition = ref(0)
+const tooltipText = ref("")
+
+const badgeEl = ref()
+const badgeText = ref("")
+const badgeOffset = ref(0)
+
+const buildChart = (chartEl, data, onEnter, onLeave) => {
+	const width = chartWrapperEl.value.wrapper.getBoundingClientRect().width
+	const height = 180
+	const marginTop = 0
+	const marginRight = 0
+	const marginBottom = 24
+	const marginLeft = 40
+
+	const MAX_VALUE = d3.max(data, (d) => d.value) ? d3.max(data, (d) => d.value) : 1
+
+	/** Scale */
+	const x = d3.scaleUtc(
+		d3.extent(data, (d) => d.date),
+		[marginLeft, width - marginRight],
+	)
+	const y = d3.scaleLinear([0, MAX_VALUE], [height - marginBottom - 6, marginTop])
+	const line = d3
+		.line()
+		.x((d) => x(d.date))
+		.y((d) => y(d.value))
+
+	/** Tooltip */
+	const bisect = d3.bisector((d) => d.date).center
+	const onPointermoved = (event) => {
+		onEnter()
+
+		const idx = bisect(data, x.invert(d3.pointer(event)[0]))
+
+		tooltipXOffset.value = x(data[idx].date)
+		tooltipYDataOffset.value = y(data[idx].value)
+		tooltipYOffset.value = event.layerY
+		tooltipText.value = data[idx].value
+
+		if (tooltipEl.value) {
+			if (idx > parseInt(selectedPeriod.value.value / 2)) {
+				tooltipDynamicXPosition.value = tooltipXOffset.value - tooltipEl.value.wrapper.getBoundingClientRect().width - 16
+			} else {
+				tooltipDynamicXPosition.value = tooltipXOffset.value + 16
+			}
+		}
+
+		badgeText.value =
+			selectedPeriod.value.timeframe === "day"
+				? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
+				: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
+
+		if (!badgeEl.value) return
+		if (idx < 2) {
+			badgeOffset.value = 0
+		} else if (idx > selectedPeriod.value.value - 3) {
+			badgeOffset.value = badgeEl.value.getBoundingClientRect().width
+		} else {
+			badgeOffset.value = badgeEl.value.getBoundingClientRect().width / 2
+		}
+	}
+	const onPointerleft = () => {
+		onLeave()
+		badgeText.value = ""
+	}
+
+	/** SVG Container */
+	const svg = d3
+		.create("svg")
+		.attr("width", width)
+		.attr("height", height)
+		.attr("viewBox", [0, 0, width, height])
+		.attr("preserveAspectRatio", "none")
+		.attr("style", "max-width: 100%;  height: intrinsic;")
+		.style("-webkit-tap-highlight-color", "transparent")
+		.on("pointerenter pointermove", onPointermoved)
+		.on("pointerleave", onPointerleft)
+		.on("touchstart", (event) => event.preventDefault())
+
+	/** Vertical Lines */
+	svg.append("path")
+		.attr("fill", "none")
+		.attr("stroke", "var(--op-10)")
+		.attr("stroke-width", 2)
+		.attr("d", `M${marginLeft},${height - marginBottom + 2} L${marginLeft},${height - marginBottom - 5}`)
+	svg.append("path")
+		.attr("fill", "none")
+		.attr("stroke", "var(--op-10)")
+		.attr("stroke-width", 2)
+		.attr("d", `M${width - 1},${height - marginBottom + 2} L${width - 1},${height - marginBottom - 5}`)
+
+	/** Default Horizontal Line  */
+	svg.append("path")
+		.attr("fill", "none")
+		.attr("stroke", "var(--op-10)")
+		.attr("stroke-width", 2)
+		.attr("d", `M${0},${height - marginBottom - 6} L${width},${height - marginBottom - 6}`)
+
+	/** Chart Line */
+	svg.append("path")
+		.attr("fill", "none")
+		.attr("stroke", "var(--green)")
+		.attr("stroke-width", 2)
+		.attr("stroke-linecap", "round")
+		.attr("stroke-linejoin", "round")
+		.attr("d", line(data.slice(0, data.length - 1)))
+	svg.append("path")
+		.attr("fill", "none")
+		.attr("stroke", "var(--green)")
+		.attr("stroke-width", 2)
+		.attr("stroke-linecap", "round")
+		.attr("stroke-linejoin", "round")
+		.attr("stroke-dasharray", "8")
+		.attr("d", line(data.slice(data.length - 2, data.length)))
+
+	svg.append("circle")
+		.attr("cx", x(data[data.length - 1].date))
+		.attr("cy", y(data[data.length - 1].value))
+		.attr("fill", "var(--green)")
+		.attr("r", 3)
+
+	if (chartEl.children[0]) chartEl.children[0].remove()
+	chartEl.append(svg.node())
+}
+
+const getSizeSeries = async () => {
+	sizeSeries.value = []
+
+	const sizeSeriesRawData = await fetchRollupSeries({
+		id: props.id,
+		name: "size",
+		timeframe: selectedPeriod.value.timeframe,
+		from: parseInt(
+			DateTime.now().minus({
+				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value : 0,
+				hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value : 0,
+			}).ts / 1_000,
+		),
+	})
+
+	const sizeSeriesMap = {}
+	sizeSeriesRawData.forEach((item) => {
+		sizeSeriesMap[DateTime.fromISO(item.time).toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")] =
+			item.value
+	})
+
+	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
+		const dt = DateTime.now().minus({
+			days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
+			hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value - i : 0,
+		})
+		sizeSeries.value.push({
+			date: dt.toJSDate(),
+			value: parseInt(sizeSeriesMap[dt.toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+		})
+	}
+}
+
+const getPfbSeries = async () => {
+	pfbSeries.value = []
+
+	const blobsSeriesRawData = await fetchRollupSeries({
+		id: props.id,
+		name: "blobs_count",
+		timeframe: selectedPeriod.value.timeframe,
+		from: parseInt(
+			DateTime.now().minus({
+				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value : 0,
+				hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value : 0,
+			}).ts / 1_000,
+		),
+	})
+
+	const blobsSeriesMap = {}
+	blobsSeriesRawData.forEach((item) => {
+		blobsSeriesMap[DateTime.fromISO(item.time).toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")] = item.value
+	})
+
+	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
+		const dt = DateTime.now().minus({
+			days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
+			hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value - i : 0,
+		})
+		pfbSeries.value.push({
+			date: dt.toJSDate(),
+			value: parseInt(blobsSeriesMap[dt.toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+		})
+	}
+}
+
+const buildNamespaceCharts = async () => {
+	await getSizeSeries()
+	buildChart(
+		sizeSeriesChartEl.value.wrapper,
+		sizeSeries.value,
+		() => (showSeriesTooltip.value = true),
+		() => (showSeriesTooltip.value = false),
+	)
+
+	await getPfbSeries()
+	buildChart(
+		pfbSeriesChartEl.value.wrapper,
+		pfbSeries.value,
+		() => (showPfbTooltip.value = true),
+		() => (showPfbTooltip.value = false),
+	)
+}
+
+watch(
+	() => selectedPeriodIdx.value,
+	() => {
+		buildNamespaceCharts()
+	},
+)
+
+const debouncedRedraw = useDebounceFn((e) => {
+	buildNamespaceCharts()
+}, 500)
+
+onMounted(async () => {
+	window.addEventListener("resize", debouncedRedraw)
+
+	buildNamespaceCharts()
+})
+
+onBeforeUnmount(() => {
+	window.removeEventListener("resize", debouncedRedraw)
+})
+</script>
+
+<template>
+	<Flex direction="column" gap="4">
+		<Flex align="center" justify="between" :class="$style.header">
+			<Flex align="center" gap="8">
+				<Icon name="chart" size="14" color="primary" />
+				<Text size="13" weight="600" color="primary">Analytics</Text>
+			</Flex>
+
+			<Dropdown>
+				<Button size="mini" type="secondary">
+					{{ selectedPeriod.title }}
+					<Icon name="chevron" size="12" color="secondary" />
+				</Button>
+
+				<template #popup>
+					<DropdownItem v-for="(period, idx) in periods" @click="selectedPeriodIdx = idx">
+						<Flex align="center" gap="8">
+							<Icon :name="idx === selectedPeriodIdx ? 'check' : ''" size="12" color="secondary" />
+							{{ period.title }}
+						</Flex>
+					</DropdownItem>
+				</template>
+			</Dropdown>
+		</Flex>
+
+		<Flex justify="between" gap="32" :class="$style.data">
+			<Flex direction="column" gap="20" wide>
+				<Text size="13" weight="600" color="primary">Storage Usage</Text>
+
+				<Flex ref="chartWrapperEl" direction="column" :class="$style.chart_wrapper">
+					<Flex direction="column" justify="between" :class="[$style.axis, $style.y]">
+						<Text
+							v-if="sizeSeries.length"
+							size="12"
+							weight="600"
+							color="tertiary"
+							:style="{ opacity: Math.max(...sizeSeries.map((d) => d.value)) ? 1 : 0 }"
+						>
+							{{ formatBytes(Math.max(...sizeSeries.map((d) => d.value)), 0) }}
+						</Text>
+						<Skeleton v-else-if="!sizeSeries.length" w="32" h="12" />
+
+						<Text
+							v-if="sizeSeries.length"
+							size="12"
+							weight="600"
+							color="tertiary"
+							:style="{
+								opacity:
+									Math.round(Math.max(...sizeSeries.map((d) => d.value)) / 2) !==
+									Math.max(...sizeSeries.map((d) => d.value))
+										? 1
+										: 0,
+							}"
+						>
+							{{ formatBytes(Math.round(Math.max(...sizeSeries.map((d) => d.value)) / 2), 0) }}
+						</Text>
+						<Skeleton v-else-if="!sizeSeries.length" w="24" h="12" />
+
+						<Text v-if="sizeSeries.length" size="12" weight="600" color="tertiary"> 0 </Text>
+						<Skeleton v-else-if="!sizeSeries.length" w="16" h="12" />
+					</Flex>
+
+					<Flex :class="[$style.axis, $style.x]">
+						<Flex align="end" justify="between" wide>
+							<Text v-if="selectedPeriod.timeframe === 'day'" size="12" weight="600" color="tertiary">
+								{{
+									DateTime.now()
+										.minus({ days: selectedPeriod.value - 1 })
+										.toFormat("LLL dd")
+								}}
+							</Text>
+							<Text v-else size="12" weight="600" color="tertiary">
+								{{ DateTime.now().minus({ hours: selectedPeriod.value }).set({ minutes: 0 }).toFormat("hh:mm a") }}
+							</Text>
+
+							<Text size="12" weight="600" color="tertiary">{{ selectedPeriod.timeframe === "day" ? "Today" : "Now" }}</Text>
+						</Flex>
+					</Flex>
+
+					<Transition name="fastfade">
+						<div v-if="showSeriesTooltip" :class="$style.tooltip_wrapper">
+							<div
+								:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
+								:class="$style.dot"
+							/>
+							<div :style="{ transform: `translateX(${tooltipXOffset}px)` }" :class="$style.line" />
+							<div
+								ref="badgeEl"
+								:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
+								:class="$style.badge"
+							>
+								<Text size="12" weight="600" color="secondary">
+									{{ badgeText }}
+								</Text>
+							</div>
+							<Flex
+								ref="tooltipEl"
+								:style="{ transform: `translate(${tooltipDynamicXPosition}px, ${tooltipYDataOffset - 40}px)` }"
+								direction="column"
+								gap="8"
+								:class="$style.tooltip"
+							>
+								<Flex align="center" gap="16">
+									<Text size="12" weight="600" color="secondary">Usage</Text>
+									<Text size="12" weight="600" color="primary"> {{ formatBytes(tooltipText) }} </Text>
+								</Flex>
+							</Flex>
+						</div>
+					</Transition>
+
+					<Flex ref="sizeSeriesChartEl" :class="$style.chart" />
+				</Flex>
+			</Flex>
+
+			<Flex direction="column" gap="16" wide>
+				<Text size="13" weight="600" color="primary">Blobs Count</Text>
+
+				<Flex direction="column" :class="$style.chart_wrapper">
+					<Flex direction="column" justify="between" :class="[$style.axis, $style.y]">
+						<Text
+							v-if="pfbSeries.length"
+							size="12"
+							weight="600"
+							color="tertiary"
+							:style="{ opacity: Math.max(...pfbSeries.map((d) => d.value)) ? 1 : 0 }"
+						>
+							{{ abbreviate(Math.max(...pfbSeries.map((d) => d.value)), 0) }}
+						</Text>
+						<Skeleton v-else-if="!pfbSeries.length" w="32" h="12" />
+
+						<Text
+							v-if="pfbSeries.length"
+							size="12"
+							weight="600"
+							color="tertiary"
+							:style="{
+								opacity:
+									Math.round(Math.max(...pfbSeries.map((d) => d.value)) / 2) != Math.max(...pfbSeries.map((d) => d.value))
+										? 1
+										: 0,
+							}"
+						>
+							{{ abbreviate(Math.round(Math.max(...pfbSeries.map((d) => d.value)) / 2), 0) }}
+						</Text>
+						<Skeleton v-else-if="!pfbSeries.length" w="24" h="12" />
+
+						<Text v-if="pfbSeries.length" size="12" weight="600" color="tertiary"> 0 </Text>
+						<Skeleton v-else-if="!pfbSeries.length" w="16" h="12" />
+					</Flex>
+
+					<Flex :class="[$style.axis, $style.x]">
+						<Flex align="end" justify="between" wide>
+							<Text v-if="selectedPeriod.timeframe === 'day'" size="12" weight="600" color="tertiary">
+								{{
+									DateTime.now()
+										.minus({ days: selectedPeriod.value - 1 })
+										.toFormat("LLL dd")
+								}}
+							</Text>
+							<Text v-else size="12" weight="600" color="tertiary">
+								{{ DateTime.now().minus({ hours: selectedPeriod.value }).set({ minutes: 0 }).toFormat("hh:mm a") }}
+							</Text>
+
+							<Text size="12" weight="600" color="tertiary">{{ selectedPeriod.timeframe === "day" ? "Today" : "Now" }}</Text>
+						</Flex>
+					</Flex>
+
+					<Transition name="fastfade">
+						<div v-if="showPfbTooltip" :class="$style.tooltip_wrapper">
+							<div
+								:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
+								:class="$style.dot"
+							/>
+							<div :style="{ transform: `translateX(${tooltipXOffset}px)` }" :class="$style.line" />
+							<div
+								ref="badgeEl"
+								:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
+								:class="$style.badge"
+							>
+								<Text size="12" weight="600" color="secondary">
+									{{ badgeText }}
+								</Text>
+							</div>
+							<Flex
+								ref="tooltipEl"
+								:style="{ transform: `translate(${tooltipDynamicXPosition}px, ${tooltipYDataOffset - 40}px)` }"
+								direction="column"
+								gap="8"
+								:class="$style.tooltip"
+							>
+								<Flex align="center" gap="16">
+									<Text size="12" weight="600" color="secondary">Count</Text>
+									<Text size="12" weight="600" color="primary"> {{ abbreviate(tooltipText) }} </Text>
+								</Flex>
+							</Flex>
+						</div>
+					</Transition>
+
+					<Flex ref="pfbSeriesChartEl" :class="$style.chart" />
+				</Flex>
+			</Flex>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.header {
+	height: 40px;
+
+	border-radius: 8px 8px 4px 4px;
+	background: var(--card-background);
+
+	padding: 0 12px;
+}
+
+.data {
+	border-radius: 4px 4px 8px 8px;
+	background: var(--card-background);
+
+	padding: 16px;
+}
+
+.chart_wrapper {
+	position: relative;
+
+	height: 180px;
+}
+
+.chart {
+	position: absolute;
+
+	& svg {
+		overflow: visible;
+	}
+}
+
+.axis {
+	position: absolute;
+	top: 0;
+	right: 0;
+
+	&.x {
+		bottom: 6px;
+		left: 40px;
+	}
+
+	&.y {
+		bottom: 34px;
+		left: 0;
+	}
+}
+
+.tooltip_wrapper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+
+	& .dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 50px;
+		background: var(--green);
+
+		box-shadow: 0 0 0 4px rgba(10, 222, 113, 27%);
+
+		transition: all 0.15s ease;
+	}
+
+	& .line {
+		position: absolute;
+		top: 0;
+		bottom: 32px;
+
+		border-left: 1px dashed var(--op-10);
+
+		transition: all 0.15s ease;
+	}
+
+	& .badge {
+		position: absolute;
+		bottom: 4px;
+
+		background: var(--card-background);
+
+		transition: all 0.15s ease;
+	}
+
+	& .tooltip {
+		pointer-events: none;
+		position: absolute;
+		z-index: 10;
+
+		background: var(--card-background);
+		border-radius: 6px;
+		box-shadow: inset 0 0 0 1px var(--op-5), 0 14px 34px rgba(0, 0, 0, 15%), 0 4px 14px rgba(0, 0, 0, 5%);
+
+		padding: 8px;
+
+		transition: all 0.2s ease;
+	}
+}
+
+@media (max-width: 800px) {
+	.data {
+		flex-direction: column;
+	}
+}
+</style>
diff --git a/components/modules/validator/ValidatorOverview.vue b/components/modules/validator/ValidatorOverview.vue
new file mode 100644
index 00000000..e27ce676
--- /dev/null
+++ b/components/modules/validator/ValidatorOverview.vue
@@ -0,0 +1,461 @@
+<script setup>
+/** UI */
+import Button from "@/components/ui/Button.vue"
+import Tooltip from "@/components/ui/Tooltip.vue"
+
+/** Tables */
+import BlocksTable from "./tables/BlocksTable.vue"
+
+/** Services */
+import { comma, numToPercent, shortHex, splitAddress } from "@/services/utils"
+
+/** API */
+import { fetchValidatorBlocks, fetchValidatorUptime } from "@/services/api/validator";
+
+/** Store */
+import { useCacheStore } from "@/store/cache"
+const cacheStore = useCacheStore()
+
+const props = defineProps({
+	validator: {
+		type: Object,
+		required: true,
+	},
+})
+
+const tabs = ref([
+	{
+		name: "Proposed Blocks",
+		icon: "block",
+	},
+])
+const activeTab = ref(tabs.value[0].name)
+
+const isRefetching = ref(false)
+const blocks = ref([])
+const uptime = ref([])
+
+const page = ref(1)
+// const pages = computed(() => activeTab.value === "Blobs" ? Math.ceil(props.rollup.blobs_count / 10) : 1)
+
+const handleNext = () => {
+	page.value += 1
+}
+const handlePrev = () => {
+	page.value -= 1
+}
+
+const getBlocks = async () => {
+	isRefetching.value = true
+
+	const { data } = await fetchValidatorBlocks({
+		id: props.validator.id,
+		limit: 10,
+		offset: (page.value - 1) * 10,
+	})
+
+	if (data.value?.length) {
+		blocks.value = data.value
+		cacheStore.current.blocks = blocks.value
+	}
+
+	isRefetching.value = false
+}
+
+const getUptime = async () => {
+	const { data } = await fetchValidatorUptime({
+		id: props.validator.id,
+		limit: 100,
+	})
+
+	if (data.value?.blocks?.length) {
+		uptime.value = data.value.blocks.sort((a, b) => a.height - b.height)
+	}
+}
+
+/** Initital fetch for blocks and uptime */
+await getBlocks()
+await getUptime()
+
+const parsedContacts = computed(() => {
+	let res = []
+	const emailRegex = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g;
+	const emails = props.validator.contacts.match(emailRegex);
+
+	if (emails) {
+		emails.forEach(email => {
+			res.push({
+				type: 'email',
+				value: 'mailto:' + email,
+			});
+		});
+	}
+
+	const telegramRegex = /https?:\/\/t\.me\/([A-Za-z0-9_]+)/g;
+	const telegrams = props.validator.contacts.match(telegramRegex);
+
+	if (telegrams) {
+		telegrams.forEach(telegram => {
+			res.push({
+				type: 'telegram',
+				value: telegram,
+			});
+		});
+	}
+
+	return res
+})
+
+/** Refetch Blobs/Messages on new page */
+watch(
+	() => page.value,
+	() => {
+		switch (activeTab.value) {
+			case "Proposed Blocks":
+				getBlocks()
+				break
+		}
+	},
+)
+</script>
+
+<template>
+	<Flex direction="column" gap="4">
+		<Flex align="center" justify="between" :class="$style.header">
+			<Flex align="center" gap="8">
+				<Icon name="validator" size="14" color="primary" />
+				<Text size="13" weight="600" color="primary">Validator</Text>
+			</Flex>
+		</Flex>
+
+		<Flex gap="4" :class="$style.content">
+			<Flex direction="column" :class="$style.data">
+				<Flex direction="column" gap="24" :class="$style.main">
+					<Flex align="center" gap="12" :class="$style.key_value">
+						<Flex direction="column" gap="8" :class="$style.key_value">
+							<Flex align="center" gap="10">
+								<Text v-if="validator.moniker" size="13" weight="600" color="primary">{{ validator.moniker }} </Text>
+								<Text v-else size="13" weight="600" color="primary">Validator</Text>
+							</Flex>
+							<Flex align="center" gap="6">
+								<Text size="12" weight="600" color="tertiary"> {{ splitAddress(validator.address) }} </Text>
+
+								<CopyButton :text="validator.address" />
+							</Flex>
+						</Flex>
+					</Flex>
+					<Flex v-if="validator.details" direction="column" gap="6">
+						<Text size="12" weight="600" color="secondary">Description</Text>
+
+						<Flex align="center" gap="6">
+							<Text size="12" height="140" weight="600" color="tertiary" mono selectable :class="$style.memo">
+								{{ validator.details }}
+							</Text>
+						</Flex>
+					</Flex>
+					<Flex align="center" justify="start" gap="12">
+						<Tooltip v-if="validator.website" position="start" delay="500">
+							<a :href="validator.website" target="_blank">
+								<Icon name="globe" size="14" color="secondary" :class="$style.btn" />
+							</a>
+
+							<template #content>
+								{{ validator.website }}
+							</template>
+						</Tooltip>
+
+						<template v-for="c in parsedContacts">
+							<Tooltip v-if="c.type !== 'unknown'" position="start" delay="500">
+								<a :href="c.value" target="_blank">
+									<Icon :name="c.type" size="14" color="secondary" :class="$style.btn" />
+								</a>
+
+								<template #content>
+									{{ c.value }}
+								</template>
+							</Tooltip>
+						</template>
+					</Flex>
+
+					<Flex direction="column" gap="16">
+						<Text size="12" weight="600" color="secondary">Details</Text>
+
+						<Flex v-if="!parsedContacts.length && validator.contacts" align="center" justify="between">
+							<Text size="12" weight="600" color="tertiary">Contact</Text>
+							<Text size="12" weight="600" color="tertiary" selectable> {{ validator.contacts }} </Text>
+						</Flex>
+
+						<Flex align="center" justify="between">
+							<Text size="12" weight="600" color="tertiary">Delegator Address</Text>
+							<Flex gap="6">
+								<AddressBadge :hash="validator.delegator" color="tertiary" />
+								<CopyButton :text="validator.delegator" />
+							</Flex>
+						</Flex>
+
+						<Flex align="center" justify="between">
+							<Text size="12" weight="600" color="tertiary">Consensus Address</Text>
+							<Flex gap="6">
+								<Text size="12" weight="600" color="tertiary"> {{ shortHex(validator.cons_address) }} </Text>
+								<CopyButton :text="validator.cons_address" />
+							</Flex>
+						</Flex>
+
+						<Flex align="center" justify="between">
+							<Text size="12" weight="600" color="tertiary">Identity</Text>
+							<Flex gap="6">
+								<Text size="12" weight="600" color="tertiary"> {{ validator.identity }} </Text>
+								<CopyButton :text="validator.identity" />
+							</Flex>
+						</Flex>
+
+						<Flex align="center" justify="between">
+							<Text size="12" weight="600" color="tertiary">Rate</Text>
+							<Text size="12" weight="600" color="secondary"> {{ numToPercent(validator.rate) }} </Text>
+						</Flex>
+
+						<Flex align="center" justify="between">
+							<Text size="12" weight="600" color="tertiary">Max Rate</Text>
+							<Text size="12" weight="600" color="secondary"> {{ numToPercent(validator.max_rate) }} </Text>
+						</Flex>
+
+						<Flex align="center" justify="between">
+							<Text size="12" weight="600" color="tertiary">Max Change Rate</Text>
+							<Text size="12" weight="600" color="secondary"> {{ numToPercent(validator.max_change_rate) }} </Text>
+						</Flex>
+
+						<Flex align="center" justify="between">
+							<Text size="12" weight="600" color="tertiary">Min Self Delegation</Text>
+							<Text size="12" weight="600" color="secondary"> {{ comma(validator.min_self_delegation) }} </Text>
+						</Flex>
+
+						<div :class="$style.horizontal_divider" />
+
+						<!-- Validator Uptime -->
+						<Text size="12" weight="600" color="secondary">Validator Uptime</Text>
+
+						<Flex :class="$style.uptime_wrapper">
+							<Tooltip v-for="t in uptime">
+								<Flex
+									:class="$style.uptime"
+									:style="{
+										background: t.signed ? 'rgb(10, 219, 111)' : 'red',
+									}"
+								/>
+
+								<template #content>
+									<Flex direction="column" gap="4">
+										<Text color="primary">{{ t.height }}</Text>
+										<Text color="secondary">{{ t.signed ? 'Signed' : 'Missed' }}</Text>
+									</Flex>
+								</template>
+							</Tooltip>
+						</Flex>
+					</Flex>
+				</Flex>				
+			</Flex>
+
+			<Flex direction="column" gap="4" wide :class="$style.txs_wrapper">
+				<Flex align="center" justify="between" :class="$style.tabs_wrapper">
+					<Flex gap="4" :class="$style.tabs">
+						<Flex
+							@click="activeTab = tab.name"
+							v-for="tab in tabs"
+							align="center"
+							gap="6"
+							:class="[$style.tab, activeTab === tab.name && $style.active]"
+						>
+							<Icon :name="tab.icon" size="12" color="secondary" />
+							<Text size="13" weight="600">{{ tab.name }}</Text>
+						</Flex>
+					</Flex>
+				</Flex>
+
+				<Flex direction="column" justify="center" gap="8" :class="[$style.table, isRefetching && $style.disabled]">
+					<BlocksTable v-if="blocks.length" :blocks="blocks" />
+
+					<Flex v-else align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
+						<Text size="13" weight="600" color="secondary" align="center"> No blocks </Text>
+						<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
+							This validator did not propose any block
+						</Text>
+					</Flex>
+
+					<!-- Pagination -->
+					<Flex v-if="blocks.length" align="center" gap="6" :class="$style.pagination">
+						<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1 || blocks.length !== 10">
+							<Icon name="arrow-left-stop" size="12" color="primary" />
+						</Button>
+						<Button type="secondary" @click="handlePrev" size="mini" :disabled="page === 1 || blocks.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 {{ page }}</Text>
+						</Button>
+
+						<Button @click="handleNext" type="secondary" size="mini" :disabled="blocks.length !== 10">
+							<Icon name="arrow-right" size="12" color="primary" />
+						</Button>
+					</Flex>
+				</Flex>
+			</Flex>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.header {
+	height: 40px;
+
+	border-radius: 8px 8px 4px 4px;
+	background: var(--card-background);
+
+	padding: 0 12px;
+}
+
+.data {
+	min-width: 384px;
+
+	border-radius: 4px 4px 4px 8px;
+	background: var(--card-background);
+
+	.main {
+		padding: 16px;
+
+		& .key_value {
+			max-width: 100%;
+		}
+	}
+
+	.memo {
+		max-width: 352px;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+
+	.uptime_wrapper {
+		max-width: 384px;
+		flex-wrap: wrap;
+	}
+
+	.uptime {
+		width: 10px;
+		height: 10px;
+
+		border-radius: 2px;
+		cursor: pointer;
+
+		margin-right: 6px;
+		margin-bottom: 6px;
+	}
+
+	.horizontal_divider {
+		width: 100%;
+		height: 2px;
+		background: var(--op-5);
+
+		margin-top: 4px;
+		margin-bottom: 4px;
+	}
+}
+
+.txs_wrapper {
+	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);
+	}
+}
+
+.table {
+	height: 100%;
+
+	border-radius: 4px 4px 8px 4px;
+	background: var(--card-background);
+}
+
+.table.disabled {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.empty {
+	padding-top: 16px;
+}
+
+.pagination {
+	padding: 0 16px 16px 16px;
+}
+
+@media (max-width: 800px) {
+	.content {
+		flex-direction: column;
+	}
+
+	.data {
+		min-width: initial;
+
+		border-radius: 4px;
+	}
+
+	.table {
+		border-radius: 4px 4px 8px 8px;
+	}
+}
+
+@media (max-width: 400px) {
+	.tabs_wrapper {
+		overflow-x: auto;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+
+	.hint {
+		display: none;
+	}
+}
+</style>
diff --git a/components/modules/validator/tables/BlocksTable.vue b/components/modules/validator/tables/BlocksTable.vue
new file mode 100644
index 00000000..2bfe2d79
--- /dev/null
+++ b/components/modules/validator/tables/BlocksTable.vue
@@ -0,0 +1,176 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** UI */
+import Tooltip from "@/components/ui/Tooltip.vue"
+
+/** Services */
+import { tia, comma, space, formatBytes } from "@/services/utils"
+
+/** Store */
+import { useCacheStore } from "@/store/cache"
+import { useModalsStore } from "@/store/modals"
+const cacheStore = useCacheStore()
+const modalsStore = useModalsStore()
+
+const props = defineProps({
+	blocks: {
+		type: Array,
+		required: true,
+	},
+})
+</script>
+
+<template>
+	<div :class="$style.wrapper_blocks">
+		<table :class="$style.table">
+			<thead>
+				<tr>
+					<th><Text size="12" weight="600" color="tertiary" noWrap>Height</Text></th>
+					<th><Text size="12" weight="600" color="tertiary" noWrap>Time</Text></th>
+					<th><Text size="12" weight="600" color="tertiary" noWrap>Txs</Text></th>
+					<th><Text size="12" weight="600" color="tertiary" noWrap>Blobs</Text></th>
+					<th><Text size="12" weight="600" color="tertiary" noWrap>Total Fees</Text></th>
+				</tr>
+			</thead>
+
+			<tbody>
+				<tr v-for="block in blocks">
+					<td style="width: 1px">
+						<NuxtLink :to="`/block/${block.height}`">
+							<Flex align="center">
+								<Outline>
+									<Flex align="center" gap="6">
+										<Icon
+											name="block"
+											size="14"
+											:color="hintedBlock == block.height ? 'blue' : 'tertiary'"
+										/>
+
+										<Text size="13" weight="600" color="primary" tabular>{{ comma(block.height) }}</Text>
+									</Flex>
+								</Outline>
+							</Flex>
+						</NuxtLink>
+					</td>
+					<td>
+						<NuxtLink :to="`/block/${block.height}`">
+							<Flex justify="center" direction="column" gap="6">
+								<Tooltip position="start" delay="500">
+									<Text size="12" weight="600" color="primary">
+										{{ DateTime.fromISO(block.time).toRelative({ locale: "en", style: "short" }) }}
+									</Text>
+
+									<template #content>
+										{{ DateTime.fromISO(block.time).setLocale("en").toFormat("LLL d, t") }}
+									</template>
+								</Tooltip>
+							</Flex>
+						</NuxtLink>
+					</td>
+					<td>
+						<NuxtLink :to="`/block/${block.height}`">
+							<Flex align="center">
+								<Text size="13" weight="600" color="primary">
+									{{ block.stats.tx_count }}
+								</Text>
+							</Flex>
+						</NuxtLink>
+					</td>
+					<td>
+						<NuxtLink :to="`/block/${block.height}`">
+							<Flex align="center">
+								<Text size="13" weight="600" color="primary">
+									{{ block.stats.blobs_count }}
+								</Text>
+							</Flex>
+						</NuxtLink>
+					</td>
+					<td>
+						<NuxtLink :to="`/block/${block.height}`">
+							<Flex align="center" gap="4">
+								<Text size="13" weight="600" :color="parseFloat(block.stats.fee) ? 'primary' : 'tertiary'">
+									{{ tia(block.stats.fee) }}
+								</Text>
+								<Text size="13" weight="600" color="tertiary"> TIA </Text>
+							</Flex>
+						</NuxtLink>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<style module>
+.wrapper_blocks {
+	min-width: 100%;
+	width: 0;
+	height: 100%;
+
+	overflow-x: auto;
+}
+
+.table {
+	width: 100%;
+	height: fit-content;
+
+	border-spacing: 0px;
+
+	padding-bottom: 2px;
+
+	& 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;
+		}
+	}
+
+	& tr td {
+		padding: 0;
+		padding-top: 2px;
+		padding-bottom: 2px;
+		padding-right: 24px;
+
+		white-space: nowrap;
+
+		&:first-child {
+			padding-left: 16px;
+		}
+
+		& > a {
+			display: flex;
+
+			min-height: 40px;
+
+			padding-right: 24px;
+		}
+	}
+}
+</style>
diff --git a/components/modules/validator/tables/NamespacesTable.vue b/components/modules/validator/tables/NamespacesTable.vue
new file mode 100644
index 00000000..72bdee3b
--- /dev/null
+++ b/components/modules/validator/tables/NamespacesTable.vue
@@ -0,0 +1,195 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** UI */
+import Tooltip from "@/components/ui/Tooltip.vue"
+
+/** Services */
+import { comma, formatBytes, space, getNamespaceID } from "@/services/utils"
+
+const router = useRouter()
+
+const props = defineProps({
+	namespaces: {
+		type: Array,
+		required: true,
+	},
+})
+</script>
+
+<template>
+	<div :class="$style.wrapper_messages">
+		<table :class="$style.table">
+			<thead>
+				<tr>
+					<th><Text size="12" weight="600" color="tertiary">Namespace ID</Text></th>
+					<th><Text size="12" weight="600" color="tertiary">Time</Text></th>
+					<th><Text size="12" weight="600" color="tertiary">Version</Text></th>
+					<th><Text size="12" weight="600" color="tertiary">Size</Text></th>
+					<th><Text size="12" weight="600" color="tertiary">Pay For Blobs</Text></th>
+				</tr>
+			</thead>
+
+			<tbody>
+				<tr v-for="ns in namespaces">
+					<td style="width: 1px">
+						<NuxtLink :to="`/namespace/${ns.namespace_id}`">
+							<Flex align="center">
+								<Tooltip position="start">
+									<Flex :align="ns.name === getNamespaceID(ns.namespace_id) ? 'center' : 'start'" gap="8">
+										<template v-if="ns.hash">
+											<Flex direction="column" gap="4">
+												<Flex v-if="getNamespaceID(ns.namespace_id).length > 8" align="center" gap="8">
+													<Text size="12" weight="600" color="primary" mono>
+														{{ getNamespaceID(ns.namespace_id).slice(0, 4) }}
+													</Text>
+
+													<Flex align="center" gap="3">
+														<div v-for="dot in 3" class="dot" />
+													</Flex>
+
+													<Text size="12" weight="600" color="primary" mono>
+														{{ getNamespaceID(ns.namespace_id).slice(-4) }}
+													</Text>
+
+													<CopyButton :text="getNamespaceID(ns.namespace_id)" />
+												</Flex>
+
+												<Flex v-else align="center" gap="8">
+													<Text size="12" weight="600" color="primary" mono>
+														{{ space(getNamespaceID(ns.namespace_id)) }}
+													</Text>
+
+													<CopyButton :text="getNamespaceID(ns.namespace_id)" />
+												</Flex>
+
+												<Text
+													v-if="ns.name !== getNamespaceID(ns.namespace_id)"
+													size="12"
+													weight="500"
+													color="tertiary"
+												>
+													{{ ns.name }}
+												</Text>
+											</Flex>
+										</template>
+										<template v-else>
+											<Text size="13" weight="700" color="secondary" mono>Genesis</Text>
+										</template>
+									</Flex>
+
+									<template #content>
+										{{ space(getNamespaceID(ns.namespace_id)) }}
+									</template>
+								</Tooltip>
+							</Flex>
+						</NuxtLink>
+					</td>
+					<td>
+						<NuxtLink :to="`/namespace/${ns.namespace_id}`">
+							<Flex direction="column" justify="center" gap="4">
+								<Text size="12" weight="600" color="primary">
+									{{ DateTime.fromISO(ns.last_message_time).toRelative({ locale: "en", style: "short" }) }}
+								</Text>
+								<Text size="12" weight="500" color="tertiary">
+									{{ DateTime.fromISO(ns.last_message_time).setLocale("en").toFormat("LLL d, t") }}
+								</Text>
+							</Flex>
+						</NuxtLink>
+					</td>
+					<td>
+						<NuxtLink :to="`/namespace/${ns.namespace_id}`">
+							<Flex align="center">
+								<Text size="13" weight="600" color="primary">{{ ns.version }}</Text>
+							</Flex>
+						</NuxtLink>
+					</td>
+					<td>
+						<NuxtLink :to="`/namespace/${ns.namespace_id}`">
+							<Flex align="center">
+								<Text size="13" weight="600" color="primary">{{ formatBytes(ns.size) }}</Text>
+							</Flex>
+						</NuxtLink>
+					</td>
+					<td>
+						<NuxtLink :to="`/namespace/${ns.namespace_id}`">
+							<Flex align="center">
+								<Text size="13" weight="600" color="primary">{{ comma(ns.pfb_count) }}</Text>
+							</Flex>
+						</NuxtLink>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<style module>
+.wrapper_messages {
+	min-width: 100%;
+	width: 0;
+	height: 100%;
+
+	overflow-x: auto;
+}
+
+.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: 16px;
+		padding-bottom: 8px;
+
+		&:first-child {
+			padding-left: 16px;
+		}
+
+		& span {
+			display: flex;
+		}
+	}
+
+	& tr td {
+		padding: 0;
+
+		white-space: nowrap;
+
+		&:first-child {
+			padding-left: 16px;
+		}
+
+		& > a {
+			display: flex;
+
+			min-height: 40px;
+
+			padding-right: 24px;
+		}
+	}
+}
+</style>
diff --git a/components/widgets/TemporaryWidget.vue b/components/widgets/TemporaryWidget.vue
index fe0b5856..eb5aae95 100644
--- a/components/widgets/TemporaryWidget.vue
+++ b/components/widgets/TemporaryWidget.vue
@@ -26,9 +26,15 @@ const totalValidators = computed(() => appStore.lastHead?.total_validators)
 		</Flex>
 
 		<Flex direction="column" gap="24" :class="$style.bottom">
-			<Flex align="center" gap="6">
-				<Icon name="address" size="12" color="secondary" />
-				<Text size="13" weight="600" height="110" color="secondary">Validators</Text>
+			<Flex align="center" justify="between">
+				<Flex align="center" gap="6">
+					<Icon name="validator" size="12" color="secondary" />
+					<Text size="13" weight="600" height="110" color="secondary">Validators</Text>
+				</Flex>
+				
+				<NuxtLink :to="'/validators'" :class="$style.link">
+					<Text size="11" weight="600" height="110" color="tertiary">View All</Text>
+				</NuxtLink>
 			</Flex>
 
 			<Tooltip v-if="totalValidators" position="start">
@@ -118,6 +124,18 @@ const totalValidators = computed(() => appStore.lastHead?.total_validators)
 	}
 }
 
+.link {
+	height: 24px;
+
+	& span {
+		transition: all 0.2s ease;
+
+		&:hover {
+			color: var(--txt-primary);
+		}
+	}
+}
+
 @media (max-width: 1100px) {
 	.wrapper {
 		flex-direction: row;
diff --git a/pages/addresses.vue b/pages/addresses.vue
index d0187308..97846ca3 100644
--- a/pages/addresses.vue
+++ b/pages/addresses.vue
@@ -311,7 +311,6 @@ const handleLast = async () => {
 	}
 
 	.header {
-		flex-direction: column;
 		gap: 16px;
 
 		height: initial;
diff --git a/pages/blocks.vue b/pages/blocks.vue
index 3cf81160..f0283d6d 100644
--- a/pages/blocks.vue
+++ b/pages/blocks.vue
@@ -425,7 +425,6 @@ const handleLast = async () => {
 	}
 
 	.header {
-		flex-direction: column;
 		gap: 16px;
 
 		height: initial;
diff --git a/pages/rollups.vue b/pages/rollups.vue
index d84f7757..fb59a5e0 100644
--- a/pages/rollups.vue
+++ b/pages/rollups.vue
@@ -433,7 +433,6 @@ const handleNext = () => {
 	}
 
 	.header {
-		flex-direction: column;
 		gap: 16px;
 
 		height: initial;
diff --git a/pages/txs.vue b/pages/txs.vue
index ee68d543..f26c15d8 100644
--- a/pages/txs.vue
+++ b/pages/txs.vue
@@ -847,7 +847,6 @@ const handleNext = () => {
 	}
 
 	.header {
-		flex-direction: column;
 		gap: 16px;
 
 		height: initial;
diff --git a/pages/validator/[id].vue b/pages/validator/[id].vue
new file mode 100644
index 00000000..eb0150a5
--- /dev/null
+++ b/pages/validator/[id].vue
@@ -0,0 +1,116 @@
+<script setup>
+/** Components: Modules */
+import ValidatorOverview from "@/components/modules/validator/ValidatorOverview.vue"
+
+/** API */
+import { fetchValidatorByID } from "@/services/api/validator";
+
+/** UI */
+import Button from "@/components/ui/Button.vue"
+
+/** Store */
+import { useCacheStore } from "@/store/cache"
+const cacheStore = useCacheStore()
+
+const route = useRoute()
+const router = useRouter()
+
+const validator = ref()
+const { data: rawValidator } = await fetchValidatorByID(route.params.id)
+
+if (!rawValidator.value) {
+	router.push("/")
+} else {
+	validator.value = rawValidator.value
+	cacheStore.current.validator = validator.value
+}
+
+defineOgImage({
+	title: "Validator",
+	validator: validator.value,
+	component: "ValidatorImage",
+	cacheKey: `${validator.value?.moniker}`,
+})
+
+useHead({
+	title: `Validator ${validator.value?.moniker} - Celestia Explorer`,
+	link: [
+		{
+			rel: "canonical",
+			href: `https://celenium.io${route.path}`,
+		},
+	],
+	meta: [
+		{
+			name: "description",
+			content: `Validator ${validator.value?.moniker} blocks, metadata, uptime, rates, social links, contacts and other data.`,
+		},
+		{
+			property: "og:title",
+			content: `Validator ${validator.value?.moniker} - Celestia Explorer`,
+		},
+		{
+			property: "og:description",
+			content: `Validator ${validator.value?.moniker} blocks, metadata, uptime, rates, social links, contacts and other data.`,
+		},
+		{
+			property: "og:url",
+			content: `https://celenium.io${route.path}`,
+		},
+		{
+			property: "og:image",
+			content: `https://celenium.io${route.path}__og_image__/og.png`,
+		},
+		{
+			name: "twitter:title",
+			content: `Validator ${validator.value?.moniker} - Celestia Explorer`,
+		},
+		{
+			name: "twitter:description",
+			content: `Validator ${validator.value?.moniker} blocks, metadata, uptime, rates, social links, contacts and other data.`,
+		},
+		{
+			name: "twitter:card",
+			content: "summary_large_image",
+		},
+	],
+})
+</script>
+
+<template>
+	<Flex direction="column" gap="32" wide :class="$style.wrapper">
+		<Flex direction="column" gap="16">
+			<Flex align="end" justify="between" :class="$style.breadcrumbs">
+				<Breadcrumbs
+					v-if="validator"
+					:items="[
+						{ link: '/', name: 'Explore' },
+						{ link: '/validators', name: 'Validators' },
+						{ link: route.fullPath, name: validator.moniker ? validator.moniker : validator.address },
+					]"
+				/>
+
+				<!-- <Button link="https://forms.gle/nimJyQJG4Lb4BTcG7" target="_blank" type="secondary" size="mini">
+					<Icon name="rollup-plus" size="12" color="secondary" /> Rollup Registration
+				</Button> -->
+			</Flex>
+			<ValidatorOverview v-if="validator" :validator="validator" />
+		</Flex>
+
+		<!-- <RollupCharts v-if="rollup" :id="rollup.id" /> -->
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+	max-width: calc(var(--base-width) + 48px);
+
+	padding: 40px 24px 60px 24px;
+}
+
+@media (max-width: 500px) {
+	.wrapper {
+		padding: 32px 12px;
+	}
+}
+</style>
diff --git a/pages/validators.vue b/pages/validators.vue
new file mode 100644
index 00000000..bdd3e3e7
--- /dev/null
+++ b/pages/validators.vue
@@ -0,0 +1,367 @@
+<script setup>
+/** UI */
+import Button from "@/components/ui/Button.vue"
+
+/** Services */
+import { comma, numToPercent } from "@/services/utils"
+
+/** API */
+import { fetchValidators } from "@/services/api/validator"
+
+useHead({
+	title: "Validators - Celestia Explorer",
+	link: [
+		{
+			rel: "canonical",
+			href: "https://celenium.io/validators",
+		},
+	],
+	meta: [
+		{
+			name: "description",
+			content: "Validators in the Celestia Blockchain. Validators name, description, rates, blocks, uptime, social links, contacts are shown.",
+		},
+		{
+			property: "og:title",
+			content: "Validators - Celestia Explorer",
+		},
+		{
+			property: "og:description",
+			content: "Validators in the Celestia Blockchain. Validators name, description, rates, blocks, uptime, social links, contacts are shown.",
+		},
+		{
+			property: "og:url",
+			content: `https://celenium.io/validators`,
+		},
+		{
+			property: "og:image",
+			content: "/img/seo/validators.png",
+		},
+		{
+			name: "twitter:title",
+			content: "Validators - Celestia Explorer",
+		},
+		{
+			name: "twitter:description",
+			content: "Validators in the Celestia Blockchain. Validators name, description, rates, blocks, uptime, social links, contacts are shown.",
+		},
+		{
+			name: "twitter:card",
+			content: "summary_large_image",
+		},
+		{
+			name: "twitter:image",
+			content: "https://celenium.io/img/seo/validators.png",
+		},
+	],
+})
+
+const route = useRoute()
+const router = useRouter()
+
+const isLoading = ref(false)
+const validators = ref([])
+const count = ref(0)
+
+// const sort = reactive({
+// 	by: "size",
+// 	dir: "desc",
+// })
+
+// const getRollupsCount = async () => {
+// 	const { data: rollupsCount } = await fetchRollupsCount()
+// 	count.value = rollupsCount.value
+// }
+
+// await getRollupsCount()
+
+// const page = ref(route.query.page ? parseInt(route.query.page) : 1)
+// const pages = computed(() => Math.ceil(30 / 20))
+const page = ref(route.query.page ? parseInt(route.query.page) : 1)
+const pages = computed(() => 21)
+
+const getValidators = async () => {
+	isLoading.value = true
+
+	const { data } = await fetchValidators({
+		limit: 20,
+		offset: (page.value - 1) * 20,
+	})
+	validators.value = data.value
+
+	isLoading.value = false
+}
+
+getValidators()
+
+/** Refetch validators */
+watch(
+	() => page.value,
+	async () => {
+		getValidators()
+
+		router.replace({ query: { page: page.value } })
+	},
+)
+
+// const handleSort = (by) => {
+// 	switch (sort.dir) {
+// 		case "desc":
+// 			if (sort.by == by) sort.dir = "asc"
+// 			break
+
+// 		case "asc":
+// 			sort.dir = "desc"
+
+// 			break
+// 	}
+
+// 	sort.by = by
+
+// 	getRollups()
+// }
+
+const handlePrev = () => {
+	if (page.value === 1) return
+
+	page.value -= 1
+}
+
+const handleNext = () => {
+	if (page.value === pages.value) return
+
+	page.value += 1
+}
+
+</script>
+
+<template>
+	<Flex direction="column" wide :class="$style.wrapper">
+		<Flex align="end" justify="between" :class="$style.breadcrumbs">
+			<Breadcrumbs
+				:items="[
+					{ link: '/', name: 'Explore' },
+					{ link: '/validators', name: `Validators` },
+				]"
+			/>
+		</Flex>
+
+		<Flex wide direction="column" gap="4">
+			<Flex justify="between" :class="$style.header">
+				<Flex align="center" gap="8">
+					<Icon name="validator" size="16" color="secondary" />
+					<Text size="14" weight="600" color="primary">Validators</Text>
+				</Flex>
+
+				<!-- 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 @click="handlePrev" type="secondary" 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 {{ page }}</Text>
+					</Button>
+
+					<Button @click="handleNext" type="secondary" size="mini" :disabled="validators.length < 20">
+						<Icon name="arrow-right" size="12" color="primary" />
+					</Button>
+				</Flex>
+			</Flex>
+
+			<Flex direction="column" gap="16" wide :class="[$style.table, isLoading && $style.disabled]">
+				<div v-if="validators.length"  :class="$style.table_scroller">
+					<table>
+						<thead>
+							<tr>
+								<th><Text size="12" weight="600" color="tertiary" noWrap>Validator</Text></th>
+								<th><Text size="12" weight="600" color="tertiary" noWrap>Rate</Text></th>
+								<th><Text size="12" weight="600" color="tertiary" noWrap>Max Rate</Text></th>
+								<th><Text size="12" weight="600" color="tertiary" noWrap>Max Change Rate</Text></th>
+								<th><Text size="12" weight="600" color="tertiary" noWrap>Min Self Delegation</Text></th>
+							</tr>
+						</thead>
+
+						<tbody>
+							<tr v-for="v in validators">
+								<td style="width: 1px">
+									<NuxtLink :to="`/validator/${v.id}`">
+										<Flex v-if="v.moniker" align="center" gap="6">
+											<Text size="13" weight="600" color="primary" mono>
+												{{ v.moniker }}
+											</Text>
+
+											<CopyButton :text="v.moniker" />
+										</Flex>
+										<Flex v-else align="center" gap="6">
+											<AddressBadge :hash="v.address" />
+
+											<CopyButton :text="v.address" />
+										</Flex>
+									</NuxtLink>
+								</td>
+								<td>
+									<NuxtLink :to="`/validator/${v.id}`">
+										<Flex align="center">
+											<Text size="13" weight="600" color="primary">{{ numToPercent(v.rate) }}</Text>
+										</Flex>
+									</NuxtLink>
+								</td>
+								<td>
+									<NuxtLink :to="`/validator/${v.id}`">
+										<Flex align="center">
+											<Text size="13" weight="600" color="primary">{{ numToPercent(v.max_rate) }}</Text>
+										</Flex>
+									</NuxtLink>
+								</td>
+								<td>
+									<NuxtLink :to="`/validator/${v.id}`">
+										<Flex align="center">
+											<Text size="13" weight="600" color="primary">{{ numToPercent(v.max_change_rate) }}</Text>
+										</Flex>
+									</NuxtLink>
+								</td>
+								<td>
+									<NuxtLink :to="`/validator/${v.id}`">
+										<Flex align="center">
+											<Text size="13" weight="600" color="primary">{{ comma(v.min_self_delegation) }}</Text>
+										</Flex>
+									</NuxtLink>
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+			</Flex>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+	max-width: calc(var(--base-width) + 48px);
+
+	padding: 40px 24px 60px 24px;
+}
+
+.breadcrumbs {
+	margin-bottom: 16px;
+}
+
+.header {
+	height: 46px;
+
+	border-radius: 8px 8px 4px 4px;
+	background: var(--card-background);
+
+	padding: 0 16px;
+}
+
+.table_scroller {
+	overflow-x: auto;
+}
+
+.table {
+	border-radius: 4px 4px 8px 8px;
+	background: var(--card-background);
+
+	transition: all 0.2s ease;
+
+	& table {
+		width: 100%;
+		height: fit-content;
+
+		border-spacing: 0px;
+
+		padding-bottom: 12px;
+
+		& 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;
+
+			& span {
+				display: flex;
+			}
+
+			&:first-child {
+				padding-left: 16px;
+				width: 16px;
+			}
+
+			&.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: 44px;
+
+				padding-right: 24px;
+			}
+		}
+	}
+}
+
+.table.disabled {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+@media (max-width: 500px) {
+	.wrapper {
+		padding: 32px 12px;
+	}
+
+	.header {
+		gap: 16px;
+
+		height: initial;
+
+		padding: 16px;
+	}
+}
+
+.empty {
+	padding: 16px 0;
+}
+</style>
diff --git a/public/img/seo/validators.png b/public/img/seo/validators.png
new file mode 100644
index 00000000..06e472bd
Binary files /dev/null and b/public/img/seo/validators.png differ
diff --git a/services/api/validator.js b/services/api/validator.js
new file mode 100644
index 00000000..9d6cb613
--- /dev/null
+++ b/services/api/validator.js
@@ -0,0 +1,55 @@
+/** Services */
+import { useServerURL } from "@/services/config"
+
+export const fetchValidators = async ({ limit, offset, sort }) => {
+	try {
+		const url = new URL(`${useServerURL()}/validators`)
+
+		if (limit) url.searchParams.append("limit", limit)
+		if (offset) url.searchParams.append("offset", offset)
+		if (sort) url.searchParams.append("sort", sort)
+
+		const data = await useFetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+export const fetchValidatorByID = async (id) => {
+	try {
+		const url = new URL(`${useServerURL()}/validators/${id}`)
+
+		const data = await useFetch(encodeURI(url.href))
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+export const fetchValidatorBlocks = async ({ id, limit, offset }) => {
+	try {
+		const url = new URL(`${useServerURL()}/validators/${id}/blocks`)
+
+		if (limit) url.searchParams.append("limit", limit)
+		if (offset) url.searchParams.append("offset", offset)
+
+		const data = await useFetch(encodeURI(url.href))
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+export const fetchValidatorUptime = async ({ id, limit }) => {
+	try {
+		const url = new URL(`${useServerURL()}/validators/${id}/uptime`)
+
+		if (limit) url.searchParams.append("limit", limit)
+
+		const data = await useFetch(encodeURI(url.href))
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
diff --git a/services/utils/general.js b/services/utils/general.js
index 7ee749a8..4ed81b3f 100644
--- a/services/utils/general.js
+++ b/services/utils/general.js
@@ -9,6 +9,11 @@ export const formatBytes = (bytes, decimals = 2) => {
 	return `${parseFloat((bytes / Math.pow(1024, i)).toFixed(dm))} ${sizes[i]}`
 }
 
+export const numToPercent = (num) => {
+	return (num * 100).toFixed(0) + "%"
+}
+
+
 export const getNamespaceID = (target) => {
 	let s = target
 
@@ -30,6 +35,14 @@ export const strToHex = (str) => {
 	return hex
 }
 
+export const shortHex = (hex) => {
+	if (hex.length > 16) {
+		return `${hex.slice(0, 8)} ••• ${hex.slice(-8)}`
+	} else {
+		return hex
+	}
+}
+
 export const splitAddress = (address, format = "string") => {
 	if (address.startsWith("celestiavaloper")) {
 		return format === "array" ? [`celestiavaloper`, address.slice(-4)] : `celestiavaloper ••• ${address.slice(-4)}`