diff --git a/web/static/cluster-tasks.mjs b/web/static/cluster-tasks.mjs
index e45b93084..6d9b81919 100644
--- a/web/static/cluster-tasks.mjs
+++ b/web/static/cluster-tasks.mjs
@@ -1,33 +1,48 @@
-import { LitElement, html, css } from 'https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js';
+import {LitElement, html, css} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js';
 import RPCCall from '/lib/jsonrpc.mjs';
 
-customElements.define('cluster-tasks', class ClusterTasks extends LitElement {
-    static get properties() {
-        return {
-            data: { type: Array },
-            showBackgroundTasks: { type: Boolean },
-        };
-    }
+class ClusterTasks extends LitElement {
+  static get properties() {
+    return {
+      data: { type: Array },
+      showBackgroundTasks: { type: Boolean },
+    };
+  }
 
-    constructor() {
-        super();
-        this.data = [];
-        this.showBackgroundTasks = false;
-        this.loadData();
-    }
+  static get styles() {
+    return css`
+      th, td {
+        &:nth-child(1) { width: 8ch; }
+        &:nth-child(2) { width: 16ch; }
+        &:nth-child(3) { width: 10ch; }
+        &:nth-child(4) { width: 10ch; }
+        &:nth-child(5) { min-width: 20ch; }
+        
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    `
+  }
 
-    async loadData() {
-        this.data = (await RPCCall('ClusterTaskSummary')) || [];
-        setTimeout(() => this.loadData(), 1000);
-        this.requestUpdate();
-    }
+  constructor() {
+    super();
+    this.data = [];
+    this.showBackgroundTasks = false;
+    this.loadData();
+  }
 
-    toggleShowBackgroundTasks(e) {
-        this.showBackgroundTasks = e.target.checked;
-    }
+  async loadData() {
+    this.data = (await RPCCall('ClusterTaskSummary')) || [];
+    setTimeout(() => this.loadData(), 1000);
+    this.requestUpdate();
+  }
 
-    render() {
-        return html`
+  toggleShowBackgroundTasks(e) {
+    this.showBackgroundTasks = e.target.checked;
+  }
+
+  render() {
+    return html`
       <link
         href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
         rel="stylesheet"
@@ -40,18 +55,18 @@ customElements.define('cluster-tasks', class ClusterTasks extends LitElement {
         onload="document.body.style.visibility = 'initial'"
       />
 
-      <!-- Toggle for showing background tasks -->
-      <label>
-        <input
-          type="checkbox"
-          @change=${this.toggleShowBackgroundTasks}
-          ?checked=${this.showBackgroundTasks}
-        />
-        Show background tasks
-      </label>
-
-      <table class="table table-dark">
-        <thead>
+        <!-- Toggle for showing background tasks -->
+        <label>
+          <input
+            type="checkbox"
+            @change=${this.toggleShowBackgroundTasks}
+            ?checked=${this.showBackgroundTasks}
+          />
+          Show background tasks
+        </label>
+      
+        <table class="table table-dark">
+          <thead>
           <tr>
             <th>SpID</th>
             <th style="min-width: 128px">Task</th>
@@ -62,10 +77,7 @@ customElements.define('cluster-tasks', class ClusterTasks extends LitElement {
         </thead>
         <tbody>
           ${this.data
-            .filter(
-                (entry) =>
-                    this.showBackgroundTasks || !entry.Name.startsWith('bg:')
-            )
+            .filter((entry) =>this.showBackgroundTasks || !entry.Name.startsWith('bg:'))
             .map(
                 (entry) => html`
                 <tr>
@@ -75,9 +87,7 @@ customElements.define('cluster-tasks', class ClusterTasks extends LitElement {
                   <td>${entry.SincePostedStr}</td>
                   <td>
                     ${entry.OwnerID
-                    ? html`<a href="/pages/node_info/?id=${entry.OwnerID}"
-                          >${entry.Owner}</a
-                        >`
+                    ? html`<a href="/pages/node_info/?id=${entry.OwnerID}">${entry.Owner}</a>`
                     : ''}
                   </td>
                 </tr>
@@ -86,5 +96,7 @@ customElements.define('cluster-tasks', class ClusterTasks extends LitElement {
         </tbody>
       </table>
     `;
-    }
-});
+  }
+}
+
+customElements.define('cluster-tasks', ClusterTasks);
diff --git a/web/static/index.html b/web/static/index.html
index f2fbe6e5e..7f4273e84 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -17,21 +17,24 @@
     <script type="module" src="pipeline-porep.mjs"></script>
     <script type="module" src="actor-summary.mjs"></script>
     <script type="module" src="/ux/curio-ux.mjs"></script>
+    <script type="module" src="/ux/components/Drawer.mjs"></script>
     <style>
-        .logo {
-            display: inline-block;
+        .drawer {
+          display: block;
         }
 
-        .dash-tile {
-            display: flex;
-            flex-direction: column;
-            padding: 0.75rem;
-            background: #3f3f3f;
+        .wide-content {
+          display: none;
+        }
+
+        @media (min-width: 2210px) {
+          .drawer {
+            display: none;
+          }
 
-            & b {
-                padding-bottom: 0.5rem;
-                color: deeppink;
-            }
+          .wide-content {
+            display: block;
+          }
         }
     </style>
 </head>
@@ -109,8 +112,15 @@ <h2>24h task counts</h2>
             <div class="row">
                 <div class="col-md-auto" style="max-width: 1000px">
                     <div class="info-block">
-                        <h2>Cluster Tasks</h2>
-                        <cluster-tasks></cluster-tasks>
+                        <div class="wide-content">
+                            <h2>Cluster Tasks</h2>
+                            <cluster-tasks></cluster-tasks>
+                        </div>
+
+                        <ui-drawer class="drawer" label="Cluster Tasks">
+                            <h2 slot="title">Cluster Tasks</h2>
+                            <cluster-tasks slot="content"></cluster-tasks>
+                        </ui-drawer>
                     </div>
                 </div>
                 <div class="col-md-auto">
@@ -120,4 +130,4 @@ <h2>Cluster Tasks</h2>
     </curio-ux>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/web/static/ux/components/Drawer.mjs b/web/static/ux/components/Drawer.mjs
new file mode 100644
index 000000000..ac00a0a92
--- /dev/null
+++ b/web/static/ux/components/Drawer.mjs
@@ -0,0 +1,217 @@
+import { html, css } from 'https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js';
+import { StyledLitElement } from '/ux/StyledLitElement.mjs';
+
+/**
+ * A Drawer component that displays content in a scrollable panel.
+ *
+ * @element ui-drawer
+ *
+ * @property {String} anchor - The side from which the drawer appears. Valid values: `left`, `right`, `top`, `bottom`. Default is `right`.
+ * @property {Boolean} isOpen - Indicates whether the drawer is open. Default is `true`.
+ * @property {String} label - The label for the drawer's open button.
+ * @property {Function} onClose - Callback function invoked when the drawer is closed.
+ *
+ * @slot title - Content to be placed in the drawer's heading.
+ * @slot content - Main content of the drawer.
+ *
+ * @example
+ * <ui-drawer label="Menu">
+ *   <h2 slot="title">Menu</h2>
+ *   <div slot="content">
+ *     ...
+ *   </div>
+ * </ui-drawer>
+ */
+class Drawer extends StyledLitElement {
+  static properties = {
+    anchor: { type: String, reflect: true },
+    isOpen: { type: Boolean, reflect: true },
+    label: { type: String },
+    onClose: { type: Function, attribute: false },
+  };
+
+  constructor() {
+    super();
+    this.anchor = 'right';
+    this.isOpen = true;
+    this.label = 'Drawer';
+    this.onClose = null;
+    this.dialog = null;
+  }
+
+  set anchor(value) {
+    const validAnchors = ['left', 'right', 'top', 'bottom'];
+    this._anchor = validAnchors.includes(value) ? value : 'right';
+  }
+
+  get anchor() {
+    return this._anchor;
+  }
+
+  firstUpdated() {
+    this.dialog = this.shadowRoot.querySelector('dialog');
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('isOpen') && this.dialog) {
+      if (this.isOpen) {
+        this.dialog.show();
+      } else {
+        this.dialog.close();
+      }
+    }
+  }
+
+  handleClose(event) {
+    const reason = event.type === 'cancel' ? 'escapeKeyDown' : 'backdropClick';
+    this.isOpen = false;
+
+    if (this.onClose) {
+      this.onClose(event, reason);
+    }
+  }
+
+  handleToggle() {
+    this.isOpen = !this.isOpen;
+  }
+
+  render() {
+    return html`
+      <div>
+        <button class="open-btn" @click=${this.handleToggle}>${this.label}</button>
+        <dialog
+          class="dialog"
+          aria-label=${this.label}
+          anchor=${this.anchor}
+          @close=${this.handleClose}
+          @cancel=${this.handleClose}
+        >
+          <div class="dialog-heading">
+            <slot name="title"></slot>
+            <button class="close-btn" @click=${this.handleClose} aria-label="Close">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
+                <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/>
+              </svg>
+            </button>
+          </div>
+          <div>
+            <slot name="content"></slot>
+          </div>
+        </dialog>
+      </div>
+    `;
+  }
+}
+
+Drawer.styles = [
+  css`
+    :host([isOpen]) .open-btn {
+      visibility: hidden;
+    }
+    
+    .open-btn {
+      position: fixed;
+      top: 0;
+      right: 0;
+      transform-origin: bottom right;
+      transform: rotate(-90deg);
+      color: var(--color-text-primary);
+      background-color: var(--color-secondary-light);
+      border-radius: 8px 8px 0 0;
+      padding: 0.75rem 1.2rem;
+      font-size: 0.9rem;
+
+      &:hover, &:active {
+        cursor: pointer;
+        background-color: var(--color-secondary-main);
+      }
+    }
+    
+    dialog {
+      position: fixed;
+      padding: 1rem;
+      border: 0;
+      background-color: var(--color-fg);
+      color: var(--color-text-primary);
+      overflow-y: auto;
+
+      &[anchor="right"] {
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: auto;
+        width: 40rem;
+        min-height: 100vh;
+        max-height: 100vh;
+        box-shadow: -8px 0 20px 4px var(--color-shadow-main);
+      }
+      
+      &[anchor="left"] {
+        top: 0;
+        bottom: 0;
+        right: auto;
+        left: 0;
+        width: 40rem;
+        min-height: 100vh;
+        max-height: 100vh;
+        box-shadow: 8px 0 20px 4px var(--color-shadow-main);
+      }
+
+      &[anchor="top"] {
+        top: 0;
+        bottom: auto;
+        right: 0;
+        left: 0;
+        min-width: 100vw;
+        max-width: 100vw;
+        min-height: 10rem;
+        max-height: 50vh;
+        box-shadow: 0 8px 20px 4px var(--color-shadow-main);
+        padding: 1rem 2rem;
+      }
+      
+      &[anchor="bottom"] {
+        top: auto;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        min-width: 100vw;
+        max-width: 100vw;
+        min-height: 10rem;
+        max-height: 50vh;
+        box-shadow: 0 -8px 20px 4px var(--color-shadow-main);
+        padding: 1rem 2rem;
+      }
+
+      .dialog-heading {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        max-width: inherit;
+
+        ::slotted(*) {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .close-btn {
+          width: 1.5rem;
+          height: 1.5rem;
+          margin-left: 1.5rem;
+          text-align: center;
+          background: transparent;
+          color: var(--color-text-primary);
+          
+          &:hover, &:active {
+            cursor: pointer;
+            color: var(--color-text-primary);
+            opacity: 0.8;
+          }
+        }
+      }
+    }
+  `
+]
+
+customElements.define('ui-drawer', Drawer);
diff --git a/web/static/ux/css-reset.js b/web/static/ux/css-reset.js
index f58e1e057..6e322d9e8 100644
--- a/web/static/ux/css-reset.js
+++ b/web/static/ux/css-reset.js
@@ -8,6 +8,7 @@ export default css `
     * {
         margin: 0;
         padding: 0;
+        font-family: 'JetBrains Mono', monospace;
     }
 
     ul, ol {
@@ -18,4 +19,13 @@ export default css `
     a {
         text-decoration: none;
     }
+
+    button {
+      all: unset;
+      display: inline-block;
+    }
+  
+    button:focus {
+      outline: revert;
+    }
 `;
diff --git a/web/static/ux/main.css b/web/static/ux/main.css
index 2938dbe5f..ca3faaf83 100644
--- a/web/static/ux/main.css
+++ b/web/static/ux/main.css
@@ -19,6 +19,12 @@
     --color-text-primary: #FFF;
     --color-text-secondary: #171717;
 
+    /* Areas */
+    --color-fg: #2A2A2E;
+    --color-bg: #1D1D21;
+
+    --color-shadow-main: #1e1d1f;
+
     /* Forms */
     --color-form-default: #808080; /* buttons, field outlines */
     --color-form-default-pressed: #A1A1A1;