diff --git a/.editorconfig b/.editorconfig
index 47ae637b..da4df3ae 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -10,8 +10,9 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[{*.yml,package.json}]
+[{*.yml,*.ss,*.css,*.json}]
 indent_size = 2
+indent_style = space
 
 # The indent size used in the package.json file cannot be changed:
 # https://github.com/npm/npm/pull/3180#issuecomment-16336516
diff --git a/client/styles/task-runner.css b/client/styles/task-runner.css
new file mode 100644
index 00000000..5dc8f76b
--- /dev/null
+++ b/client/styles/task-runner.css
@@ -0,0 +1,105 @@
+/* This file is manually maintained, it is not generated from SCSS sources */
+
+.task__selector {
+    display: inline-block;
+    height: 42px;
+    margin: 0;
+    opacity: 0.2;
+    transform: translateX(-203px);
+    width: 199px;
+}
+
+.task__selector:after {
+    background-color: #5c5c5c;
+    content: ' ';
+    display: inline-block;
+    height: 42px;
+    transition: all 0.2s;
+    width: 199px;
+}
+
+.task__selector:checked:after,
+.task__selector:hover:after {
+    background-color: #000000;
+}
+
+.task__label {
+    border-bottom: 1px solid #000000;
+    border-right: 1px solid #000000;
+    display: inline-block;
+    font-weight: bold;
+    margin-left: -208px;
+    padding: 10px 20px;
+    text-align: center;
+    transform: translateY(-15px);
+    width: 158px;
+}
+
+.task__label:first-child {
+    margin-left: 0;
+}
+
+.task__tab {
+    display: none;
+    margin: 15px;
+}
+
+.task__selector--immediate:checked ~ .task__tab--immediate,
+.task__selector--universal:checked ~ .task__tab--universal,
+.task__selector--queue-only:checked ~ .task__tab--queue-only {
+    display: block;
+}
+
+.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--queued:hover {
+    background-color: #ebffeb;
+}
+
+.task__button--immediate:hover {
+    background-color: #ffebeb;
+}
+
+.task__button + .task__button {
+    margin-left: 25px;
+}
diff --git a/composer.json b/composer.json
index a88dadbd..e613b14a 100644
--- a/composer.json
+++ b/composer.json
@@ -25,7 +25,11 @@
     },
     "minimum-stability": "dev",
     "prefer-stable": true,
-    "extra": [],
+    "extra": {
+        "expose": [
+            "client/styles"
+        ]
+    },
     "replace": {
         "silverstripe/queuedjobs": "self.version"
     },
diff --git a/src/Controllers/QueuedTaskRunner.php b/src/Controllers/QueuedTaskRunner.php
index 6d548b1a..4d48cb8c 100644
--- a/src/Controllers/QueuedTaskRunner.php
+++ b/src/Controllers/QueuedTaskRunner.php
@@ -7,9 +7,13 @@
 use SilverStripe\Control\HTTPRequest;
 use SilverStripe\Core\Convert;
 use SilverStripe\Core\Injector\Injector;
+use SilverStripe\Core\Manifest\ModuleResourceLoader;
 use SilverStripe\Dev\BuildTask;
 use SilverStripe\Dev\DebugView;
 use SilverStripe\Dev\TaskRunner;
+use SilverStripe\ORM\ArrayList;
+use SilverStripe\View\ArrayData;
+use SilverStripe\View\ViewableData;
 use Symbiote\QueuedJobs\DataObjects\QueuedJobDescriptor;
 use Symbiote\QueuedJobs\Jobs\RunBuildTaskJob;
 use Symbiote\QueuedJobs\Services\QueuedJobService;
