diff --git a/static/main.css b/static/main.css
index 132c1bbafe..a1d6b302e9 100644
--- a/static/main.css
+++ b/static/main.css
@@ -74,10 +74,6 @@ a:hover {
   margin-bottom: 1rem;
 }
 
-.field-label {
-  color: var(--font-color-light);
-}
-
 textarea {
   font-family: monospace;
 }
@@ -104,17 +100,7 @@ input[type='file']:focus {
   outline: 1px auto -webkit-focus-ring-color;
 }
 
-input.regular-text {
-  padding: 0.75rem 1rem;
-  border-radius: 0.375rem;
-  border: none;
-  box-shadow: none;
-  background: #2D2C2C;
-  border: 1px solid #414040;
-  color: #f7f5f2;
-}
-
-input[type="text"], input[type="number"] {
+input[type="text"], input[type="number"], input[type="password"] {
   padding: 0.75rem 1rem;
   border-radius: 0.375rem;
   border: none;
@@ -124,13 +110,6 @@ input[type="text"], input[type="number"] {
   color: #f7f5f2;
 }
 
-textarea.regular-textarea {
-  border-radius: 0.375rem;
-  background: #2D2C2C;
-  border: 1px solid #414040;
-  color: #f7f5f2;
-}
-
 select.dropdown {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23f7f5f2' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
   background-position: right .5rem center;
@@ -138,6 +117,7 @@ select.dropdown {
   background-size: 1.5em 1.5em;
   padding-right: 2.5rem;
   -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -185,11 +165,6 @@ main.main-grid {
   grid-auto-rows: max-content;
   min-height: calc(100vh - 140px);
   margin-bottom: 80px;
-
-  footer {
-    grid-column: 1 / span 12;
-    margin: 0;
-  }
 }
 /* Grid end */
 
@@ -540,15 +515,6 @@ body.login main {
 .card {
   grid-column: 1 / span 12;
   position: relative;
-}
-
-.chart-card {
-  padding: 1rem 1.5rem 1.5rem;
-  border-radius: 0.75rem;
-  background-color: var(--bg-color-dark);
-}
-
-.regular-card {
   padding: 1rem 1.5rem 1.5rem;
   border-radius: 0.75rem;
   background-color: var(--bg-color-dark);
@@ -587,7 +553,7 @@ body.login main {
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 600;
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
 
   &.form-card-title {
     font-size: 1rem;
@@ -596,26 +562,35 @@ body.login main {
     border-bottom: 1px solid var(--border-color-light);
     margin-bottom: 0;
   }
-}
 
-.form-card-inner {
-  padding: 1rem 1.5rem;
+  &.has-badge {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &.with-desc {
+    margin-bottom: 0.5rem;
+  }
 }
 
-.chart-card h3 {
-  margin-bottom: 1rem;
+.form h3 {
+  margin-bottom: 2rem;
 }
 
-.title-m.has-badge {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+.form-card-inner {
+  padding: 1rem 1.5rem;
 }
 
 .card-desc {
   color: var(--font-color-darker);
   font-size: 0.875rem;
   line-height: 1.25rem;
+
+  &.pre-form {
+    margin-bottom: 2rem;
+    margin-top: 0;
+  }
 }
 
 .form-card-title {
@@ -766,16 +741,29 @@ body.login main {
 }
 
 footer {
-  margin: 0;
-  background-color: var(--bg-color-dark);
-  color: var(--font-color-darker);
-  padding: 20px 40px;
-  grid-row: 4;
-  text-align: right;
+  margin: 0 auto;
+  text-align: center;
+  width: calc(100% - 80px);
+  padding-left: 320px;
+
+  p {
+    background-color: var(--bg-color-dark);
+    color: var(--font-color-darker);
+    padding: 20px 40px;
+    height: 100%;
+    width: 100%;
+    display: block;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top-left-radius: 0.75rem;
+    border-top-right-radius: 0.75rem;
+  }
 }
 
 footer .logo {
-  vertical-align: sub;
+  margin-left: 4px;
   height: 20px;
 }
 
@@ -1541,6 +1529,10 @@ textarea {
   height: 100px;
   width: calc(100% - 160px);
   max-width: 400px;
+  border-radius: 0.375rem;
+  background: #2D2C2C;
+  border: 1px solid #414040;
+  color: #f7f5f2;
 }
 
 fieldset {
diff --git a/views/channel.ecr b/views/channel.ecr
index 69032e38f5..c90d9b0175 100644
--- a/views/channel.ecr
+++ b/views/channel.ecr
@@ -49,12 +49,12 @@
           </tr>
         </table>
       </section>
-      <section class="card chart-card regular-card">
+      <section class="card regular-card">
         <h3>Message rates</h3>
         <div class="chart-container" id="chart"></div>
       </section>
       <section class="card regular-card">
-        <h3 class="title-m has-badge">
+        <h3 class="has-badge">
           Consumers
           <small class="tiny-badge" id="consumer-count"></small>
         </h3>
diff --git a/views/channels.ecr b/views/channels.ecr
index 45950e3fce..7e10961583 100644
--- a/views/channels.ecr
+++ b/views/channels.ecr
@@ -7,32 +7,30 @@
   </head>
   <body>
     <% render "partials/header" %>
-    <div class="grid-content">
-      <main>
-        <div id="breadcrumbs">
-            <h2 class="page-title"><%=pagename%><div class="tiny-badge" id="pagename-label"></div></h2>
+    <main class="main-grid">
+      <div id="breadcrumbs">
+          <h2 class="page-title"><%=pagename%><div class="tiny-badge" id="pagename-label"></div></h2>
+      </div>
+      <section class="card regular-card">
+        <div class="table-wrapper">
+          <div id="table-error"></div>
+          <table id="table" class="table">
+            <thead>
+              <tr>
+                <th data-sort-key="name">Name</th>
+                <th data-sort-key="vhost" class="left">Virtual host</th>
+                <th data-sort-key="username" class="left">User</th>
+                <th>Mode</th>
+                <th data-sort-key="consumer_count">Consumers</th>
+                <th data-sort-key="prefetch_count">Prefetch limit</th>
+                <th data-sort-key="messages_unacknowledged">Unacked messages</th>
+              </tr>
+            </thead>
+            <tbody></tbody>
+          </table>
         </div>
-        <section class="card regular-card">
-          <div class="table-wrapper">
-            <div id="table-error"></div>
-            <table id="table" class="table">
-              <thead>
-                <tr>
-                  <th data-sort-key="name">Name</th>
-                  <th data-sort-key="vhost" class="left">Virtual host</th>
-                  <th data-sort-key="username" class="left">User</th>
-                  <th>Mode</th>
-                  <th data-sort-key="consumer_count">Consumers</th>
-                  <th data-sort-key="prefetch_count">Prefetch limit</th>
-                  <th data-sort-key="messages_unacknowledged">Unacked messages</th>
-                </tr>
-              </thead>
-              <tbody></tbody>
-            </table>
-          </div>
-        </section>
-      </main>
-      <% render "partials/footer" %>
-    </div>
+      </section>
+    </main>
+    <% render "partials/footer" %>
   </body>
 </html>
diff --git a/views/connection.ecr b/views/connection.ecr
index b73416ade0..86d23a0d7c 100644
--- a/views/connection.ecr
+++ b/views/connection.ecr
@@ -12,7 +12,7 @@
           <h2 class="page-title"><%=pagename%><div id="pagename-label" class="subpage-title"></div></h2>
       </div>
       <section class="card cols-6 regular-card">
-        <h3 class="title-m">Details</h3>
+        <h3>Details</h3>
         <table class="details-table">
           <tr>
             <th>Username</th>
@@ -69,12 +69,12 @@
           </tr>
         </table>
       </section>
-      <section class="card chart-card regular-card">
+      <section class="card">
         <h3>Rates</h3>
         <div class="chart-container" id="chart"></div>
       </section>
       <section class="card regular-card">
-        <h3 class="title-m has-badge">
+        <h3 class="has-badge">
           Channels
           <small class="tiny-badge" id="table-count"></small>
         </h3>
diff --git a/views/connections.ecr b/views/connections.ecr
index 61759c38f8..28bfe09448 100644
--- a/views/connections.ecr
+++ b/views/connections.ecr
@@ -7,40 +7,38 @@
   </head>
   <body>
     <% render "partials/header" %>
-    <div class="grid-content">
-      <main>
-        <div id="breadcrumbs">
-            <h2 class="page-title"><%=pagename%><div class="tiny-badge" id="pagename-label"></div></h2>
+    <main class="main-grid">
+      <div id="breadcrumbs">
+          <h2 class="page-title"><%=pagename%><div class="tiny-badge" id="pagename-label"></div></h2>
+      </div>
+      <section class="card regular-card">
+        <div class="table-wrapper">
+          <div id="table-error"></div>
+          <table id="table" class="table">
+            <thead>
+              <tr>
+                <th data-sort-key="vhost">Virtual host</th>
+                <th data-sort-key="name" class="left">Name</th>
+                <th data-sort-key="user" class="left">User</th>
+                <th data-sort-key="state">State</th>
+                <th data-sort-key="ssl">TLS</th>
+                <th data-sort-key="tls_version">TLS Version</th>
+                <th data-sort-key="cipher">Cipher</th>
+                <th data-sort-key="protocol">Protocol</th>
+                <th data-sort-key="channels">Channels</th>
+                <th data-sort-key="channel_max">Channel max</th>
+                <th data-sort-key="timeout">Heartbeat</th>
+                <th>Client</th>
+                <th data-sort-key="connected_at">Connected at</th>
+                <th data-sort-key="recv_oct">Received bytes</th>
+                <th data-sort-key="send_oct">Sent bytes</th>
+              </tr>
+            </thead>
+            <tbody></tbody>
+          </table>
         </div>
-        <section class="card regular-card">
-          <div class="table-wrapper">
-            <div id="table-error"></div>
-            <table id="table" class="table">
-              <thead>
-                <tr>
-                  <th data-sort-key="vhost">Virtual host</th>
-                  <th data-sort-key="name" class="left">Name</th>
-                  <th data-sort-key="user" class="left">User</th>
-                  <th data-sort-key="state">State</th>
-                  <th data-sort-key="ssl">TLS</th>
-                  <th data-sort-key="tls_version">TLS Version</th>
-                  <th data-sort-key="cipher">Cipher</th>
-                  <th data-sort-key="protocol">Protocol</th>
-                  <th data-sort-key="channels">Channels</th>
-                  <th data-sort-key="channel_max">Channel max</th>
-                  <th data-sort-key="timeout">Heartbeat</th>
-                  <th>Client</th>
-                  <th data-sort-key="connected_at">Connected at</th>
-                  <th data-sort-key="recv_oct">Received bytes</th>
-                  <th data-sort-key="send_oct">Sent bytes</th>
-                </tr>
-              </thead>
-              <tbody></tbody>
-            </table>
-          </div>
-        </section>
-      </main>
-      <% render "partials/footer" %>
-    </div>
+      </section>
+    </main>
+    <% render "partials/footer" %>
   </body>
 </html>
diff --git a/views/consumers.ecr b/views/consumers.ecr
index 6c7953ef77..aacd3b1387 100644
--- a/views/consumers.ecr
+++ b/views/consumers.ecr
@@ -7,33 +7,31 @@
   </head>
   <body>
     <% render "partials/header" %>
-    <div class="grid-content">
-      <main>
-        <div id="breadcrumbs">
-            <h2 class="page-title"><%=pagename%><div class="tiny-badge" id="pagename-label"></div></h2>
+    <main class="main-grid">
+      <div id="breadcrumbs">
+          <h2 class="page-title"><%=pagename%><div class="tiny-badge" id="pagename-label"></div></h2>
+      </div>
+      <section class="card regular-card">
+        <div class="table-wrapper">
+          <div id="table-error"></div>
+          <table id="table" class="table">
+            <thead>
+              <tr>
+                <th data-sort-key="vhost">Virtual host</th>
+                <th data-sort-key="queue">Queue</th>
+                <th data-sort-key="channel">Channel</th>
+                <th data-sort-key="consumer_tag" class="left">Consumer tag</th>
+                <th>Ack required</th>
+                <th>Exclusive</th>
+                <th data-sort-key="prefetch_count" class="right">Prefetch count</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody></tbody>
+          </table>
         </div>
-        <section class="card regular-card">
-          <div class="table-wrapper">
-            <div id="table-error"></div>
-            <table id="table" class="table">
-              <thead>
-                <tr>
-                  <th data-sort-key="vhost">Virtual host</th>
-                  <th data-sort-key="queue">Queue</th>
-                  <th data-sort-key="channel">Channel</th>
-                  <th data-sort-key="consumer_tag" class="left">Consumer tag</th>
-                  <th>Ack required</th>
-                  <th>Exclusive</th>
-                  <th data-sort-key="prefetch_count" class="right">Prefetch count</th>
-                  <th></th>
-                </tr>
-              </thead>
-              <tbody></tbody>
-            </table>
-          </div>
-        </section>
-      </main>
-      <% render "partials/footer" %>
-    </div>
+      </section>
+    </main>
+    <% render "partials/footer" %>
   </body>
 </html>
diff --git a/views/exchange.ecr b/views/exchange.ecr
index db40f8e95c..54b17f0278 100644
--- a/views/exchange.ecr
+++ b/views/exchange.ecr
@@ -7,160 +7,154 @@
   </head>
   <body>
   <% render "partials/header" %>
-    <div class="grid-content">
-      <main>
-        <div id="breadcrumbs" class="cols-12">
-            <h2 class="page-title"><%=pagename%><small class="tiny-badge" id="pagename-label"></small></h2>
-        </div>
-        <section class="card cols-4 regular-card">
-          <h3 class="title-m">Details</h3>
-          <table class="details-table">
-            <tr>
-              <th>Type</th>
-              <td id="e-type"></td>
-            </tr>
-            <tr>
-              <th>Features</th>
-              <td id="e-features"></td>
-            </tr>
-            <tr>
-              <th>Arguments</th>
-              <td id="e-arguments"></td>
-            </tr>
+  <main class="main-grid">
+    <div id="breadcrumbs" class="cols-12">
+        <h2 class="page-title"><%=pagename%><small class="tiny-badge" id="pagename-label"></small></h2>
+    </div>
+    <section class="card cols-4">
+      <h3 class="title-m">Details</h3>
+      <table class="details-table">
+        <tr>
+          <th>Type</th>
+          <td id="e-type"></td>
+        </tr>
+        <tr>
+          <th>Features</th>
+          <td id="e-features"></td>
+        </tr>
+        <tr>
+          <th>Arguments</th>
+          <td id="e-arguments"></td>
+        </tr>
+        <tr>
+          <th>Policy</th>
+          <td id="e-policy"></td>
+        </tr>
+      </table>
+    </section>
+    <section class="card cols-8">
+      <h3 class="title-m">Rates</h3>
+      <div class="chart-container" id="chart"></div>
+    </section>
+    <section class="card">
+      <h3 class="has-badge">
+        Bindings
+        <small class="tiny-badge counter-pill" id="bindings-table-count"></small>
+      </h3>
+      <div class="table-wrapper">
+        <div id="bindings-table-error"></div>
+        <table id="bindings-table" class="table">
+          <thead>
             <tr>
-              <th>Policy</th>
-              <td id="e-policy"></td>
+              <th class="left">Type</th>
+              <th class="left">To</th>
+              <th class="left">Routing key</th>
+              <th class="left">Arguments</th>
+              <th></th>
             </tr>
-          </table>
-        </section>
-        <section class="card cols-8 regular-card">
-          <h3 class="title-m">Rates</h3>
-          <div class="chart-container" id="chart"></div>
-        </section>
-        <section class="card regular-card">
-          <h3 class="title-m has-badge">
-            Bindings
-            <small class="tiny-badge counter-pill" id="bindings-table-count"></small>
-          </h3>
-          <div class="table-wrapper">
-            <div id="bindings-table-error"></div>
-            <table id="bindings-table" class="table">
-              <thead>
-                <tr>
-                  <th class="left">Type</th>
-                  <th class="left">To</th>
-                  <th class="left">Routing key</th>
-                  <th class="left">Arguments</th>
-                  <th></th>
-                </tr>
-              </thead>
-              <tbody></tbody>
-            </table>
-          </div>
-        </section>
-        <form method="post" id="addBinding" class="form card cols-6 regular-card">
-          <h3 class="title-m">Add a binding from this exchange</h3>
-          <div class="py-4">
-            <label class="mb-4">
-              <select class="dropdown" id="dest-type" name="dest-type" required>
-                <option value="q">To queue</option>
-                <option value="e">To exchange</option>
-              </select>
-              <input class="regular-text" name="destination" type="text" required list="exchange-dest-list">
-              <datalist id="exchange-dest-list"></datalist>
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Routing key</span>
-              <input class="regular-text" name="routing_key" type="text">
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Arguments</span>
-              <textarea class="regular-textarea" name="arguments" placeholder='{ "key": value }'></textarea>
-            </label>
-            <button type="submit" class="btn btn-green">Bind</button>
-          </div>
-        </form>
-        <form method="post" id="publishMessage" class="form card cols-6 regular-card">
-          <h3 class="title-m">Publish message</h3>
-          <div class="py-4">
-            <label class="mb-4">
-              <span class="field-label">Routing key</span>
-              <input class="regular-text" name="routing_key" type="text">
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Delivery mode</span>
-              <select class="dropdown" name="delivery_mode">
-                <option value="2">Persistent</option>
-              </select>
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Headers</span>
-              <textarea class="regular-textarea" name="headers" placeholder='{ "key": value }'></textarea>
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Properties</span>
-              <textarea class="regular-textarea" name="properties" placeholder='{ "key": value }'></textarea>
-              <div id="dataTags" class="label">
-                <a class="arg-tooltip" data-tag="content_type" data-value="&quot;application/json&quot;">Content Type
-                  <span class="tooltiptext">Type of the content used by application. Default set to 'application/json'</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="content_encoding">Content Encoding
-                  <span class="tooltiptext">Encoding of the content used by application.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="expiration" data-value="0">Message TTL
-                  <span class="tooltiptext">How long a message published to a queue can live before it is discarded
-                    (milliseconds).</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="priority" data-value="0">Priority
-                  <span class="tooltiptext">Priority of the message in the queue.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="message_id">Message ID
-                  <span class="tooltiptext">Message identifier of the message used by application.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="timestamp" data-value="0">Timestamp
-                  <span class="tooltiptext">Timestamp of the message used by application.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="type">Type
-                  <span class="tooltiptext">Type of the message used by application.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="user_id">User ID
-                  <span class="tooltiptext">User identifier when impersonating another user.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="app_id">App ID
-                  <span class="tooltiptext">Application identifier.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="correlation_id">Correlation ID
-                  <span class="tooltiptext">Correlation identifier for RPC</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="reply_to">Reply To
-                  <span class="tooltiptext">Reply to queue for RPC</span>
-                </a>
-              </div>
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Payload</span>
-              <textarea class="regular-textarea" name="payload"></textarea>
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Payload encoding</span>
-              <select class="dropdown" name="payload_encoding">
-                <option value="string">String</option>
-                <option value="base64">Base64</option>
-              </select>
-            </label>
-            <button type="submit" class="btn btn-green">Publish message</button>
-          </div>
-        </form>
-        <section class="card cols-4 regular-card">
-          <h3 class="title-m">Danger zone</h3>
-          <form method="delete" id="deleteExchange" class="form">
-            <label>
-              <button type="submit" class="btn btn-outlined ml-0"><span>Delete exchange</span><img src="img/icon-cross.svg" /></button>
-            </label>
-          </form>
-        </section>
-      </main>
-      <% render "partials/footer" %>
-    </div>
+          </thead>
+          <tbody></tbody>
+        </table>
+      </div>
+    </section>
+    <form method="post" id="addBinding" class="form card cols-6">
+      <h3>Add a binding from this exchange</h3>
+      <label>
+        <select class="dropdown" id="dest-type" name="dest-type" required>
+          <option value="q">To queue</option>
+          <option value="e">To exchange</option>
+        </select>
+        <input name="destination" type="text" required list="exchange-dest-list">
+        <datalist id="exchange-dest-list"></datalist>
+      </label>
+      <label>
+        <span>Routing key</span>
+        <input name="routing_key" type="text">
+      </label>
+      <label>
+        <span>Arguments</span>
+        <textarea name="arguments" placeholder='{ "key": value }'></textarea>
+      </label>
+      <button type="submit" class="btn btn-green">Bind</button>
+    </form>
+    <form method="post" id="publishMessage" class="form card cols-6">
+      <h3>Publish message</h3>
+      <label>
+        <span>Routing key</span>
+        <input name="routing_key" type="text">
+      </label>
+      <label>
+        <span>Delivery mode</span>
+        <select class="dropdown" name="delivery_mode">
+          <option value="2">Persistent</option>
+        </select>
+      </label>
+      <label>
+        <span>Headers</span>
+        <textarea name="headers" placeholder='{ "key": value }'></textarea>
+      </label>
+      <label>
+        <span>Properties</span>
+        <textarea name="properties" placeholder='{ "key": value }'></textarea>
+        <div id="dataTags" class="label">
+          <a class="arg-tooltip" data-tag="content_type" data-value="&quot;application/json&quot;">Content Type
+            <span class="tooltiptext">Type of the content used by application. Default set to 'application/json'</span>
+          </a> |
+          <a class="arg-tooltip" data-tag="content_encoding">Content Encoding
+            <span class="tooltiptext">Encoding of the content used by application.</span>
+          </a> |
+          <a class="arg-tooltip" data-tag="expiration" data-value="0">Message TTL
+            <span class="tooltiptext">How long a message published to a queue can live before it is discarded
+              (milliseconds).</span>
+          </a> |
+          <a class="arg-tooltip" data-tag="priority" data-value="0">Priority
+            <span class="tooltiptext">Priority of the message in the queue.</span>
+          </a> |
+          <a class="arg-tooltip" data-tag="message_id">Message ID
+            <span class="tooltiptext">Message identifier of the message used by application.</span>
+          </a> |
+          <a class="arg-tooltip" data-tag="timestamp" data-value="0">Timestamp
+            <span class="tooltiptext">Timestamp of the message used by application.</span>
+          </a> |
+          <a class="arg-tooltip" data-tag="type">Type
+            <span class="tooltiptext">Type of the message used by application.</span>
+          </a> |
+          <a class="arg-tooltip" data-tag="user_id">User ID
+            <span class="tooltiptext">User identifier when impersonating another user.</span>
+          </a> |
+          <a class="arg-tooltip" data-tag="app_id">App ID
+            <span class="tooltiptext">Application identifier.</span>
+          </a> |
+          <a class="arg-tooltip" data-tag="correlation_id">Correlation ID
+            <span class="tooltiptext">Correlation identifier for RPC</span>
+          </a> |
+          <a class="arg-tooltip" data-tag="reply_to">Reply To
+            <span class="tooltiptext">Reply to queue for RPC</span>
+          </a>
+        </div>
+      </label>
+      <label>
+        <span>Payload</span>
+        <textarea name="payload"></textarea>
+      </label>
+      <label>
+        <span>Payload encoding</span>
+        <select class="dropdown" name="payload_encoding">
+          <option value="string">String</option>
+          <option value="base64">Base64</option>
+        </select>
+      </label>
+      <button type="submit" class="btn btn-green">Publish message</button>
+    </form>
+    <section class="card cols-4">
+      <h3>Danger zone</h3>
+      <form method="delete" id="deleteExchange" class="form">
+        <label>
+          <button type="submit" class="btn btn-outlined"><span>Delete exchange</span><img src="img/icon-cross.svg" /></button>
+        </label>
+      </form>
+    </section>
+  </main>
+  <% render "partials/footer" %>
   </body>
 </html>
diff --git a/views/exchanges.ecr b/views/exchanges.ecr
index b619001535..646466bd32 100644
--- a/views/exchanges.ecr
+++ b/views/exchanges.ecr
@@ -7,93 +7,89 @@
   </head>
   <body>
     <% render "partials/header" %>
-    <div class="grid-content">
-      <main>
-        <div id="breadcrumbs">
-            <h2 class="page-title"><%=pagename%><div class="tiny-badge" id="pagename-label"></div></h2>
+    <main class="main-grid">
+      <div id="breadcrumbs">
+          <h2 class="page-title"><%=pagename%><div class="tiny-badge" id="pagename-label"></div></h2>
+      </div>
+      <section class="card">
+        <div class="table-wrapper">
+          <div id="table-error"></div>
+          <table id="table" class="table">
+            <thead>
+              <tr>
+                <th data-sort-key="vhost" class="text-left">Virtual host</th>
+                <th data-sort-key="name" class="left">Name</th>
+                <th data-sort-key="type" class="left">Type</th>
+                <th>Features</th>
+                <th data-sort-key="policy">Policy</th>
+              </tr>
+            </thead>
+            <tbody></tbody>
+          </table>
         </div>
-        <section class="card regular-card">
-          <div class="table-wrapper">
-            <div id="table-error"></div>
-            <table id="table" class="table">
-              <thead>
-                <tr>
-                  <th data-sort-key="vhost" class="text-left">Virtual host</th>
-                  <th data-sort-key="name" class="left">Name</th>
-                  <th data-sort-key="type" class="left">Type</th>
-                  <th>Features</th>
-                  <th data-sort-key="policy">Policy</th>
-                </tr>
-              </thead>
-              <tbody></tbody>
-            </table>
+      </section>
+      <form method="put" id="addExchange" class="form card">
+        <h3>Add exchange</h3>
+        <label>
+          <span>Virtual host</span>
+          <select class="dropdown" name="vhost" required></select>
+        </label>
+        <label>
+          <span>Name</span>
+          <input type="text" name="name" required>
+        </label>
+        <label>
+          <span>Type</span>
+          <select class="dropdown" name="type" required></select>
+        </label>
+        <label>
+          <span>
+            <a class="prop-tooltip" data-tag="alternate-exchange">Durable<span class="tooltip-icon">?</span>
+              <span class="prop-tooltiptext">"Durable" exchanges persist even when the server restarts,
+                ensuring their availability and preventing data loss.</span>
+            </a>
+          </span>
+          <input type="checkbox" name="durable" value="1" checked>
+        </label>
+        <label>
+          <span>
+          <a class="prop-tooltip" data-tag="alternate-exchange">Auto-delete<span class="tooltip-icon">?</span>
+          <span class="prop-tooltiptext">"Auto-delete" exchanges are automatically removed when they
+          are no longer in use, freeing up system resources.</span>
+          </a>
+          </span>
+          <input type="checkbox" name="auto_delete" value="1">
+        </label>
+        <label>
+          <span>
+          <a class="prop-tooltip" data-tag="alternate-exchange">Internal<span class="tooltip-icon">?</span>
+          <span class="prop-tooltiptext"> "Internal" exchanges are specifically designed for internal
+          use within the messaging system and are not intended for direct interaction with external components.</span>
+          </a>
+          </span>
+          <input type="checkbox" name="internal" value="1">
+        </label>
+        <label>
+          <span>
+          <a class="prop-tooltip" data-tag="alternate-exchange">Delayed<span class="tooltip-icon">?</span>
+          <span class="prop-tooltiptext">"Delayed" exchanges introduce a delay before delivering
+          messages, allowing for delayed processing or scheduling of tasks.</span>
+          </a>
+          </span>
+          <input type="checkbox" name="delayed" value="1">
+        </label>
+        <label>
+          <span>Arguments</span>
+          <textarea name="arguments" placeholder='{ "key": value }'></textarea>
+          <div id="dataTags" class="label">
+            <a class="arg-tooltip" data-tag="x-alternate-exchange">Alternate Exchange
+              <span class="tooltiptext">If messages to this exchange cannot otherwise be routed, send them to the alternate exchange named here.</span>
+            </a>
           </div>
-        </section>
-        <form method="put" id="addExchange" class="form card regular-card">
-          <h3 class="title-m">Add exchange</h3>
-          <div class="py-4">
-            <label class="mb-4">
-              <span class="field-label">Virtual host</span>
-              <select class="dropdown" name="vhost" required></select>
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Name</span>
-              <input class="regular-text" type="text" name="name" required>
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Type</span>
-              <select class="dropdown" name="type" required></select>
-            </label>
-            <label>
-              <span>
-                <a class="prop-tooltip" data-tag="alternate-exchange">Durable<span class="tooltip-icon">?</span>
-                  <span class="prop-tooltiptext">"Durable" exchanges persist even when the server restarts,
-                    ensuring their availability and preventing data loss.</span>
-                </a>
-              </span>
-              <input type="checkbox" name="durable" value="1" checked>
-            </label>
-            <label>
-              <span>
-              <a class="prop-tooltip" data-tag="alternate-exchange">Auto-delete<span class="tooltip-icon">?</span>
-              <span class="prop-tooltiptext">"Auto-delete" exchanges are automatically removed when they
-              are no longer in use, freeing up system resources.</span>
-              </a>
-              </span>
-              <input type="checkbox" name="auto_delete" value="1">
-            </label>
-            <label>
-              <span>
-              <a class="prop-tooltip" data-tag="alternate-exchange">Internal<span class="tooltip-icon">?</span>
-              <span class="prop-tooltiptext"> "Internal" exchanges are specifically designed for internal
-              use within the messaging system and are not intended for direct interaction with external components.</span>
-              </a>
-              </span>
-              <input type="checkbox" name="internal" value="1">
-            </label>
-            <label>
-              <span>
-              <a class="prop-tooltip" data-tag="alternate-exchange">Delayed<span class="tooltip-icon">?</span>
-              <span class="prop-tooltiptext">"Delayed" exchanges introduce a delay before delivering
-              messages, allowing for delayed processing or scheduling of tasks.</span>
-              </a>
-              </span>
-              <input type="checkbox" name="delayed" value="1">
-            </label>
-            <label class="mt-4 mb-4">
-              <span class="field-label">Arguments</span>
-              <textarea class="regular-textarea" name="arguments" placeholder='{ "key": value }'></textarea>
-              <div id="dataTags" class="label">
-                <a class="arg-tooltip" data-tag="x-alternate-exchange">Alternate Exchange
-                  <span class="tooltiptext">If messages to this exchange cannot otherwise be routed, send them to the alternate exchange named here.</span>
-                </a>
-              </div>
-            </label>
-            <button type="submit" class="btn btn-green">Add exchange</button>
-          </div>
-        </form>
-      </main>
-      <% render "partials/footer" %>
-    </div>
+        </label>
+        <button type="submit" class="btn btn-green">Add exchange</button>
+      </form>
+    </main>
+    <% render "partials/footer" %>
   </body>
 </html>
diff --git a/views/overview.ecr b/views/overview.ecr
index e05906e0e2..1a3aaeedd4 100644
--- a/views/overview.ecr
+++ b/views/overview.ecr
@@ -42,19 +42,19 @@
           <div class="counter-header">Uptime</div>
         </div>
       </div>
-      <section class="card chart-card cols-4 cols-6-md">
+      <section class="card cols-4 cols-6-md">
         <h3>Queued messages</h3>
         <div class="chart-container relative" id="msgChart"></div>
       </section>
-      <section class="card chart-card cols-4 cols-6-md">
+      <section class="card cols-4 cols-6-md">
         <h3>Data rates</h3>
         <div class="chart-container relative" id="dataChart"></div>
       </section>
-      <section class="card chart-card cols-4 cols-6-md">
+      <section class="card cols-4 cols-6-md">
         <h3>Message rates</h3>
         <div class="chart-container relative" id="rateChart"></div>
       </section>
-      <form id="importDefinitions" method="post" enctype="multipart/form-data" class="form card tb-card cols-6">
+      <form id="importDefinitions" method="post" enctype="multipart/form-data" class="form card align-start tb-card cols-6">
         <h3 class="form-card-title">Upload definitions</h3>
         <div class="form-card-inner">
           <label>
diff --git a/views/partials/footer.ecr b/views/partials/footer.ecr
index a380bb8e29..96940b1d4a 100644
--- a/views/partials/footer.ecr
+++ b/views/partials/footer.ecr
@@ -1,6 +1,7 @@
 <footer>
-  LavinMQ is open source and developed by
-  <a href="https://www.84codes.com" target="_blank">
-    <img alt="84codes logo" class="logo" src="img/logo-84codes.svg" width="55" height="20">
-  </a>
+  <p>LavinMQ is open source and developed by
+    <a href="https://www.84codes.com" target="_blank">
+      <img alt="84codes logo" class="logo" src="img/logo-84codes.svg" width="55" height="20">
+    </a>
+  </p>
 </footer>
diff --git a/views/policies.ecr b/views/policies.ecr
index 4a0606af3c..eeb2e113ce 100644
--- a/views/policies.ecr
+++ b/views/policies.ecr
@@ -7,120 +7,118 @@
   </head>
   <body>
     <% render "partials/header" %>
-    <div class="grid-content">
-      <main>
-        <div id="breadcrumbs">
-            <h2 class="page-title"><%=pagename%><div class="tiny-badge" id="pagename-label"></div></h2>
+    <main class="main-grid">
+      <div id="breadcrumbs">
+          <h2 class="page-title"><%=pagename%><div class="tiny-badge" id="pagename-label"></div></h2>
+      </div>
+      <section class="card regular-card">
+        <div class="table-wrapper">
+          <div id="table-error"></div>
+          <table id="table" class="table">
+            <thead>
+              <tr>
+                <th>Virtual host</th>
+                <th data-sort-key="name" class="left">Name</th>
+                <th class="left">Pattern</th>
+                <th class="left">Apply to</th>
+                <th class="left">Definition</th>
+                <th class="left">Priority</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody></tbody>
+          </table>
         </div>
-        <section class="card regular-card">
-          <div class="table-wrapper">
-            <div id="table-error"></div>
-            <table id="table" class="table">
-              <thead>
-                <tr>
-                  <th>Virtual host</th>
-                  <th data-sort-key="name" class="left">Name</th>
-                  <th class="left">Pattern</th>
-                  <th class="left">Apply to</th>
-                  <th class="left">Definition</th>
-                  <th class="left">Priority</th>
-                  <th></th>
-                </tr>
-              </thead>
-              <tbody></tbody>
-            </table>
-          </div>
-        </section>
-        <form method="put" id="createPolicy" class="form card regular-card">
-          <h3 class="title-m">
-            <span class="when-create">Add policy</span>
-            <span class="when-edit">Edit policy</span>
-          </h3>
-          <div class="py-4">
-            <label class="when-create mb-4">
-              <span class="field-label">Virtual host</span>
-              <select class="dropdown" id="addPolicyVhost" name="vhost" required></select>
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Name</span>
-              <input class="regular-text" type="text" name="name" required data-primary-key="">
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Pattern</span>
-              <input class="regular-text" type="text" name="pattern" required>
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Apply to</span>
-              <select class="dropdown" id="addPolicyApplyTo" name="apply-to" required>
-                <option value="all">Exchanges &amp; Queues</option>
-                <option value="exchanges">Exchanges</option>
-                <option value="queues">Queues</option>
-              </select>
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Definition</span>
-              <textarea class="regular-textarea" name="definition" placeholder='{ "key": value }'></textarea>
-              <div id="dataTags" class="label">
-                <a class="arg-tooltip" data-tag="max-length" data-value="0">Max length
-                  <span class="tooltiptext">How many (ready) messages a queue can contain before it starts dropping them.
-                    Dropping strategy decided by overflow arg.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="max-length-bytes" data-value="0">Max length bytes
-                  <span class="tooltiptext">The max length of a queue in bytes.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="message-ttl" data-value="0">Message TTL
-                  <span class="tooltiptext">How long a message published to a queue can live before it is discarded
-                    (milliseconds).</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="overflow">Overflow behaviour
-                  <span class="tooltiptext">This determines what happens to messages when the maximum length of a queue is
-                    reached. Valid value are: drop-head (default) or reject-publish.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="expires" data-value="0">Auto expire
-                  <span class="tooltiptext">How long a queue can be unused for before it is automatically deleted
-                    (milliseconds).</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="dead-letter-exchange">Dead letter exchange
-                  <span class="tooltiptext">Optional name of an exchange to which messages will be republished if they are
-                    rejected or expire.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="dead-letter-routing-key">Dead letter routing key
-                  <span class="tooltiptext">Optional replacement routing key to use when a message is dead-lettered. If not
-                    set, the message's original routing key will be used.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="federation-upstream">Federation upstream
-                  <span class="tooltiptext">Chooses a specific upstream set to use for federation. Incompatible with
-                    federation-upstream-set.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="federation-upstream-set">Federation upstream set
-                  <span class="tooltiptext">Chooses the name of a set of upstreams to use with federation, or "all" to use
-                    all
-                    upstreams. Incompatible with federation-upstream.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="delivery-limit" data-value="0">Delivery limit
-                  <span class="tooltiptext">The number of times a message can be redelivered before dropped or
-                    dead-lettered</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="max-age" data-value="1M">Max age
-                  <span class="tooltiptext">Stream queue segments will be deleted when all messages in the segmented is older than this.
-                    Valid units are Y(ear), M(onth), D(ays), h(ours), m(inutes), s(seconds).
-                    Segments are only deleted when new messages are published to the stream queue.</span>
-                </a>
-              </div>
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Priority</span>
-              <input class="regular-text" type="number" name="priority" value="0" max="10" min="-10" step="1" required>
-            </label>
-            <button type="submit" class="btn btn-green when-create">Add policy</button>
-            <div class="when-edit flex gap-2">
-              <button type="submit" class="btn btn-green">Update</button>
-              <button type="reset" class="btn btn-outlined cancel">Cancel</button>
+      </section>
+      <form method="put" id="createPolicy" class="form card regular-card">
+        <h3 class="title-m">
+          <span class="when-create">Add policy</span>
+          <span class="when-edit">Edit policy</span>
+        </h3>
+        <div class="py-4">
+          <label class="when-create mb-4">
+            <span class="field-label">Virtual host</span>
+            <select class="dropdown" id="addPolicyVhost" name="vhost" required></select>
+          </label>
+          <label class="mb-4">
+            <span class="field-label">Name</span>
+            <input class="regular-text" type="text" name="name" required data-primary-key="">
+          </label>
+          <label class="mb-4">
+            <span class="field-label">Pattern</span>
+            <input class="regular-text" type="text" name="pattern" required>
+          </label>
+          <label class="mb-4">
+            <span class="field-label">Apply to</span>
+            <select class="dropdown" id="addPolicyApplyTo" name="apply-to" required>
+              <option value="all">Exchanges &amp; Queues</option>
+              <option value="exchanges">Exchanges</option>
+              <option value="queues">Queues</option>
+            </select>
+          </label>
+          <label class="mb-4">
+            <span class="field-label">Definition</span>
+            <textarea class="regular-textarea" name="definition" placeholder='{ "key": value }'></textarea>
+            <div id="dataTags" class="label">
+              <a class="arg-tooltip" data-tag="max-length" data-value="0">Max length
+                <span class="tooltiptext">How many (ready) messages a queue can contain before it starts dropping them.
+                  Dropping strategy decided by overflow arg.</span>
+              </a> |
+              <a class="arg-tooltip" data-tag="max-length-bytes" data-value="0">Max length bytes
+                <span class="tooltiptext">The max length of a queue in bytes.</span>
+              </a> |
+              <a class="arg-tooltip" data-tag="message-ttl" data-value="0">Message TTL
+                <span class="tooltiptext">How long a message published to a queue can live before it is discarded
+                  (milliseconds).</span>
+              </a> |
+              <a class="arg-tooltip" data-tag="overflow">Overflow behaviour
+                <span class="tooltiptext">This determines what happens to messages when the maximum length of a queue is
+                  reached. Valid value are: drop-head (default) or reject-publish.</span>
+              </a> |
+              <a class="arg-tooltip" data-tag="expires" data-value="0">Auto expire
+                <span class="tooltiptext">How long a queue can be unused for before it is automatically deleted
+                  (milliseconds).</span>
+              </a> |
+              <a class="arg-tooltip" data-tag="dead-letter-exchange">Dead letter exchange
+                <span class="tooltiptext">Optional name of an exchange to which messages will be republished if they are
+                  rejected or expire.</span>
+              </a> |
+              <a class="arg-tooltip" data-tag="dead-letter-routing-key">Dead letter routing key
+                <span class="tooltiptext">Optional replacement routing key to use when a message is dead-lettered. If not
+                  set, the message's original routing key will be used.</span>
+              </a> |
+              <a class="arg-tooltip" data-tag="federation-upstream">Federation upstream
+                <span class="tooltiptext">Chooses a specific upstream set to use for federation. Incompatible with
+                  federation-upstream-set.</span>
+              </a> |
+              <a class="arg-tooltip" data-tag="federation-upstream-set">Federation upstream set
+                <span class="tooltiptext">Chooses the name of a set of upstreams to use with federation, or "all" to use
+                  all
+                  upstreams. Incompatible with federation-upstream.</span>
+              </a> |
+              <a class="arg-tooltip" data-tag="delivery-limit" data-value="0">Delivery limit
+                <span class="tooltiptext">The number of times a message can be redelivered before dropped or
+                  dead-lettered</span>
+              </a> |
+              <a class="arg-tooltip" data-tag="max-age" data-value="1M">Max age
+                <span class="tooltiptext">Stream queue segments will be deleted when all messages in the segmented is older than this.
+                  Valid units are Y(ear), M(onth), D(ays), h(ours), m(inutes), s(seconds).
+                  Segments are only deleted when new messages are published to the stream queue.</span>
+              </a>
             </div>
+          </label>
+          <label class="mb-4">
+            <span class="field-label">Priority</span>
+            <input class="regular-text" type="number" name="priority" value="0" max="10" min="-10" step="1" required>
+          </label>
+          <button type="submit" class="btn btn-green when-create">Add policy</button>
+          <div class="when-edit flex gap-2">
+            <button type="submit" class="btn btn-green">Update</button>
+            <button type="reset" class="btn btn-outlined cancel">Cancel</button>
           </div>
-        </form>
-      </main>
-      <% render "partials/footer" %>
-    </div>
+        </div>
+      </form>
+    </main>
+    <% render "partials/footer" %>
   </body>
 </html>
diff --git a/views/queue.ecr b/views/queue.ecr
index a8706806fb..daa6e7c4f5 100644
--- a/views/queue.ecr
+++ b/views/queue.ecr
@@ -7,318 +7,312 @@
   </head>
   <body>
     <% render "partials/header" %>
-    <div class="grid-content">
-      <main class="queue-main">
-        <div id="breadcrumbs" class="cols-12">
-            <h2 class="page-title"><%=pagename%><div id="pagename-label" class="subpage-title"></div></h2>
-        </div>
-        <section class="card cols-4 regular-card">
-          <h3 class="title-m">Details</h3>
-          <table class="details-table">
-            <tr>
-              <th>Features</th>
-              <td id="q-features"></td>
-            </tr>
-            <tr>
-              <th>State</th>
-              <td id="q-state"></td>
-            </tr>
-            <tr>
-              <th>Consumers</th>
-              <td id="q-consumers"></td>
-            </tr>
-            <tr>
-              <th>Policy</th>
-              <td id="q-policy"></td>
-            </tr>
-            <tr>
-              <th>Operator policy</th>
-              <td id="q-operator-policy"></td>
-            </tr>
-            <tr>
-              <th>Effective policy definition</th>
-              <td id="q-effective-policy-definition"></td>
-            </tr>
+    <main class="queue-main main-grid">
+      <div id="breadcrumbs" class="cols-12">
+          <h2 class="page-title"><%=pagename%><div id="pagename-label" class="subpage-title"></div></h2>
+      </div>
+      <section class="card cols-4">
+        <h3>Details</h3>
+        <table class="details-table">
+          <tr>
+            <th>Features</th>
+            <td id="q-features"></td>
+          </tr>
+          <tr>
+            <th>State</th>
+            <td id="q-state"></td>
+          </tr>
+          <tr>
+            <th>Consumers</th>
+            <td id="q-consumers"></td>
+          </tr>
+          <tr>
+            <th>Policy</th>
+            <td id="q-policy"></td>
+          </tr>
+          <tr>
+            <th>Operator policy</th>
+            <td id="q-operator-policy"></td>
+          </tr>
+          <tr>
+            <th>Effective policy definition</th>
+            <td id="q-effective-policy-definition"></td>
+          </tr>
+        </table>
+      </section>
+      <section class="card cols-4">
+        <h3>Messages</h3>
+        <table class="details-table">
+          <tr>
+            <th></th>
+            <th>Count</th>
+            <th>Bytesize</th>
+            <th>Average</th>
+          </tr>
+          <tr>
+            <th>Total</th>
+            <td id="q-total"></td>
+            <td id="q-total-bytes"></td>
+            <td id="q-total-avg-bytes"></td>
+          </tr>
+          <tr>
+            <th>Ready</th>
+            <td id="q-ready"></td>
+            <td id="q-ready-bytes"></td>
+            <td id="q-ready-avg-bytes"></td>
+          </tr>
+          <tr>
+            <th><a id="unacked-link" href="">Unacked</a></th>
+            <td id="q-unacked"></td>
+            <td id="q-unacked-bytes"></td>
+            <td id="q-unacked-avg-bytes"></td>
+          </tr>
+        </table>
+      </section>
+      <section class="card cols-4">
+        <h3>Arguments</h3>
+        <pre class="arguments" id="q-arguments"></pre>
+      </section>
+      <section class="card">
+        <h3>Rates</h3>
+        <div class="chart-container" id="chart"></div>
+      </section>
+      <section class="card">
+        <h3 class="has-badge">
+          Consumers
+          <small class="tiny-badge counter-pill" id="consumer-count"></small>
+        </h3>
+        <div class="table-wrapper">
+          <div id="table-error"></div>
+          <table id="table" class="table">
+            <thead>
+              <tr>
+                <th class="left">Channel</th>
+                <th class="left">Consumer tag</th>
+                <th>Ack required</th>
+                <th>Exclusive</th>
+                <th class="right">Prefetch count</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody></tbody>
           </table>
-        </section>
-        <section class="card cols-4 regular-card">
-          <h3 class="title-m">Messages</h3>
-          <table class="details-table">
-            <tr>
-              <th></th>
-              <th>Count</th>
-              <th>Bytesize</th>
-              <th>Average</th>
-            </tr>
-            <tr>
-              <th>Total</th>
-              <td id="q-total"></td>
-              <td id="q-total-bytes"></td>
-              <td id="q-total-avg-bytes"></td>
-            </tr>
-            <tr>
-              <th>Ready</th>
-              <td id="q-ready"></td>
-              <td id="q-ready-bytes"></td>
-              <td id="q-ready-avg-bytes"></td>
-            </tr>
-            <tr>
-              <th><a id="unacked-link" href="">Unacked</a></th>
-              <td id="q-unacked"></td>
-              <td id="q-unacked-bytes"></td>
-              <td id="q-unacked-avg-bytes"></td>
-            </tr>
+        </div>
+        <button class="load-more" id="load-more-consumers"></button>
+      </section>
+      <section class="card">
+        <h3 class="has-badge">
+          Bindings
+          <small class="tiny-badge counter-pill" id="bindings-count"></small>
+        </h3>
+        <div class="table-wrapper">
+          <div id="bindings-table-error"></div>
+          <table id="bindings-table" class="table">
+            <thead>
+              <tr>
+                <th class="left">From</th>
+                <th class="left">Routing key</th>
+                <th class="left">Arguments</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody></tbody>
           </table>
-        </section>
-        <section class="card cols-4 regular-card">
-          <h3 class="title-m">Arguments</h3>
-          <pre class="arguments" id="q-arguments"></pre>
-        </section>
-        <section class="card regular-card">
-          <h3 class="title-m">Rates</h3>
-          <div class="chart-container" id="chart"></div>
-        </section>
-        <section class="card regular-card">
-          <h3 class="title-m has-badge">
-            Consumers
-            <small class="tiny-badge counter-pill" id="consumer-count"></small>
-          </h3>
-          <div class="table-wrapper">
-            <div id="table-error"></div>
-            <table id="table" class="table">
-              <thead>
-                <tr>
-                  <th class="left">Channel</th>
-                  <th class="left">Consumer tag</th>
-                  <th>Ack required</th>
-                  <th>Exclusive</th>
-                  <th class="right">Prefetch count</th>
-                  <th></th>
-                </tr>
-              </thead>
-              <tbody></tbody>
-            </table>
-          </div>
-          <button class="load-more" id="load-more-consumers"></button>
-        </section>
-        <section class="card regular-card">
-          <h3 class="title-m has-badge">
-            Bindings
-            <small class="tiny-badge counter-pill" id="bindings-count"></small>
-          </h3>
-          <div class="table-wrapper">
-            <div id="bindings-table-error"></div>
-            <table id="bindings-table" class="table">
-              <thead>
-                <tr>
-                  <th class="left">From</th>
-                  <th class="left">Routing key</th>
-                  <th class="left">Arguments</th>
-                  <th></th>
-                </tr>
-              </thead>
-              <tbody></tbody>
-            </table>
-          </div>
-        </section>
-        <form method="post" id="addBinding" class="form card cols-6 regular-card">
-          <h3 class="title-m">Add a binding to this queue</h3>
-          <div class="py-4">
-            <label class="mb-4">
-              <span class="field-label">From exchange</span>
-              <input class="regular-text" name="source" type="text" required list="exchange-list">
-              <datalist id="exchange-list"></datalist>
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Routing key</span>
-              <input class="regular-text" name="routing_key" type="text">
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Arguments</span>
-              <textarea class="regular-textarea" name="arguments" placeholder='{ "key": value }'></textarea>
-            </label>
-            <button type="submit" class="btn btn-outlined">Bind</button>
+        </div>
+      </section>
+      <form method="post" id="addBinding" class="form card cols-6">
+        <h3>Add a binding to this queue</h3>
+        <label>
+          <span>From exchange</span>
+          <input name="source" type="text" required list="exchange-list">
+          <datalist id="exchange-list"></datalist>
+        </label>
+        <label>
+          <span>Routing key</span>
+          <input name="routing_key" type="text">
+        </label>
+        <label>
+          <span>Arguments</span>
+          <textarea name="arguments" placeholder='{ "key": value }'></textarea>
+        </label>
+        <button type="submit" class="btn btn-outlined">Bind</button>
+      </form>
+      <form method="post" id="publishMessage" class="form card cols-6">
+        <h3 class="with-desc">Publish message</h3>
+        <p class="card-desc pre-form">
+          Message will be published to the default exchange with routing key <span class="queue"></span>, routing it to
+          this queue.
+        </p>
+        <label class="mb-4">
+          <span class="field-label">Delivery mode</span>
+          <select class="dropdown" name="delivery_mode">
+            <option value="2">Persistent</option>
+          </select>
+        </label>
+        <label class="mb-4">
+          <span class="field-label">Headers</span>
+          <textarea class="regular-textarea" name="headers" placeholder='{ "key": value }'></textarea>
+        </label>
+        <label class="mb-4">
+          <span class="field-label">Properties</span>
+          <textarea class="regular-textarea" name="properties" placeholder='{ "key": value }'></textarea>
+          <div id="dataTags" class="label">
+            <a class="arg-tooltip" data-tag="content_type" data-value="&quot;application/json&quot;">Content Type
+              <span class="tooltiptext">Type of the content used by application. Default set to 'application/json'</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="content_encoding">Content Encoding
+              <span class="tooltiptext">Encoding of the content used by application.</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="expiration" data-value="0">Message TTL
+              <span class="tooltiptext">How long a message published to a queue can live before it is discarded
+                (milliseconds).</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="priority" data-value="1">Priority
+              <span class="tooltiptext">Priority of the message in the queue.</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="message_id">Message ID
+              <span class="tooltiptext">Message identifier of the message used by application.</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="timestamp">Timestamp
+              <span class="tooltiptext">Timestamp of the message used by application.</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="type">Type
+              <span class="tooltiptext">Type of the message used by application.</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="user_id">User ID
+              <span class="tooltiptext">User identifier when impersonate another user.</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="app_id">App ID
+              <span class="tooltiptext">Application identifier.</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="correlation_id">Correlation ID
+              <span class="tooltiptext">Correlation identifier for RPC</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="reply_to">Reply To
+              <span class="tooltiptext">Reply to queue for RPC</span>
+            </a>
           </div>
-        </form>
-        <form method="post" id="publishMessage" class="form card cols-6 regular-card">
-          <h3 class="title-m">Publish message</h3>
-          <p class="card-desc">
-            Message will be published to the default exchange with routing key <span class="queue"></span>, routing it to
-            this queue.
-          </p>
+        </label>
+        <label class="mb-4">
+          <span class="field-label">Payload</span>
+          <textarea class="regular-textarea" name="payload"></textarea>
+        </label>
+        <label class="mb-4">
+          <span class="field-label">Payload encoding</span>
+          <select class="dropdown" name="payload_encoding">
+            <option value="string">String</option>
+            <option value="base64">Base64</option>
+          </select>
+        </label>
+        <button type="submit" class="btn btn-outlined">Publish message</button>
+      </form>
+      <section class="card cols-6 regular-card">
+        <form method="post" id="getMessages" class="form">
+          <h3 class="title-m">Get messages</h3>
           <div class="py-4">
             <label class="mb-4">
-              <span class="field-label">Delivery mode</span>
-              <select class="dropdown" name="delivery_mode">
-                <option value="2">Persistent</option>
+              <span class="field-label">Mode</span>
+              <select class="dropdown" name="mode">
+                <option value="get">Get Ack</option>
+                <option value="reject_requeue_true" selected>Reject and Requeue</option>
+                <option value="reject_requeue_false">Reject</option>
               </select>
             </label>
             <label class="mb-4">
-              <span class="field-label">Headers</span>
-              <textarea class="regular-textarea" name="headers" placeholder='{ "key": value }'></textarea>
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Properties</span>
-              <textarea class="regular-textarea" name="properties" placeholder='{ "key": value }'></textarea>
-              <div id="dataTags" class="label">
-                <a class="arg-tooltip" data-tag="content_type" data-value="&quot;application/json&quot;">Content Type
-                  <span class="tooltiptext">Type of the content used by application. Default set to 'application/json'</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="content_encoding">Content Encoding
-                  <span class="tooltiptext">Encoding of the content used by application.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="expiration" data-value="0">Message TTL
-                  <span class="tooltiptext">How long a message published to a queue can live before it is discarded
-                    (milliseconds).</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="priority" data-value="1">Priority
-                  <span class="tooltiptext">Priority of the message in the queue.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="message_id">Message ID
-                  <span class="tooltiptext">Message identifier of the message used by application.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="timestamp">Timestamp
-                  <span class="tooltiptext">Timestamp of the message used by application.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="type">Type
-                  <span class="tooltiptext">Type of the message used by application.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="user_id">User ID
-                  <span class="tooltiptext">User identifier when impersonate another user.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="app_id">App ID
-                  <span class="tooltiptext">Application identifier.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="correlation_id">Correlation ID
-                  <span class="tooltiptext">Correlation identifier for RPC</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="reply_to">Reply To
-                  <span class="tooltiptext">Reply to queue for RPC</span>
-                </a>
-              </div>
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Payload</span>
-              <textarea class="regular-textarea" name="payload"></textarea>
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Payload encoding</span>
-              <select class="dropdown" name="payload_encoding">
-                <option value="string">String</option>
+              <span class="field-label">Encoding</span>
+              <select class="dropdown" name="encoding">
+                <option value="auto">Auto string/base64</option>
                 <option value="base64">Base64</option>
               </select>
             </label>
-            <button type="submit" class="btn btn-outlined">Publish message</button>
-          </div>
-        </form>
-        <section class="card cols-6 regular-card">
-          <form method="post" id="getMessages" class="form">
-            <h3 class="title-m">Get messages</h3>
-            <div class="py-4">
-              <label class="mb-4">
-                <span class="field-label">Mode</span>
-                <select class="dropdown" name="mode">
-                  <option value="get">Get Ack</option>
-                  <option value="reject_requeue_true" selected>Reject and Requeue</option>
-                  <option value="reject_requeue_false">Reject</option>
-                </select>
-              </label>
-              <label class="mb-4">
-                <span class="field-label">Encoding</span>
-                <select class="dropdown" name="encoding">
-                  <option value="auto">Auto string/base64</option>
-                  <option value="base64">Base64</option>
-                </select>
-              </label>
-              <label class="mb-4">
-                <span class="field-label">Messages</span>
-                <input class="regular-text" type="number" name="messages" value=1>
-              </label>
-              <button type="submit" class="btn btn-outlined">Get message(s)</button>
-            </div>
-          </form>
-        </section>
-        <form method="post" id="moveMessages" class="form card cols-6 regular-card">
-          <h3 class="title-m">Move messages</h3>
-          <div class="py-4">
             <label class="mb-4">
-              <span class="field-label">Destination queue</span>
-              <input class="regular-text" type="text" name="shovel-destination" list="queue-list">
-              <datalist id="queue-list">
-              </datalist>
+              <span class="field-label">Messages</span>
+              <input class="regular-text" type="number" name="messages" value=1>
             </label>
-            <button type="submit" class="btn btn-outlined">Move messages</button>
+            <button type="submit" class="btn btn-outlined">Get message(s)</button>
           </div>
         </form>
-        <div id="message-template" class="hide message card">
-          <h4 class="message-header">Message <span class="message-number"></span></h4>
-          <p>The server reported <span class="messages-remaining"></span> messages remaining.</p>
-          <table>
-            <tr>
-              <th>Exchange</th>
-              <td class="message-exchange"></td>
-            </tr>
-            <tr>
-              <th>Routing key</th>
-              <td class="message-routing-key"></td>
-            </tr>
-            <tr>
-              <th>Redelivered</th>
-              <td class="message-redelivered"></td>
-            </tr>
-            <tr>
-              <th>Properties</th>
-              <td>
-                <pre class="message-properties"></pre>
-              </td>
-            </tr>
-            <tr>
-              <th>
-                Payload
-                <div><small><span class="message-size"></span> bytes</small></div>
-                <div><small>Encoding: <span class="message-encoding"></span></small></div>
-              </th>
-              <td>
-                <pre class="message-payload"></pre>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <div id="messages" class="cols-12"></div>
-        <section class="card cols-4 regular-card">
-          <h3 class="title-m">Pause Queue</h3>
-          <form method="put" id="pauseQueue" class="form">
-            <label>
-              <button type="submit" class="btn btn-yellow ml-0">Pause queue</button>
-            </label>
-          </form>
-          <form method="put" id="resumeQueue" class="form hide">
-            <label>
-              <button type="submit" class="btn btn-yellow ml-0">Resume queue</button>
-            </label>
-          </form>
-          <p class="card-desc mt-4">Pausing a queue will stop deliveries to all consumers.</p>
-        </section>
-        <form method="delete" id="purgeQueue" class="form card cols-4 regular-card">
-          <h3 class="title-m">Purge queue</h3>
+      </section>
+      <form method="post" id="moveMessages" class="form card cols-6 regular-card">
+        <h3 class="title-m">Move messages</h3>
+        <div class="py-4">
           <label class="mb-4">
-            <span class="field-label">Number of messages</span>
-            <input class="regular-text" type="number" name="count" min="1" placeholder="All">
+            <span class="field-label">Destination queue</span>
+            <input class="regular-text" type="text" name="shovel-destination" list="queue-list">
+            <datalist id="queue-list">
+            </datalist>
           </label>
+          <button type="submit" class="btn btn-outlined">Move messages</button>
+        </div>
+      </form>
+      <div id="message-template" class="hide message card">
+        <h4 class="message-header">Message <span class="message-number"></span></h4>
+        <p>The server reported <span class="messages-remaining"></span> messages remaining.</p>
+        <table>
+          <tr>
+            <th>Exchange</th>
+            <td class="message-exchange"></td>
+          </tr>
+          <tr>
+            <th>Routing key</th>
+            <td class="message-routing-key"></td>
+          </tr>
+          <tr>
+            <th>Redelivered</th>
+            <td class="message-redelivered"></td>
+          </tr>
+          <tr>
+            <th>Properties</th>
+            <td>
+              <pre class="message-properties"></pre>
+            </td>
+          </tr>
+          <tr>
+            <th>
+              Payload
+              <div><small><span class="message-size"></span> bytes</small></div>
+              <div><small>Encoding: <span class="message-encoding"></span></small></div>
+            </th>
+            <td>
+              <pre class="message-payload"></pre>
+            </td>
+          </tr>
+        </table>
+      </div>
+      <div id="messages" class="cols-12"></div>
+      <section class="card cols-4 regular-card">
+        <h3 class="title-m">Pause Queue</h3>
+        <form method="put" id="pauseQueue" class="form">
           <label>
-            <button type="submit" class="btn btn-red ml-0">Purge queue</button>
+            <button type="submit" class="btn btn-yellow ml-0">Pause queue</button>
           </label>
         </form>
-        <section class="card cols-4 regular-card">
-          <h3 class="title-m">Delete queue</h3>
-          <form method="delete" id="deleteQueue" class="form">
-            <label>
-              <button type="submit" class="btn btn-red ml-0">Delete queue</button>
-            </label>
-          </form>
-        </section>
-      </main>
-      <% render "partials/footer" %>
-    </div>
+        <form method="put" id="resumeQueue" class="form hide">
+          <label>
+            <button type="submit" class="btn btn-yellow ml-0">Resume queue</button>
+          </label>
+        </form>
+        <p class="card-desc mt-4">Pausing a queue will stop deliveries to all consumers.</p>
+      </section>
+      <form method="delete" id="purgeQueue" class="form card cols-4 regular-card">
+        <h3 class="title-m">Purge queue</h3>
+        <label class="mb-4">
+          <span class="field-label">Number of messages</span>
+          <input class="regular-text" type="number" name="count" min="1" placeholder="All">
+        </label>
+        <label>
+          <button type="submit" class="btn btn-red ml-0">Purge queue</button>
+        </label>
+      </form>
+      <section class="card cols-4 regular-card">
+        <h3 class="title-m">Delete queue</h3>
+        <form method="delete" id="deleteQueue" class="form">
+          <label>
+            <button type="submit" class="btn btn-red ml-0">Delete queue</button>
+          </label>
+        </form>
+      </section>
+    </main>
+    <% render "partials/footer" %>
   </body>
 </html>
diff --git a/views/queues.ecr b/views/queues.ecr
index 69d226aae2..5313cc0fa6 100644
--- a/views/queues.ecr
+++ b/views/queues.ecr
@@ -7,123 +7,119 @@
   </head>
   <body>
     <% render "partials/header" %>
-    <div class="grid-content">
-      <main>
-        <div id="breadcrumbs">
-            <h2 class="page-title"><%=pagename%><div class="tiny-badge" id="pagename-label"></div></h2>
+    <main class="main-grid">
+      <div id="breadcrumbs">
+          <h2 class="page-title"><%=pagename%><div class="tiny-badge" id="pagename-label"></div></h2>
+      </div>
+      <section class="card">
+        <div id="multiselect-controls" class="popup-card hide">
+          <a class="popup-close" href="#">&#x2715</a>
+          <h4 class="popup-header">Queue actions (<em><span id="multi-queue-count">0</span> selected</em>)</h4>
+          <button data-action="delete" class="btn-danger">Delete</button>
+          <button data-action="purge" class="btn-danger">Purge</button>
         </div>
-        <section class="card regular-card">
-          <div id="multiselect-controls" class="popup-card hide">
-            <a class="popup-close" href="#">&#x2715</a>
-            <h4 class="popup-header">Queue actions (<em><span id="multi-queue-count">0</span> selected</em>)</h4>
-            <button data-action="delete" class="btn-danger">Delete</button>
-            <button data-action="purge" class="btn-danger">Purge</button>
-          </div>
 
-          <div class="table-wrapper">
-            <div id="table-error"></div>
-            <table id="table" class="table">
-              <thead>
-                <tr>
-                  <th><input type="checkbox" id="multi-check-all"></th>
-                  <th data-sort-key="vhost" class="left">Virtual host</th>
-                  <th data-sort-key="name" class="left">Name</th>
-                  <th>Features</th>
-                  <th data-sort-key="policy">Policy</th>
-                  <th data-sort-key="consumers">Consumers</th>
-                  <th data-sort-key="state">State</th>
-                  <th data-sort-key="ready">Ready</th>
-                  <th data-sort-key="unacked">Unacked</th>
-                  <th data-sort-key="messages">Total</th>
-                  <th data-sort-key="message_stats.publish_details.rate">Publish rate</th>
-                  <th data-sort-key="message_stats.deliver_details.rate">Deliver rate</th>
-                  <th data-sort-key="message_stats.redeliver_details.rate">Redeliver rate</th>
-                  <th data-sort-key="message_stats.ack_details.rate">Ack rate</th>
-                </tr>
-              </thead>
-              <tbody></tbody>
-            </table>
-          </div>
-        </section>
-        <form method="put" id="declare" class="form card regular-card">
-          <h3 class="title-m">Add queue</h3>
-          <div class="py-4">
-            <label class="mb-4">
-              <span class="field-label">Virtual host</span>
-              <select class="dropdown" name="vhost" required></select>
-            </label>
-            <label class="mb-4">
-              <span class="field-label">Name</span>
-              <input class="regular-text" type="text" name="name" required>
-            </label>
-            <label>
-              <span>
-              <a class="prop-tooltip" data-tag="alternate-exchange">Durable<span class="tooltip-icon">?</span>
-              <span class="prop-tooltiptext">"Durable" queues persist even when the server restarts,
-              ensuring their availability and preventing data loss.</span>
-              </a>
-              </span>
-              <input type="checkbox" name="durable" value="1" checked>
-            </label>
-            <label>
-              <span>
-              <a class="prop-tooltip" data-tag="alternate-exchange">Auto-delete<span class="tooltip-icon">?</span>
-              <span class="prop-tooltiptext">"Auto-delete" queues are automatically removed when the
-              last consumer disconnects, freeing up system resources.</span>
-              </a>
-              </span>
-              <input type="checkbox" name="auto_delete" value="1">
-            </label>
-            <label class="mt-4 mb-4">
-              <span class="field-label">Arguments</span>
-              <textarea class="regular-textarea" name="arguments" placeholder='{ "key": value }'></textarea>
-              <div id="dataTags" class="label">
-                <a class="arg-tooltip" data-tag="x-expires" data-value="0">Auto Expire
-                  <span class="tooltiptext">How long a queue can be unused for before it is automatically deleted
-                    (milliseconds).</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="x-max-length" data-value="0">Max Length
-                  <span class="tooltiptext">How many (ready) messages a queue can contain before it starts to drop them from
-                    its head.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="x-message-ttl" data-value="0">Message TTL
-                  <span class="tooltiptext">How long a message published to a queue can live before it is discarded
-                    (milliseconds).</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="x-delivery-limit" data-value="0">Delivery limit
-                  <span class="tooltiptext">The number of times a message can be redelivered before dropped or
-                    dead-lettered</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="x-overflow">Overflow behaviour
-                  <span class="tooltiptext">This determines what happens to messages when the maximum length of a queue is
-                    reached. Valid value are reject-publish.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="x-dead-letter-exchange">Dead letter exchange
-                  <span class="tooltiptext">Optional name of an exchange to which messages will be republished if they are
-                    rejected or expire.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="x-dead-letter-routing-key">Dead letter routing key
-                  <span class="tooltiptext">Optional replacement routing key to use when a message is dead-lettered. If not
-                    set, the message's original routing key will be used.</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="x-max-priority" data-value="0">Max Priority
-                  <span class="tooltiptext">Make the queue a priority queue, with a fixed level of different priorities (max 255)</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="x-queue-type" data-value="stream">Stream Queue
-                  <span class="tooltiptext">Make the queue a stream queue. It has to be durable and can't be auto-delete</span>
-                </a> |
-                <a class="arg-tooltip" data-tag="x-max-age" data-value="1M">Max age
-                  <span class="tooltiptext">Stream queue segments will be deleted when all messages in the segmented is older than this.
-                    Valid units are Y(ear), M(onth), D(ays), h(ours), m(inutes), s(seconds).
-                    Segments are only deleted when new messages are published to the stream queue.</span>
-                </a>
-              </div>
-            </label>
-            <button type="submit" class="btn btn-green">Add queue</button>
+        <div class="table-wrapper">
+          <div id="table-error"></div>
+          <table id="table" class="table">
+            <thead>
+              <tr>
+                <th><input type="checkbox" id="multi-check-all"></th>
+                <th data-sort-key="vhost" class="left">Virtual host</th>
+                <th data-sort-key="name" class="left">Name</th>
+                <th>Features</th>
+                <th data-sort-key="policy">Policy</th>
+                <th data-sort-key="consumers">Consumers</th>
+                <th data-sort-key="state">State</th>
+                <th data-sort-key="ready">Ready</th>
+                <th data-sort-key="unacked">Unacked</th>
+                <th data-sort-key="messages">Total</th>
+                <th data-sort-key="message_stats.publish_details.rate">Publish rate</th>
+                <th data-sort-key="message_stats.deliver_details.rate">Deliver rate</th>
+                <th data-sort-key="message_stats.redeliver_details.rate">Redeliver rate</th>
+                <th data-sort-key="message_stats.ack_details.rate">Ack rate</th>
+              </tr>
+            </thead>
+            <tbody></tbody>
+          </table>
+        </div>
+      </section>
+      <form method="put" id="declare" class="form card">
+        <h3>Add queue</h3>
+        <label>
+          <span>Virtual host</span>
+          <select class="dropdown" name="vhost" required></select>
+        </label>
+        <label>
+          <span>Name</span>
+          <input type="text" name="name" required>
+        </label>
+        <label>
+          <span>
+          <a class="prop-tooltip" data-tag="alternate-exchange">Durable<span class="tooltip-icon">?</span>
+          <span class="prop-tooltiptext">"Durable" queues persist even when the server restarts,
+          ensuring their availability and preventing data loss.</span>
+          </a>
+          </span>
+          <input type="checkbox" name="durable" value="1" checked>
+        </label>
+        <label>
+          <span>
+          <a class="prop-tooltip" data-tag="alternate-exchange">Auto-delete<span class="tooltip-icon">?</span>
+          <span class="prop-tooltiptext">"Auto-delete" queues are automatically removed when the
+          last consumer disconnects, freeing up system resources.</span>
+          </a>
+          </span>
+          <input type="checkbox" name="auto_delete" value="1">
+        </label>
+        <label>
+          <span>Arguments</span>
+          <textarea name="arguments" placeholder='{ "key": value }'></textarea>
+          <div id="dataTags" class="label">
+            <a class="arg-tooltip" data-tag="x-expires" data-value="0">Auto Expire
+              <span class="tooltiptext">How long a queue can be unused for before it is automatically deleted
+                (milliseconds).</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="x-max-length" data-value="0">Max Length
+              <span class="tooltiptext">How many (ready) messages a queue can contain before it starts to drop them from
+                its head.</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="x-message-ttl" data-value="0">Message TTL
+              <span class="tooltiptext">How long a message published to a queue can live before it is discarded
+                (milliseconds).</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="x-delivery-limit" data-value="0">Delivery limit
+              <span class="tooltiptext">The number of times a message can be redelivered before dropped or
+                dead-lettered</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="x-overflow">Overflow behaviour
+              <span class="tooltiptext">This determines what happens to messages when the maximum length of a queue is
+                reached. Valid value are reject-publish.</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="x-dead-letter-exchange">Dead letter exchange
+              <span class="tooltiptext">Optional name of an exchange to which messages will be republished if they are
+                rejected or expire.</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="x-dead-letter-routing-key">Dead letter routing key
+              <span class="tooltiptext">Optional replacement routing key to use when a message is dead-lettered. If not
+                set, the message's original routing key will be used.</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="x-max-priority" data-value="0">Max Priority
+              <span class="tooltiptext">Make the queue a priority queue, with a fixed level of different priorities (max 255)</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="x-queue-type" data-value="stream">Stream Queue
+              <span class="tooltiptext">Make the queue a stream queue. It has to be durable and can't be auto-delete</span>
+            </a> |
+            <a class="arg-tooltip" data-tag="x-max-age" data-value="1M">Max age
+              <span class="tooltiptext">Stream queue segments will be deleted when all messages in the segmented is older than this.
+                Valid units are Y(ear), M(onth), D(ays), h(ours), m(inutes), s(seconds).
+                Segments are only deleted when new messages are published to the stream queue.</span>
+            </a>
           </div>
-        </form>
-      </main>
-      <% render "partials/footer" %>
-    </div>
+        </label>
+        <button type="submit" class="btn btn-green">Add queue</button>
+      </form>
+    </main>
+    <% render "partials/footer" %>
   </body>
 </html>