diff --git a/assets/svg/amqp-logo.svg b/assets/svg/amqp-logo.svg
new file mode 100644
index 0000000..5b2cfec
--- /dev/null
+++ b/assets/svg/amqp-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="49.035" height="47.998" viewBox="0 0 49.035 47.998"><defs><style>.a{fill:#d0d2d4;}.b{fill:#0e2d90;}.c{fill:#adb9de;}</style></defs><path d="M89.091,200.387,75.719,187.176H40.056v13.211Z" transform="translate(-40.056 -152.389)"/><path class="a" d="M201.19,90.4V42.416H187.662V77.244Z" transform="translate(-152.155 -42.401)"/><path class="b" d="M57.736,114.687v.1H40.056V128H71.42Z" transform="translate(-40.056 -97.312)"/><path class="c" d="M127.346,73.042h.008V42.354H113.662V59.728Z" transform="translate(-96.074 -42.354)"/><path d="M53.434,56.086,40.056,43.069V56.276H53.434Z" transform="translate(-40.056 -42.897)"/><path class="a" d="M53.434,55.543V42.354H40.056v.172Z" transform="translate(-40.056 -42.354)"/></svg>
\ No newline at end of file
diff --git a/assets/svg/elasticsearch-logo.svg b/assets/svg/elasticsearch-logo.svg
new file mode 100644
index 0000000..6d83951
--- /dev/null
+++ b/assets/svg/elasticsearch-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.034" height="45.939" viewBox="0 0 42.034 45.939"><defs><style>.a{fill:#00a9e5;}.b{fill:#353535;}.c{fill:#00bfb3;}.d{fill:#019b8f;}.e{fill:#f9b110;}.f{fill:#fed10a;}</style></defs><path class="a" d="M132.9,115.5h-12c.057.287.172.574.23.8a21.107,21.107,0,0,1,.747,4.307c.057.574.057,1.206.057,1.78s0,1.206-.057,1.78a21.106,21.106,0,0,1-.747,4.307c-.057.287-.172.574-.23.8h12a6.891,6.891,0,0,0,0-13.782Z" transform="translate(-101.318 -99.421)"/><path class="b" d="M107.358,124.171c.057-.574.057-1.206.057-1.78s0-1.206-.057-1.78a21.106,21.106,0,0,0-.747-4.307c-.057-.287-.172-.574-.23-.8H87.834a23.487,23.487,0,0,0,0,13.782h18.548c.057-.287.172-.574.23-.8A21.107,21.107,0,0,0,107.358,124.171Z" transform="translate(-86.8 -99.421)"/><path class="c" d="M128.072,143.5h-14.93a23.6,23.6,0,0,1-1.55,2.929,22.29,22.29,0,0,1-3.043,3.9c-.4.4-.8.747-1.206,1.148a22.846,22.846,0,0,1-2.642,2.01,22.725,22.725,0,0,0,12.633,3.79,23.018,23.018,0,0,0,19.122-10.221A11.712,11.712,0,0,0,128.072,143.5Z" transform="translate(-94.421 -111.343)"/><path class="d" d="M105.375,146.429a23.6,23.6,0,0,0,1.55-2.929H90.1a22.705,22.705,0,0,0,8.441,9.992,29.127,29.127,0,0,0,2.641-2.01c.4-.345.8-.747,1.206-1.148a22.635,22.635,0,0,0,2.986-3.9Z" transform="translate(-88.205 -111.343)"/><path class="e" d="M102.289,97.258c-.4-.4-.8-.747-1.206-1.148a22.847,22.847,0,0,0-2.641-2.01A23.475,23.475,0,0,0,90,104.092h16.825a23.6,23.6,0,0,0-1.55-2.929A18.059,18.059,0,0,0,102.289,97.258Z" transform="translate(-88.162 -90.31)"/><path class="f" d="M117.333,87.5A22.725,22.725,0,0,0,104.7,91.29a29.13,29.13,0,0,1,2.642,2.01c.4.345.8.747,1.206,1.148a22.29,22.29,0,0,1,3.043,3.9,23.605,23.605,0,0,1,1.55,2.929h14.93a11.712,11.712,0,0,0,8.384-3.56A23.018,23.018,0,0,0,117.333,87.5Z" transform="translate(-94.421 -87.5)"/></svg>
\ No newline at end of file
diff --git a/assets/svg/kafka.svg b/assets/svg/kafka.svg
new file mode 100644
index 0000000..43cfd55
--- /dev/null
+++ b/assets/svg/kafka.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32.752" height="53.177" viewBox="0 0 32.752 53.177"><defs><style>.a{fill:#2a2a2a;}</style></defs><path class="a" d="M25.82,29.454a6.911,6.911,0,0,0-5.2,2.362l-3.258-2.306a8.786,8.786,0,0,0,.018-6.039l3.25-2.282a6.915,6.915,0,1,0-1.456-2.614l-3.253,2.283a8.948,8.948,0,0,0-5.544-3.222v-3.92A6.943,6.943,0,1,0,7.4,13.683v3.971a8.943,8.943,0,0,0,.062,17.63v4.193a6.932,6.932,0,1,0,2.976,0V35.285a8.951,8.951,0,0,0,5.45-3.17l3.279,2.321a6.93,6.93,0,1,0,6.648-4.982Zm0-16.209a3.361,3.361,0,1,1-3.361,3.361,3.365,3.365,0,0,1,3.361-3.361ZM5.593,6.932a3.361,3.361,0,1,1,3.361,3.361A3.365,3.365,0,0,1,5.593,6.932Zm6.722,39.313a3.361,3.361,0,1,1-3.361-3.361A3.365,3.365,0,0,1,12.315,46.245ZM8.954,31.152a4.688,4.688,0,1,1,4.688-4.687A4.693,4.693,0,0,1,8.954,31.152ZM25.82,39.747a3.361,3.361,0,1,1,3.361-3.361A3.365,3.365,0,0,1,25.82,39.747Z"/></svg>
\ No newline at end of file
diff --git a/assets/svg/mqtt.svg b/assets/svg/mqtt.svg
new file mode 100644
index 0000000..6e42e7a
--- /dev/null
+++ b/assets/svg/mqtt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="45.923" height="45.923" viewBox="0 0 45.923 45.923"><defs><style>.a{fill:#fff;}.b{fill:#606;}</style></defs><path class="a" d="M46,25.927v7.016h.136A34.792,34.792,0,0,1,80.969,67.3h6.813A41.859,41.859,0,0,0,46,25.927Zm0,14.485v7.016h.136A20.246,20.246,0,0,1,66.393,67.3h6.813A27.3,27.3,0,0,0,46,40.412Zm45.9,8.737V35a60.59,60.59,0,0,0-6.043-7.2A59.1,59.1,0,0,0,77.936,21.4H62.907A49.439,49.439,0,0,1,91.9,49.149Z" transform="translate(-45.977 -21.4)"/><path class="b" d="M46.036,47.428H45.9V64.992A2.318,2.318,0,0,0,48.209,67.3H66.293A20.231,20.231,0,0,0,46.036,47.428Zm0-14.485H45.9v7.469A27.283,27.283,0,0,1,73.105,67.3h7.741a34.743,34.743,0,0,0-34.81-34.358ZM91.823,65.015V49.149A49.463,49.463,0,0,0,62.852,21.4H48.209A2.318,2.318,0,0,0,45.9,23.709v2.241A41.8,41.8,0,0,1,87.659,67.323h1.856a2.318,2.318,0,0,0,2.309-2.309ZM85.78,27.805A64.821,64.821,0,0,1,91.823,35V23.686A2.279,2.279,0,0,0,89.537,21.4H77.881A57.512,57.512,0,0,1,85.78,27.805Z" transform="translate(-45.9 -21.4)"/></svg>
\ No newline at end of file
diff --git a/assets/svg/mysql-logo.svg b/assets/svg/mysql-logo.svg
new file mode 100644
index 0000000..c87a4e3
--- /dev/null
+++ b/assets/svg/mysql-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="50.771" height="49.812" viewBox="0 0 50.771 49.812"><defs><style>.a,.b{fill:#0e698f;}.b{fill-rule:evenodd;}</style></defs><path class="a" d="M289.628,38.55a15.85,15.85,0,0,0-6.693.945c-.514.217-1.333.222-1.417.867.282.3.326.738.551,1.1a8.687,8.687,0,0,0,1.811,2.126c.711.537,1.443,1.11,2.205,1.575,1.355.826,2.868,1.3,4.174,2.126.769.488,1.533,1.1,2.284,1.653.371.272.62.7,1.1.867v-.079c-.253-.322-.319-.766-.551-1.1l-1.024-1.024a16.8,16.8,0,0,0-3.622-3.465c-1.077-.773-3.488-1.817-3.937-3.071l-.079-.079a17.361,17.361,0,0,0,2.363-.551c1.184-.318,2.242-.236,3.465-.552l1.654-.473V39.1c-.618-.634-1.059-1.474-1.733-2.047a50.482,50.482,0,0,0-5.669-4.253c-1.1-.694-2.458-1.145-3.622-1.733-.392-.2-1.081-.3-1.339-.63a16.691,16.691,0,0,1-1.417-2.678c-.988-1.9-1.959-3.982-2.835-5.985a32.281,32.281,0,0,0-1.732-3.937A34.779,34.779,0,0,0,260.176,4.923a16.041,16.041,0,0,0-4.41-1.417l-2.6-.158a13.841,13.841,0,0,1-1.575-1.181c-1.975-1.248-7.041-3.962-8.5-.394-.924,2.252,1.381,4.45,2.2,5.592a16.886,16.886,0,0,1,1.732,2.6c.272.592.319,1.185.551,1.811a41.587,41.587,0,0,0,1.811,4.646,16.425,16.425,0,0,0,1.26,2.126c.29.4.787.57.866,1.182a9.624,9.624,0,0,0-.787,2.6c-1.231,3.881-.767,8.7,1.024,11.577.549.882,1.843,2.773,3.622,2.047,1.556-.634,1.209-2.6,1.654-4.331.1-.393.039-.682.236-.945v.079l1.417,2.835a19.3,19.3,0,0,0,4.489,4.646c.818.618,1.462,1.686,2.52,2.047V40.2h-.079c-.2-.319-.526-.452-.787-.709a18.044,18.044,0,0,1-1.811-2.047,47.913,47.913,0,0,1-3.859-6.3c-.552-1.06-1.031-2.229-1.5-3.308-.179-.416-.177-1.044-.551-1.26a15.749,15.749,0,0,0-1.654,2.363,20.226,20.226,0,0,0-.945,5.2c-.138.049-.077.015-.158.079-1.1-.265-1.482-1.394-1.89-2.362a14.886,14.886,0,0,1-.316-9.214c.235-.73,1.3-3.028.867-3.7-.2-.673-.881-1.062-1.26-1.575a12.4,12.4,0,0,1-1.26-2.205c-.844-1.91-1.238-4.054-2.126-5.985A17.477,17.477,0,0,0,246.631,6.5a15.612,15.612,0,0,1-1.89-2.678c-.18-.39-.425-1.016-.158-1.417a.625.625,0,0,1,.473-.473c.457-.352,1.729.117,2.2.315a19.2,19.2,0,0,1,3.387,1.732c.514.341,1.033,1,1.654,1.182h.709c1.109.255,2.351.079,3.386.394a20.465,20.465,0,0,1,4.961,2.363,30.711,30.711,0,0,1,10.789,11.813c.408.783.585,1.531.945,2.363.726,1.676,1.64,3.4,2.362,5.04a23.549,23.549,0,0,0,2.441,4.646c.536.715,2.6,1.1,3.543,1.5a20.859,20.859,0,0,1,2.363.945c1.192.719,2.347,1.575,3.465,2.363.559.394,2.277,1.257,2.362,1.969Z" transform="translate(-242.873 0)"/><path class="b" d="M273.184,24.357a5.649,5.649,0,0,0-1.418.157v.079h.079a10.766,10.766,0,0,0,1.1,1.417l.788,1.654.078-.078a1.923,1.923,0,0,0,.709-1.732c-.2-.206-.225-.464-.394-.709C273.9,24.817,273.468,24.632,273.184,24.357Z" transform="translate(-261.629 -15.811)"/></svg>
\ No newline at end of file
diff --git a/assets/svg/nats-logo.svg b/assets/svg/nats-logo.svg
new file mode 100644
index 0000000..d5ec5b5
--- /dev/null
+++ b/assets/svg/nats-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="51.66" height="53.482" viewBox="0 0 51.66 53.482"><defs><style>.a{fill:#34a574;}.b{fill:#27aae1;}.c{fill:#8dc63f;}.d{fill:#375c93;}.e{fill:#fff;}</style></defs><path class="a" d="M142.8,5.3h25.83V26.24H142.8Z" transform="translate(-116.97 -5.3)"/><path class="b" d="M8.1,5.3H33.93V26.24H8.1Z" transform="translate(-8.1 -5.3)"/><path class="c" d="M142.8,114.6h25.83v20.94H142.8Z" transform="translate(-116.97 -93.641)"/><path class="d" d="M8.1,114.6H33.93v20.94H8.1Z" transform="translate(-8.1 -93.641)"/><path class="c" d="M123,223.2l12.637,11.7V223.2Z" transform="translate(-100.967 -181.416)"/><path class="d" d="M126.312,222.8l.134,3.682L122.4,222.7Z" transform="translate(-100.482 -181.012)"/><path class="e" d="M79.465,73.435V56.1H85.64V78.517H76.282L57.394,60.875V78.536H51.2V56.1h9.684Z" transform="translate(-42.935 -46.359)"/></svg>
\ No newline at end of file
diff --git a/assets/svg/nsq-logo.svg b/assets/svg/nsq-logo.svg
new file mode 100644
index 0000000..e5fe58a
--- /dev/null
+++ b/assets/svg/nsq-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="50.821" height="50.82" viewBox="0 0 50.821 50.82"><defs><style>.a{fill:#38bef2;}</style></defs><path class="a" d="M24.482,50.438l-9.431-9.431A3.931,3.931,0,0,1,9.814,35.77L.386,26.342a1.317,1.317,0,0,1,0-1.864l9.427-9.426a3.931,3.931,0,0,1,5.237-5.237L24.479.386a1.317,1.317,0,0,1,1.862,0L35.77,9.814a3.931,3.931,0,0,1,5.237,5.237l9.428,9.428a1.316,1.316,0,0,1,0,1.864L41.007,35.77a3.931,3.931,0,0,1-5.237,5.237l-9.429,9.428a1.32,1.32,0,0,1-1.86,0ZM16.965,35.869a3.871,3.871,0,0,1,.337,1.583,3.922,3.922,0,0,1-.44,1.8L25.411,47.8l8.549-8.549a3.907,3.907,0,0,1-.035-3.535L25.369,27.2Zm19.074,1.583a1.413,1.413,0,1,0,1.413-1.413A1.415,1.415,0,0,0,36.039,37.453Zm-24.084,0a1.413,1.413,0,1,0,1.413-1.413A1.415,1.415,0,0,0,11.955,37.453Zm3.3-3.444,7.077-7.3H17.079a3.981,3.981,0,0,1-1.34,1.836,3.923,3.923,0,0,1-4.742,0,3.982,3.982,0,0,1-1.34-1.836H4.32l7.248,7.248a3.9,3.9,0,0,1,3.691.049Zm23.994-.049L46.5,26.711H41.215a3.97,3.97,0,0,1-1.322,1.946,3.915,3.915,0,0,1-4.88,0,3.969,3.969,0,0,1-1.322-1.946H28.446L35.7,33.932a3.906,3.906,0,0,1,3.55.027Zm-3.214-8.384a1.413,1.413,0,1,0,1.413-1.413A1.415,1.415,0,0,0,36.039,25.575Zm-24.084-.165A1.413,1.413,0,1,0,13.368,24,1.415,1.415,0,0,0,11.955,25.411Zm27.831-3a3.956,3.956,0,0,1,1.346,1.779h5.449l-7.329-7.328a3.905,3.905,0,0,1-3.767-.089L28.292,24.19h5.48a3.929,3.929,0,0,1,6.014-1.779ZM15.773,22.3A3.977,3.977,0,0,1,17.1,24.19h5.235l-7.3-7.263a3.9,3.9,0,0,1-3.472-.066L4.24,24.19H9.633A3.976,3.976,0,0,1,10.964,22.3a3.919,3.919,0,0,1,4.808,0Zm1.089-10.733a3.9,3.9,0,0,1-.006,3.61l8.481,8.438,8.484-8.748a3.876,3.876,0,0,1-.3-1.5,3.919,3.919,0,0,1,.441-1.8L25.411,3.019Zm19.178,1.8a1.413,1.413,0,1,0,1.413-1.413A1.415,1.415,0,0,0,36.039,13.368Zm-24.084,0a1.413,1.413,0,1,0,1.413-1.413A1.415,1.415,0,0,0,11.955,13.368Z"/></svg>
\ No newline at end of file
diff --git a/assets/svg/postgres-logo.svg b/assets/svg/postgres-logo.svg
new file mode 100644
index 0000000..fdca8d8
--- /dev/null
+++ b/assets/svg/postgres-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="54.158" height="55.99" viewBox="0 0 54.158 55.99"><defs><style>.a{fill:#336791;}.b{fill:#fff;}</style></defs><g transform="translate(0)"><path d="M58.44,58.134c.366-3.046.256-3.493,2.525-3l.576.051a13.126,13.126,0,0,0,5.368-.9c2.886-1.339,4.6-3.575,1.752-2.988-6.492,1.339-6.939-.859-6.939-.859,6.855-10.172,9.721-23.084,7.248-26.244-6.747-8.621-18.425-4.544-18.621-4.438l-.062.011a23.142,23.142,0,0,0-4.331-.451A10.7,10.7,0,0,0,39.1,21.365S18.263,12.782,19.233,32.16c.206,4.122,5.909,31.192,12.71,23.016,2.486-2.99,4.888-5.518,4.888-5.518a6.306,6.306,0,0,0,4.119,1.052l.116-.1a4.515,4.515,0,0,0,.046,1.164c-1.752,1.958-1.237,2.3-4.74,3.022-3.544.73-1.462,2.031-.1,2.371a7.2,7.2,0,0,0,8.037-2.61l-.1.411c.687.55.641,3.952.738,6.383a22.973,22.973,0,0,0,.756,6.037c.5,1.337,1.08,4.782,5.684,3.8,3.848-.825,6.789-2.011,7.058-13.051" transform="translate(-16.722 -16.284)"/><path class="a" d="M68.657,51.292c-6.493,1.339-6.939-.859-6.939-.859,6.855-10.172,9.721-23.084,7.248-26.245-6.747-8.62-18.426-4.544-18.621-4.438l-.063.011a23.155,23.155,0,0,0-4.332-.451,10.7,10.7,0,0,0-6.857,2.053S18.259,12.781,19.228,32.158c.206,4.122,5.909,31.192,12.71,23.016,2.486-2.99,4.888-5.518,4.888-5.518a6.305,6.305,0,0,0,4.119,1.052l.116-.1a4.539,4.539,0,0,0,.047,1.164c-1.752,1.958-1.237,2.3-4.74,3.022-3.544.73-1.462,2.031-.1,2.371a7.2,7.2,0,0,0,8.037-2.61l-.1.411c.687.55,1.169,3.577,1.088,6.321s-.135,4.628.406,6.1,1.08,4.782,5.685,3.8c3.848-.825,5.842-2.961,6.119-6.525.2-2.534.642-2.159.67-4.425l.357-1.072c.412-3.435.065-4.543,2.436-4.028l.576.051a13.127,13.127,0,0,0,5.368-.9c2.886-1.339,4.6-3.575,1.752-2.988Z" transform="translate(-16.718 -16.283)"/><path class="b" d="M215.556,300.067c-3.874,0-5.1-3.067-5.6-4.321-.735-1.839-.9-8.715-.728-14.713a.8.8,0,1,1,1.608.045c-.187,6.68.077,12.729.613,14.07.831,2.078,2.092,3.9,5.654,3.132,3.436-.737,4.658-1.974,5.23-5.294.438-2.538,1.3-9.763,1.411-11.189a.8.8,0,0,1,1.6.12c-.112,1.487-.975,8.705-1.43,11.343-.679,3.94-2.435,5.727-6.479,6.594A9,9,0,0,1,215.556,300.067Z" transform="translate(-182.167 -244.077)"/><path class="b" d="M23.564,56.4a3.178,3.178,0,0,1-1.007-.167c-5.984-2-9.788-22.569-9.916-25.142-.276-5.516,1.148-9.421,4.231-11.606,6.092-4.316,16.324-.212,16.756-.036a.8.8,0,0,1-.608,1.489c-.1-.04-9.851-3.947-15.22-.139-2.6,1.846-3.8,5.281-3.551,10.211A72.17,72.17,0,0,0,17,43.655c1.95,6.388,4.161,10.417,6.067,11.052.292.1,1.182.394,2.47-1.154,2.475-2.977,4.748-5.354,4.771-5.378a.8.8,0,0,1,1.162,1.113c-.022.023-2.259,2.361-4.7,5.293A4.207,4.207,0,0,1,23.564,56.4Z" transform="translate(-10.98 -15.257)"/><path class="b" d="M266.067,45.406a.8.8,0,0,1-.666-1.254c6.916-10.263,9.354-22.651,7.282-25.3-6.181-7.9-16.656-4.547-17.6-4.22a.807.807,0,0,1-.122.049.837.837,0,0,1-1-.429.807.807,0,0,1,.318-1.021c.008,0,.079-.032.207-.075l0-.01a.814.814,0,0,1,.113-.026c1.989-.647,12.849-3.58,19.36,4.74,2.957,3.778-.684,17.5-7.214,27.19A.8.8,0,0,1,266.067,45.406Z" transform="translate(-221.112 -10.531)"/><path class="b" d="M154.77,54.077a6.087,6.087,0,0,1-2.911-.554,1.549,1.549,0,0,1-.823-1.254c-.176-3.085,1.476-3.7,2.392-3.96-.117-.167-.27-.359-.428-.556a11.146,11.146,0,0,1-1.767-2.848c-.083-.2-.349-.678-.656-1.228-1.675-3-5.159-9.253-2.907-12.472,1.035-1.479,3.075-2.072,6.074-1.768-.962-2.781-5.254-11.079-15.11-11.24a9.667,9.667,0,0,0-7.333,2.747c-4.16,4.2-4.009,11.809-4.007,11.886a.8.8,0,1,1-1.608.042c-.009-.34-.166-8.376,4.472-13.06a11.216,11.216,0,0,1,8.5-3.224c12.348.2,16.752,11.937,16.9,13.511a.9.9,0,0,1-.673,1.066l-.29.007c-2.026-.324-4.644-.422-5.608.956-1.675,2.394,1.6,8.261,2.994,10.766.359.644.618,1.109.738,1.4a9.614,9.614,0,0,0,1.536,2.457,4.263,4.263,0,0,1,.934,1.547c.07.114.964,1.33,6,.29,1.324-.273,2.121-.032,2.368.716.478,1.446-2.158,3.112-3.619,3.79A13.561,13.561,0,0,1,154.77,54.077Zm-.442-4.363c-.134.051-.254.085-.335.108-.752.211-1.462.41-1.351,2.356.471.5,4.451.461,6.622-.546a8.893,8.893,0,0,0,2.29-1.479l-.036.007c-3.3.682-5.646.589-6.959-.278A2.791,2.791,0,0,1,154.329,49.714Z" transform="translate(-109.461 -14.444)"/><path class="b" d="M139.278,262.531h0a2.831,2.831,0,0,1,1.112.265,3.262,3.262,0,0,1,1.769,2.122,2.731,2.731,0,0,1-.34,2.386,7.486,7.486,0,0,1-6.318,3.257,10.623,10.623,0,0,1-2.569-.333c-.255-.064-2.5-.665-2.466-2.1.027-1.311,1.9-1.7,2.6-1.841,2.475-.51,2.635-.713,3.4-1.689.236-.3.515-.653.9-1.082A2.562,2.562,0,0,1,139.278,262.531Zm-3.776,6.421a5.861,5.861,0,0,0,5.008-2.583,1.2,1.2,0,0,0,.1-1.008,1.7,1.7,0,0,0-.838-1.078,1.409,1.409,0,0,0-.5-.142,1.083,1.083,0,0,0-.707.451c-.357.4-.616.728-.834,1.005-.982,1.247-1.432,1.67-4.344,2.269a5.24,5.24,0,0,0-1.143.341,3.563,3.563,0,0,0,1.073.462A9.018,9.018,0,0,0,135.5,268.952Z" transform="translate(-113.626 -228.644)"/><path class="b" d="M132.244,138.616a.8.8,0,0,1-.794-.683q-.025-.16-.035-.322a7.337,7.337,0,0,1-5.1-2.314,8.375,8.375,0,0,1-2.207-7.01,32.793,32.793,0,0,0,.167-6.623c-.022-.374-.038-.657-.037-.828.009-1.295,3.8-2.951,6-3.179,2.728-.282,4.527.934,5.066,3.426,1.439,6.653.113,9.6-.855,11.748-.177.393-.345.765-.483,1.137l-.12.322a7.966,7.966,0,0,0-.812,3.4.805.805,0,0,1-.8.927Zm-6.389-17.546c.006.135.016.3.028.5a34.259,34.259,0,0,1-.179,6.941,6.775,6.775,0,0,0,1.776,5.674A5.726,5.726,0,0,0,131.588,136a20.977,20.977,0,0,1,.757-2.276l.119-.32c.151-.405.332-.81.525-1.238.925-2.055,2.076-4.612.749-10.748a2.44,2.44,0,0,0-1.885-2.106C129.636,118.809,126.526,120.476,125.855,121.07Z" transform="translate(-108.016 -102.435)"/><path class="b" d="M172.5,139.438c-.037.263.482.965,1.159,1.059a1.248,1.248,0,0,0,1.291-.718c.037-.263-.482-.553-1.159-.647s-1.255.043-1.29.306Z" transform="translate(-150.237 -121.147)"/><path class="b" d="M171.569,137.025a3.3,3.3,0,0,1,.454.032,2.766,2.766,0,0,1,.941.292,1.1,1.1,0,0,1,.318.252.515.515,0,0,1,.129.406,1.077,1.077,0,0,1-.458.633,1.6,1.6,0,0,1-.943.326,1.4,1.4,0,0,1-.192-.013,1.6,1.6,0,0,1-.676-.269,2,2,0,0,1-.472-.447.985.985,0,0,1-.239-.646l.033-.231h.068a.571.571,0,0,1,.066-.07.845.845,0,0,1,.271-.158A2.044,2.044,0,0,1,171.569,137.025Zm1.3.923a.684.684,0,0,0-.247-.17,2.4,2.4,0,0,0-.677-.19,2.758,2.758,0,0,0-.38-.027,1.71,1.71,0,0,0-.447.052.51.51,0,0,0-.156.066,1.019,1.019,0,0,0,.261.384,1.229,1.229,0,0,0,.663.358.859.859,0,0,0,.119.008,1.07,1.07,0,0,0,.608-.209A.822.822,0,0,0,172.872,137.948Z" transform="translate(-148.428 -119.338)"/><path class="b" d="M315.4,135.281c.037.263-.482.965-1.159,1.059a1.249,1.249,0,0,1-1.291-.718c-.036-.263.483-.553,1.159-.647s1.254.043,1.291.306Z" transform="translate(-272.552 -117.527)"/><path class="b" d="M313.619,133.907a1.913,1.913,0,0,1,.655.1c.265.1.338.246.353.352h0a1.054,1.054,0,0,1-.347.7,1.639,1.639,0,0,1-.926.507,1.264,1.264,0,0,1-.174.012,1.464,1.464,0,0,1-.863-.3.963.963,0,0,1-.406-.544h0c-.025-.186.11-.371.38-.522a2.63,2.63,0,0,1,.893-.276A3.167,3.167,0,0,1,313.619,133.907Zm.742.488c-.006-.046-.076-.1-.181-.138a1.674,1.674,0,0,0-.56-.082,2.9,2.9,0,0,0-.4.028c-.706.1-1.06.379-1.045.5a.75.75,0,0,0,.3.366,1.208,1.208,0,0,0,.7.247,1,1,0,0,0,.137-.009,1.372,1.372,0,0,0,.768-.426.851.851,0,0,0,.276-.482Z" transform="translate(-271.648 -116.623)"/><path class="b" d="M334.068,134.988a.8.8,0,0,1-.668-1.252c1.572-2.347,1.283-4.749,1-7.072a20.213,20.213,0,0,1-.211-3.018,21.018,21.018,0,0,1,.287-2.669,13.532,13.532,0,0,0,.229-2.93.8.8,0,0,1,1.607-.087,15.019,15.019,0,0,1-.245,3.261,19.713,19.713,0,0,0-.269,2.476,18.747,18.747,0,0,0,.2,2.774c.3,2.492.639,5.316-1.265,8.159A.8.8,0,0,1,334.068,134.988Z" transform="translate(-290.247 -102.072)"/><path class="b" transform="translate(0 0)"/></g></svg>
\ No newline at end of file
diff --git a/assets/svg/redis-logo.svg b/assets/svg/redis-logo.svg
new file mode 100644
index 0000000..d2eb230
--- /dev/null
+++ b/assets/svg/redis-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="49.23" height="42.194" viewBox="0 0 49.23 42.194"><defs><style>.a{fill:#a41e11;}.b{fill:#d82c20;}.c{fill:#fff;}.d{fill:#7a0c00;}.e{fill:#ad2115;}</style></defs><path class="a" d="M218.623,310.094c-2.627,1.369-16.236,6.965-19.134,8.475s-4.507,1.5-6.8.4-16.771-6.944-19.38-8.191c-1.3-.623-1.99-1.149-1.99-1.646v-4.976s18.854-4.1,21.9-5.2,4.1-1.132,6.69-.183,18.079,3.744,20.639,4.681c0,0,0,4.444,0,4.905,0,.492-.59,1.032-1.928,1.728Z" transform="translate(-171.323 -277.559)"/><path class="b" d="M218.622,295.26c-2.627,1.369-16.236,6.965-19.134,8.475s-4.507,1.5-6.8.4-16.771-6.945-19.38-8.191-2.664-2.105-.1-3.109,16.966-6.655,20.01-7.747,4.1-1.132,6.69-.182,16.119,6.334,18.679,7.271,2.659,1.711.032,3.081Z" transform="translate(-171.322 -267.702)"/><path class="a" d="M218.623,282.054c-2.627,1.369-16.236,6.965-19.134,8.476s-4.507,1.5-6.8.4-16.771-6.944-19.38-8.191c-1.3-.623-1.99-1.149-1.99-1.645v-4.977s18.854-4.1,21.9-5.2,4.1-1.132,6.69-.183,18.079,3.743,20.639,4.681c0,0,0,4.444,0,4.906C220.551,280.818,219.96,281.358,218.623,282.054Z" transform="translate(-171.323 -257.634)"/><path class="b" d="M218.622,267.22c-2.627,1.369-16.236,6.965-19.134,8.476s-4.507,1.5-6.8.4-16.771-6.944-19.38-8.191-2.664-2.105-.1-3.109,16.966-6.654,20.01-7.746,4.1-1.132,6.69-.183,16.119,6.333,18.679,7.271,2.659,1.711.032,3.081Z" transform="translate(-171.322 -247.777)"/><path class="a" d="M218.623,252.976c-2.627,1.369-16.236,6.965-19.134,8.476s-4.507,1.5-6.8.4-16.771-6.944-19.38-8.191c-1.3-.623-1.99-1.149-1.99-1.645V247.04s18.854-4.1,21.9-5.2,4.1-1.132,6.69-.183,18.079,3.743,20.639,4.681c0,0,0,4.444,0,4.906,0,.491-.59,1.031-1.928,1.728Z" transform="translate(-171.323 -236.97)"/><path class="b" d="M218.622,238.141c-2.627,1.369-16.236,6.965-19.134,8.476s-4.507,1.5-6.8.4-16.771-6.944-19.38-8.191-2.664-2.105-.1-3.109,16.966-6.654,20.01-7.746,4.1-1.132,6.69-.182,16.119,6.333,18.679,7.271,2.659,1.711.032,3.08Z" transform="translate(-171.322 -227.113)"/><path class="c" d="M249.968,239.756l-4.266.443-.955,2.3-1.542-2.564-4.925-.443,3.675-1.325-1.1-2.034,3.441,1.346,3.244-1.062-.877,2.1Z" transform="translate(-218.903 -233.521)"/><path class="c" d="M240.2,274.773l-7.961-3.3,11.408-1.751Z" transform="translate(-214.611 -257.39)"/><ellipse class="c" cx="6.097" cy="2.363" rx="6.097" ry="2.363" transform="translate(8.456 7.513)"/><path class="d" d="M296.09,250.83l6.751,2.668-6.746,2.665Z" transform="translate(-259.984 -243.967)"/><path class="e" d="M270.28,253.785l7.469-2.955.006,5.333-.732.286Z" transform="translate(-241.643 -243.967)"/></svg>
\ No newline at end of file
diff --git a/assets/svg/webhooks.svg b/assets/svg/webhooks.svg
new file mode 100644
index 0000000..16c536b
--- /dev/null
+++ b/assets/svg/webhooks.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="46.215" height="43.025" viewBox="0 0 46.215 43.025"><defs><style>.a{fill:#c83b51;}.b{fill:#696969;}</style></defs><path class="a" d="M51.317,19.006c-1.922,3.232-3.764,6.361-5.644,9.467a2.475,2.475,0,0,0-.336,2.461A4.6,4.6,0,0,1,42.076,37.2a4.7,4.7,0,0,1-5.786-3.9A4.8,4.8,0,0,1,40.562,27.9c.233-.033.471-.037.863-.066l4.232-7.1C43,18.094,41.411,15,41.762,11.166a10.884,10.884,0,0,1,3.261-6.972,11.072,11.072,0,0,1,13.815-1.45,10.755,10.755,0,0,1,4.5,12.508L59.475,14.2a7.332,7.332,0,0,0-1.56-6.7,6.691,6.691,0,0,0-4.189-2.191,6.814,6.814,0,0,0-7.443,4.823c-1.083,3.647.556,6.627,5.034,8.872Z" transform="translate(-29.658 -0.973)"/><path class="b" d="M110.984,45.394l4.092,7.218a11.141,11.141,0,0,1,10.238,19.58,10.958,10.958,0,0,1-14.294-1.423l3.154-2.639c3.97,2.571,7.443,2.45,10.021-.595a6.909,6.909,0,0,0-.111-9.014c-2.611-2.935-6.107-3.024-10.334-.207-1.753-3.111-3.537-6.2-5.235-9.329a3.184,3.184,0,0,0-2.495-1.892,4.439,4.439,0,0,1-3.63-4.3,4.685,4.685,0,0,1,8.337-3.174,4.409,4.409,0,0,1,.814,4.364c-.15.447-.345.879-.556,1.409Z" transform="translate(-83.835 -31.182)"/><path class="b" d="M30.387,129.273H22.094a11.364,11.364,0,0,1-5.47,7.587,11.06,11.06,0,0,1-7.417,1.321A11.269,11.269,0,0,1,.029,128.1a11.154,11.154,0,0,1,8.548-11.649c.353,1.281.709,2.575,1.062,3.853-4.688,2.392-6.311,5.406-5,9.175a6.83,6.83,0,0,0,8,4.431c3.638-.718,5.473-3.742,5.249-8.594,3.449,0,6.9-.036,10.35.018a3.779,3.779,0,0,0,3.4-1.306,4.471,4.471,0,0,1,6.545.068,4.7,4.7,0,1,1-6.795,6.5A16.224,16.224,0,0,1,30.387,129.273Z" transform="translate(-0.001 -95.529)"/></svg>
\ No newline at end of file
diff --git a/components/events-target/new.vue b/components/events-target/new.vue
new file mode 100644
index 0000000..99dec8b
--- /dev/null
+++ b/components/events-target/new.vue
@@ -0,0 +1,151 @@
+<template>
+  <n-modal
+    v-model:show="visible"
+    :mask-closable="false"
+    preset="card"
+    :title="t('Add Event Destination')"
+    class="max-w-screen-md"
+    :segmented="{
+      content: true,
+      action: true,
+    }">
+    <n-card v-show="!formData.type">
+      <n-grid x-gap="12" y-gap="12" :cols="2">
+        <n-gi v-for="item in typeOptions">
+          <n-card class="cursor-pointer" @click="formData.type = item.value">
+            <div class="flex flex-center leading-8">
+              <img :src="item.iconUrl" class="w-8 h-8" />
+              <span class="ms-2">{{ item.label }}</span>
+            </div>
+          </n-card>
+        </n-gi>
+      </n-grid>
+    </n-card>
+    <n-card v-show="formData.type">
+      <n-card class="mb-4">{{ formData.type }}</n-card>
+      <n-form ref="formRef" :model="formData" :rules="rules">
+        <!-- 规则类型 -->
+        <!-- <n-form-item label="分层类型" path="type">
+          <n-select
+            v-model:value="formData.type"
+            :options="typeOptions"
+            placeholder="选择规则类型"
+          />
+        </n-form-item> -->
+
+        <n-form-item :label="t('Name')">
+          <n-input v-model:value="formData.name" :placeholder="t('Please enter name')" />
+        </n-form-item>
+        <n-form-item :label="t('Endpoint')">
+          <n-input v-model:value="formData.endpoint" :placeholder="t('Please enter endpoint')" />
+        </n-form-item>
+        <n-form-item :label="t('Access Key')">
+          <n-input v-model:value="formData.accesskey" :placeholder="t('Please enter Access Key')" />
+        </n-form-item>
+        <n-form-item :label="t('Secret Key')">
+          <n-input v-model:value="formData.secretkey" :placeholder="t('Please enter Secret Key')" />
+        </n-form-item>
+        <n-form-item :label="t('Bucket')">
+          <n-input v-model:value="formData.bucket" :placeholder="t('Please enter bucket')" />
+        </n-form-item>
+        <n-form-item :label="t('Prefix')">
+          <n-input v-model:value="formData.prefix" :placeholder="t('Please enter prefix')" />
+        </n-form-item>
+        <n-form-item :label="t('Region')">
+          <n-input v-model:value="formData.region" :placeholder="t('Please enter region')" />
+        </n-form-item>
+        <n-form-item :label="t('StorageClass')">
+          <n-input v-model:value="formData.storageclass" :placeholder="t('Please Enter storage class')" />
+        </n-form-item>
+        <n-space justify="center">
+          <n-button @click="handleCancel">{{ t("Cancel") }}</n-button>
+          <n-button type="primary" @click="handleSave">{{ t("Save") }}</n-button>
+        </n-space>
+      </n-form>
+    </n-card>
+  </n-modal>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import MqttIcon from "~/assets/svg/mqtt.svg";
+import WebhooksIcon from "~/assets/svg/webhooks.svg";
+import KafkaIcon from "~/assets/svg/kafka.svg";
+import { NForm, NFormItem, NInput, NSelect, NButton } from "naive-ui";
+import { useTiers } from "#imports";
+
+const { t } = useI18n();
+const usetier = useTiers();
+const message = useMessage();
+
+// 支持的存储类型
+const typeOptions = [
+  { label: t("MQTT"), value: "mqtt", iconUrl: MqttIcon },
+  { label: t("Webhook"), value: "webhook", iconUrl: WebhooksIcon },
+  { label: t("Kafka"), value: "kafka", iconUrl: KafkaIcon },
+];
+
+const formRef = ref(null);
+const formData = ref({
+  type: "",
+  name: "",
+  endpoint: "",
+  accesskey: "",
+  secretkey: "",
+  bucket: "",
+  prefix: "",
+  region: "",
+  storageclass: "STANDARD", // 新增字段，默认值为 STANDARD
+});
+
+const rules = {
+  ruleName: { required: true, message: t("Please enter rule name") },
+  type: { required: true, message: t("Please select rule type") },
+  versionType: { required: true, message: t("Please select version type") },
+};
+
+const visible = ref(false);
+
+const open = () => {
+  visible.value = true;
+};
+
+defineExpose({
+  open,
+});
+
+const emmit = defineEmits(["search"]);
+const handleSave = () => {
+  formRef.value?.validate((errors) => {
+    if (!errors) {
+      // {"type":"minio","minio":{"name":"COLDTIER","endpoint":"","bucket":"","prefix":"","region":"","accesskey":"","secretkey":""}}
+      // 调用保存接口
+      const data = {
+        type: formData.value.type,
+        [formData.value.type]: {
+          name: formData.value.name,
+          endpoint: formData.value.endpoint,
+          bucket: formData.value.bucket,
+          prefix: formData.value.prefix,
+          region: formData.value.region,
+          accesskey: formData.value.accesskey,
+          secretkey: formData.value.secretkey,
+          storageclass: formData.value.storageclass, // 新增字段
+        },
+      };
+      // usetier.addTiers(data).then((res) => {
+      //   visible.value = false;
+      //   emmit("search");
+      //   message.success(t("Create Success"));
+      // });
+    }
+  });
+};
+
+const handleCancel = () => {
+  visible.value = false;
+  // 取消逻辑
+  formData.value.type = "";
+};
+</script>
diff --git a/components/sidebar.vue b/components/sidebar.vue
index c502d7a..4ad70bb 100644
--- a/components/sidebar.vue
+++ b/components/sidebar.vue
@@ -1,90 +1,104 @@
 <script lang="ts" setup>
-import { useI18n } from 'vue-i18n'
-import { RouterLink } from 'vue-router'
-import { useSidebarStore } from '~/store/sidebar'
-import type { SiteConfig } from '~/types/config'
+import { useI18n } from "vue-i18n";
+import { RouterLink } from "vue-router";
+import { useSidebarStore } from "~/store/sidebar";
+import type { SiteConfig } from "~/types/config";
 
-const { t } = useI18n()
-const appConfig = useAppConfig()
-const siteConfig = useNuxtApp().$siteConfig as unknown as SiteConfig
-const route = useRoute()
-const sidebarStore = useSidebarStore()
-const isCollapsed = computed(() => sidebarStore.isCollapsed)
+const { t } = useI18n();
+const appConfig = useAppConfig();
+const siteConfig = useNuxtApp().$siteConfig as unknown as SiteConfig;
+const route = useRoute();
+const sidebarStore = useSidebarStore();
+const isCollapsed = computed(() => sidebarStore.isCollapsed);
 
 const toggleSidebar = () => {
-  sidebarStore.toggleSidebar()
-}
+  sidebarStore.toggleSidebar();
+};
 
 const options = computed(() => {
   return appConfig.navs.map(
     (nav: {
-      label: string
-      to?: string
-      icon?: string
-      target?: string
+      label: string;
+      to?: string;
+      type?: string;
+      icon?: string;
+      target?: string;
       children?: {
-        label: string
-        to: string
-        icon?: string
-      }[]
+        label: string;
+        to: string;
+        icon?: string;
+      }[];
     }) => {
       let item: {
-        key: string
-        label: () => string | VNode
-        icon?: () => VNode
-        children?: any[]
+        key: string;
+        type?: string;
+        label: () => string | VNode;
+        icon?: () => VNode;
+        children?: any[];
       } = {
         key: nav.label,
         label: () =>
           nav.to
             ? nav.target
               ? h(
-                'a',
-                {
-                  href: nav.to,
-                  target: '_blank'
-                },
-                { default: () => t(nav.label) }
-              )
+                  "a",
+                  {
+                    href: nav.to,
+                    target: "_blank",
+                  },
+                  { default: () => t(nav.label) }
+                )
               : h(RouterLink, { to: nav.to }, { default: () => t(nav.label) })
             : t(nav.label),
-        icon: nav.icon ? iconRender(nav.icon) : undefined
-      }
+        icon: nav.icon ? iconRender(nav.icon) : undefined,
+        type: nav.type,
+      };
 
-      if (nav['children']) {
-        item.children = nav['children'].map((child) => {
+      if (nav["children"]) {
+        item.children = nav["children"].map((child) => {
           return {
             key: child.label,
-            type: 'item',
-            label: () =>
-              h(RouterLink, { to: child.to }, { default: () => t(child.label) }),
-            icon: child.icon ? iconRender(child.icon) : undefined
-          }
-        })
+            type: "item",
+            label: () => h(RouterLink, { to: child.to }, { default: () => t(child.label) }),
+            icon: child.icon ? iconRender(child.icon) : undefined,
+          };
+        });
       }
 
-      return item
+      return item;
     }
-  )
-})
+  );
+});
 </script>
 <template>
