diff --git a/assets/icons.json b/assets/icons.json
index 495acd8e..48294d08 100644
--- a/assets/icons.json
+++ b/assets/icons.json
@@ -115,6 +115,7 @@
 		}
 	],
 	"calc": "M 16.241 2 C 17.046 2 17.711 2 18.251 2.044 C 18.814 2.09 19.331 2.189 19.816 2.436 C 20.569 2.819 21.181 3.431 21.564 4.184 C 21.811 4.669 21.91 5.186 21.956 5.748 C 22 6.29 22 6.954 22 7.758 L 22 16.241 C 22 17.046 22 17.711 21.956 18.251 C 21.91 18.814 21.811 19.331 21.564 19.816 C 21.181 20.569 20.569 21.181 19.816 21.564 C 19.331 21.811 18.814 21.91 18.252 21.956 C 17.711 22 17.046 22 16.242 22 L 7.758 22 C 6.953 22 6.288 22 5.748 21.956 C 5.185 21.91 4.668 21.811 4.183 21.564 C 3.43 21.181 2.818 20.569 2.435 19.816 C 2.188 19.331 2.089 18.814 2.043 18.252 C 2 17.71 2 17.046 2 16.242 L 2 7.758 C 2 6.953 2 6.288 2.044 5.748 C 2.09 5.185 2.189 4.668 2.436 4.183 C 2.819 3.43 3.431 2.818 4.184 2.435 C 4.669 2.188 5.186 2.089 5.748 2.043 C 6.29 2 6.954 2 7.758 2 Z M 7.207 18.207 L 18.207 7.207 C 18.586 6.815 18.581 6.191 18.195 5.805 C 17.809 5.419 17.185 5.414 16.793 5.793 L 5.793 16.793 C 5.533 17.044 5.429 17.416 5.52 17.766 C 5.612 18.115 5.885 18.388 6.234 18.48 C 6.584 18.571 6.956 18.467 7.207 18.207 Z M 9.5 6.5 C 9.5 5.948 9.052 5.5 8.5 5.5 C 7.948 5.5 7.5 5.948 7.5 6.5 L 7.5 7.5 L 6.5 7.5 C 5.948 7.5 5.5 7.948 5.5 8.5 C 5.5 9.052 5.948 9.5 6.5 9.5 L 7.5 9.5 L 7.5 10.5 C 7.5 11.052 7.948 11.5 8.5 11.5 C 9.052 11.5 9.5 11.052 9.5 10.5 L 9.5 9.5 L 10.5 9.5 C 11.052 9.5 11.5 9.052 11.5 8.5 C 11.5 7.948 11.052 7.5 10.5 7.5 L 9.5 7.5 Z M 13.5 16.5 L 17.5 16.5 C 18.052 16.5 18.5 16.052 18.5 15.5 C 18.5 14.948 18.052 14.5 17.5 14.5 L 13.5 14.5 C 12.948 14.5 12.5 14.948 12.5 15.5 C 12.5 16.052 12.948 16.5 13.5 16.5 Z",
+	"alt-arrow-down": "M12.3698 15.835L18.7998 9.205C19.2008 8.79 18.9578 8 18.4298 8H5.56982C5.04182 8 4.79882 8.79 5.19982 9.205L11.6298 15.835C11.8428 16.055 12.1568 16.055 12.3698 15.835Z",
 	"arrow-left": "M12.7071 5.70711C13.0976 5.31658 13.0976 4.68342 12.7071 4.29289C12.3166 3.90237 11.6834 3.90237 11.2929 4.29289L4.29289 11.2929C3.90237 11.6834 3.90237 12.3166 4.29289 12.7071L11.2929 19.7071C11.6834 20.0976 12.3166 20.0976 12.7071 19.7071C13.0976 19.3166 13.0976 18.6834 12.7071 18.2929L7.41421 13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H7.41421L12.7071 5.70711Z",
 	"arrow-left-stop": "M4 3C4 2.44772 3.55229 2 3 2C2.44772 2 2 2.44772 2 3V21C2 21.5523 2.44772 22 3 22C3.55228 22 4 21.5523 4 21V3ZM14.7071 5.70711L9.41421 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H9.41421L14.7071 18.2929C15.0976 18.6834 15.0976 19.3166 14.7071 19.7071C14.3166 20.0976 13.6834 20.0976 13.2929 19.7071L6.29289 12.7071C5.90237 12.3166 5.90237 11.6834 6.29289 11.2929L13.2929 4.29289C13.6834 3.90237 14.3166 3.90237 14.7071 4.29289C15.0976 4.68342 15.0976 5.31658 14.7071 5.70711Z",
 	"arrow-right": "M12.7071 4.29289C12.3166 3.90237 11.6834 3.90237 11.2929 4.29289C10.9024 4.68342 10.9024 5.31658 11.2929 5.70711L16.5858 11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H16.5858L11.2929 18.2929C10.9024 18.6834 10.9024 19.3166 11.2929 19.7071C11.6834 20.0976 12.3166 20.0976 12.7071 19.7071L19.7071 12.7071C20.0976 12.3166 20.0976 11.6834 19.7071 11.2929L12.7071 4.29289Z",
@@ -128,7 +129,7 @@
 	"logout": "M13.4139 3.58611C13.1911 3.3633 12.8639 3.1959 12.1581 3.10095C11.4234 3.00213 10.4423 3 9 3H8C6.55722 3 5.57589 3.00213 4.84104 3.10095C4.13503 3.1959 3.8079 3.36331 3.58511 3.58611C3.36305 3.80817 3.19574 4.13501 3.10085 4.84139C3.00212 5.57633 3 6.55776 3 8V16C3 17.4422 3.00212 18.4237 3.10085 19.1586C3.19568 19.8646 3.36285 20.1914 3.58471 20.4135L3.58511 20.4139C3.8086 20.6369 4.13614 20.8042 4.84143 20.8991C5.57615 20.9979 6.55721 21 8 21H9C10.4423 21 11.4234 20.9979 12.1581 20.8991C12.8639 20.8041 13.1911 20.6367 13.4139 20.4139C13.6103 20.2175 13.7611 19.9423 13.8595 19.4073C13.963 18.8439 13.992 18.0898 13.998 16.9945C14.0011 16.4422 14.4512 15.997 15.0035 16C15.5558 16.0031 16.001 16.4532 15.998 17.0055C15.992 18.0852 15.9665 19.0076 15.8265 19.7689C15.6814 20.5587 15.3997 21.2565 14.8281 21.8281C14.1719 22.4843 13.3526 22.7564 12.4247 22.8812C11.541 23.0001 10.4245 23 9.07059 23H9.07057H9H8H7.92935H7.92933C6.57499 23 5.45853 23.0001 4.57482 22.8812C3.64679 22.7564 2.82779 22.4843 2.1713 21.8285L2.17089 21.8281C1.51495 21.1722 1.24326 20.3525 1.11865 19.4249C0.999933 18.5411 0.999962 17.4245 0.999996 16.0705L1 16V8L0.999996 7.9295C0.999962 6.57553 0.999933 5.45887 1.11865 4.57511C1.24326 3.64749 1.51495 2.82784 2.17089 2.17189C2.8271 1.51569 3.64647 1.2436 4.57446 1.1188C5.45829 0.999936 6.575 0.999964 7.92937 0.999999H7.9294L8 1H9L9.07059 0.999999H9.07062C10.4245 0.999964 11.541 0.999936 12.4247 1.1188C13.3526 1.24361 14.1719 1.5157 14.8281 2.17189C15.3997 2.74352 15.6814 3.44131 15.8265 4.2311C15.9665 4.99239 15.992 5.91482 15.998 6.99448C16.001 7.54676 15.5558 7.99694 15.0035 7.99999C14.4512 8.00303 14.0011 7.55779 13.998 7.00552C13.992 5.91018 13.963 5.15612 13.8595 4.59266C13.7611 4.05769 13.6103 3.78248 13.4139 3.58611ZM17.8492 9.75926C17.4299 9.39984 17.3813 8.76854 17.7407 8.34921C18.1002 7.92988 18.7315 7.88132 19.1508 8.24074L22.6508 11.2407C22.8724 11.4307 23 11.7081 23 12C23 12.2919 22.8724 12.5693 22.6508 12.7593L19.1508 15.7593C18.7315 16.1187 18.1002 16.0701 17.7407 15.6508C17.3813 15.2315 17.4299 14.6002 17.8492 14.2407L19.2967 13H9C8.44771 13 8 12.5523 8 12C8 11.4477 8.44771 11 9 11H19.2967L17.8492 9.75926Z",
 	"stars": "M15 1C15.4138 1 15.7848 1.25483 15.9333 1.64102L17.112 4.70544C17.4124 5.48648 17.5068 5.71155 17.6359 5.89315C17.7654 6.07536 17.9246 6.23455 18.1069 6.36411C18.2884 6.49323 18.5135 6.58763 19.2946 6.88803L22.359 8.06665C22.7452 8.21519 23 8.58623 23 9C23 9.41377 22.7452 9.78481 22.359 9.93335L19.2946 11.112C18.5135 11.4124 18.2884 11.5068 18.1069 11.6359C17.9246 11.7655 17.7655 11.9246 17.6359 12.1069C17.5068 12.2884 17.4124 12.5135 17.112 13.2946L15.9333 16.359C15.7848 16.7452 15.4138 17 15 17C14.5862 17 14.2152 16.7452 14.0667 16.359L12.888 13.2946C12.5876 12.5135 12.4932 12.2884 12.3641 12.1069C12.2345 11.9246 12.0754 11.7655 11.8931 11.6359C11.7116 11.5068 11.4865 11.4124 10.7054 11.112L7.64102 9.93335C7.25483 9.78481 7 9.41377 7 9C7 8.58623 7.25483 8.21519 7.64102 8.06665L10.7054 6.88803C11.4865 6.58763 11.7116 6.49323 11.8931 6.36411C12.0754 6.23455 12.2345 6.07535 12.3641 5.89315C12.4932 5.71155 12.5876 5.48648 12.888 4.70544L14.0667 1.64102C14.2152 1.25483 14.5862 1 15 1ZM6.5 12C6.87877 12 7.22503 12.214 7.39443 12.5528L8.17889 14.1217C8.46137 14.6867 8.54745 14.8493 8.65204 14.9849C8.75695 15.121 8.87896 15.243 9.01506 15.348C9.15075 15.4525 9.31333 15.5386 9.8783 15.8211L11.4472 16.6056C11.786 16.775 12 17.1212 12 17.5C12 17.8788 11.786 18.225 11.4472 18.3944L9.8783 19.1789C9.31333 19.4614 9.15075 19.5475 9.01506 19.652C8.87896 19.757 8.75695 19.879 8.65204 20.0151C8.54745 20.1507 8.46137 20.3133 8.17889 20.8783L7.39443 22.4472C7.22504 22.786 6.87877 23 6.5 23C6.12123 23 5.77497 22.786 5.60557 22.4472L4.82111 20.8783C4.53863 20.3133 4.45255 20.1507 4.34796 20.0151C4.24305 19.879 4.12104 19.757 3.98494 19.652C3.84925 19.5475 3.68667 19.4614 3.1217 19.1789L1.55279 18.3944C1.214 18.225 1 17.8788 1 17.5C1 17.1212 1.214 16.775 1.55279 16.6056L3.1217 15.8211C3.68667 15.5386 3.84925 15.4525 3.98494 15.348C4.12104 15.243 4.24305 15.121 4.34796 14.9849C4.45255 14.8493 4.53863 14.6867 4.82111 14.1217L5.60557 12.5528C5.77496 12.214 6.12123 12 6.5 12Z",
 	"time": "M 16.764 13.35 C 18.836 15.422 20 18.233 20 21.163 C 20 22.178 19.178 23 18.163 23 L 5.837 23 C 4.823 23 4 22.177 4 21.163 C 4 18.233 5.164 15.422 7.236 13.35 L 8.586 12 L 7.236 10.65 C 5.164 8.578 4 5.767 4 2.837 C 4 1.822 4.822 1 5.837 1 L 18.163 1 C 19.178 1 20 1.822 20 2.837 C 20 5.767 18.836 8.578 16.764 10.65 L 15.414 12 Z M 13 10.999 C 13.176 10.999 13.264 10.999 13.353 10.983 C 13.488 10.958 13.627 10.9 13.74 10.823 C 13.815 10.771 13.877 10.709 14 10.586 L 15.35 9.236 C 16.612 7.974 17.472 6.367 17.823 4.617 C 17.915 4.159 17.961 3.93 17.873 3.673 C 17.787 3.452 17.633 3.265 17.433 3.138 C 17.2 3 16.923 3 16.37 3 L 7.63 3 C 7.078 3 6.801 3 6.567 3.138 C 6.367 3.265 6.213 3.452 6.127 3.673 C 6.039 3.93 6.085 4.159 6.177 4.617 C 6.528 6.367 7.388 7.975 8.65 9.237 L 10 10.585 C 10.122 10.707 10.183 10.768 10.257 10.819 C 10.371 10.898 10.511 10.956 10.647 10.981 C 10.736 10.997 10.823 10.997 10.997 10.997 L 13 10.998 Z",
