diff --git a/client/styles/task-runner.css b/client/styles/task-runner.css
new file mode 100644
index 00000000000..973035f9527
--- /dev/null
+++ b/client/styles/task-runner.css
@@ -0,0 +1,51 @@
+/* This file is manually maintained, it is not generated from SCSS sources */
+
+.task__panel {
+  margin: 15px;
+}
+
+.task__list {
+  border-left: 1px solid #000000;
+  border-top: 1px solid #000000;
+  display: grid;
+  grid-template-columns: 1fr;
+  margin-top: 15px;
+}
+
+@media (min-width:992px) {
+  .task__list {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.task__item {
+  border-bottom: 1px solid #000000;
+  border-right: 1px solid #000000;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 15px;
+  transition: background-color 0.2s;
+}
+
+.task__item:hover {
+  background-color: #ffffff;
+}
+
+.task__item .description {
+  margin-bottom: 25px;
+}
+
+.task__button {
+  border: 1px solid #000000;
+  border-radius: 5px;
+  background-color: #f6f7f8;
+  display: inline-block;
+  padding: 10px 15px;
+  text-decoration: none;
+  transition: background-color 0.2s;
+}
+
+.task__button--warning:hover {
+  background-color: #ffebeb;
+}
diff --git a/src/Dev/TaskRunner.php b/src/Dev/TaskRunner.php
index cd38ff56517..0bd75ff3462 100644
--- a/src/Dev/TaskRunner.php
+++ b/src/Dev/TaskRunner.php
@@ -2,15 +2,19 @@
 
 namespace SilverStripe\Dev;
 
+use ReflectionClass;
 use SilverStripe\Control\Controller;
 use SilverStripe\Control\Director;
 use SilverStripe\Control\HTTPRequest;
 use SilverStripe\Core\ClassInfo;
 use SilverStripe\Core\Convert;
 use SilverStripe\Core\Injector\Injector;
+use SilverStripe\Core\Manifest\ModuleResourceLoader;
+use SilverStripe\ORM\ArrayList;
 use SilverStripe\Security\Permission;
 use SilverStripe\Security\Security;
-use ReflectionClass;
+use SilverStripe\View\ArrayData;
+use SilverStripe\View\ViewableData;
 
 class TaskRunner extends Controller
 {
@@ -44,33 +48,48 @@ protected function init()
 
     public function index()
     {
+        $baseUrl = Director::absoluteBaseURL();
         $tasks = $this->getTasks();
 
-        // Web mode
-        if (!Director::is_cli()) {
-            $renderer = new DebugView();
-            echo $renderer->renderHeader();
-            echo $renderer->renderInfo("SilverStripe Development Tools: Tasks", Director::absoluteBaseURL());
-            $base = Director::absoluteBaseURL();
+        if (Director::is_cli()) {
+            // CLI mode
+            $output = 'SILVERSTRIPE DEVELOPMENT TOOLS: Tasks' . PHP_EOL . '--------------------------' . PHP_EOL . PHP_EOL;
 
-            echo "<div class=\"options\">";
-            echo "<ul>";
             foreach ($tasks as $task) {
-                echo "<li><p>";
-                echo "<a href=\"{$base}dev/tasks/" . $task['segment'] . "\">" . $task['title'] . "</a><br />";
-                echo "<span class=\"description\">" . $task['description'] . "</span>";
-                echo "</p></li>\n";
+                $output .= sprintf(' * %s: sake dev/tasks/%s%s', $task['title'], $task['segment'], PHP_EOL);
             }
-            echo "</ul></div>";
 
-            echo $renderer->renderFooter();
-        // CLI mode
-        } else {
-            echo "SILVERSTRIPE DEVELOPMENT TOOLS: Tasks\n--------------------------\n\n";
-            foreach ($tasks as $task) {
-                echo " * $task[title]: sake dev/tasks/" . $task['segment'] . "\n";
-            }
+            return $output;
         }
+
+        $list = ArrayList::create();
+
+        foreach ($tasks as $task) {
+            $list->push(ArrayData::create([
+                'TaskLink' => $baseUrl . 'dev/tasks/' . $task['segment'],
+                'Title' => $task['title'],
+                'Description' => $task['description'],
+            ]));
+        }
+
+        $renderer = DebugView::create();
+        $header = $renderer->renderHeader();
+        $cssPath = ModuleResourceLoader::singleton()->resolveURL(
+            'silverstripe/framework:client/styles/task-runner.css'
+        );
+
+        // inject task runner CSS into the heaader
+        $cssInclude = sprintf('<link rel="stylesheet" type="text/css" href="%s" />', $cssPath);
+        $header = str_replace('</head>', $cssInclude . '</head>', $header);
+
+        $data = [
+            'Tasks' => $list,
+            'Header' => $header,
+            'Footer' => $renderer->renderFooter(),
+            'Info' => $renderer->renderInfo('SilverStripe Development Tools: Tasks (QueuedJobs version)', $baseUrl),
+        ];
+
+        return ViewableData::create()->renderWith(static::class, $data);
     }
 
     /**
diff --git a/templates/SilverStripe/Dev/TaskRunner.ss b/templates/SilverStripe/Dev/TaskRunner.ss
new file mode 100644
index 00000000000..188b879ba6e
--- /dev/null
+++ b/templates/SilverStripe/Dev/TaskRunner.ss
@@ -0,0 +1,26 @@
+$Header.RAW
+$Info.RAW
+
+<div class="task">
+    <div class="task__panel">
+        <h2>Tasks</h2>
+        <p>These tasks can be run immediately.</p>
+        <% if $Tasks.Count > 0 %>
+            <div class="task__list">
+                <% loop $Tasks %>
+                    <div class="task__item">
+                        <div>
+                            <h3>$Title</h3>
+                            <p class="description">$Description</p>
+                        </div>
+                        <div>
+                            <a href="{$TaskLink.ATT}" class="task__button task__button--warning">Run immediately</a>
+                        </div>
+                    </div>
+                <% end_loop %>
+            </div>
+        <% end_if %>
+    </div>
+</div>
+
+$Footer.RAW