-  <n-layout-sider bordered class="min-h-full" collapse-mode="width" :collapsed-width="64" :width="240" :native-scrollbar="false" :collapsed="isCollapsed"
+  <n-layout-sider
+    bordered
+    class="min-h-full"
+    collapse-mode="width"
+    :collapsed-width="64"
+    :width="240"
+    :native-scrollbar="false"
+    :collapsed="isCollapsed"
     v-if="route.path.startsWith('/auth') === false">
     <div class="flex flex-col h-screen overflow-hidden gap-2 relative">
-      <div class="border-b dark:border-neutral-800 flex flex-wrap h-16 items-center p-4" :class="isCollapsed ? 'justify-center' : 'justify-between'">
+      <div
+        class="border-b dark:border-neutral-800 flex flex-wrap h-16 items-center p-4"
+        :class="isCollapsed ? 'justify-center' : 'justify-between'">
         <div>
           <n-avatar v-if="isCollapsed" class="text-center text-2xl leading-none">
             {{ appConfig.name.substring(0, 1) }}
           </n-avatar>
           <h2 v-else class="text-center text-2xl flex">
             <img src="~/assets/logo.svg" class="max-w-28" alt="" />
-            <span v-if="siteConfig.license.name && siteConfig.license.expired != 0"
+            <span
+              v-if="siteConfig.license.name && siteConfig.license.expired != 0"
               class="flex items-center justify-center text-[9px] leading-[9px] ml-1 p-1 bg-orange-600 text-white rounded rounded-bl-none">