-	"clock-forward" : "M 10 2 C 6.274 2 3.042 4.573 2.205 8.203 C 1.368 11.834 3.149 15.562 6.499 17.193 C 9.849 18.824 13.881 17.926 16.223 15.028 C 16.575 14.615 17.192 14.558 17.613 14.899 C 18.035 15.241 18.108 15.856 17.777 16.286 C 15.88 18.637 13.021 20.002 10 20 C 4.477 20 0 15.523 0 10 C 0 4.477 4.477 0 10 0 C 15.134 0 19.365 3.87 19.935 8.851 L 19.993 8.793 C 20.385 8.414 21.009 8.419 21.395 8.805 C 21.781 9.191 21.786 9.815 21.407 10.207 L 19.407 12.207 C 19.017 12.597 18.384 12.597 17.994 12.207 L 15.993 10.207 C 15.614 9.815 15.619 9.191 16.005 8.805 C 16.391 8.419 17.015 8.414 17.407 8.793 L 17.975 9.361 C 17.975 9.361 14.171 2 10 2 Z M 11 9.465 L 13.555 11.168 C 14.015 11.475 14.139 12.095 13.832 12.555 C 13.525 13.015 12.905 13.139 12.445 12.832 L 9.445 10.832 C 9.167 10.646 9 10.334 9 10 L 9 5 C 9 4.448 9.448 4 10 4 C 10.552 4 11 4.448 11 5 Z",
+	"clock-forward": "M 10 2 C 6.274 2 3.042 4.573 2.205 8.203 C 1.368 11.834 3.149 15.562 6.499 17.193 C 9.849 18.824 13.881 17.926 16.223 15.028 C 16.575 14.615 17.192 14.558 17.613 14.899 C 18.035 15.241 18.108 15.856 17.777 16.286 C 15.88 18.637 13.021 20.002 10 20 C 4.477 20 0 15.523 0 10 C 0 4.477 4.477 0 10 0 C 15.134 0 19.365 3.87 19.935 8.851 L 19.993 8.793 C 20.385 8.414 21.009 8.419 21.395 8.805 C 21.781 9.191 21.786 9.815 21.407 10.207 L 19.407 12.207 C 19.017 12.597 18.384 12.597 17.994 12.207 L 15.993 10.207 C 15.614 9.815 15.619 9.191 16.005 8.805 C 16.391 8.419 17.015 8.414 17.407 8.793 L 17.975 9.361 C 17.975 9.361 14.171 2 10 2 Z M 11 9.465 L 13.555 11.168 C 14.015 11.475 14.139 12.095 13.832 12.555 C 13.525 13.015 12.905 13.139 12.445 12.832 L 9.445 10.832 C 9.167 10.646 9 10.334 9 10 L 9 5 C 9 4.448 9.448 4 10 4 C 10.552 4 11 4.448 11 5 Z",
 	"calendar-date": "M 15 2.001 C 15.476 2.003 15.891 2.013 16.252 2.043 C 16.814 2.089 17.331 2.188 17.816 2.435 C 18.569 2.818 19.181 3.43 19.564 4.183 C 19.811 4.668 19.91 5.185 19.956 5.748 C 20 6.288 20 6.953 20 7.758 L 20 16.242 C 20 17.046 20 17.711 19.956 18.252 C 19.91 18.814 19.811 19.331 19.564 19.816 C 19.181 20.569 18.569 21.181 17.816 21.564 C 17.331 21.811 16.814 21.91 16.251 21.956 C 15.711 22 15.046 22 14.241 22 L 5.758 22 C 4.954 22 4.29 22 3.748 21.956 C 3.186 21.91 2.669 21.811 2.184 21.564 C 1.431 21.181 0.819 20.569 0.436 19.816 C 0.189 19.331 0.09 18.814 0.044 18.251 C 0 17.711 0 17.046 0 16.241 L 0 7.758 C 0 6.954 0 6.29 0.044 5.748 C 0.09 5.186 0.189 4.669 0.436 4.184 C 0.819 3.431 1.431 2.819 2.184 2.436 C 2.669 2.189 3.186 2.09 3.748 2.044 C 4.109 2.015 4.525 2.005 5 2.002 L 5 1 C 5 0.448 5.448 0 6 0 C 6.552 0 7 0.448 7 1 L 7 2 L 13 2 L 13 1 C 13 0.448 13.448 0 14 0 C 14.552 0 15 0.448 15 1 Z M 5 5 L 5 4.002 C 4.554 4.005 4.205 4.014 3.911 4.038 C 3.473 4.073 3.248 4.138 3.092 4.218 C 2.716 4.41 2.41 4.716 2.218 5.092 C 2.138 5.248 2.073 5.472 2.038 5.911 C 2 6.361 2 6.943 2 7.8 L 2 8 L 18 8 L 18 7.8 C 18 6.943 18 6.361 17.962 5.911 C 17.927 5.473 17.862 5.248 17.782 5.092 C 17.59 4.716 17.284 4.41 16.908 4.218 C 16.752 4.138 16.528 4.073 16.089 4.038 C 15.727 4.013 15.363 4.001 15 4.002 L 15 5 C 15 5.552 14.552 6 14 6 C 13.448 6 13 5.552 13 5 L 13 4 L 7 4 L 7 5 C 7 5.552 6.552 6 6 6 C 5.448 6 5 5.552 5 5 Z M 9.445 11.168 L 7.945 12.168 C 7.495 12.467 7.364 13.07 7.649 13.529 C 7.934 13.988 8.533 14.137 9 13.866 L 9 16 L 8.75 16 C 8.198 16 7.75 16.448 7.75 17 C 7.75 17.552 8.198 18 8.75 18 L 11.25 18 C 11.802 18 12.25 17.552 12.25 17 C 12.25 16.448 11.802 16 11.25 16 L 11 16 L 11 12 C 11 11.631 10.797 11.292 10.472 11.118 C 10.147 10.944 9.752 10.963 9.445 11.168 Z",
 	"merge": "M7.04652 9.86171C8.74809 9.4017 10 7.84705 10 6C10 3.79086 8.20914 2 6 2C3.79086 2 2 3.79086 2 6C2 7.86384 3.27477 9.42994 5 9.87398V21C5 21.5523 5.44772 22 6 22C6.55228 22 7 21.5523 7 21V15.0001C7.28228 15.3764 7.59237 15.7345 7.92893 16.0711C9.59483 17.737 11.788 18.7544 14.1162 18.9609C14.5465 20.7059 16.1221 22 18 22C20.2091 22 22 20.2091 22 18C22 15.7909 20.2091 14 18 14C16.153 14 14.5983 15.2519 14.1383 16.9535C12.3334 16.758 10.6389 15.9526 9.34315 14.6569C8.04737 13.3611 7.24201 11.6666 7.04652 9.86171Z",
 	"eye": "M 5.077 6.707 C 6.805 5.265 9.138 4 12 4 C 14.862 4 17.195 5.265 18.923 6.707 C 20.649 8.148 21.833 9.814 22.426 10.753 L 22.45 10.791 C 22.568 10.976 22.72 11.217 22.797 11.553 C 22.859 11.848 22.859 12.152 22.797 12.447 C 22.72 12.783 22.567 13.024 22.45 13.209 L 22.426 13.247 C 21.833 14.186 20.649 15.852 18.923 17.293 C 17.195 18.735 14.862 20 12 20 C 9.138 20 6.805 18.735 5.077 17.293 C 3.35 15.852 2.167 14.186 1.574 13.247 L 1.55 13.209 C 1.389 12.978 1.272 12.72 1.203 12.447 C 1.141 12.152 1.141 11.848 1.203 11.553 C 1.28 11.216 1.433 10.976 1.55 10.791 L 1.574 10.753 C 2.167 9.814 3.35 8.148 5.077 6.707 Z M 12 16 C 14.209 16 16 14.209 16 12 C 16 9.791 14.209 8 12 8 C 9.791 8 8 9.791 8 12 C 8 14.209 9.791 16 12 16 Z M 14 12 C 14 13.105 13.105 14 12 14 C 10.895 14 10 13.105 10 12 C 10 10.895 10.895 10 12 10 C 13.105 10 14 10.895 14 12 Z",
@@ -142,6 +143,7 @@
 	"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",
 	"youtube": "m13.012 4.006c0.78 7e-3 1.559 0.021 2.339 0.042 0.885 0.022 1.769 0.06 2.653 0.115 0.799 0.053 1.565 0.127 2.051 0.245 1.232 0.331 2.187 1.303 2.497 2.54 0.308 1.673 0.458 3.371 0.448 5.072 5e-3 1.676-0.146 3.348-0.449 4.996-0.309 1.223-1.248 2.187-2.462 2.53l-0.014 4e-3c-0.494 0.132-1.267 0.214-2.066 0.272-0.826 0.06-1.771 0.099-2.656 0.126-0.889 0.025-1.726 0.039-2.34 0.045-0.164 2e-3 -0.311 4e-3 -0.44 4e-3 -0.024 3e-3 -0.049 3e-3 -0.073 3e-3h-1c-0.951-7e-3 -1.902-0.024-2.853-0.052-0.887-0.026-1.831-0.066-2.657-0.126-0.799-0.058-1.572-0.141-2.066-0.272l-6e-3 -2e-3c-1.189-0.322-2.124-1.243-2.462-2.428-9e-3 -0.032-0.016-0.064-0.022-0.097-0.299-1.652-0.444-3.327-0.434-5.006-7e-3 -1.688 0.143-3.373 0.449-5.033 0.31-1.223 1.248-2.187 2.462-2.53l0.014-4e-3c0.494-0.132 1.267-0.214 2.066-0.272 0.826-0.06 1.771-0.099 2.656-0.125 0.926-0.027 1.853-0.043 2.78-0.05 0.024-3e-3 0.049-3e-3 0.073-3e-3h1c0.17 2e-3 0.341 4e-3 0.511 6e-3zm-3.162 4.61c-0.1 0.133-0.1 0.372-0.1 0.85v5.069c0 0.477 0 0.716 0.1 0.849 0.087 0.116 0.22 0.189 0.364 0.199 0.166 0.012 0.367-0.117 0.769-0.376l3.942-2.534c0.349-0.224 0.523-0.336 0.583-0.479 0.053-0.124 0.053-0.265 0-0.389-0.06-0.142-0.234-0.254-0.583-0.478l-3.942-2.535c-0.402-0.258-0.603-0.387-0.769-0.375-0.145 0.011-0.277 0.084-0.364 0.2z",
 	"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",
+	"terminal_square": "M3.464 3.464C2 4.93 2 7.286 2 12C2 16.714 2 19.071 3.464 20.535C4.93 22 7.286 22 12 22C16.714 22 19.071 22 20.535 20.535C22 19.072 22 16.714 22 12C22 7.286 22 4.929 20.535 3.464C19.072 2 16.714 2 12 2C7.286 2 4.929 2 3.464 3.464ZM6.424 9.52C6.55134 9.36729 6.73411 9.27139 6.93213 9.25338C7.13015 9.23538 7.32721 9.29675 7.48 9.424L7.757 9.654C8.362 10.158 8.877 10.587 9.233 10.982C9.612 11.402 9.907 11.883 9.907 12.5C9.907 13.117 9.612 13.599 9.233 14.018C8.877 14.413 8.362 14.842 7.757 15.346L7.48 15.576C7.40473 15.6418 7.31705 15.692 7.22213 15.7234C7.1272 15.7549 7.02694 15.7671 6.92724 15.7592C6.82754 15.7513 6.73042 15.7236 6.6416 15.6777C6.55277 15.6317 6.47403 15.5685 6.41001 15.4917C6.34598 15.4148 6.29797 15.326 6.2688 15.2303C6.23962 15.1347 6.22987 15.0341 6.24012 14.9347C6.25037 14.8352 6.28041 14.7388 6.32847 14.6511C6.37654 14.5634 6.44166 14.4862 6.52 14.424L6.754 14.229C7.413 13.679 7.844 13.319 8.12 13.013C8.382 12.723 8.407 12.586 8.407 12.5C8.407 12.414 8.382 12.278 8.12 11.987C7.843 11.681 7.413 11.32 6.754 10.771L6.52 10.576C6.36729 10.4487 6.27139 10.2659 6.25338 10.0679C6.23538 9.86985 6.29675 9.67279 6.424 9.52ZM17.75 15C17.75 15.1989 17.671 15.3897 17.5303 15.5303C17.3897 15.671 17.1989 15.75 17 15.75H12C11.8011 15.75 11.6103 15.671 11.4697 15.5303C11.329 15.3897 11.25 15.1989 11.25 15C11.25 14.8011 11.329 14.6103 11.4697 14.4697C11.6103 14.329 11.8011 14.25 12 14.25H17C17.1989 14.25 17.3897 14.329 17.5303 14.4697C17.671 14.6103 17.75 14.8011 17.75 15Z",
 	"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",
 	"level": "M 23 12 C 23 18.075 18.075 23 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 Z M 6 12 C 5.999 10.223 6.787 8.536 8.15 7.396 C 9.514 6.256 11.313 5.778 13.062 6.093 C 13.419 6.169 13.79 6.044 14.028 5.767 C 14.266 5.49 14.335 5.106 14.206 4.764 C 14.078 4.422 13.774 4.177 13.412 4.125 C 10.226 3.553 7.009 4.957 5.262 7.682 C 3.515 10.408 3.583 13.917 5.434 16.573 C 5.75 17.026 6.374 17.137 6.826 16.82 C 7.279 16.504 7.39 15.881 7.074 15.428 C 6.372 14.423 5.997 13.226 6 12 Z M 19.816 10.287 C 19.743 9.935 19.486 9.649 19.144 9.539 C 18.802 9.428 18.427 9.51 18.161 9.753 C 17.896 9.996 17.782 10.362 17.862 10.713 C 18.217 12.347 17.878 14.054 16.925 15.428 C 16.623 15.881 16.738 16.492 17.185 16.803 C 17.631 17.115 18.245 17.012 18.565 16.572 C 19.836 14.741 20.289 12.465 19.815 10.287 Z M 17.207 8.207 C 17.586 7.815 17.581 7.191 17.195 6.805 C 16.809 6.419 16.185 6.414 15.793 6.793 L 12.518 10.068 C 11.766 9.864 10.964 10.115 10.462 10.711 C 9.96 11.307 9.851 12.141 10.181 12.847 C 10.511 13.552 11.221 14.003 12 14 C 12.622 14 13.208 13.711 13.587 13.217 C 13.966 12.724 14.093 12.083 13.932 11.482 Z",
@@ -153,6 +155,7 @@
 	"gas_slow": "M12 16c1.66 0 3-1.34 3-3c0-1.12-.61-2.1-1.5-2.61L3.79 4.77l5.53 9.58c.5.98 1.51 1.65 2.68 1.65m0-13c-1.81 0-3.5.5-4.97 1.32l2.1 1.21C10 5.19 11 5 12 5c4.42 0 8 3.58 8 8c0 2.21-.89 4.21-2.34 5.65h-.01a.996.996 0 0 0 0 1.41c.39.39 1.03.39 1.42.01A9.969 9.969 0 0 0 22 13c0-5.5-4.5-10-10-10M2 13c0 2.76 1.12 5.26 2.93 7.07c.39.38 1.02.38 1.41-.01a.996.996 0 0 0 0-1.41A7.95 7.95 0 0 1 4 13c0-1 .19-2 .54-2.9L3.33 8C2.5 9.5 2 11.18 2 13",
 	"help": "M5 3h14a2 2 0 0 1 2 2v14c0 .53-.21 1.04-.59 1.41c-.37.38-.88.59-1.41.59H5c-.53 0-1.04-.21-1.41-.59C3.21 20.04 3 19.53 3 19V5c0-1.11.89-2 2-2m6 6h2V7h-2v2m3 8v-2h-1v-4h-3v2h1v2h-1v2h4Z",
 	"pause": "M16 19q-.825 0-1.412-.587T14 17V7q0-.825.588-1.412T16 5q.825 0 1.413.588T18 7v10q0 .825-.587 1.413T16 19m-8 0q-.825 0-1.412-.587T6 17V7q0-.825.588-1.412T8 5q.825 0 1.413.588T10 7v10q0 .825-.587 1.413T8 19",
