diff --git a/internal/relui/static/images/chevron_right_black_24dp.svg b/internal/relui/static/images/chevron_right_black_24dp.svg
new file mode 100644
index 0000000..b0428e2
--- /dev/null
+++ b/internal/relui/static/images/chevron_right_black_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>
\ No newline at end of file
diff --git a/internal/relui/static/images/expand_more_black_24dp.svg b/internal/relui/static/images/expand_more_black_24dp.svg
new file mode 100644
index 0000000..b615405
--- /dev/null
+++ b/internal/relui/static/images/expand_more_black_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M24 24H0V0h24v24z" fill="none" opacity=".87"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/></svg>
\ No newline at end of file
diff --git a/internal/relui/static/site.js b/internal/relui/static/site.js
new file mode 100644
index 0000000..0154a0e
--- /dev/null
+++ b/internal/relui/static/site.js
@@ -0,0 +1,19 @@
+/*
+  Copyright 2022 The Go Authors. All rights reserved.
+  Use of this source code is governed by a BSD-style
+  license that can be found in the LICENSE file.
+*/
+
+;(function () {
+  const registerTaskListExpandListeners = (selector) => {
+    document.querySelectorAll(selector).forEach((element) => {
+      element.addEventListener("click", (e) => {
+        e.stopPropagation()
+        element.classList.toggle("TaskList-expanded")
+        element.nextElementSibling.classList.toggle("TaskList-expanded")
+      })
+    })
+  }
+
+  registerTaskListExpandListeners(".TaskList-expandableItem")
+})()
diff --git a/internal/relui/static/styles.css b/internal/relui/static/styles.css
index 0f2c51c..cb4f8ec 100644
--- a/internal/relui/static/styles.css
+++ b/internal/relui/static/styles.css
@@ -100,57 +100,67 @@
 .TaskList {
   align-items: center;
   border-bottom: 0.0625rem solid #d6d6d6;
-  display: grid;
-  grid-auto-rows: minmax(1.5rem, auto);
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  border-collapse: collapse;
   margin-bottom: 1rem;
+  width: 100%;
+}
+.TaskList-itemHeaderCol {
+  padding: 0.3125rem 0;
 }
 .TaskList-itemCol {
   border-top: 0.0625rem solid #d6d6d6;
   overflow: hidden;
-  padding: 0.25rem 0;
+  padding: 0.5rem 0 0.5rem 1px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .TaskList-itemSummary {
   align-items: center;
   cursor: pointer;
-  display: contents;
   font-size: 0.8125rem;
   padding: 0.5rem;
 }
 .TaskList-itemSummary:hover {
   background-color: #fafafa;
 }
-.TaskList-itemSummary:hover > .TaskList-itemCol {
-  background-color: #fafafa;
+.TaskList-itemExpand {
+  padding: 0.25rem 0 0 0;
+  text-align: center;
+  width: 2rem;
 }
-.TaskList-itemDetails {
-  display: contents;
+.TaskList-itemExpandControl {
+  height: 1.5rem;
+  width: 1.5rem;
 }
-.TaskList-itemDetails .TaskList-itemStatus::before {
-  content: "▸";
+.TaskList-expanded .TaskList-itemExpandClosed {
+  display: none;
 }
-.TaskList-itemDetails[open] .TaskList-itemStatus::before {
-  content: "▾";
+.TaskList-ItemExpandOpened {
+  display: none;
+}
+.TaskList-expanded .TaskList-ItemExpandOpened {
+  display: inline;
+}
+.TaskList-itemLogsRow {
+  display: none;
+}
+.TaskList-expanded.TaskList-itemLogsRow {
+  display: table-row;
 }
 .TaskList-itemLogs {
   background-color: #f5f5f5;
   box-shadow: inset 0 6px 6px -8px #888;
   font-size: 0.8125rem;
-  grid-column: 1/6;
   margin: 0;
   padding: 1rem 0;
 }
 .TaskList-itemLogLine {
-  grid-row: 6;
   padding: 0 1rem;
 }
 .TaskList-itemLogLine:nth-child(even) {
   background-color: #fafafa;
 }
 .TaskList-item {
-  display: contents;
 }
 .TaskList-itemHeader {
   align-items: center;
diff --git a/internal/relui/templates/home.html b/internal/relui/templates/home.html
index ebd946d..f9097b6 100644
--- a/internal/relui/templates/home.html
+++ b/internal/relui/templates/home.html
@@ -29,47 +29,58 @@
             </tbody>
           </table>
           <h4 class="WorkflowList-sectionTitle">Tasks</h4>
-          <ul class="TaskList">
-            <li class="TaskList-item TaskList-itemHeader">
-              <span class="TaskList-itemStatus">Status</span>
-              <span class="TaskList-itemName">Name</span>
-              <span class="TaskList-itemCreated">Started</span>
-              <span class="TaskList-itemUpdated">Updated</span>
-              <span class="TaskList-itemResult">Result</span>
-            </li>
+          <table class="TaskList">
+            <thead>
+              <tr class="TaskList-item TaskList-itemHeader">
+                <th class="TaskList-itemHeaderCol TaskList-itemExpand"></th>
+                <th class="TaskList-itemHeaderCol TaskList-itemStatus">Status</th>
+                <th class="TaskList-itemHeaderCol TaskList-itemName">Name</th>
+                <th class="TaskList-itemHeaderCol TaskList-itemCreated">Started</th>
+                <th class="TaskList-itemHeaderCol TaskList-itemUpdated">Updated</th>
+                <th class="TaskList-itemHeaderCol TaskList-itemResult">Result</th>
+              </tr>
+            </thead>
             {{$tasks := index $.WorkflowTasks $workflow.ID}}
             {{range $task := $tasks}}
-              <li class="TaskList-item">
-                <details class="TaskList-itemDetails">
-                  <summary class="TaskList-itemSummary">
-                    <span class="TaskList-itemCol TaskList-itemStatus">
-                      {{$task.Finished}}
+              <tbody>
+                <tr class="TaskList-item TaskList-itemSummary TaskList-expandableItem">
+                  <td class="TaskList-itemCol TaskList-itemExpand">
+                    <span class="TaskList-itemExpandClosed">
+                      <img class="TaskList-itemExpandControl" alt="unfold more" src="{{baseLink "/static/images/chevron_right_black_24dp.svg"}}" />
                     </span>
-                    <span class="TaskList-itemCol TaskList-itemName">
-                      {{$task.Name}}
+                    <span class="TaskList-ItemExpandOpened">
+                      <img class="TaskList-itemExpandControl" alt="unfold less" src="{{baseLink "/static/images/expand_more_black_24dp.svg"}}" />
                     </span>
-                    <span class="TaskList-itemCol TaskList-itemCreated">
-                      {{$task.CreatedAt.UTC.Format "Mon Jan _2 2006 15:04:05"}}
-                    </span>
-                    <span class="TaskList-itemCol TaskList-itemUpdated">
-                      {{$task.UpdatedAt.UTC.Format "Mon Jan _2 2006 15:04:05"}}
-                    </span>
-                    <span class="TaskList-itemCol TaskList-itemResult">
-                      {{$task.Result}}
-                    </span>
-                  </summary>
-                  <div class="TaskList-itemLogs">
+                  </td>
+                  <td class="TaskList-itemCol TaskList-itemStatus">
+                    {{$task.Finished}}
+                  </td>
+                  <td class="TaskList-itemCol TaskList-itemName">
+                    {{$task.Name}}
+                  </td>
+                  <td class="TaskList-itemCol TaskList-itemCreated">
+                    {{$task.CreatedAt.UTC.Format "Mon Jan _2 2006 15:04:05"}}
+                  </td>
+                  <td class="TaskList-itemCol TaskList-itemUpdated">
+                    {{$task.UpdatedAt.UTC.Format "Mon Jan _2 2006 15:04:05"}}
+                  </td>
+                  <td class="TaskList-itemCol TaskList-itemResult">
+                    {{$task.Result}}
+                  </td>
+                </tr>
+                <tr class="TaskList-itemLogsRow">
+                  <td class="TaskList-itemLogs" colspan="6">
                     {{range $log := $.Logs $workflow.ID  $task.Name}}
                       <div class="TaskList-itemLogLine">
                         {{$log.CreatedAt.UTC.Format "2006/01/02 15:04:05"}}
                         {{$log.Body}}
                       </div>
                     {{end}}
-                  </div>
-                </details>
-              </li>
+                  </td>
+                </tr>
+              </tbody>
             {{end}}
-          </ul>
+          </table>
         </li>
       {{end}}
     </ul>
diff --git a/internal/relui/templates/layout.html b/internal/relui/templates/layout.html
index 69f6ec1..f21bbc6 100644
--- a/internal/relui/templates/layout.html
+++ b/internal/relui/templates/layout.html
@@ -8,6 +8,7 @@
   <title>Go Releases</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="stylesheet" href="{{baseLink "/static/styles.css"}}" />
+  <script async defer src="{{baseLink "/static/site.js"}}"></script>
   <body class="Site">
     <header class="Site-header">
       <div class="Header">