@@ -62,6 +66,12 @@ class QueuedTaskRunner extends TaskRunner
 
     public function index()
     {
+        if (Director::is_cli()) {
+            // CLI mode - revert to default behaviour
+            return parent::index();
+        }
+
+        $baseUrl = Director::absoluteBaseURL();
         $tasks = $this->getTasks();
 
         $blacklist = (array) $this->config()->get('task_blacklist');
@@ -69,78 +79,72 @@ public function index()
         $backlistedTasks = [];
         $queuedOnlyTasks = [];
 
-        // Web mode
-        if (!Director::is_cli()) {
-            $renderer = new DebugView();
-            echo $renderer->renderHeader();
-            echo $renderer->renderInfo(
-                "SilverStripe Development Tools: Tasks (QueuedJobs version)",
-                Director::absoluteBaseURL()
-            );
-            $base = Director::absoluteBaseURL();
-
-            echo "<div class=\"options\">";
-            echo "<h2>Queueable jobs</h2>\n";
-            echo "<p>By default these jobs will be added the job queue, rather than run immediately</p>\n";
-            echo "<ul>";
-            foreach ($tasks as $task) {
-                if (in_array($task['class'], $blacklist)) {
-                    $backlistedTasks[] = $task;
-
-                    continue;
-                }
+        // universal tasks
+        $universalTaskList = ArrayList::create();
 
-                if (in_array($task['class'], $queuedOnlyList)) {
-                    $queuedOnlyTasks[] = $task;
+        foreach ($tasks as $task) {
+            if (in_array($task['class'], $blacklist)) {
+                $backlistedTasks[] = $task;
 
-                    continue;
-                }
+                continue;
+            }
 
-                $queueLink = $base . "dev/tasks/queue/" . $task['segment'];
-                $immediateLink = $base . "dev/tasks/" . $task['segment'];
+            if (in_array($task['class'], $queuedOnlyList)) {
+                $queuedOnlyTasks[] = $task;
 
-                echo "<li><p>";
-                echo "<a href=\"$queueLink\">" . $task['title'] . "</a> <a style=\"font-size: 80%; padding-left: 20px\""
-                    . " href=\"$immediateLink\">[run immediately]</a><br />";
-                echo "<span class=\"description\">" . $task['description'] . "</span>";
-                echo "</p></li>\n";
-            }
-            echo "</ul></div>";
-
-            echo "<div class=\"options\">";
-            echo "<h2>Non-queueable tasks</h2>\n";
-            echo "<p>These tasks shouldn't be added the queuejobs queue, but you can run them immediately.</p>\n";
-            echo "<ul>";
-            foreach ($backlistedTasks as $task) {
-                $immediateLink = $base . "dev/tasks/" . $task['segment'];
-
-                echo "<li><p>";
-                echo "<a href=\"$immediateLink\">" . $task['title'] . "</a><br />";
-                echo "<span class=\"description\">" . $task['description'] . "</span>";
-                echo "</p></li>\n";
+                continue;
             }
-            echo "</ul></div>";
-
-            echo "<div class=\"options\">";
-            echo "<h2>Queueable only tasks</h2>\n";
-            echo "<p>These tasks must be be added the queuejobs queue, running it immediately is not allowed.</p>\n";
-            echo "<ul>";
-            foreach ($queuedOnlyTasks as $task) {
-                $queueLink = $base . "dev/tasks/queue/" . $task['segment'];
-
-                echo "<li><p>";
-                echo "<a href=\"$queueLink\">" . $task['title'] . "</a><br />";
-                echo "<span class=\"description\">" . $task['description'] . "</span>";
-                echo "</p></li>\n";
-            }
-            echo "</ul></div>";
 
-            echo $renderer->renderFooter();
+            $universalTaskList->push(ArrayData::create([
+                'QueueLink' => $baseUrl . 'dev/tasks/queue/' . $task['segment'],
+                'TaskLink' => $baseUrl . 'dev/tasks/' . $task['segment'],
+                'Title' => $task['title'],
+                'Description' => $task['description'],
+            ]));
+        }
 
-            // CLI mode - revert to default behaviour
-        } else {
-            return parent::index();
+        // Non-queueable tasks
+        $immediateTaskList = ArrayList::create();
+
+        foreach ($backlistedTasks as $task) {
+            $immediateTaskList->push(ArrayData::create([
+                'TaskLink' => $baseUrl . 'dev/tasks/' . $task['segment'],
+                'Title' => $task['title'],
+                'Description' => $task['description'],
+            ]));
         }
+
+        // Queue only tasks
+        $queueOnlyTaskList = ArrayList::create();
+
+        foreach ($queuedOnlyTasks as $task) {
+            $queueOnlyTaskList->push(ArrayData::create([
+                'QueueLink' => $baseUrl . 'dev/tasks/queue/' . $task['segment'],
+                'Title' => $task['title'],
+                'Description' => $task['description'],
+            ]));
+        }
+
+        $renderer = DebugView::create();
+        $header = $renderer->renderHeader();
+        $cssPath = ModuleResourceLoader::singleton()->resolveURL(
+            'symbiote/silverstripe-queuedjobs: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 = [
+            'UniversalTasks' => $universalTaskList,
+            'ImmediateTasks' => $immediateTaskList,
+            'QueueOnlyTasks' => $queueOnlyTaskList,
+            '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/Symbiote/QueuedJobs/Controllers/QueuedTaskRunner.ss b/templates/Symbiote/QueuedJobs/Controllers/QueuedTaskRunner.ss
new file mode 100644
index 00000000..4625b2f7
--- /dev/null
+++ b/templates/Symbiote/QueuedJobs/Controllers/QueuedTaskRunner.ss
@@ -0,0 +1,74 @@
+$Header.RAW
+$Info.RAW
+
+<div class="task">
+  <label class="task__label" for="tab-universal-tasks">Queueable task</label>
+  <input type="radio" id="tab-universal-tasks" class="task__selector task__selector--universal" name="task__selector" checked="checked" />
+  <label class="task__label" for="tab-immediate-tasks">Non-queueable tasks</label>
+  <input type="radio" id="tab-immediate-tasks" class="task__selector task__selector--immediate" name="task__selector" />
+  <label class="task__label" for="tab-queue-only-tasks">Queueable only tasks</label>
+  <input type="radio" id="tab-queue-only-tasks" class="task__selector task__selector--queue-only" name="task__selector" />
+
+  <div class="task__tab task__tab--universal">
+    <h2>Queueable tasks</h2>
+    <p>By default these jobs will be added the job queue, rather than run immediately.</p>
+    <% if $UniversalTasks.Count > 0 %>
+      <div class="task__list">
+        <% loop $UniversalTasks %>
+          <div class="task__item">
+            <div>
+              <h3>$Title</h3>
+              <p class="description">$Description</p>
+            </div>
+            <div>
+              <a href="{$TaskLink.ATT}" class="task__button task__button--immediate">Run immediately</a>
+              <a href="{$QueueLink.ATT}" class="task__button task__button--queued">Add to queue</a>
+            </div>
+          </div>
+        <% end_loop %>
+      </div>
+    <% end_if %>
+  </div>
+
+  <div class="task__tab task__tab--immediate">
+    <h2>Non-queueable tasks</h2>
+    <p>These tasks shouldn't be added the queuejobs queue, but you can run them immediately.</p>
+    <% if $ImmediateTasks.Count > 0 %>
+      <div class="task__list">
+        <% loop $ImmediateTasks %>
+          <div class="task__item">
+            <div>
+              <h3>$Title</h3>
+              <p class="description">$Description</p>
+            </div>
+            <div>
+              <a href="{$TaskLink.ATT}" class="task__button task__button--immediate">Run immediately</a>
+            </div>
+          </div>
+        <% end_loop %>
+      </div>
+    <% end_if %>
+  </div>
+
+  <div class="task__tab task__tab--queue-only">
+    <h2>Queueable only tasks</h2>
+    <p>These tasks must be be added the queuejobs queue, running it immediately is not allowed.</p>
+    <% if $QueueOnlyTasks.Count > 0 %>
+      <div class="task__list">
+        <% loop $QueueOnlyTasks %>
+          <div class="task__item">
+            <div>
+              <h3>$Title</h3>
+              <p class="description">$Description</p>
+            </div>
+            <div>
+              <a href="{$QueueLink.ATT}" class="task__button task__button--queued">Add to queue</a>
+            </div>
+          </div>
+        <% end_loop %>
+      </div>
+    <% end_if %>
+  </div>
+</div>
+
+$Footer.RAW