+	"verified": "M 10.83 2.265 C 11.57 1.911 12.43 1.911 13.17 2.265 C 13.49 2.418 13.796 2.679 14.408 3.2 C 14.565 3.342 14.731 3.475 14.903 3.599 C 15.201 3.799 15.536 3.937 15.888 4.007 C 16.097 4.041 16.308 4.064 16.52 4.075 C 17.321 4.139 17.722 4.171 18.056 4.289 C 18.83 4.562 19.438 5.17 19.711 5.944 C 19.829 6.278 19.861 6.679 19.925 7.48 C 19.936 7.692 19.959 7.903 19.993 8.112 C 20.063 8.464 20.201 8.799 20.401 9.097 C 20.524 9.269 20.658 9.435 20.8 9.592 C 21.321 10.204 21.582 10.51 21.735 10.83 C 22.088 11.57 22.088 12.43 21.735 13.17 C 21.582 13.49 21.321 13.796 20.8 14.408 C 20.592 14.651 20.488 14.773 20.401 14.903 C 20.202 15.201 20.063 15.536 19.993 15.888 C 19.963 16.041 19.95 16.201 19.925 16.52 C 19.861 17.321 19.829 17.722 19.711 18.056 C 19.438 18.83 18.83 19.438 18.056 19.711 C 17.722 19.829 17.321 19.861 16.52 19.925 C 16.201 19.95 16.041 19.963 15.888 19.993 C 15.536 20.063 15.201 20.201 14.903 20.401 C 14.773 20.488 14.651 20.592 14.408 20.8 C 13.796 21.321 13.49 21.582 13.17 21.735 C 12.43 22.088 11.57 22.088 10.83 21.735 C 10.51 21.582 10.204 21.321 9.592 20.8 C 9.349 20.592 9.227 20.488 9.097 20.401 C 8.799 20.202 8.464 20.063 8.112 19.993 C 7.959 19.963 7.799 19.95 7.48 19.925 C 6.679 19.861 6.278 19.829 5.944 19.711 C 5.17 19.438 4.562 18.83 4.289 18.056 C 4.171 17.722 4.139 17.321 4.075 16.52 C 4.05 16.201 4.037 16.041 4.007 15.888 C 3.937 15.536 3.799 15.201 3.599 14.903 C 3.512 14.773 3.408 14.651 3.2 14.408 C 2.679 13.796 2.418 13.49 2.265 13.17 C 1.912 12.43 1.912 11.57 2.265 10.83 C 2.418 10.51 2.679 10.204 3.2 9.592 C 3.408 9.349 3.512 9.227 3.599 9.097 C 3.799 8.799 3.937 8.464 4.007 8.112 C 4.041 7.903 4.065 7.692 4.075 7.48 C 4.139 6.679 4.171 6.278 4.289 5.944 C 4.562 5.171 5.171 4.562 5.944 4.289 C 6.278 4.171 6.679 4.139 7.48 4.075 C 7.799 4.05 7.959 4.037 8.112 4.007 C 8.464 3.937 8.799 3.799 9.097 3.599 C 9.269 3.476 9.435 3.342 9.592 3.2 C 10.204 2.679 10.51 2.418 10.83 2.265 Z M 16.373 9.863 C 16.667 9.542 16.655 9.046 16.348 8.738 C 16.04 8.431 15.544 8.419 15.223 8.713 L 10.373 13.563 L 8.777 11.968 C 8.456 11.674 7.96 11.686 7.652 11.993 C 7.345 12.301 7.333 12.797 7.627 13.118 L 9.797 15.288 C 10.115 15.605 10.629 15.605 10.947 15.288 L 16.374 9.863 Z",
 	"resume": "M8 17.175V6.825q0-.425.3-.713t.7-.287q.125 0 .263.037t.262.113l8.15 5.175q.225.15.338.375t.112.475q0 .25-.112.475t-.338.375l-8.15 5.175q-.125.075-.262.113T9 18.175q-.4 0-.7-.288t-.3-.712",
 	"copy": [
 		{
diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index 3f1fe147..cadb62e3 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -31,7 +31,7 @@ $grayscale: (
 	--txt-white: rgba(255, 255, 255, 95%);
 
 	/* General */
-	--brand: #924dff;
+	--brand: #18d2a5;
 	--blue: #076acd;
 	--red: #eb5757;
 	--orange: #ff5a17;
@@ -277,6 +277,12 @@ body {
 	cursor: pointer;
 }
 
+.divider_h {
+	width: 100%;
+	height: 2px;
+	background: var(--op-5);
+}
+
 .divider_v {
 	width: 2px;
 	height: 16px;
diff --git a/components/ActionBar.vue b/components/ActionBar.vue
new file mode 100644
index 00000000..b88c4480
--- /dev/null
+++ b/components/ActionBar.vue
@@ -0,0 +1,51 @@
+<script setup>
+/**
+ * UI
+ */
+import Button from "@/components/ui/Button.vue"
+
+/** Components */
+import Search from "@/components/modules/navigation/Search.vue"
+
+/** Store */
+import { useAppStore } from "@/store/app"
+const appStore = useAppStore()
+</script>
+
+<template>
+	<Flex wide align="center" justify="between" gap="24" :class="$style.wrapper">
+		<Flex wide align="center" gap="12">
+			<Button @click="appStore.showSidebar = !appStore.showSidebar" type="secondary" size="medium" :class="$style.menu_btn">
+				<Icon name="menu" size="16" color="primary" />
+			</Button>
+
+			<Search />
+		</Flex>
+
+		<Flex align="center" gap="12">
+			<Button @click="appStore.showCmd = true" type="secondary" size="mini">
+				<Icon name="terminal_square" size="16" color="secondary" />
+			</Button>
+
+			<div style="width: 2px; height: 16px; background: var(--op-10)" />
+
+			<Connection :class="$style.connection_btn" />
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+	padding: 12px 24px;
+}
+
+.menu_btn {
+	display: none;
+}
+
+@media (max-width: 1300px) {
+	.menu_btn {
+		display: flex;
+	}
+}
+</style>
diff --git a/components/LeftSidebar.vue b/components/LeftSidebar.vue
new file mode 100644
index 00000000..024394db
--- /dev/null
+++ b/components/LeftSidebar.vue
@@ -0,0 +1,338 @@
+<script setup>
+/** UI */
+import Button from "@/components/ui/Button.vue"
+import Tooltip from "@/components/ui/Tooltip.vue"
+import { Dropdown, DropdownItem, DropdownTitle, DropdownDivider } from "@/components/ui/Dropdown"
+
+/** Components */
+import NavLink from "@/components/modules/navigation/NavLink.vue"
+
+/** Store */
+import { useAppStore } from "~/store/app"
+import { useModalsStore } from "~/store/modals"
+const appStore = useAppStore()
+const modalsStore = useModalsStore()
+
+const head = computed(() => appStore.lastHead)
+
+const mainLinks = reactive([
+	{
+		icon: "search",
+		name: "Browse",
+		path: "/",
+	},
+	{
+		icon: "tx",
+		name: "Transactions",
+		path: "/txs",
+	},
+	{
+		icon: "block",
+		name: "Blocks",
+		path: "/blocks",
+	},
+	{
+		icon: "address",
+		name: "Addresses",
+		path: "/addresses",
+	},
+	{
+		icon: "validator",
+		name: "Validators",
+		path: "/validators",
+		children: [
+			{
+				name: "Active",
+				path: "/validators?status=active&page=1",
+			},
+			{
+				name: "Jailed",
+				path: "/validators?status=jailed&page=1",
+			},
+			{
+				name: "Inactive",
+				path: "/validators?status=inactive&page=1",
+			},
+		],
+	},
+])
+
+const isModularLinksCollapsed = ref(false)
+const modularLinks = reactive([
+	{
+		icon: "rollup",
+		name: "Rollups",
+		path: "/rollups",
+		children: [
+			{
+				name: "Register rollup",
+				path: "https://forms.gle/nimJyQJG4Lb4BTcG7",
+				external: true,
+			},
+		],
+	},
+	{
+		icon: "namespace",
+		name: "Namespaces",
+		path: "/namespaces",
+		children: [
+			{
+				name: "Treemap View",
+				path: "/namespaces/treemap",
+			},
+		],
+	},
+	{
+		icon: "tx",
+		name: "Pay for Blobs",
+		path: "/txs?message_type=MsgPayForBlobs",
+	},
+])
+
+const isToolsLinkCollapsed = ref(false)
+const toolsLinks = reactive([
+	{
+		icon: "blob",
+		name: "Blobstream",
+		path: "/blobstream",
+	},
+	{
+		icon: "gas",
+		name: "Gas Tracker",
+		path: "/gas",
+	},
+	{
+		icon: "zap",
+		name: "Constants",
+		callback: () => {
+			modalsStore.open("constants")
+		},
+	},
+	{
+		icon: "bookmark",
+		name: "Bookmarks",
+		path: "/bookmarks",
+	},
+])
+
+const newLinks = reactive([
+	{
+		icon: "tag",
+		name: "Celenium API",
+		callback: () => {
+			modalsStore.open("api")
+		},
+	},
+])
+
+const handleNavigate = (url) => {
+	window.location.replace(url)
+}
+</script>
+
+<template>
+	<Flex direction="column" gap="32" justify="between" :class="[$style.wrapper, appStore.showSidebar && $style.show]">
+		<Flex direction="column" gap="32" :class="$style.content">
+			<Flex justify="between" align="center">
+				<NuxtLink to="/" :class="$style.logo">
+					<Flex align="center" gap="8">
+						<Icon name="logo" size="16" color="tertiary" :class="$style.logo_symbol" />
+
+						<svg width="86" height="14" viewBox="0 0 96 16" xmlns="http://www.w3.org/2000/svg" :class="$style.logo_name">
+							<path
+								d="M14.22 10.46C14.0867 11.46 13.7333 12.32 13.16 13.04C12.5867 13.7467 11.82 14.2933 10.86 14.68C9.91333 15.0533 8.80667 15.24 7.54 15.24C6.44667 15.24 5.44 15.0933 4.52 14.8C3.61333 14.5067 2.82 14.08 2.14 13.52C1.47333 12.9467 0.953333 12.2467 0.58 11.42C0.22 10.58 0.04 9.62 0.04 8.54C0.04 7.44667 0.22 6.48667 0.58 5.66C0.953333 4.83333 1.47333 4.13333 2.14 3.56C2.82 2.97333 3.61333 2.53333 4.52 2.24C5.44 1.94667 6.44667 1.8 7.54 1.8C8.82 1.8 9.93333 1.99333 10.88 2.38C11.84 2.76667 12.6067 3.32 13.18 4.04C13.7533 4.76 14.1 5.62667 14.22 6.64H12.02C11.8333 6.04 11.54 5.53333 11.14 5.12C10.74 4.69333 10.2333 4.36667 9.62 4.14C9.02 3.91333 8.32667 3.8 7.54 3.8C6.55333 3.8 5.66667 3.98667 4.88 4.36C4.09333 4.72 3.47333 5.25333 3.02 5.96C2.58 6.65333 2.36 7.51333 2.36 8.54C2.36 9.55333 2.58 10.4133 3.02 11.12C3.47333 11.8133 4.09333 12.34 4.88 12.7C5.66667 13.06 6.55333 13.24 7.54 13.24C8.32667 13.24 9.02 13.1333 9.62 12.92C10.22 12.6933 10.72 12.3733 11.12 11.96C11.52 11.5333 11.8133 11.0333 12 10.46H14.22ZM24.8295 11.72H26.9695C26.8629 12.4 26.5962 13.0067 26.1695 13.54C25.7562 14.06 25.1895 14.4733 24.4695 14.78C23.7495 15.0733 22.8895 15.22 21.8895 15.22C20.7562 15.22 19.7429 15.0133 18.8495 14.6C17.9562 14.1733 17.2562 13.5733 16.7495 12.8C16.2429 12.0267 15.9895 11.1067 15.9895 10.04C15.9895 8.98667 16.2362 8.06667 16.7295 7.28C17.2229 6.49333 17.9029 5.88667 18.7695 5.46C19.6495 5.03333 20.6629 4.82 21.8095 4.82C22.9962 4.82 23.9829 5.03333 24.7695 5.46C25.5695 5.87333 26.1629 6.5 26.5495 7.34C26.9362 8.16667 27.0962 9.21333 27.0295 10.48H18.2495C18.3162 11.04 18.4962 11.5467 18.7895 12C19.0962 12.44 19.5095 12.7867 20.0295 13.04C20.5495 13.28 21.1562 13.4 21.8495 13.4C22.6229 13.4 23.2695 13.2467 23.7895 12.94C24.3229 12.6333 24.6695 12.2267 24.8295 11.72ZM21.7495 6.62C20.8429 6.62 20.0962 6.84667 19.5095 7.3C18.9229 7.74 18.5429 8.30667 18.3695 9H24.7895C24.7362 8.25333 24.4362 7.67333 23.8895 7.26C23.3429 6.83333 22.6295 6.62 21.7495 6.62ZM29.2095 1.04H31.4295V15H29.2095V1.04ZM42.4467 11.72H44.5867C44.4801 12.4 44.2134 13.0067 43.7867 13.54C43.3734 14.06 42.8067 14.4733 42.0867 14.78C41.3667 15.0733 40.5067 15.22 39.5067 15.22C38.3734 15.22 37.3601 15.0133 36.4667 14.6C35.5734 14.1733 34.8734 13.5733 34.3667 12.8C33.8601 12.0267 33.6067 11.1067 33.6067 10.04C33.6067 8.98667 33.8534 8.06667 34.3467 7.28C34.8401 6.49333 35.5201 5.88667 36.3867 5.46C37.2667 5.03333 38.2801 4.82 39.4267 4.82C40.6134 4.82 41.6001 5.03333 42.3867 5.46C43.1867 5.87333 43.7801 6.5 44.1667 7.34C44.5534 8.16667 44.7134 9.21333 44.6467 10.48H35.8667C35.9334 11.04 36.1134 11.5467 36.4067 12C36.7134 12.44 37.1267 12.7867 37.6467 13.04C38.1667 13.28 38.7734 13.4 39.4667 13.4C40.2401 13.4 40.8867 13.2467 41.4067 12.94C41.9401 12.6333 42.2867 12.2267 42.4467 11.72ZM39.3667 6.62C38.4601 6.62 37.7134 6.84667 37.1267 7.3C36.5401 7.74 36.1601 8.30667 35.9867 9H42.4067C42.3534 8.25333 42.0534 7.67333 41.5067 7.26C40.9601 6.83333 40.2467 6.62 39.3667 6.62ZM46.6267 5.04H48.8467V15H46.6267V5.04ZM53.0467 4.82C53.6201 4.82 54.1467 4.9 54.6267 5.06C55.1201 5.22 55.5401 5.46667 55.8867 5.8C56.2467 6.12 56.5201 6.52 56.7067 7C56.9067 7.48 57.0067 8.04667 57.0067 8.7V15H54.7867V9.14C54.7867 8.32667 54.5867 7.72667 54.1867 7.34C53.8001 6.94 53.1867 6.74 52.3467 6.74C51.7067 6.74 51.1201 6.88 50.5867 7.16C50.0667 7.42667 49.6401 7.78 49.3067 8.22C48.9734 8.64667 48.7801 9.12 48.7267 9.64L48.7067 8.56C48.7734 8.06667 48.9201 7.6 49.1467 7.16C49.3734 6.70667 49.6734 6.30667 50.0467 5.96C50.4201 5.6 50.8601 5.32 51.3667 5.12C51.8734 4.92 52.4334 4.82 53.0467 4.82ZM62.0588 0.819999V2.96H59.3988V0.819999H62.0588ZM59.5988 5.04H61.8388V15H59.5988V5.04ZM74.8778 15H72.6578V5.04H74.8778V15ZM72.7778 10.26L72.7978 10.9C72.7711 11.0733 72.7111 11.3333 72.6178 11.68C72.5378 12.0267 72.3978 12.4067 72.1978 12.82C72.0111 13.22 71.7578 13.6067 71.4378 13.98C71.1311 14.34 70.7445 14.64 70.2778 14.88C69.8111 15.1067 69.2445 15.22 68.5778 15.22C68.0978 15.22 67.6111 15.1533 67.1178 15.02C66.6378 14.9 66.1978 14.6933 65.7978 14.4C65.4111 14.1067 65.0978 13.7067 64.8578 13.2C64.6178 12.6933 64.4978 12.0533 64.4978 11.28V5.04H66.7178V10.86C66.7178 11.4867 66.8178 11.98 67.0178 12.34C67.2311 12.6867 67.5245 12.9333 67.8978 13.08C68.2711 13.2267 68.7045 13.3 69.1978 13.3C69.9045 13.3 70.5045 13.14 70.9978 12.82C71.4911 12.5 71.8845 12.1067 72.1778 11.64C72.4845 11.16 72.6845 10.7 72.7778 10.26ZM77.3298 5.04H79.5498V15H77.3298V5.04ZM83.7498 4.82C84.3232 4.82 84.8498 4.9 85.3298 5.06C85.8232 5.22 86.2432 5.46667 86.5898 5.8C86.9498 6.12 87.2232 6.52 87.4098 7C87.6098 7.48 87.7098 8.04667 87.7098 8.7V15H85.4898V9.14C85.4898 8.32667 85.2898 7.72667 84.8898 7.34C84.5032 6.94 83.8898 6.74 83.0498 6.74C82.4098 6.74 81.8232 6.88 81.2898 7.16C80.7698 7.42667 80.3432 7.78 80.0098 8.22C79.6765 8.64667 79.4832 9.12 79.4298 9.64L79.4098 8.56C79.4765 8.06667 79.6232 7.6 79.8498 7.16C80.0765 6.70667 80.3765 6.30667 80.7498 5.96C81.1232 5.6 81.5632 5.32 82.0698 5.12C82.5765 4.92 83.1365 4.82 83.7498 4.82ZM91.6898 4.82C92.2765 4.82 92.8098 4.9 93.2898 5.06C93.7698 5.22 94.1832 5.46667 94.5298 5.8C94.8898 6.12 95.1698 6.52 95.3698 7C95.5698 7.48 95.6698 8.04667 95.6698 8.7V15H93.4298V9.14C93.4298 8.32667 93.2298 7.72667 92.8298 7.34C92.4432 6.94 91.8298 6.74 90.9898 6.74C90.3498 6.74 89.7632 6.88 89.2298 7.16C88.7098 7.42667 88.2832 7.78 87.9498 8.22C87.6298 8.64667 87.4432 9.12 87.3898 9.64L87.3498 8.52C87.4165 8.04 87.5698 7.58 87.8098 7.14C88.0498 6.68667 88.3565 6.28667 88.7298 5.94C89.1032 5.59333 89.5365 5.32 90.0298 5.12C90.5365 4.92 91.0898 4.82 91.6898 4.82Z"
+							/>
+						</svg>
+					</Flex>
+				</NuxtLink>
+
+				<Button @click="appStore.showSidebar = !appStore.showSidebar" type="secondary" size="mini" :class="$style.close_btn">
+					<Icon name="close" size="14" color="primary" />
+				</Button>
+			</Flex>
+
+			<Flex direction="column" gap="2">
+				<NavLink v-for="link in mainLinks" :link="link" />
+			</Flex>
+
+			<Flex direction="column" gap="2">
+				<Flex @click="isModularLinksCollapsed = !isModularLinksCollapsed" align="center" gap="4" :class="$style.group_title">
+					<Text size="12" weight="500" color="tertiary">Modular</Text>
+					<Icon
+						name="alt-arrow-down"
+						size="12"
+						color="tertiary"
+						:style="{ transform: `rotate(${isModularLinksCollapsed ? '-90deg' : '0deg'})` }"
+					/>
+				</Flex>
+
+				<Flex v-if="!isModularLinksCollapsed" direction="column" gap="2">
+					<NavLink v-for="link in modularLinks" :link="link" />
+				</Flex>
+			</Flex>
+
+			<Flex direction="column" gap="8">
+				<Flex @click="isToolsLinkCollapsed = !isToolsLinkCollapsed" align="center" gap="4" :class="$style.group_title">
+					<Text size="12" weight="500" color="tertiary">Tools</Text>
+					<Icon
+						name="alt-arrow-down"
+						size="12"
+						color="tertiary"
+						:style="{ transform: `rotate(${isToolsLinkCollapsed ? '-90deg' : '0deg'})` }"
+					/>
+				</Flex>
+
+				<Flex v-if="!isToolsLinkCollapsed" direction="column" gap="2">
+					<NavLink v-for="link in toolsLinks" :link="link" />
+				</Flex>
+			</Flex>
+
+			<Flex direction="column" gap="8">
+				<Flex align="center" gap="8" style="padding: 0 8px">
+					<Icon name="stars" size="12" color="tertiary" />
+					<Text size="12" weight="500" color="tertiary">New things</Text>
+				</Flex>
+
+				<Flex direction="column" gap="2">
+					<NavLink v-for="link in newLinks" :link="link" />
+				</Flex>
+			</Flex>
+		</Flex>
+
+		<Flex direction="column" gap="12" style="margin-right: 20px">
+			<!-- <Flex justify="end" :class="$style.ad">
+					<Flex justify="end" direction="column" gap="8">
+						<Text size="12" weight="500" color="brand">Introducing Celenium API</Text>
+						<Text size="12" weight="500" height="140" color="secondary">
+							Unlock the power of Celestia: Scalable, Secure and Modular.
+						</Text>
+					</Flex>
+				</Flex> -->
+
+			<Dropdown position="end" fullWidth>
+				<Flex align="center" gap="8" justify="between" :class="$style.network_selector">
+					<Flex align="center" gap="8">
+						<Icon name="globe" size="14" :color="head.synced ? 'brand' : 'red'" />
+						<Text size="13" weight="600" color="secondary">Mainnet</Text>
+					</Flex>
+
+					<Icon name="chevron" size="14" color="secondary" />
+				</Flex>
+
+				<template #popup>
+					<DropdownTitle>
+						<Flex align="center" gap="6">
+							<Icon name="check" size="12" color="brand" />
+							<Text color="secondary">Head {{ head.synced ? "" : "not" }} Synced </Text>
+						</Flex>
+					</DropdownTitle>
+					<DropdownDivider />
+					<DropdownTitle>Network</DropdownTitle>
+					<DropdownItem @click="handleNavigate('https://celenium.io')">Mainnet</DropdownItem>
+					<DropdownItem @click="handleNavigate('https://mocha-4.celenium.io')">Mocha-4</DropdownItem>
+					<DropdownItem @click="handleNavigate('https://arabica.celenium.io')">Arabica</DropdownItem>
+				</template>
+			</Dropdown>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+	position: sticky;
+	top: 0;
+
+	user-select: none;
+
+	min-width: 230px;
+	max-width: 230px;
+	max-height: calc(100vh);
+
+	border-right: 1px solid var(--op-8);
+
+	padding: 20px 0 20px 20px;
+
+	&.show {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+
+		display: flex;
+
+		background: var(--app-background);
+
+		z-index: 100;
+	}
+}
+
+.content {
+	margin-right: 20px;
+}
+
+.logo {
+	padding: 0 8px;
+}
+
+.logo_symbol {
+	box-sizing: content-box;
+	cursor: pointer;
+}
+
+.logo_name {
+	fill: var(--logo-name);
+}
+
+.close_btn {
+	display: none;
+}
+
+.group_title {
+	border-radius: 5px;
+	cursor: default;
+
+	padding: 4px 6px;
+	margin: 0 2px;
+
+	transition: all 0.2s ease;
+
+	&:hover {
+		background: var(--op-5);
+	}
+}
+
+.network_selector {
+	height: 32px;
+
+	cursor: pointer;
+	border-radius: 6px;
+	background: var(--op-5);
+
+	padding: 0 8px;
+
+	transition: all 0.2s ease;
+
+	&:hover {
+		background: var(--op-8);
+	}
+}
+
+.ad {
+	min-height: 120px;
+
+	border-radius: 12px;
+	background: rgba(0, 0, 0, 15%);
+	box-shadow: inset 0 0 0 1px var(--op-5);
+
+	padding: 12px;
+
+	margin-right: 20px;
+}
+
+@media (max-width: 1300px) {
+	.close_btn {
+		display: flex;
+	}
+}
+</style>
diff --git a/components/TheFooter.vue b/components/TheFooter.vue
index 8fa22584..96bf25ce 100644
--- a/components/TheFooter.vue
+++ b/components/TheFooter.vue
@@ -9,8 +9,6 @@ import { isPrefersDarkScheme } from "@/services/utils"
 import { useAppStore } from "@/store/app"
 const appStore = useAppStore()
 
-const appConfig = useAppConfig()
-
 const theme = useCookie("theme", { default: () => "dark" })
 switch (theme.value) {
 	case "dark":
@@ -57,47 +55,117 @@ const handleChangeTheme = (target) => {
 </script>
 
 <template>
-	<Flex tag="footer" justify="center" :class="$style.wrapper">
-		<Flex justify="between" wide :class="$style.container">
-			<Flex direction="column" gap="12">
-				<Flex align="center" gap="8">
-					<Icon name="logo" size="14" color="tertiary" />
-					<Text size="13" weight="500" color="secondary">Celenium</Text>
-					<Text size="13" weight="500" color="tertiary">-</Text>
-					<Text size="13" weight="500" color="tertiary">Celestia Explorer</Text>
-					<a :href="`https://github.com/celenium-io/celenium-interface/releases/tag/v${appConfig.version}`" target="_blank">
-						<Flex>
-							<Text size="13" weight="500" color="support">v</Text>
-							<Text size="13" weight="500" color="tertiary">{{ appConfig.version }}</Text>
+	<Flex justify="center" :class="$style.wrapper">
+		<Flex wide :class="$style.container">
+			<Flex wide justify="between" :class="$style.main">
+				<Flex>
+					<Flex direction="column" gap="24" :class="$style.left">
+						<NuxtLink to="/" :class="$style.logo">
+							<Flex align="center" gap="8">
+								<Icon name="logo" size="16" color="secondary" :class="$style.logo_symbol" />
+
+								<svg
+									width="86"
+									height="14"
+									viewBox="0 0 96 16"
+									xmlns="http://www.w3.org/2000/svg"
+									:class="$style.logo_name"
+								>
+									<path
+										d="M14.22 10.46C14.0867 11.46 13.7333 12.32 13.16 13.04C12.5867 13.7467 11.82 14.2933 10.86 14.68C9.91333 15.0533 8.80667 15.24 7.54 15.24C6.44667 15.24 5.44 15.0933 4.52 14.8C3.61333 14.5067 2.82 14.08 2.14 13.52C1.47333 12.9467 0.953333 12.2467 0.58 11.42C0.22 10.58 0.04 9.62 0.04 8.54C0.04 7.44667 0.22 6.48667 0.58 5.66C0.953333 4.83333 1.47333 4.13333 2.14 3.56C2.82 2.97333 3.61333 2.53333 4.52 2.24C5.44 1.94667 6.44667 1.8 7.54 1.8C8.82 1.8 9.93333 1.99333 10.88 2.38C11.84 2.76667 12.6067 3.32 13.18 4.04C13.7533 4.76 14.1 5.62667 14.22 6.64H12.02C11.8333 6.04 11.54 5.53333 11.14 5.12C10.74 4.69333 10.2333 4.36667 9.62 4.14C9.02 3.91333 8.32667 3.8 7.54 3.8C6.55333 3.8 5.66667 3.98667 4.88 4.36C4.09333 4.72 3.47333 5.25333 3.02 5.96C2.58 6.65333 2.36 7.51333 2.36 8.54C2.36 9.55333 2.58 10.4133 3.02 11.12C3.47333 11.8133 4.09333 12.34 4.88 12.7C5.66667 13.06 6.55333 13.24 7.54 13.24C8.32667 13.24 9.02 13.1333 9.62 12.92C10.22 12.6933 10.72 12.3733 11.12 11.96C11.52 11.5333 11.8133 11.0333 12 10.46H14.22ZM24.8295 11.72H26.9695C26.8629 12.4 26.5962 13.0067 26.1695 13.54C25.7562 14.06 25.1895 14.4733 24.4695 14.78C23.7495 15.0733 22.8895 15.22 21.8895 15.22C20.7562 15.22 19.7429 15.0133 18.8495 14.6C17.9562 14.1733 17.2562 13.5733 16.7495 12.8C16.2429 12.0267 15.9895 11.1067 15.9895 10.04C15.9895 8.98667 16.2362 8.06667 16.7295 7.28C17.2229 6.49333 17.9029 5.88667 18.7695 5.46C19.6495 5.03333 20.6629 4.82 21.8095 4.82C22.9962 4.82 23.9829 5.03333 24.7695 5.46C25.5695 5.87333 26.1629 6.5 26.5495 7.34C26.9362 8.16667 27.0962 9.21333 27.0295 10.48H18.2495C18.3162 11.04 18.4962 11.5467 18.7895 12C19.0962 12.44 19.5095 12.7867 20.0295 13.04C20.5495 13.28 21.1562 13.4 21.8495 13.4C22.6229 13.4 23.2695 13.2467 23.7895 12.94C24.3229 12.6333 24.6695 12.2267 24.8295 11.72ZM21.7495 6.62C20.8429 6.62 20.0962 6.84667 19.5095 7.3C18.9229 7.74 18.5429 8.30667 18.3695 9H24.7895C24.7362 8.25333 24.4362 7.67333 23.8895 7.26C23.3429 6.83333 22.6295 6.62 21.7495 6.62ZM29.2095 1.04H31.4295V15H29.2095V1.04ZM42.4467 11.72H44.5867C44.4801 12.4 44.2134 13.0067 43.7867 13.54C43.3734 14.06 42.8067 14.4733 42.0867 14.78C41.3667 15.0733 40.5067 15.22 39.5067 15.22C38.3734 15.22 37.3601 15.0133 36.4667 14.6C35.5734 14.1733 34.8734 13.5733 34.3667 12.8C33.8601 12.0267 33.6067 11.1067 33.6067 10.04C33.6067 8.98667 33.8534 8.06667 34.3467 7.28C34.8401 6.49333 35.5201 5.88667 36.3867 5.46C37.2667 5.03333 38.2801 4.82 39.4267 4.82C40.6134 4.82 41.6001 5.03333 42.3867 5.46C43.1867 5.87333 43.7801 6.5 44.1667 7.34C44.5534 8.16667 44.7134 9.21333 44.6467 10.48H35.8667C35.9334 11.04 36.1134 11.5467 36.4067 12C36.7134 12.44 37.1267 12.7867 37.6467 13.04C38.1667 13.28 38.7734 13.4 39.4667 13.4C40.2401 13.4 40.8867 13.2467 41.4067 12.94C41.9401 12.6333 42.2867 12.2267 42.4467 11.72ZM39.3667 6.62C38.4601 6.62 37.7134 6.84667 37.1267 7.3C36.5401 7.74 36.1601 8.30667 35.9867 9H42.4067C42.3534 8.25333 42.0534 7.67333 41.5067 7.26C40.9601 6.83333 40.2467 6.62 39.3667 6.62ZM46.6267 5.04H48.8467V15H46.6267V5.04ZM53.0467 4.82C53.6201 4.82 54.1467 4.9 54.6267 5.06C55.1201 5.22 55.5401 5.46667 55.8867 5.8C56.2467 6.12 56.5201 6.52 56.7067 7C56.9067 7.48 57.0067 8.04667 57.0067 8.7V15H54.7867V9.14C54.7867 8.32667 54.5867 7.72667 54.1867 7.34C53.8001 6.94 53.1867 6.74 52.3467 6.74C51.7067 6.74 51.1201 6.88 50.5867 7.16C50.0667 7.42667 49.6401 7.78 49.3067 8.22C48.9734 8.64667 48.7801 9.12 48.7267 9.64L48.7067 8.56C48.7734 8.06667 48.9201 7.6 49.1467 7.16C49.3734 6.70667 49.6734 6.30667 50.0467 5.96C50.4201 5.6 50.8601 5.32 51.3667 5.12C51.8734 4.92 52.4334 4.82 53.0467 4.82ZM62.0588 0.819999V2.96H59.3988V0.819999H62.0588ZM59.5988 5.04H61.8388V15H59.5988V5.04ZM74.8778 15H72.6578V5.04H74.8778V15ZM72.7778 10.26L72.7978 10.9C72.7711 11.0733 72.7111 11.3333 72.6178 11.68C72.5378 12.0267 72.3978 12.4067 72.1978 12.82C72.0111 13.22 71.7578 13.6067 71.4378 13.98C71.1311 14.34 70.7445 14.64 70.2778 14.88C69.8111 15.1067 69.2445 15.22 68.5778 15.22C68.0978 15.22 67.6111 15.1533 67.1178 15.02C66.6378 14.9 66.1978 14.6933 65.7978 14.4C65.4111 14.1067 65.0978 13.7067 64.8578 13.2C64.6178 12.6933 64.4978 12.0533 64.4978 11.28V5.04H66.7178V10.86C66.7178 11.4867 66.8178 11.98 67.0178 12.34C67.2311 12.6867 67.5245 12.9333 67.8978 13.08C68.2711 13.2267 68.7045 13.3 69.1978 13.3C69.9045 13.3 70.5045 13.14 70.9978 12.82C71.4911 12.5 71.8845 12.1067 72.1778 11.64C72.4845 11.16 72.6845 10.7 72.7778 10.26ZM77.3298 5.04H79.5498V15H77.3298V5.04ZM83.7498 4.82C84.3232 4.82 84.8498 4.9 85.3298 5.06C85.8232 5.22 86.2432 5.46667 86.5898 5.8C86.9498 6.12 87.2232 6.52 87.4098 7C87.6098 7.48 87.7098 8.04667 87.7098 8.7V15H85.4898V9.14C85.4898 8.32667 85.2898 7.72667 84.8898 7.34C84.5032 6.94 83.8898 6.74 83.0498 6.74C82.4098 6.74 81.8232 6.88 81.2898 7.16C80.7698 7.42667 80.3432 7.78 80.0098 8.22C79.6765 8.64667 79.4832 9.12 79.4298 9.64L79.4098 8.56C79.4765 8.06667 79.6232 7.6 79.8498 7.16C80.0765 6.70667 80.3765 6.30667 80.7498 5.96C81.1232 5.6 81.5632 5.32 82.0698 5.12C82.5765 4.92 83.1365 4.82 83.7498 4.82ZM91.6898 4.82C92.2765 4.82 92.8098 4.9 93.2898 5.06C93.7698 5.22 94.1832 5.46667 94.5298 5.8C94.8898 6.12 95.1698 6.52 95.3698 7C95.5698 7.48 95.6698 8.04667 95.6698 8.7V15H93.4298V9.14C93.4298 8.32667 93.2298 7.72667 92.8298 7.34C92.4432 6.94 91.8298 6.74 90.9898 6.74C90.3498 6.74 89.7632 6.88 89.2298 7.16C88.7098 7.42667 88.2832 7.78 87.9498 8.22C87.6298 8.64667 87.4432 9.12 87.3898 9.64L87.3498 8.52C87.4165 8.04 87.5698 7.58 87.8098 7.14C88.0498 6.68667 88.3565 6.28667 88.7298 5.94C89.1032 5.59333 89.5365 5.32 90.0298 5.12C90.5365 4.92 91.0898 4.82 91.6898 4.82Z"
+									/>
+								</svg>
+							</Flex>
+						</NuxtLink>
+
+						<Flex align="center" gap="8" :class="$style.socials">
+							<a href="https://twitter.com/celenium_io" target="_blank">
+								<Icon name="twitter" size="14" color="tertiary" />
+							</a>
+							<a href="https://github.com/celenium-io" target="_blank">
+								<Icon name="github" size="14" color="tertiary" />
+							</a>
+							<a href="https://discord.com/channels/846362414039695391/1168936555302355005" target="_blank">
+								<Icon name="discord" size="14" color="tertiary" />
+							</a>
+							<a
+								href="https://www.youtube.com/watch?v=l4IrPuzTR-Q&list=PL3qDmPA7Yigp2fOHRqmQeZBMvZptOYQqB&pp=iAQB"
+								target="_blank"
+							>
+								<Icon name="youtube" size="14" color="tertiary" />
+							</a>
 						</Flex>
-					</a>
-				</Flex>
+					</Flex>
 
-				<Flex align="center" gap="8">
-					<NuxtLink to="https://www.pklab.io/terms" :class="$style.link">
-						<Text size="12" weight="500" color="tertiary">Terms of Use</Text>
-					</NuxtLink>
-					<NuxtLink to="https://www.pklab.io/privacy" :class="$style.link">
-						<Text size="12" weight="500" color="tertiary">Privacy Policy</Text>
-					</NuxtLink>
-				</Flex>
+					<Flex wrap="wrap" :class="$style.content">
+						<Flex direction="column" gap="12">
+							<Text size="13" weight="500" color="tertiary">General</Text>
+							<NuxtLink to="/">
+								<Text size="13" weight="500" color="secondary">Browse</Text>
+							</NuxtLink>
+							<NuxtLink to="/txs">
+								<Text size="13" weight="500" color="secondary">Transactions</Text>
+							</NuxtLink>
+							<NuxtLink to="/blocks">
+								<Text size="13" weight="500" color="secondary">Blocks</Text>
+							</NuxtLink>
+							<NuxtLink to="/addresses">
+								<Text size="13" weight="500" color="secondary">Addresses</Text>
+							</NuxtLink>
+						</Flex>
 
-				<Flex align="center" gap="8">
-					<Text size="12" weight="500" color="support">Donations:</Text>
-					<a :href="`https://celenium.io/address/celestia15ans77hr2uxefyn6fa2lcsvpngwevuaugth7f5`" target="_blank">
-						<Flex>
-							<Text size="12" weight="500" color="tertiary">TIA</Text>
+						<Flex direction="column" gap="12">
+							<Text size="13" weight="500" color="tertiary">Modular</Text>
+							<NuxtLink to="/rollups">
+								<Text size="13" weight="500" color="secondary">Rollups</Text>
+							</NuxtLink>
+							<NuxtLink to="/namespaces">
+								<Text size="13" weight="500" color="secondary">Namespaces</Text>
+							</NuxtLink>
+							<NuxtLink to="/validators">
+								<Text size="13" weight="500" color="secondary">Validators</Text>
+							</NuxtLink>
 						</Flex>
-					</a>
-					<a :href="`https://etherscan.io/address/0x9FfB1cb28c55735e77B352eE918b4F0c3595a761`" target="_blank">
-						<Flex>
-							<Text size="12" weight="500" color="tertiary">ETH</Text>
+
+						<Flex direction="column" gap="12">
+							<Text size="13" weight="500" color="tertiary">Tools</Text>
+							<NuxtLink to="/blobstream">
+								<Text size="13" weight="500" color="secondary">Blobstream</Text>
+							</NuxtLink>
+							<NuxtLink to="/gas">
+								<Text size="13" weight="500" color="secondary">Gas Tracker</Text>
+							</NuxtLink>
+							<NuxtLink to="/bookmarks">
+								<Text size="13" weight="500" color="secondary">Bookmarks</Text>
+							</NuxtLink>
+						</Flex>
+
+						<Flex direction="column" gap="12">
+							<Text size="13" weight="500" color="tertiary">Resources</Text>
+							<NuxtLink to="https://api-plans.celenium.io" target="_blank">
+								<Text size="13" weight="500" color="secondary">API</Text>
+							</NuxtLink>
+							<NuxtLink to="https://docs.celenium.io" target="_blank">
+								<Text size="13" weight="500" color="secondary">Documentation</Text>
+							</NuxtLink>
+							<NuxtLink to="https://hubble.celenium.io" target="_blank">
+								<Text size="13" weight="500" color="secondary">Hubble</Text>
+							</NuxtLink>
 						</Flex>
-					</a>
+					</Flex>
 				</Flex>
-			</Flex>
-			<Flex direction="column" align="end" gap="16">
-				<Flex align="center" gap="16">
+
+				<Flex align="center" gap="12" style="height: fit-content">
+					<Flex align="center" gap="6" :class="$style.btn">
+						<Text size="12" weight="600" color="tertiary"> Donate </Text>
+						<a href="https://celenium.io/address/celestia15ans77hr2uxefyn6fa2lcsvpngwevuaugth7f5" target="_blank">
+							<Text size="12" weight="600" color="secondary"> TIA </Text>
+						</a>
+						<a href="https://etherscan.io/address/0x9FfB1cb28c55735e77B352eE918b4F0c3595a761" target="_blank">
+							<Text size="12" weight="600" color="secondary"> ETH </Text>
+						</a>
+					</Flex>
+
 					<Dropdown side="top">
 						<Flex align="center" gap="6" :class="$style.btn">
 							<Icon
@@ -124,60 +192,22 @@ const handleChangeTheme = (target) => {
 							<DropdownItem @click="handleChangeTheme('system')">System</DropdownItem>
 						</template>
 					</Dropdown>
-
-					<Text size="12" weight="700" color="support">/</Text>
-
-					<Flex align="center" gap="8" :class="$style.socials">
-						<a href="https://twitter.com/celenium_io" target="_blank">
-							<Icon name="twitter" size="14" color="secondary" :class="$style.btn" />
-						</a>
-						<a href="https://github.com/celenium-io" target="_blank">
-							<Icon name="github" size="14" color="secondary" :class="$style.btn" />
-						</a>
-						<a href="https://discord.com/channels/846362414039695391/1168936555302355005" target="_blank">
-							<Icon name="discord" size="14" color="secondary" :class="$style.btn" />
-						</a>
-						<a
-							href="https://www.youtube.com/watch?v=l4IrPuzTR-Q&list=PL3qDmPA7Yigp2fOHRqmQeZBMvZptOYQqB&pp=iAQB"
-							target="_blank"
-						>
-							<Icon name="youtube" size="14" color="secondary" :class="$style.btn" />
-						</a>
-					</Flex>
-				</Flex>
-
-				<Flex align="center" gap="16" :class="$style.links">
-					<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="/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>
-					<NuxtLink to="/blobstream" :class="$style.link">
-						<Text size="12" weight="500" color="tertiary"> Blobstream </Text>
-					</NuxtLink>
-					<NuxtLink to="/gas" :class="$style.link">
-						<Text size="12" weight="500" color="tertiary"> Gas Tracker </Text>
-					</NuxtLink>
-					<NuxtLink to="https://docs.celenium.io" :class="$style.link" target="_blank">
-						<Text size="12" weight="500" color="tertiary"> Docs </Text>
-					</NuxtLink>
 				</Flex>
 			</Flex>
 		</Flex>
 	</Flex>
+	<Flex justify="center" :class="$style.bottom">
+		<Flex wide align="center" gap="20" justify="between" :class="$style.bottom_container">
+			<Flex align="center" gap="20">
+				<Text size="12" weight="500" color="tertiary">Terms of use</Text>
+				<Text size="12" weight="500" color="tertiary">Privacy policy</Text>
+			</Flex>
+
+			<a href="https://www.pklabs.me/" target="_blank" style="line-height: 12px">
+				<Text size="12" weight="500" color="tertiary">Made by PK Lab</Text>
+			</a>
+		</Flex>
+	</Flex>
 </template>
 
 <style module>
@@ -186,23 +216,36 @@ const handleChangeTheme = (target) => {
 }
 
 .container {
-	max-width: var(--base-width);
+	max-width: 1260px;
 
-	padding: 24px 0;
-	margin: 0 24px;
+	padding: 32px 20px 80px 0;
 }
 
-.link {
-	& span {
-		transition: all 0.2s ease;
+.content {
+	gap: 80px;
 
-		&:hover {
-			color: var(--txt-primary);
-		}
+	padding: 0 24px;
+
+	& a {
+		line-height: 12px;
+	}
+}
+
+.left {
+	width: 230px;
+
+	padding-left: 20px;
+}
+
+.socials {
+	& a {
+		display: flex;
 	}
 }
 
 .btn {
+	max-height: 24px;
+
 	box-sizing: content-box;
 	border-radius: 5px;
 	background: var(--op-8);
@@ -212,6 +255,10 @@ const handleChangeTheme = (target) => {
 
 	transition: all 0.2s ease;
 
+	& a {
+		display: flex;
+	}
+
 	&:hover {
 		background: var(--op-10);
 	}
@@ -221,21 +268,55 @@ const handleChangeTheme = (target) => {
 	}
 }
 
-.socials {
-	& a {
-		display: flex;
-	}
+.logo {
+}
+
+.logo_symbol {
+	box-sizing: content-box;
+	cursor: pointer;
+}
+
+.logo_name {
+	fill: var(--txt-secondary);
+}
+
+.bottom {
+	background: var(--op-3);
+
+	padding: 12px 0;
+}
+
+.bottom_container {
+	max-width: 1260px;
+
+	padding: 0 20px;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 1300px) {
 	.container {
+		max-width: 1030px;
+	}
+}
+
+@media (max-width: 700px) {
+	.main {
 		flex-direction: column;
-		gap: 12px;
+		align-items: center;
+		gap: 60px;
 	}
 
-	.links {
-		flex-wrap: wrap;
+	.content {
 		justify-content: center;
 	}
+
+	.main > div {
+		flex-direction: column;
+		align-items: center;
+		gap: 60px;
+	}
+
+	.left {
+		align-items: center;
+	}
 }
 </style>
diff --git a/components/TheHeader.vue b/components/TheHeader.vue
index f3cea598..aadf51fb 100644
--- a/components/TheHeader.vue
+++ b/components/TheHeader.vue
@@ -130,7 +130,7 @@ const handleNavigate = (url) => {
 						<template #content>
 							<Flex align="center" direction="column" gap="4">
 								<Flex align="center" justify="start" wide>
-									<Text size="12" color="primary"> {{ head.synced ? 'Synced' : 'Not Synced' }} </Text>
+									<Text size="12" color="primary"> {{ head.synced ? "Synced" : "Not Synced" }} </Text>
 								</Flex>
 
 								<Text size="12" color="tertiary"> {{ head.chain_id }} </Text>
@@ -170,9 +170,7 @@ const handleNavigate = (url) => {
 					</NuxtLink>
 
 					<template #content>
-						<Flex align="center" gap="8">
-							Open My Bookmarks
-						</Flex>
+						<Flex align="center" gap="8"> Open My Bookmarks </Flex>
 					</template>
 				</Tooltip>
 
diff --git a/components/modals/APIModal.vue b/components/modals/APIModal.vue
new file mode 100644
index 00000000..8da1aabd
--- /dev/null
+++ b/components/modals/APIModal.vue
@@ -0,0 +1,351 @@
+<script setup>
+/** UI */
+import Modal from "@/components/ui/Modal.vue"
+import Button from "@/components/ui/Button.vue"
+
+/** Services */
+import { comma } from "@/services/utils"
+
+const emit = defineEmits(["onClose"])
+const props = defineProps({
+	show: Boolean,
+})
+
+const plans = reactive([
+	{
+		name: "Basic",
+		price: {
+			monthly: null,
+			annually: null,
+		},
+		requests: {
+			rps: 3,
+			rpd: 100_000,
+		},
+		access: {
+			blobs: false,
+			rollups: false,
+			stats: false,
+		},
+		other: {
+			support: "Standard",
+			queryOp: "None",
+		},
+	},
+	{
+		name: "Developer Pack",
+		price: {
+			monthly: 149,
+			annually: 119,
+		},
+		requests: {
+			rps: 10,
+			rpd: 500_000,
+		},
+		access: {
+			blobs: true,
+			rollups: true,
+			stats: false,
+		},
+		other: {
+			support: "Advanced",
+			queryOp: "Client ",
+		},
+	},
+	{
+		name: "Analysts' Choice",
+		price: {
+			monthly: 149,
+			annually: 119,
+		},
+		requests: {
+			rps: 10,
+			rpd: 500_000,
+		},
+		access: {
+			blobs: false,
+			rollups: true,
+			stats: true,
+		},
+		other: {
+			support: "Advanced",
+			queryOp: "Client ",
+		},
+	},
+	{
+		name: "Full Set",
+		price: {
+			monthly: 299,
+			annually: 239,
+		},
+		requests: {
+			rps: 30,
+			rpd: 1_500_000,
+		},
+		access: {
+			blobs: true,
+			rollups: true,
+			stats: true,
+		},
+		other: {
+			support: "Dedicated",
+			queryOp: "Custom ",
+		},
+	},
+])
+const selectedPlan = ref(0)
+const selectedBilling = ref("annually")
+</script>
+
+<template>
+	<Modal :show="show" @onClose="emit('onClose')" width="700" disable-trap>
+		<Flex direction="column" gap="16">
+			<Text size="14" weight="600" color="primary">Celenium API</Text>
+
+			<Flex gap="32">
+				<Flex direction="column" justify="between" :class="$style.left">
+					<Flex direction="column" gap="20">
+						<Flex direction="column" gap="8">
+							<Text size="13" weight="600" color="secondary">Plans</Text>
+							<Flex
+								v-for="(plan, idx) in plans"
+								@click="selectedPlan = idx"
+								align="center"
+								justify="between"
+								:class="[$style.plan, idx === selectedPlan && $style.selected]"
+							>
+								<Flex align="center" gap="8">
+									<Icon
+										name="check-circle"
+										size="12"
+										:color="selectedPlan === idx ? 'brand' : 'secondary'"
+										:class="$style.check_icon"
+									/>
+									<Text size="14" weight="600" :color="selectedPlan === idx ? 'primary' : 'secondary'">
+										{{ plan.name }}
+									</Text>
+								</Flex>
+
+								<Text v-if="plan.price.monthly" size="13" weight="600" color="primary">
+									${{ plan.price[selectedBilling] }}
+									<Text color="tertiary">/m</Text>
+								</Text>
+								<Text v-else size="13" weight="600" color="primary"> Free </Text>
+							</Flex>
+						</Flex>
+
+						<Flex v-if="selectedBilling === 'annually' && plans[selectedPlan].price.monthly" gap="8">
+							<Icon name="verified" size="14" color="secondary" />
+							<Flex direction="column" gap="6">
+								<Text size="13" weight="600" color="secondary">Discount 20% applied</Text>
+								<Text size="12" weight="500" height="140" color="tertiary">
+									When you pay for a year in advance, you get ~2.5 months for free
+								</Text>
+							</Flex>
+						</Flex>
+					</Flex>
+
+					<Flex direction="column" gap="16">
+						<Flex v-if="plans[selectedPlan].price.monthly" wide align="center" justify="between">
+							<Text size="12" weight="600" color="secondary">Billing</Text>
+							<Flex align="center" gap="8">
+								<Text
+									@click="selectedBilling = 'annually'"
+									size="12"
+									weight="600"
+									:color="selectedBilling === 'annually' ? 'primary' : 'tertiary'"
+									style="cursor: pointer"
+								>
+									Annually
+								</Text>
+								<Text
+									@click="selectedBilling = 'monthly'"
+									size="12"
+									weight="600"
+									:color="selectedBilling === 'monthly' ? 'primary' : 'tertiary'"
+									style="cursor: pointer"
+								>
+									Monthly
+								</Text>
+							</Flex>
+						</Flex>
+						<Flex wide align="center" justify="between">
+							<Text size="12" weight="600" color="secondary">Due today</Text>
+
+							<Flex align="center" gap="8">
+								<Text size="12" weight="600" :color="selectedBilling === 'annually' ? 'brand' : 'primary'">
+									${{
+										plans[selectedPlan].price.monthly
+											? comma(plans[selectedPlan].price[selectedBilling] * (selectedBilling === "annually" ? 12 : 1))
+											: 0
+									}}
+								</Text>
+								<Text
+									v-if="selectedBilling === 'annually'"
+									size="12"
+									weight="600"
+									color="tertiary"
+									style="text-decoration: line-through"
+								>
+									${{ comma(plans[selectedPlan].price.monthly * 12) }}
+								</Text>
+							</Flex>
+						</Flex>
+
+						<Flex direction="column" align="center" gap="8">
+							<Button type="primary" size="small" wide>
+								<Text color="black">Start with {{ plans[selectedPlan].name }}</Text>
+							</Button>
+
+							<Text size="12" weight="500" color="tertiary">Secure payment via Stripe</Text>
+						</Flex>
+					</Flex>
+				</Flex>
+
+				<Flex wide direction="column" gap="32" :class="$style.right">
+					<Flex direction="column" gap="16">
+						<Flex direction="column" gap="8">
+							<Text size="14" weight="600" color="primary">{{ plans[selectedPlan].name }} Overview</Text>
+							<Text size="13" weight="500" color="tertiary"
+								>${{ plans[selectedPlan].price[selectedBilling] }} per month, billing {{ selectedBilling }}
+							</Text>
+						</Flex>
+
+						<div class="divider_h" />
+					</Flex>
+
+					<Flex direction="column" gap="16">
+						<Flex wide align="center" gap="8" justify="between">
+							<Flex align="center" gap="8">
+								<Icon name="zap-circle" size="14" color="brand" />
+								<Text size="14" weight="600" color="primary">{{ comma(plans[selectedPlan].requests.rpd) }} </Text>
+							</Flex>
+
+							<Text size="13" weight="600" color="tertiary">Requests per Day</Text>
+						</Flex>
+						<Flex wide align="center" gap="8" justify="between">
+							<Flex align="center" gap="8">
+								<Icon name="zap-circle" size="14" color="brand" />
+								<Text size="14" weight="600" color="primary">{{ comma(plans[selectedPlan].requests.rps) }}</Text>
+							</Flex>
+
+							<Text size="13" weight="600" color="tertiary">Requests per Second</Text>
+						</Flex>
+					</Flex>
+
+					<Flex direction="column" gap="16">
+						<Flex align="center" gap="8">
+							<Icon
+								:name="plans[selectedPlan].access.blobs ? 'check-circle' : 'close-circle'"
+								size="14"
+								:color="plans[selectedPlan].access.blobs ? 'brand' : 'tertiary'"
+							/>
+							<Text size="13" weight="600" :color="plans[selectedPlan].access.blobs ? 'primary' : 'tertiary'">
+								Blobs Access
+							</Text>
+						</Flex>
+						<Flex align="center" gap="8">
+							<Icon
+								:name="plans[selectedPlan].access.stats ? 'check-circle' : 'close-circle'"
+								size="14"
+								:color="plans[selectedPlan].access.stats ? 'brand' : 'tertiary'"
+							/>
+							<Text size="13" weight="600" :color="plans[selectedPlan].access.stats ? 'primary' : 'tertiary'">
+								Statistics Access
+							</Text>
+						</Flex>
+						<Flex align="center" gap="8">
+							<Icon
+								:name="plans[selectedPlan].access.rollups ? 'check-circle' : 'close-circle'"
+								size="14"
+								:color="plans[selectedPlan].access.rollups ? 'brand' : 'tertiary'"
+							/>
+							<Text size="13" weight="600" :color="plans[selectedPlan].access.rollups ? 'primary' : 'tertiary'">
+								Rollups Data
+							</Text>
+						</Flex>
+					</Flex>
+
+					<Flex direction="column" gap="16">
+						<Flex v-if="plans[selectedPlan].other.queryOp !== 'None'" align="center" gap="8">
+							<Icon name="check-circle" size="14" color="secondary" />
+							<Text size="13" weight="600" color="primary">{{ plans[selectedPlan].other.queryOp }} Query Optimization</Text>
+						</Flex>
+						<Flex align="center" gap="8">
+							<Icon name="check-circle" size="14" color="secondary" />
+							<Text size="13" weight="600" color="primary">{{ plans[selectedPlan].other.support }} Support</Text>
+						</Flex>
+					</Flex>
+				</Flex>
+			</Flex>
+		</Flex>
+	</Modal>
+</template>
+
+<style module>
+.left {
+	width: 550px;
+	height: 450px;
+
+	background: rgba(0, 0, 0, 20%);
+	box-shadow: inset 0 0 0 1px var(--op-5);
+	border-radius: 12px;
+
+	padding: 16px;
+}
+
+.billing {
+	height: 28px;
+
+	background: var(--card-background);
+	border-radius: 6px;
+	box-shadow: inset 0 0 0 1px var(--op-5);
+	overflow: hidden;
+
+	& span {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		cursor: pointer;
+
+		width: 100%;
+		height: 28px;
+
+		&.selected {
+			/* background: var(--op-5); */
+			color: var(--txt-primary);
+		}
+	}
+}
+
+.right {
+	padding: 12px 0;
+}
+
+.plan {
+	height: 38px;
+
+	background: var(--card-background);
+	box-shadow: inset 0 0 0 1px var(--op-5);
+	border-radius: 8px;
+	cursor: pointer;
+
+	padding: 0 12px;
+
+	transition: all 0.2s ease;
+
+	&:hover {
+		background: var(--op-5);
+	}
+
+	&.selected {
+		box-shadow: inset 0 0 0 1px var(--brand);
+	}
+}
+
+.check_icon {
+	width: 12px;
+	height: 12px;
+}
+</style>
diff --git a/components/modals/ModalsManager.vue b/components/modals/ModalsManager.vue
index 7b394469..2d278367 100644
--- a/components/modals/ModalsManager.vue
+++ b/components/modals/ModalsManager.vue
@@ -12,9 +12,10 @@ import ChangeBlobModal from "./ChangeBlobModal.vue"
 import QRCodeModal from "./QRCodeModal.vue"
 import RawDataModal from "./RawDataModal.vue"
 import SendModal from "./SendModal.vue"
-import StakingModal from "./StakingModal.vue";
-import VestingDetailsModal from "./VestingDetailsModal.vue";
+import StakingModal from "./StakingModal.vue"
+import VestingDetailsModal from "./VestingDetailsModal.vue"
 import HexSettingsModal from "./HexSettingsModal.vue"
+import APIModal from "./APIModal.vue"
 
 /** Store */
 import { useModalsStore } from "@/store/modals"
@@ -38,4 +39,5 @@ const modalsStore = useModalsStore()
 	<VestingDetailsModal :show="modalsStore.modals.vestingDetails" @onClose="modalsStore.close('vestingDetails')" />
 	<StakingModal :show="modalsStore.modals.staking" @onClose="modalsStore.close('staking')" />
 	<HexSettingsModal :show="modalsStore.modals.hexSettings" @onClose="modalsStore.close('hexSettings')" />
+	<APIModal :show="modalsStore.modals.api" @onClose="modalsStore.close('api')" />
 </template>
diff --git a/components/modules/navigation/NavLink.vue b/components/modules/navigation/NavLink.vue
new file mode 100644
index 00000000..bdfa9ada
--- /dev/null
+++ b/components/modules/navigation/NavLink.vue
@@ -0,0 +1,87 @@
+<script setup>
+import NavLink from "./NavLink.vue"
+
+const route = useRoute()
+
+const props = defineProps({
+	link: Object,
+})
+
+const isExpanded = ref(false)
+
+const handleClick = () => {
+	if (props.link.callback) props.link.callback()
+}
+</script>
+
+<template>
+	<NuxtLink @click="handleClick" :to="link.path" :target="link.external && '_blank'">
+		<Flex align="center" gap="8" justify="between" :class="[$style.link, route.path === link.path && $style.active]">
+			<Flex align="center" gap="8">
+				<Icon :name="link.icon" size="14" color="secondary" :class="$style.link_icon" />
+				<Text size="13" weight="600" color="secondary">{{ link.name }}</Text>
+				<Icon v-if="link.external" name="arrow-narrow-up-right" size="14" color="tertiary" />
+			</Flex>
+
+			<Flex @click.prevent="isExpanded = !isExpanded" :class="$style.chevron_icon">
+				<Icon
+					v-if="link.children"
+					name="chevron"
+					size="14"
+					color="secondary"
+					:style="{ transform: `rotate(${isExpanded ? '0deg' : '-90deg'})` }"
+				/>
+			</Flex>
+		</Flex>
+	</NuxtLink>
+
+	<template v-if="isExpanded">
+		<Flex direction="column" gap="2">
+			<NavLink v-for="l in link.children" :link="l" />
+		</Flex>
+	</template>
+</template>
+
+<style module>
+.link {
+	height: 30px;
+
+	cursor: pointer;
+	border-radius: 6px;
+
+	padding: 0 4px 0 8px;
+
+	transition: all 0.2s ease;
+
+	&:hover {
+		background: var(--op-5);
+	}
+
+	&.active {
+		& span {
+			color: var(--brand);
+		}
+
+		& .link_icon:first-of-type {
+			fill: var(--brand);
+		}
+	}
+}
+
+.chevron_icon {
+	box-sizing: content-box;
+	border-radius: 5px;
+
+	padding: 4px;
+
+	transition: all 0.2s ease;
+
+	&:hover {
+		background: var(--op-10);
+	}
+
+	& svg {
+		transition: all 0.2s ease;
+	}
+}
+</style>
diff --git a/components/modules/navigation/Search.vue b/components/modules/navigation/Search.vue
new file mode 100644
index 00000000..e8778f49
--- /dev/null
+++ b/components/modules/navigation/Search.vue
@@ -0,0 +1,240 @@
+<script setup>
+/** Vendor */
+import { useDebounceFn } from "@vueuse/core"
+
+/**
+ * Composable
+ */
+import { useOutside } from "@/composables/outside"
+
+/** UI */
+import Spinner from "@/components/ui/Spinner.vue"
+
+/** API */
+import { search } from "@/services/api/search"
+
+const wrapperEl = ref()
+const inputRef = ref()
+const searchTerm = ref("")
+const show = ref(false)
+
+const results = ref([])
+
+const handleClick = () => {
+	show.value = true
+	inputRef.value.focus()
+}
+
+onMounted(() => {
+	document.addEventListener("keydown", (e) => {
+		if (e.code === "Escape") {
+			show.value = false
+		}
+		if (e.code === "Slash" && !show.value) {
+			e.preventDefault()
+			show.value = true
+			inputRef.value.focus()
+		}
+	})
+})
+
+let removeOutside
+watch(
+	() => show.value,
+	() => {
+		if (show.value) {
+			removeOutside = useOutside(wrapperEl.value.wrapper, () => {
+				show.value = false
+			})
+		} else {
+			if (removeOutside) removeOutside()
+		}
+	},
+)
+
+const isSearching = ref(false)
+const debouncedSearch = useDebounceFn(async () => {
+	isSearching.value = true
+
+	const { data } = await search(searchTerm.value.trim())
+	results.value = data.value
+
+	isSearching.value = false
+}, 250)
+const handleInput = () => {
+	results.value = []
+
+	if (searchTerm.value.length) debouncedSearch()
+}
+
+const getResultMetadata = (target) => {
+	let metadata = { type: null, title: null, routerLink: null }
+
+	switch (target.type.toLowerCase()) {
+		case "tx":
+		case "transaction":
+			metadata.type = "tx"
+			metadata.title = target.result.alias || target.result.hash
+			metadata.routerLink = `/tx/${target.bookmark ? target.result.id : target.result.hash}`
+			break
+
+		case "block":
+			metadata.type = target.type
+			metadata.title = target.result.alias || target.result.hash
+			metadata.routerLink = `/block/${target.bookmark ? target.result.id : target.result.height}`
+			break
+
+		case "namespace":
+			metadata.type = target.type
+			metadata.title = target.result.alias || target.result.hash
+			metadata.routerLink = `/namespace/${target.bookmark ? target.result.id : target.result.namespace_id}`
+			break
+
+		case "address":
+			metadata.type = target.type
+			metadata.title = target.result.alias || target.result.hash
+			metadata.routerLink = `/address/${target.bookmark ? target.result.id : target.result.hash}`
+			break
+
+		case "rollup":
+			metadata.type = target.type
+			metadata.title = target.result.name
+			metadata.routerLink = `/rollup/${target.result.slug}`
+			break
+
+		case "validator":
+			metadata.type = target.type
+			metadata.title = target.result.alias || target.result.moniker ? target.result.moniker : target.result.address
+			metadata.routerLink = `/validator/${target.result.id}`
+			break
+
+		default:
+			break
+	}
+
+	return metadata
+}
+
+watch(
+	() => results.value,
+	() => {
+		if (results.value.length) show.value = true
+	},
+)
+
+const handleSelect = () => {
+	show.value = false
+	results.value.length = []
+	searchTerm.value = ""
+}
+</script>
+
+<template>
+	<Flex ref="wrapperEl" wide :class="$style.wrapper">
+		<Flex wide @click="handleClick" align="center" justify="between" gap="12" :class="$style.bar">
+			<Flex wide align="center" gap="8">
+				<Icon v-if="!isSearching" name="search" size="14" color="secondary" />
+				<Spinner v-else size="14" />
+
+				<input ref="inputRef" v-model="searchTerm" @input="handleInput" placeholder="Search" spellcheck="false" autocomplete="off"
+				:class="$style.input_bar"
+			</Flex>
+
+			<Text size="13" weight="600" color="secondary" :class="$style.slash">/ </Text>
+		</Flex>
+
+		<Transition name="fastfade">
+			<Flex v-if="show && results.length" @click="handleSelect" direction="column" gap="6" :class="$style.popup">
+				<template v-if="results.length">
+					<Text size="12" weight="600" color="tertiary">Results</Text>
+
+					<Flex direction="column">
+						<NuxtLink v-for="result in results" :to="getResultMetadata(result).routerLink">
+							<Flex align="center" justify="between" :class="$style.item">
+								<Flex align="center" gap="8">
+									<Icon :name="getResultMetadata(result).type" size="12" color="tertiary" />
+									<Text size="13" weight="600" color="primary">{{ getResultMetadata(result).title }}</Text>
+								</Flex>
+
+								<Text size="13" weight="500" color="tertiary" style="text-transform: capitalize">{{ result.type }}</Text>
+							</Flex>
+						</NuxtLink>
+					</Flex>
+				</template>
+			</Flex>
+		</Transition>
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+	max-width: 600px;
+
+	position: relative;
+}
+
+.bar {
+	height: 32px;
+
+	border-radius: 6px;
+	background: var(--op-5);
+	cursor: text;
+
+	padding: 0 6px 0 8px;
+
+	transition: all 0.2s ease;
+
+	&:hover {
+		background: var(--op-8);
+	}
+}
+
+.slash {
+	background: var(--op-8);
+	border-radius: 5px;
+
+	padding: 4px 8px;
+}
+
+.popup {
+	position: absolute;
+	max-width: 600px;
+	top: 40px;
+	left: 0;
+	right: 0;
+	z-index: 1000;
+
+	background: var(--card-background);
+	border-radius: 8px;
+	box-shadow: inset 0 0 0 1px var(--op-5), 0 2px 8px rgba(0, 0, 0, 15%);
+
+	padding: 12px;
+}
+
+.input_bar {
+	all: unset;
+
+	width: 100%;
+
+	font-size: 13px;
+	line-height: 1;
+	font-weight: 500;
+	color: var(--txt-primary);
+}
+
+.item {
+	height: 28px;
+
+	border-radius: 6px;
+	cursor: pointer;
+
+	padding: 0 6px;
+	margin-left: -6px;
+
+	transition: all 0.2s ease;
+
+	&:hover {
+		background: var(--op-5);
+	}
+}
+</style>
diff --git a/components/ui/Button.vue b/components/ui/Button.vue
index 0fbc4e0b..adbd6f98 100644
--- a/components/ui/Button.vue
+++ b/components/ui/Button.vue
@@ -171,7 +171,7 @@ const getStyles = () => {
 }
 
 .wrapper.primary {
-	background: var(--blue);
+	background: var(--brand);
 	fill: var(--txt-primary);
 }
 .wrapper.primary:hover {
diff --git a/components/ui/Dropdown/Dropdown.vue b/components/ui/Dropdown/Dropdown.vue
index 02c8c9f8..8ffad58c 100644
--- a/components/ui/Dropdown/Dropdown.vue
+++ b/components/ui/Dropdown/Dropdown.vue
@@ -29,6 +29,10 @@ const props = defineProps({
 	forceOpen: Boolean,
 	disabled: Boolean,
 
+	wide: {
+		type: Boolean,
+		default: false,
+	},
 	width: {
 		type: String,
 		default: null,
@@ -208,7 +212,7 @@ const onKeydown = (event) => {
 
 <template>
 	<div :class="$style.wrapper">
-		<div ref="trigger" id="trigger" @click="toggleDropdown" :class="$style.trigger">
+		<div ref="trigger" id="trigger" @click="toggleDropdown" :class="[$style.trigger, wide && $style.wide]">
 			<slot />
 			<slot name="trigger" :isOpen="isOpen" />
 		</div>
@@ -243,7 +247,11 @@ const onKeydown = (event) => {
 }
 
 .trigger {
-	width: fit-content;
+	width: 100%;
+
+	&.wide {
+		width: 100%;
+	}
 }
 
 .canvas {
diff --git a/components/widgets/StakingWidget.vue b/components/widgets/StakingWidget.vue
index 67805ee6..e0de18c5 100644
--- a/components/widgets/StakingWidget.vue
+++ b/components/widgets/StakingWidget.vue
@@ -133,14 +133,16 @@ onMounted(() => {
 			<Flex v-else direction="column" gap="20">
 				<Skeleton :w="barWidth" h="5" />
 
-				<Flex justify="between">
-					<Skeleton w="70" h="12" />
-					<Skeleton w="70" h="12" />
-				</Flex>
+				<Flex direction="column" gap="12">
+					<Flex justify="between">
+						<Skeleton w="70" h="12" />
+						<Skeleton w="70" h="12" />
+					</Flex>
 
-				<Flex justify="between">
-					<Skeleton w="70" h="12" />
-					<Skeleton w="70" h="12" />
+					<Flex justify="between">
+						<Skeleton w="70" h="12" />
+						<Skeleton w="70" h="12" />
+					</Flex>
 				</Flex>
 			</Flex>
 		</Flex>
diff --git a/layouts/default.vue b/layouts/default.vue
index e20a4187..ea2b45fa 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,13 +1,17 @@
 <template>
 	<Flex direction="column">
-		<Flex direction="column" align="center" :class="$style.wrapper">
-			<TheHeader />
-			<Feed />
+		<Flex justify="center" :class="$style.wrapper">
+			<LeftSidebar :class="$style.sidebar" />
 
-			<Flex direction="column" align="center" wide :class="$style.container">
-				<slot />
+			<Flex direction="column" align="center" :class="$style.content">
+				<Feed />
+				<ActionBar />
 
-				<div :class="$style.bg" />
+				<Flex direction="column" align="center" wide :class="$style.container">
+					<slot />
+
+					<div :class="$style.bg" />
+				</Flex>
 			</Flex>
 		</Flex>
 
@@ -17,7 +21,13 @@
 
 <style module>
 .wrapper {
-	min-height: calc(100vh - 120px);
+	min-height: calc(100vh);
+}
+
+.content {
+	/* max-width: 100%; */
+	max-width: 1040px;
+	min-width: 1040px;
 }
 
 .container {
@@ -36,4 +46,17 @@
 	background-size: 48px 48px;
 	-webkit-mask-image: -webkit-gradient(linear, left 0%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
 }
+
+@media (max-width: 1300px) {
+	.sidebar {
+		display: none;
+	}
+}
+
+@media (max-width: 1100px) {
+	.content {
+		max-width: 100%;
+		min-width: 100%;
+	}
+}
 </style>
diff --git a/pages/address/[hash].vue b/pages/address/[hash].vue
index f8679d47..38819ccc 100644
--- a/pages/address/[hash].vue
+++ b/pages/address/[hash].vue
@@ -83,7 +83,7 @@ onBeforeRouteLeave(() => {
 const displayName = computed(() => {
 	const { $getDisplayName } = useNuxtApp()
 
-  	return $getDisplayName('address', address.value.hash)
+	return $getDisplayName("address", address.value.hash)
 })
 </script>
 
@@ -105,9 +105,7 @@ const displayName = computed(() => {
 
 <style module>
 .wrapper {
-	max-width: calc(var(--base-width) + 48px);
-
-	padding: 60px 24px;
+	padding: 20px 24px 60px 24px;
 }
 
 .breadcrumbs {
diff --git a/pages/addresses.vue b/pages/addresses.vue
index b4acf72e..5ae0d012 100644
--- a/pages/addresses.vue
+++ b/pages/addresses.vue
@@ -192,7 +192,10 @@ const handleLast = async () => {
 								</td>
 								<td>
 									<NuxtLink :to="`/address/${address.hash}`">
-										<AmountInCurrency :amount="{ value: calculateTotalBalance(address) }" :styles=" {amount: { size: '13' }, currency: { size: '13' } }" />
+										<AmountInCurrency
+											:amount="{ value: calculateTotalBalance(address) }"
+											:styles="{ amount: { size: '13' }, currency: { size: '13' } }"
+										/>
 									</NuxtLink>
 								</td>
 								<td>
@@ -224,9 +227,7 @@ const handleLast = async () => {
 
 <style module>
 .wrapper {
-	max-width: calc(var(--base-width) + 48px);
-
-	padding: 40px 24px 60px 24px;
+	padding: 20px 24px 60px 24px;
 }
 
 .breadcrumbs {
diff --git a/pages/blob.vue b/pages/blob.vue
index ceae2d42..fa7d3771 100644
--- a/pages/blob.vue
+++ b/pages/blob.vue
@@ -194,7 +194,7 @@ const handleCopy = (text) => {
 </script>
 
 <template>
-	<Flex direction="column" gap="16" :class="$style.wrapper">
+	<Flex wide direction="column" gap="16" :class="$style.wrapper">
 		<Flex align="center" justify="between">
 			<Flex align="center" gap="8">
 				<Flex @click="currTab = 'viewer'" align="center" gap="6" :class="[$style.tab, currTab === 'viewer' && $style.active]">
@@ -434,7 +434,12 @@ const handleCopy = (text) => {
 											<Flex align="center" justify="center" :class="$style.avatar_container">
 												<img :src="metadata.rollup.logo" :class="$style.avatar_image" />
 											</Flex>
-											<Text size="12" weight="600" color="secondary" style="text-overflow: ellipsis; overflow: hidden">
+											<Text
+												size="12"
+												weight="600"
+												color="secondary"
+												style="text-overflow: ellipsis; overflow: hidden"
+											>
 												{{ metadata.rollup.name }}
 											</Text>
 										</Flex>
@@ -483,10 +488,7 @@ const handleCopy = (text) => {
 
 <style module>
 .wrapper {
-	width: 100%;
-	max-width: calc(var(--base-width) + 48px);
-
-	padding: 40px 24px 60px 24px;
+	padding: 20px 24px 60px 24px;
 }
 
 .left {
diff --git a/pages/blobstream.vue b/pages/blobstream.vue
index 6ad2253c..90d9b48e 100644
--- a/pages/blobstream.vue
+++ b/pages/blobstream.vue
@@ -10,7 +10,7 @@ import Button from "@/components/ui/Button.vue"
 import { capitilize, comma, shortHex } from "@/services/utils"
 
 /** API */
-import { fetchNetworks, fetchCommitments, fetchCommitmentsByNetwork } from "@/services/api/blobstream";
+import { fetchNetworks, fetchCommitments, fetchCommitmentsByNetwork } from "@/services/api/blobstream"
 
 /** Store */
 import { useCacheStore } from "@/store/cache"
@@ -81,7 +81,7 @@ const sort = ref("desc")
 
 const getNetworks = async () => {
 	const { data } = await fetchNetworks()
-	networks.value = data.value.filter(n => n.last_height > 0)
+	networks.value = data.value.filter((n) => n.last_height > 0)
 
 	if (networks.value.length === 1) {
 		selectedNetwork.value = networks.value[0].network
@@ -109,7 +109,7 @@ const getCommitments = async () => {
 
 		commitments.value = data.value
 	}
-	
+
 	handleNextCondition.value = commitments.value?.length < limit.value
 
 	isRefetching.value = false
@@ -183,7 +183,6 @@ const handleViewCommitment = (commitment) => {
 
 getNetworks()
 getCommitments()
-
 </script>
 
 <template>
@@ -203,7 +202,12 @@ getCommitments()
 				align="center"
 				direction="column"
 				gap="12"
-				:class="[$style.card_network, selectedNetwork === n.network && $style.card_active, isRefetching && $style.disabled, networks?.length === 1 && $style.unclickable]"
+				:class="[
+					$style.card_network,
+					selectedNetwork === n.network && $style.card_active,
+					isRefetching && $style.disabled,
+					networks?.length === 1 && $style.unclickable,
+				]"
 			>
 				<Flex align="center" gap="6">
 					<Text size="13" weight="600" height="110" color="primary"> {{ capitilize(n.network) }} </Text>
@@ -211,13 +215,13 @@ getCommitments()
 
 				<Flex align="center" justify="between" wide>
 					<Text size="12" weight="600" color="tertiary">Last Height</Text>
-					
+
 					<Text size="12" weight="600" color="secondary"> {{ comma(n.last_height) }} </Text>
 				</Flex>
 
 				<Flex align="center" justify="between" wide>
 					<Text size="12" weight="600" color="tertiary">Last Hash</Text>
-					
+
 					<Text size="12" weight="600" color="secondary"> {{ shortHex(n.last_hash) }} </Text>
 				</Flex>
 			</Flex>
@@ -288,9 +292,7 @@ getCommitments()
 										<Text size="12" weight="600" color="primary">
 											{{ shortHex(c.commitment) }}
 										</Text>
-										<Text size="12" weight="500" color="tertiary">
-											nonce {{ c.proof_nonce }}
-										</Text>
+										<Text size="12" weight="500" color="tertiary"> nonce {{ c.proof_nonce }} </Text>
 									</Flex>
 								</td>
 								<td>
@@ -298,13 +300,11 @@ getCommitments()
 										<Flex align="center">
 											<Outline @click.prevent.stop="router.push(`/block/${c.celestia_start_height}`)">
 												<Flex align="center" gap="6">
-													<Icon
-														name="block"
-														size="14"
-														color="tertiary"
-													/>
+													<Icon name="block" size="14" color="tertiary" />
 
-													<Text size="13" weight="600" color="primary" tabular>{{ comma(c.celestia_start_height) }}</Text>
+													<Text size="13" weight="600" color="primary" tabular>{{
+														comma(c.celestia_start_height)
+													}}</Text>
 												</Flex>
 											</Outline>
 										</Flex>
@@ -314,13 +314,11 @@ getCommitments()
 										<Flex align="center">
 											<Outline @click.prevent.stop="router.push(`/block/${c.celestia_end_height}`)">
 												<Flex align="center" gap="6">
-													<Icon
-														name="block"
-														size="14"
-														color="tertiary"
-													/>
+													<Icon name="block" size="14" color="tertiary" />
 
-													<Text size="13" weight="600" color="primary" tabular>{{ comma(c.celestia_end_height) }}</Text>
+													<Text size="13" weight="600" color="primary" tabular>{{
+														comma(c.celestia_end_height)
+													}}</Text>
 												</Flex>
 											</Outline>
 										</Flex>
@@ -338,9 +336,7 @@ getCommitments()
 										<Text size="12" weight="600" color="primary">
 											{{ shortHex(c.l1_info.tx_hash) }}
 										</Text>
-										<Text size="12" weight="500" color="tertiary">
-											Height {{ comma(c.l1_info.height) }}
-										</Text>
+										<Text size="12" weight="500" color="tertiary"> Height {{ comma(c.l1_info.height) }} </Text>
 									</Flex>
 								</td>
 							</tr>
@@ -361,9 +357,7 @@ getCommitments()
 
 <style module>
 .wrapper {
-	max-width: calc(var(--base-width) + 48px);
-
-	padding: 40px 24px 60px 24px;
+	padding: 20px 24px 60px 24px;
 }
 
 .breadcrumbs {
@@ -441,7 +435,7 @@ getCommitments()
 
 			white-space: nowrap;
 			overflow: hidden;
-      		text-overflow: ellipsis;
+			text-overflow: ellipsis;
 
 			border-right: 2px solid transparent;
 
diff --git a/pages/block/[height].vue b/pages/block/[height].vue
index a4f529a7..098bf4ff 100644
--- a/pages/block/[height].vue
+++ b/pages/block/[height].vue
@@ -86,7 +86,7 @@ useHead({
 const displayName = computed(() => {
 	const { $getDisplayName } = useNuxtApp()
 
-  	return $getDisplayName('block', block.value?.height)
+	return $getDisplayName("block", block.value?.height)
 })
 </script>
 
@@ -112,8 +112,6 @@ const displayName = computed(() => {
 
 <style module>
 .wrapper {
-	max-width: calc(var(--base-width) + 48px);
-
 	padding: 40px 24px 60px 24px;
 }
 
diff --git a/pages/blocks.vue b/pages/blocks.vue
index ede4b696..c9d3357f 100644
--- a/pages/blocks.vue
+++ b/pages/blocks.vue
@@ -312,7 +312,10 @@ const handleLast = async () => {
 								<td>
 									<NuxtLink :to="`/block/${block.height}`">
 										<Flex align="center" gap="4">
-											<AmountInCurrency :amount="{ value: block.stats.fee, decimal: 6 }" :styles="{ amount: { size: '13' } }" />
+											<AmountInCurrency
+												:amount="{ value: block.stats.fee, decimal: 6 }"
+												:styles="{ amount: { size: '13' } }"
+											/>
 										</Flex>
 									</NuxtLink>
 								</td>
@@ -327,9 +330,7 @@ const handleLast = async () => {
 
 <style module>
 .wrapper {
-	max-width: calc(var(--base-width) + 48px);
-
-	padding: 40px 24px 60px 24px;
+	padding: 20px 24px 60px 24px;
 }
 
 .breadcrumbs {
diff --git a/pages/bookmarks.vue b/pages/bookmarks.vue
index 0599b7ee..ed21700f 100644
--- a/pages/bookmarks.vue
+++ b/pages/bookmarks.vue
@@ -221,9 +221,7 @@ const handleClearBookmarks = () => {
 
 <style module>
 .wrapper {
-	max-width: calc(var(--base-width) + 48px);
-
-	padding: 40px 24px 60px 24px;
+	padding: 20px 24px 60px 24px;
 }
 
 .breadcrumbs {
diff --git a/pages/gas.vue b/pages/gas.vue
index d29f1a78..12f41d2f 100644
--- a/pages/gas.vue
+++ b/pages/gas.vue
@@ -185,9 +185,7 @@ useHead({
 
 <style module>
 .wrapper {
-	max-width: calc(var(--base-width) + 48px);
-
-	padding: 40px 24px 60px 24px;
+	padding: 20px 24px 60px 24px;
 }
 
 .breadcrumbs {
diff --git a/pages/index.vue b/pages/index.vue
index 77b92f50..6003a730 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -95,19 +95,17 @@ onBeforeMount(async () => {
 
 <style module>
 .wrapper {
-	max-width: calc(var(--base-width) + 48px);
-
 	padding: 0 24px;
-	margin-bottom: 120px;
+	margin-bottom: 24px;
 }
 
 .widgets {
-	margin-top: 40px;
+	margin-top: 20px;
 }
 
 .main {
 	max-width: 100%;
-	
+
 	margin-top: 40px;
 }
 
diff --git a/pages/namespace/[id].vue b/pages/namespace/[id].vue
index b10e2468..513c0d04 100644
--- a/pages/namespace/[id].vue
+++ b/pages/namespace/[id].vue
@@ -84,9 +84,8 @@ onBeforeRouteLeave(() => {
 const displayName = computed(() => {
 	const { $getDisplayName } = useNuxtApp()
 
-  	return $getDisplayName('namespace', namespace.value.namespace_id)
+	return $getDisplayName("namespace", namespace.value.namespace_id)
 })
-
 </script>
 
 <template>
@@ -110,9 +109,7 @@ const displayName = computed(() => {
 
 <style module>
 .wrapper {
-	max-width: calc(var(--base-width) + 48px);
-
-	padding: 40px 24px 60px 24px;
+	padding: 20px 24px 60px 24px;
 }
 
 @media (max-width: 500px) {
diff --git a/pages/namespaces/index.vue b/pages/namespaces/index.vue
index 471bb313..58391965 100644
--- a/pages/namespaces/index.vue
+++ b/pages/namespaces/index.vue
@@ -244,8 +244,14 @@ const handleLast = async () => {
 													<template v-if="ns.hash">
 														<Flex direction="column" gap="4">
 															<Flex align="center" gap="8">
-																<Text size="12" weight="600" color="primary" mono class="table_column_alias">
-																	{{ $getDisplayName('namespaces', ns.namespace_id) }}
+																<Text
+																	size="12"
+																	weight="600"
+																	color="primary"
+																	mono
+																	class="table_column_alias"
+																>
+																	{{ $getDisplayName("namespaces", ns.namespace_id) }}
 																</Text>
 
 																<CopyButton :text="getNamespaceID(ns.namespace_id)" />
@@ -330,9 +336,7 @@ const handleLast = async () => {
 
 <style module>
 .wrapper {
-	max-width: calc(var(--base-width) + 48px);
-
-	padding: 26px 24px 60px 24px;
+	padding: 20px 24px 60px 24px;
 }
 
 .breadcrumbs {
diff --git a/pages/namespaces/treemap/index.vue b/pages/namespaces/treemap/index.vue
index b433900d..731aa21b 100644
--- a/pages/namespaces/treemap/index.vue
+++ b/pages/namespaces/treemap/index.vue
@@ -147,9 +147,7 @@ const handleSelectFilter = (target) => {
 				]"
 			/>
 
-			<Button link="/namespaces" type="secondary" size="mini">
-				<Icon name="table" size="12" color="secondary" /> Table View
-			</Button>
+			<Button link="/namespaces" type="secondary" size="mini"> <Icon name="table" size="12" color="secondary" /> Table View </Button>
 		</Flex>
 
 		<Flex direction="column" gap="12">
@@ -171,8 +169,9 @@ const handleSelectFilter = (target) => {
 <style module>
 .wrapper {
 	max-width: calc(var(--base-width) + 48px);
+	min-width: calc(var(--base-width) + 48px);
 
-	padding: 26px 24px 60px 24px;
+	padding: 20px 24px 60px 24px;
 }
 
 .breadcrumbs {
diff --git a/pages/rollup/[slug].vue b/pages/rollup/[slug].vue
index 069e1430..80546c14 100644
--- a/pages/rollup/[slug].vue
+++ b/pages/rollup/[slug].vue
@@ -81,7 +81,7 @@ useHead({
 <template>
 	<Flex direction="column" gap="32" wide :class="$style.wrapper">
 		<Flex direction="column" gap="16">
-			<Flex align="end" justify="between" :class="$style.breadcrumbs">
+			<Flex justify="between" :class="$style.breadcrumbs">
 				<Breadcrumbs
 					v-if="rollup"
 					:items="[
@@ -92,10 +92,10 @@ useHead({
 				/>
 
 				<Button link="https://forms.gle/nimJyQJG4Lb4BTcG7" target="_blank" type="secondary" size="mini">
-					<Icon name="rollup-plus" size="12" color="secondary" /> Rollup Registration
+					<Icon name="rollup-plus" size="12" color="secondary" /> Register rollup
 				</Button>
 			</Flex>
-			
+
 			<RollupOverview v-if="rollup" :rollup="rollup" />
 		</Flex>
 
@@ -105,9 +105,7 @@ useHead({
 
 <style module>
 .wrapper {
-	max-width: calc(var(--base-width) + 48px);
-
-	padding: 26px 24px 60px 24px;
+	padding: 20px 24px 60px 24px;
 }
 
 @media (max-width: 500px) {
diff --git a/pages/rollups.vue b/pages/rollups.vue
index d386324f..78d25e11 100644
--- a/pages/rollups.vue
+++ b/pages/rollups.vue
@@ -70,17 +70,21 @@ const isRefetching = ref(false)
 const rollups = ref([])
 const count = ref(0)
 
-const totalSize = computed(() => rollups.value.reduce((acc, rollup) => {
-	return acc + rollup.size
-}, 0))
+const totalSize = computed(() =>
+	rollups.value.reduce((acc, rollup) => {
+		return acc + rollup.size
+	}, 0),
+)
 
-const totalFee = computed(() => rollups.value.reduce((acc, rollup) => {
-	return acc + (+rollup.fee)
-}, 0))
+const totalFee = computed(() =>
+	rollups.value.reduce((acc, rollup) => {
+		return acc + +rollup.fee
+	}, 0),
+)
 
 const utiaPerMB = (rollup) => {
 	let totalRollupMB = rollup.size / (1024 * 1024)
-	
+
 	return rollup.fee / totalRollupMB
 }
 
@@ -153,7 +157,6 @@ const handleNext = () => {
 
 	page.value += 1
 }
-
 </script>
 
 <template>
@@ -201,7 +204,7 @@ const handleNext = () => {
 			</Flex>
 
 			<Flex direction="column" gap="16" wide :class="[$style.table, isRefetching && $style.disabled]">
-				<div v-if="rollups.length"  :class="$style.table_scroller">
+				<div v-if="rollups.length" :class="$style.table_scroller">
 					<table>
 						<thead>
 							<tr>
@@ -287,7 +290,7 @@ const handleNext = () => {
 											<Text size="12" weight="600" color="primary">
 												{{ DateTime.fromISO(r.last_message_time).toRelative({ locale: "en", style: "short" }) }}
 											</Text>
-											
+
 											<Text size="12" weight="500" color="tertiary">
 												{{ DateTime.fromISO(r.last_message_time).setLocale("en").toFormat("LLL d, t") }}
 											</Text>
@@ -301,14 +304,18 @@ const handleNext = () => {
 												<Flex direction="column" gap="4">
 													<Text size="13" weight="600" color="primary">{{ formatBytes(r.size) }}</Text>
 
-													<Text size="12" weight="600" color="tertiary">{{ shareOfTotalString(r.size, totalSize) }}%</Text>
+													<Text size="12" weight="600" color="tertiary"
+														>{{ shareOfTotalString(r.size, totalSize) }}%</Text
+													>
 												</Flex>
 
 												<template #content>
 													<Flex align="end" gap="8">
 														<Text size="12" weight="600" color="tertiary">Share of total size</Text>
 
-														<Text size="12" weight="600" color="primary">{{ shareOfTotalString(r.size, totalSize) }}%</Text>
+														<Text size="12" weight="600" color="primary"
+															>{{ shareOfTotalString(r.size, totalSize) }}%</Text
+														>
 													</Flex>
 												</template>
 											</Tooltip>
@@ -328,13 +335,17 @@ const handleNext = () => {
 											<AmountInCurrency :amount="{ value: r.fee }" />
 
 											<Tooltip position="start" delay="400">
-												<Text size="12" weight="600" color="tertiary">{{ shareOfTotalString(r.fee, totalFee) }}%</Text>
+												<Text size="12" weight="600" color="tertiary"
+													>{{ shareOfTotalString(r.fee, totalFee) }}%</Text
+												>
 
 												<template #content>
 													<Flex align="end" gap="8">
 														<Text size="12" weight="600" color="tertiary">Share of total fee</Text>
 
-														<Text size="12" weight="600" color="primary">{{ shareOfTotalString(r.fee, totalFee) }}%</Text>
+														<Text size="12" weight="600" color="primary"
+															>{{ shareOfTotalString(r.fee, totalFee) }}%</Text
+														>
 													</Flex>
 												</template>
 											</Tooltip>
@@ -366,9 +377,7 @@ const handleNext = () => {
 
 <style module>
 .wrapper {
-	max-width: calc(var(--base-width) + 48px);
-
-	padding: 26px 24px 60px 24px;
+	padding: 20px 24px 60px 24px;
 }
 
 .breadcrumbs {
@@ -516,4 +525,4 @@ const handleNext = () => {
 		padding: 16px;
 	}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/tx/[hash].vue b/pages/tx/[hash].vue
index 698877bf..c984f360 100644
--- a/pages/tx/[hash].vue
+++ b/pages/tx/[hash].vue
@@ -86,7 +86,7 @@ useHead({
 const displayName = computed(() => {
 	const { $getDisplayName } = useNuxtApp()
 
-  	return $getDisplayName('tx', tx.value?.hash)
+	return $getDisplayName("tx", tx.value?.hash)
 })
 </script>
 
@@ -115,9 +115,7 @@ const displayName = computed(() => {
 
 <style module>
 .wrapper {
-	max-width: calc(var(--base-width) + 48px);
-
-	padding: 40px 24px 60px 24px;
+	padding: 20px 24px 60px 24px;
 }
 
 .breadcrumbs {
diff --git a/pages/txs.vue b/pages/txs.vue
index 4c572f6c..8cfebce3 100644
--- a/pages/txs.vue
+++ b/pages/txs.vue
@@ -80,8 +80,8 @@ const filters = reactive({
 		failed: false,
 	},
 	message_type: MsgTypes.reduce((a, b) => ({ ...a, [b]: false }), {}),
-	from: '',
-	to: '',
+	from: "",
+	to: "",
 })
 const savedFiltersBeforeChanges = ref(null)
 
@@ -94,8 +94,8 @@ const handleClearAllFilters = () => {
 		filters.message_type[f] = false
 	})
 
-	filters.from = ''
-	filters.to = ''
+	filters.from = ""
+	filters.to = ""
 
 	router.replace({
 		query: null,
@@ -134,8 +134,8 @@ const updateRouteQuery = () => {
 				Object.keys(filters.message_type)
 					.filter((f) => filters.message_type[f])
 					.join(","),
-			...(filters.from ? { from: filters.from} : {}),
-			...(filters.to ? { to: filters.to} : {}),
+			...(filters.from ? { from: filters.from } : {}),
+			...(filters.to ? { to: filters.to } : {}),
 		},
 	})
 }
@@ -211,14 +211,14 @@ const handleUpdateDateFilter = (event) => {
 
 		updateRouteQuery()
 	} else if (event.clear) {
-		resetFilters('from')
-		resetFilters('to', true)
+		resetFilters("from")
+		resetFilters("to", true)
 	}
 }
 
 const resetFilters = (target, refetch) => {
 	if (target === "from" || target === "to") {
-		filters[target] = ''
+		filters[target] = ""
 	} else {
 		Object.keys(filters[target]).forEach((f) => {
 			filters[target][f] = false
@@ -342,7 +342,7 @@ const handleSort = (by) => {
 	}
 
 	sort.by = by
-	
+
 	if (page.value !== 1) {
 		page.value = 1
 	}
@@ -362,7 +362,7 @@ const handleNext = () => {
 </script>
 
 <template>
-	<Flex direction="column" wide :class="$style.wrapper">
+	<Flex wide direction="column" :class="$style.wrapper">
 		<Breadcrumbs
 			:items="[
 				{ link: '/', name: 'Explore' },
@@ -670,7 +670,7 @@ const handleNext = () => {
 									<NuxtLink :to="`/tx/${tx.hash}`">
 										<Flex align="center">
 											<Text size="12" weight="600" color="primary" mono class="table_column_alias">
-												{{ $getDisplayName('addresses', tx.signers[0]) }}
+												{{ $getDisplayName("addresses", tx.signers[0]) }}
 											</Text>
 										</Flex>
 									</NuxtLink>
@@ -715,7 +715,10 @@ const handleNext = () => {
 								<td v-if="config.columns.fee" style="width: 1px">
 									<NuxtLink :to="`/tx/${tx.hash}`">
 										<Flex align="center">
-											<AmountInCurrency :amount="{ value: tx.fee, decimal: 6 }" :styles="{ amount: { size: '13' } }" />
+											<AmountInCurrency
+												:amount="{ value: tx.fee, decimal: 6 }"
+												:styles="{ amount: { size: '13' } }"
+											/>
 										</Flex>
 									</NuxtLink>
 								</td>
@@ -750,9 +753,7 @@ const handleNext = () => {
 
 <style module>
 .wrapper {
-	max-width: calc(var(--base-width) + 48px);
-
-	padding: 40px 24px 60px 24px;
+	padding: 20px 24px 24px 24px;
 }
 
 .breadcrumbs {
diff --git a/pages/validator/[id].vue b/pages/validator/[id].vue
index 03c0080f..01896844 100644
--- a/pages/validator/[id].vue
+++ b/pages/validator/[id].vue
@@ -3,7 +3,7 @@
 import ValidatorOverview from "@/components/modules/validator/ValidatorOverview.vue"
 
 /** API */
-import { fetchValidatorByID } from "@/services/api/validator";
+import { fetchValidatorByID } from "@/services/api/validator"
 
 /** UI */
 import Button from "@/components/ui/Button.vue"
@@ -98,9 +98,7 @@ useHead({
 
 <style module>
 .wrapper {
-	max-width: calc(var(--base-width) + 48px);
-
-	padding: 40px 24px 60px 24px;
+	padding: 20px 24px 60px 24px;
 }
 
 @media (max-width: 500px) {
diff --git a/pages/validators.vue b/pages/validators.vue
index 1feb7a1f..38f6c253 100644
--- a/pages/validators.vue
+++ b/pages/validators.vue
@@ -26,7 +26,8 @@ useHead({
 	meta: [
 		{
 			name: "description",
-			content: "Validators in the Celestia Blockchain. Validators name, description, rates, blocks, uptime, social links, contacts are shown.",
+			content:
+				"Validators in the Celestia Blockchain. Validators name, description, rates, blocks, uptime, social links, contacts are shown.",
 		},
 		{
 			property: "og:title",
@@ -34,7 +35,8 @@ useHead({
 		},
 		{
 			property: "og:description",
-			content: "Validators in the Celestia Blockchain. Validators name, description, rates, blocks, uptime, social links, contacts are shown.",
+			content:
+				"Validators in the Celestia Blockchain. Validators name, description, rates, blocks, uptime, social links, contacts are shown.",
 		},
 		{
 			property: "og:url",
@@ -50,7 +52,8 @@ useHead({
 		},
 		{
 			name: "twitter:description",
-			content: "Validators in the Celestia Blockchain. Validators name, description, rates, blocks, uptime, social links, contacts are shown.",
+			content:
+				"Validators in the Celestia Blockchain. Validators name, description, rates, blocks, uptime, social links, contacts are shown.",
 		},
 		{
 			name: "twitter:card",
@@ -73,7 +76,7 @@ const totalVotingPower = computed(() => appStore.lastHead?.total_voting_power)
 
 const getValidatorsStats = async () => {
 	isLoading.value = true
-	
+
 	const { data } = await fetchValidatorsCount()
 	validatorsStats.value = data.value
 
@@ -98,7 +101,7 @@ const getInactiveValidators = async () => {
 	const { data } = await fetchValidators({
 		jailed: false,
 		limit: 20,
-		offset: validatorsStats.value.active + ((page.value - 1) * 20),
+		offset: validatorsStats.value.active + (page.value - 1) * 20,
 	})
 	validators.value = data.value
 
@@ -120,18 +123,18 @@ const getJailedValidators = async () => {
 
 const getValidators = async () => {
 	switch (activeTab.value) {
-			case "active":
-				getActiveValidators()
-				break;
-			case "inactive":
-				getInactiveValidators()
-				break;
-			case "jailed":
-				getJailedValidators()
-				break;
-			default:
-				break;
-		}
+		case "active":
+			getActiveValidators()
+			break
+		case "inactive":
+			getInactiveValidators()
+			break
+		case "jailed":
+			getJailedValidators()
+			break
+		default:
+			break
+	}
 }
 
 /** Pagination */
@@ -152,8 +155,10 @@ const handlePrev = () => {
 
 /** Tabs */
 const tabs = ref(["active", "inactive", "jailed"])
-const activeTab = ref(route.query.status && tabs.value.filter(tab => tab === route.query.status).length > 0 ? route.query.status.toLowerCase() : "active")
-const dropdownItems = computed(() => tabs.value.filter(tab => tab !== activeTab.value))
+const activeTab = ref(
+	route.query.status && tabs.value.filter((tab) => tab === route.query.status).length > 0 ? route.query.status.toLowerCase() : "active",
+)
+const dropdownItems = computed(() => tabs.value.filter((tab) => tab !== activeTab.value))
 
 await getValidatorsStats()
 await getValidators()
@@ -172,7 +177,7 @@ watch(
 	() => activeTab.value,
 	async () => {
 		page.value = 1
-		
+
 		getValidators()
 
 		router.replace({ query: { status: activeTab.value, page: page.value } })
@@ -200,7 +205,7 @@ watch(
 
 				<Flex align="center" gap="6">
 					<Dropdown>
-						<template #trigger="{isOpen}">
+						<template #trigger="{ isOpen }">
 							<Button type="secondary" size="mini">
 								{{ capitilize(activeTab) }}
 								<Icon
@@ -244,7 +249,7 @@ watch(
 			</Flex>
 
 			<Flex direction="column" gap="16" wide :class="[$style.table, isLoading && $style.disabled]">
-				<div v-if="validators.length"  :class="$style.table_scroller">
+				<div v-if="validators.length" :class="$style.table_scroller">
 					<table>
 						<thead>
 							<tr>
@@ -278,23 +283,33 @@ watch(
 												<template #content>
 													<Flex v-if="activeTab === 'active'" align="center" justify="between" gap="8">
 														<Text size="12" weight="600" color="tertiary">Staking Share</Text>
-														<Text size="12" weight="600" color="primary">{{ shareOfTotalString(v.voting_power, totalVotingPower) }}%</Text>
+														<Text size="12" weight="600" color="primary"
+															>{{ shareOfTotalString(v.voting_power, totalVotingPower) }}%</Text
+														>
 													</Flex>
 												</template>
 											</Tooltip>
 
-											<Text v-if="activeTab === 'active'" size="12" weight="600" color="tertiary">{{ shareOfTotalString(v.voting_power, totalVotingPower) }}%</Text>
+											<Text v-if="activeTab === 'active'" size="12" weight="600" color="tertiary"
+												>{{ shareOfTotalString(v.voting_power, totalVotingPower) }}%</Text
+											>
 										</Flex>
 									</NuxtLink>
 								</td>
 								<td>
 									<NuxtLink :to="`/validator/${v.id}`">
-										<AmountInCurrency :amount="{ value: v.rewards }" :styles=" {amount: { size: '13' }, currency: { size: '13' } }" />
+										<AmountInCurrency
+											:amount="{ value: v.rewards }"
+											:styles="{ amount: { size: '13' }, currency: { size: '13' } }"
+										/>
 									</NuxtLink>
 								</td>
 								<td>
 									<NuxtLink :to="`/validator/${v.id}`">
-										<AmountInCurrency :amount="{ value: v.commissions }" :styles=" {amount: { size: '13' }, currency: { size: '13' } }" />
+										<AmountInCurrency
+											:amount="{ value: v.commissions }"
+											:styles="{ amount: { size: '13' }, currency: { size: '13' } }"
+										/>
 									</NuxtLink>
 								</td>
 								<td>
@@ -328,7 +343,6 @@ watch(
 						<Text size="12" weight="400" color="tertiary"> Try to select another status </Text>
 					</Flex>
 				</Flex>
-
 			</Flex>
 		</Flex>
 	</Flex>
@@ -336,9 +350,7 @@ watch(
 
 <style module>
 .wrapper {
-	max-width: calc(var(--base-width) + 48px);
-
-	padding: 40px 24px 60px 24px;
+	padding: 20px 24px 60px 24px;
 }
 
 .breadcrumbs {
diff --git a/store/app.js b/store/app.js
index 984c71c4..307b1c02 100644
--- a/store/app.js
+++ b/store/app.js
@@ -29,6 +29,7 @@ export const useAppStore = defineStore("app", () => {
 	const isPaused = ref(false)
 
 	const showCmd = ref(false)
+	const showSidebar = ref(false)
 
 	const theme = ref("")
 
@@ -52,6 +53,7 @@ export const useAppStore = defineStore("app", () => {
 		isPaused,
 		isLatestBlocksLoaded,
 		showCmd,
+		showSidebar,
 		theme,
 		confirmation,
 		createConfirmation,
diff --git a/store/modals.js b/store/modals.js
index 03015b8c..a024c831 100644
--- a/store/modals.js
+++ b/store/modals.js
@@ -25,6 +25,7 @@ export const useModalsStore = defineStore("modals", () => {
 		staking: false,
 		vestingDetails: false,
 		hexSettings: false,
+		api: false,
 	})
 
 	const open = (target) => {