-              {{ t('PRO') }}
+              {{ t("PRO") }}
             </span>
-            <span v-else class="flex items-center justify-center text-[9px] leading-[9px] ml-1 p-1 bg-green-600 text-white rounded rounded-bl-none">
-              {{ t('OSS') }}
+            <span
+              v-else
+              class="flex items-center justify-center text-[9px] leading-[9px] ml-1 p-1 bg-green-600 text-white rounded rounded-bl-none">
+              {{ t("OSS") }}
             </span>
 
             <span class="sr-only">{{ appConfig.name }}</span>
@@ -96,7 +110,14 @@ const options = computed(() => {
       </div>
 
       <div class="overflow-y-auto flex-1">
-        <n-menu :indent="26" :root-indent="12" :collapsed-width="64" :collapsed-icon-size="22" :options="options" default-expand-all class="flex-1" />
+        <n-menu
+          :indent="26"
+          :root-indent="12"
+          :collapsed-width="64"
+          :collapsed-icon-size="22"
+          :options="options"
+          default-expand-all
+          class="flex-1" />
       </div>
 
       <div v-if="isCollapsed" class="w-full flex items-center justify-center py-4">
@@ -106,15 +127,15 @@ const options = computed(() => {
       <div v-if="!isCollapsed" class="flex flex-col p-4 text-gray-500">
         <div class="flex items-center gap-2">
           <Icon name="ri-server-line" />
-          <span>{{ t('Version') }}: {{ siteConfig.release.version }}</span>
+          <span>{{ t("Version") }}: {{ siteConfig.release.version }}</span>
         </div>
         <div class="flex items-center gap-2">
           <Icon name="ri-calendar-line" />
-          <span>{{ t('Build Date') }}：{{ siteConfig.release.date }}</span>
+          <span>{{ t("Build Date") }}：{{ siteConfig.release.date }}</span>
         </div>
         <div class="flex items-center gap-2">
           <Icon name="ri-verified-badge-line" />
-          <span>{{ t('License') }}：{{ siteConfig.license.name }}</span>
+          <span>{{ t("License") }}：{{ siteConfig.license.name }}</span>
         </div>
       </div>
 
@@ -128,7 +149,7 @@ const options = computed(() => {
                   <Icon :name="isCollapsed ? 'ri:translate-2' : 'ri:translate'" class="text-xl" />
                 </div>
               </template>
-              {{ t('Language') }}
+              {{ t("Language") }}
             </n-tooltip>
           </div>
           <language-switcher v-else />
@@ -143,7 +164,7 @@ const options = computed(() => {
                   <Icon name="ri:contrast-2-line" class="text-xl" />
                 </div>
               </template>
-              {{ t('Theme') }}
+              {{ t("Theme") }}
             </n-tooltip>
           </div>
           <theme-switcher v-else />
diff --git a/config/navs.ts b/config/navs.ts
index 4090187..02a5677 100644
--- a/config/navs.ts
+++ b/config/navs.ts
@@ -1,70 +1,88 @@
 // icons: https://icones.js.org/collection/ri
 export default [
   {
-    label: 'Browser',
-    to: '/browser',
-    icon: 'ri:box-3-line'
+    label: "Browser",
+    to: "/browser",
+    icon: "ri:box-3-line",
   },
   {
-    label: 'Access Keys',
-    to: '/access-keys',
-    icon: 'ri:door-lock-line'
+    label: "Access Keys",
+    to: "/access-keys",
+    icon: "ri:door-lock-line",
   },
   {
-    label: 'Policies',
-    to: '/policies',
-    icon: 'ri:shield-check-fill'
+    label: "Policies",
+    to: "/policies",
+    icon: "ri:shield-check-line",
   },
   {
-    label: 'Users',
-    to: '/users',
-    icon: 'ri:file-user-line'
+    label: "Users",
+    to: "/users",
+    icon: "ri:file-user-line",
   },
   {
-    label: 'Bucket Events',
-    to: '/events',
-    icon: 'ri:broadcast-line',
-  },
-  {
-    label: 'Bucket Replication',
-    to: '/replication',
-    icon: 'ri:file-copy-line',
-  },
-  {
-    label: 'Tiered Storage',
-    to: '/tiers',
-    icon: 'ri:stack-line',
-  },
-  {
-    label: 'Lifecycle',
-    to: '/lifecycle',
-    icon: 'ri:exchange-2-line',
+    label: "Performance",
+    to: "/performance",
+    icon: "ri:bar-chart-box-line",
   },
   // {
   //   label: 'Site Replication',
   //   to: '/site-replication',
   //   icon: 'ri:upload-cloud-2-line',
   // },
-  // {
-  //   label: '配置',
-  //   to: '/configuration',
-  //   icon: 'ri:settings-2-line',
-  // },
   {
-    label: 'Performance',
-    to: '/performance',
-    icon: 'ri:bar-chart-box-line'
+    label: "Bucket Setting",
+    icon: "ri:settings-2-line",
+    children: [
+      {
+        label: "Bucket Events",
+        to: "/events",
+        icon: "ri:broadcast-line",
+      },
+      {
+        label: "Bucket Replication",
+        to: "/replication",
+        icon: "ri:file-copy-line",
+      },
+
+      {
+        label: "Lifecycle",
+        to: "/lifecycle",
+        icon: "ri:exchange-2-line",
+      },
+    ],
+  },
+
+  {
+    label: "divider",
+    key: "divider-1",
+    type: "divider",
   },
   {
-    label: 'License',
+    label: "Tiered Storage",
+    to: "/tiers",
+    icon: "ri:stack-line",
+  },
+  {
+    label: "Event Destinations",
+    to: "/events-target",
+    icon: "ri:bookmark-3-line",
+  },
+  {
+    label: "divider",
+    key: "divider-2",
+    type: "divider",
+  },
+  {
+    label: "License",
     // to: 'https://github.com/rustfs/rustfs?tab=Apache-2.0-1-ov-file#readme',
-    to: '/licenseinfo',
-    icon: 'ri:copyright-line'
+    to: "/licenseinfo",
+    icon: "ri:copyright-line",
   },
   {
-    label: 'Documentation',
-    to: 'https://rustfs.com/docs/',
-    target: '_blank',
-    icon: 'ri:file-list-3-line'
-  }
-]
+    label: "Documentation",
+    to: "https://rustfs.com/docs/",
+    target: "_blank",
+    icon: "ri:file-list-3-line",
+  },
+];
diff --git a/i18n/locales/en-US.json b/i18n/locales/en-US.json
index 09e4620..654be1e 100644
--- a/i18n/locales/en-US.json
+++ b/i18n/locales/en-US.json
@@ -334,5 +334,8 @@
   "Retention Update Failed": "Retention Update Failed",
   "Retention RetainUntilDate Placeholder": "Retention RetainUntilDate Placeholder",
   "Retention RetainUntilDate Clear": "Retention RetainUntilDate Clear",
-  "None": "None"
+  "None": "None",
+  "Event Destinations": "Event Destinations",
+  "Bucket Setting": "Bucket Setting",
+  "Add Event Destination": "Add Event Destination"
 }
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 4303be9..4434d79 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -14,7 +14,7 @@
   "Bucket Events": "存储桶事件",
   "Bucket Replication": "存储桶复制",
   "Tiered Storage": "分层存储",
-  "Lifecycle": "桶生命周期",
+  "Lifecycle": "存储桶生命周期",
   "Site Replication": "站点复制",
   "Performance": "性能",
   "Documentation": "文档",
@@ -526,5 +526,8 @@
   "Retention Update Failed": "保留更新失败",
   "Retention RetainUntilDate Placeholder": "请输入保留至日期",
   "Retention RetainUntilDate Clear": "清除保留至日期",
-  "None": "未设置"
+  "None": "未设置",
+  "Event Destinations": "事件目标",
+  "Bucket Setting": "存储桶设置",
+  "Add Event Destination": "添加事件目标"
 }
diff --git a/pages/events-target/index.vue b/pages/events-target/index.vue
new file mode 100644
index 0000000..eeeb88d
--- /dev/null
+++ b/pages/events-target/index.vue
@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <page-header>
+      <template #title>
+        <h1 class="text-2xl font-bold">{{ t("Event Destinations") }}</h1>
+      </template>
+    </page-header>
+    <page-content class="flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center justify-between">
+          <n-input v-model:value="searchTerm" :placeholder="t('Search')">
+            <template #prefix>
+              <Icon name="ri:search-2-line" />
+            </template>
+          </n-input>
+        </div>
+
+        <div class="flex items-center gap-4">
+          <n-button @click="() => addForm()">
+            <Icon name="ri:add-line" class="mr-2" />
+            <span>{{ t("Add Event Destination") }}</span>
+          </n-button>
+          <n-button @click="async () => refresh()">
+            <Icon name="ri:refresh-line" class="mr-2" />
+            <span>{{ t("Refresh") }}</span>
+          </n-button>
+        </div>
+      </div>
+      <n-data-table
+        class="border dark:border-neutral-700 rounded overflow-hidden"
+        :columns="columns"
+        :data="filteredData"
+        :pagination="false"
+        :bordered="false" />
+    </page-content>
+    <events-target-new ref="newFormRef"></events-target-new>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from "#components";
+import { NButton, NSpace, type DataTableColumns, NPopconfirm } from "naive-ui";
+import { useI18n } from "vue-i18n";
+const message = useMessage();
+
+const { t } = useI18n();
+const searchTerm = ref("");
+
+interface RowData {
+  type: string;
+}
+
+const columns: DataTableColumns<RowData> = [
+  {
+    title: t("Status"),
+    key: "bucket",
+    width: 180,
+  },
+  {
+    title: t("Service"),
+    key: "endpoint",
+  },
+
+  {
+    title: t("Actions"),
+    key: "actions",
+    align: "center",
+    width: 140,
+    render: (row: RowData) => {
+      return h(
+        NSpace,
+        {
+          justify: "center",
+        },
+        {
+          default: () => [
+            h(
+              NPopconfirm,
+              { onPositiveClick: () => deleteItem(row) },
+              {
+                default: () => t("Confirm Delete"),
+                trigger: () =>
+                  h(
+                    NButton,
+                    { size: "small", secondary: true },
+                    {
+                      default: () => "",
+                      icon: () => h(Icon, { name: "ri:delete-bin-5-line" }),
+                    }
+                  ),
+              }
+            ),
+          ],
+        }
+      );
+    },
+  },
+];
+
+const { data, refresh } = await useAsyncData(
+  "tier",
+  async () => {
+    // const response = await usetier.listTiers();
+    // return response;
+    return [];
+  },
+  { default: () => [] }
+);
+
+const filteredData = computed(() => {
+  if (!searchTerm.value) {
+    return data.value;
+  }
+
+  const term = searchTerm.value.toLowerCase();
+  return data.value.filter(
+    (tier: any) =>
+      tier.name.toLowerCase().includes(term) ||
+      tier.endpoint.toLowerCase().includes(term) ||
+      tier.bucket.toLowerCase().includes(term)
+  );
+});
+
+const deleteItem = async (row: RowData) => {
+  // usetier
+  //   .removeTiers(config.name)
+  //   .then(() => {
+  //     message.success(t("Delete Success"));
+  //     refresh();
+  //   })
+  //   .catch((error) => {
+  //     message.error(t("Delete Failed"));
+  //   });
+};
+
+const newFormRef = ref();
+const addForm = async () => {
+  newFormRef.value.open();
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/pages/tiers/index.vue b/pages/tiers/index.vue
index da8579e..df53ca1 100644
--- a/pages/tiers/index.vue
+++ b/pages/tiers/index.vue
@@ -2,7 +2,7 @@
   <div>
     <page-header>
       <template #title>
-        <h1 class="text-2xl font-bold">{{ t('Tiers') }}</h1>
+        <h1 class="text-2xl font-bold">{{ t("Tiers") }}</h1>
       </template>
     </page-header>
     <page-content class="flex flex-col gap-4">
@@ -18,30 +18,38 @@
         <div class="flex items-center gap-4">
           <n-button @click="() => addForm()">
             <Icon name="ri:add-line" class="mr-2" />
-            <span>{{ t('Add Tier') }}</span>
+            <span>{{ t("Add Tier") }}</span>
           </n-button>
           <n-button @click="async () => refresh()">
             <Icon name="ri:refresh-line" class="mr-2" />
-            <span>{{ t('Refresh') }}</span>
+            <span>{{ t("Refresh") }}</span>
           </n-button>
         </div>
       </div>
-      <n-data-table class="border dark:border-neutral-700 rounded overflow-hidden" :columns="columns" :data="filteredData" :pagination="false" :bordered="false" />
-      <tiers-new-form ref='newFormRef' @search="refresh"></tiers-new-form>
-      <tiers-change-key v-model:visible="changeKeyVisible" v-model:name="editName" ref='infoRef' @search="refresh"></tiers-change-key>
+      <n-data-table
+        class="border dark:border-neutral-700 rounded overflow-hidden"
+        :columns="columns"
+        :data="filteredData"
+        :pagination="false"
+        :bordered="false" />
+      <tiers-new-form ref="newFormRef" @search="refresh"></tiers-new-form>
+      <tiers-change-key
+        v-model:visible="changeKeyVisible"
+        v-model:name="editName"
+        ref="infoRef"
+        @search="refresh"></tiers-change-key>
     </page-content>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { Icon } from '#components'
-import dayjs from 'dayjs'
-import { NButton, NSpace, type DataTableColumns ,NPopconfirm} from 'naive-ui'
-import { useI18n } from 'vue-i18n'
-const usetier = useTiers()
+import { Icon } from "#components";
+import { NButton, NSpace, type DataTableColumns, NPopconfirm } from "naive-ui";
+import { useI18n } from "vue-i18n";
+const usetier = useTiers();
 
-const { t } = useI18n()
-const searchTerm = ref('');
+const { t } = useI18n();
+const searchTerm = ref("");
 
 interface S3Config {
   name: string;
@@ -59,84 +67,84 @@ interface S3Config {
 
 interface RowData {
   type: string;
-  rustfs?: S3Config;  
-  minio?: S3Config;  
+  rustfs?: S3Config;
+  minio?: S3Config;
   s3?: S3Config;
 }
 
-const  getConfig = (row: RowData): S3Config | undefined  =>{
+const getConfig = (row: RowData): S3Config | undefined => {
   switch (row.type) {
-    case 'rustfs':
+    case "rustfs":
       return row.rustfs;
-    case 'minio':
+    case "minio":
       return row.minio;
-    case 's3':
+    case "s3":
       return row.s3;
   }
-}
+};
 
 const columns: DataTableColumns<RowData> = [
   {
-    title: t('Tier Type'),
-    key: 'type',
+    title: t("Tier Type"),
+    key: "type",
     render: (row) => row.type,
   },
   {
-   title: t('Name'),
-    key: 'name',
+    title: t("Name"),
+    key: "name",
     render: (row) => getConfig(row)?.name,
   },
   {
-    title: t('Endpoint'),
-    key: 'endpoint',
+    title: t("Endpoint"),
+    key: "endpoint",
     render: (row) => getConfig(row)?.endpoint,
   },
   {
-    title: t('Bucket'),
-    key: 'bucket',
+    title: t("Bucket"),
+    key: "bucket",
     render: (row) => getConfig(row)?.bucket,
   },
-   {
-    title: t('Region'),
-    key: 'region',
+  {
+    title: t("Region"),
+    key: "region",
     render: (row) => getConfig(row)?.region,
   },
   {
-    title: t('Storage Class'),
-    key: 'storageclass',
+    title: t("Storage Class"),
+    key: "storageclass",
     render: (row) => {
       // 只有 s3 类型才有 storageclass
-      if (row.type === 's3') {
+      if (row.type === "s3") {
         return row.s3?.storageclass;
       }
-      return '-';
+      return "-";
     },
   },
   {
-    title: t('Usage'),
-    key: 'usage',
+    title: t("Usage"),
+    key: "usage",
     render: (row) => getConfig(row)?.usage,
   },
   {
-    title: t('Objects'),
-    key: 'objects',
+    title: t("Objects"),
+    key: "objects",
     render: (row) => getConfig(row)?.objects,
   },
   {
-    title: t('Version'),
-    key: 'versions',
+    title: t("Version"),
+    key: "versions",
     render: (row) => getConfig(row)?.versions,
   },
   {
-    title: t('Actions'),
-    key: 'actions',
-    align: 'center',
+    title: t("Actions"),
+    key: "actions",
+    align: "center",
     width: 140,
     render: (row: RowData) => {
       return h(
         NSpace,
         {
-          justify: 'center',
+          justify: "center",
         },
         {
           default: () => [
@@ -144,7 +152,7 @@ const columns: DataTableColumns<RowData> = [
               NPopconfirm,
               { onPositiveClick: () => deleteItem(row) },
               {
-                default: () => t('Confirm Delete'),
+                default: () => t("Confirm Delete"),
                 trigger: () =>
                   h(
                     NButton,
@@ -159,16 +167,15 @@ const columns: DataTableColumns<RowData> = [
             h(
               NButton,
               {
-                size: 'small',
+                size: "small",
                 secondary: true,
-                onClick: (e) => handleRowClick(row,e),
+                onClick: (e) => handleRowClick(row, e),
               },
               {
-                default: () => '',
-                icon: () => h(Icon, { name: 'ri:edit-2-line' }),
+                default: () => "",
+                icon: () => h(Icon, { name: "ri:edit-2-line" }),
               }
             ),
-
           ],
         }
       );
@@ -177,10 +184,10 @@ const columns: DataTableColumns<RowData> = [
 ];
 
 const { data, refresh } = await useAsyncData(
-  'tier',
+  "tier",
   async () => {
     const response = await usetier.listTiers();
-    return response
+    return response;
   },
   { default: () => [] }
 );
@@ -191,17 +198,18 @@ const filteredData = computed(() => {
   }
 
   const term = searchTerm.value.toLowerCase();
-  return data.value.filter((tier:any) =>
-    tier.name.toLowerCase().includes(term) ||
-    tier.endpoint.toLowerCase().includes(term) ||
-    tier.bucket.toLowerCase().includes(term)
+  return data.value.filter(
+    (tier: any) =>
+      tier.name.toLowerCase().includes(term) ||
+      tier.endpoint.toLowerCase().includes(term) ||
+      tier.bucket.toLowerCase().includes(term)
   );
 });
 
 const infoRef = ref();
 const changeKeyVisible = ref(false);
 const editName = ref();
-const handleRowClick = (row: RowData,e: Event) => {
+const handleRowClick = (row: RowData, e: Event) => {
   e.stopPropagation();
   changeKeyVisible.value = true;
   editName.value = getConfig(row)?.name;
@@ -209,19 +217,21 @@ const handleRowClick = (row: RowData,e: Event) => {
 
 const message = useMessage();
 const deleteItem = async (row: RowData) => {
-  const config = getConfig(row) || {name:''};
-  if(!config.name ) return;
-  usetier.removeTiers(config.name ).then(()=>{
-    message.success(t('Delete Success'))
-       refresh();
-  }).catch((error)=>{
-    message.error(t('Delete Failed'))
-  })
+  const config = getConfig(row) || { name: "" };
+  if (!config.name) return;
+  usetier
+    .removeTiers(config.name)
+    .then(() => {
+      message.success(t("Delete Success"));
+      refresh();
+    })
+    .catch((error) => {
+      message.error(t("Delete Failed"));
+    });
 };
 
 const newFormRef = ref();
 const addForm = async () => {
   newFormRef.value.open();
 };
-
 </script>