diff --git a/.editorconfig b/.editorconfig
index 47ae637b..98628c62 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -10,8 +10,22 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[{*.yml,package.json}]
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yml,js,json,css,scss,eslintrc,feature}]
 indent_size = 2
+indent_style = space
+
+[composer.json]
+indent_size = 4
+
+# Don't perform any clean-up on thirdparty files
+
+[thirdparty/**]
+trim_trailing_whitespace = false
+insert_final_newline = false
 
-# The indent size used in the package.json file cannot be changed:
-# https://github.com/npm/npm/pull/3180#issuecomment-16336516
+[admin/thirdparty/**]
+trim_trailing_whitespace = false
+insert_final_newline = false
diff --git a/.travis.yml b/.travis.yml
index 3f3be125..6cc21f06 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -5,17 +5,13 @@ dist: trusty
 matrix:
   include:
     - php: 7.1
-      env: DB=MYSQL RECIPE_VERSION=4.3.x-dev PHPCS_TEST=1 PHPUNIT_TEST=1
+      env: DB=MYSQL RECIPE_VERSION=^4.7 PHPCS_TEST=1 PHPUNIT_TEST=1
     - php: 7.1
-      env: DB=PGSQL RECIPE_VERSION=4.3.x-dev PHPUNIT_TEST=1
-    - php: 7.1
-      env: DB=MYSQL RECIPE_VERSION=4.4.x-dev PHPUNIT_TEST=1
+      env: DB=MYSQL RECIPE_VERSION=^4.7 PHPUNIT_TEST=1
     - php: 7.2
-      env: DB=MYSQL RECIPE_VERSION=4.4.x-dev PHPUNIT_TEST=1
-    - php: 7.3
-      env: DB=MYSQL RECIPE_VERSION=4.5.x-dev PHPUNIT_TEST=1
+      env: DB=MYSQL RECIPE_VERSION=^4.7 PHPUNIT_TEST=1
     - php: 7.3
-      env: DB=MYSQL RECIPE_VERSION=4.x-dev PHPUNIT_TEST=1
+      env: DB=MYSQL RECIPE_VERSION=^4.7 PHPUNIT_TEST=1
     - php: 7.4
       env: DB=MYSQL RECIPE_VERSION=4.x-dev PHPUNIT_TEST=1
 
diff --git a/client/styles/task-runner.css b/client/styles/task-runner.css
new file mode 100644
index 00000000..d07c0b32
--- /dev/null
+++ b/client/styles/task-runner.css
@@ -0,0 +1,47 @@
+/* This file is manually maintained, it is not generated from SCSS sources */
+
+.task {
+  padding-top: 10px;
+}
+
+.task__panel {
+  padding: 10px 15px 15px 15px;
+}
+
+.task__selector {
+    display: inline-block;
+    height: 42px;
+    margin: 0;
+    visibility: hidden;
+}
+
+.task__selector:checked + .task__label .task__label-inner,
+.task__selector:hover + .task__label .task__label-inner {
+  border-bottom-color: #43536d;
+}
+
+.task__label {
+    display: inline-block;
+    transform: translateY(-15px);
+}
+
+.task__label-inner {
+  border-bottom: 2px solid transparent;
+  padding-bottom: 15px;
+  transition: border-bottom-color 0.2s;
+}
+
+.task__label:first-child {
+    margin-left: 0;
+}
+
+.task__panel .task__item {
+    display: none;
+}
+
+.task__selector--immediate:checked ~ .task__panel .task__item--immediate,
+.task__selector--universal:checked ~ .task__panel .task__item--universal,
+.task__selector--queue-only:checked ~ .task__panel .task__item--queue-only,
+.task__selector--all:checked ~ .task__panel .task__item {
+    display: inline-block;
+}
diff --git a/composer.json b/composer.json
index 99f1f6f4..9956d148 100644
--- a/composer.json
+++ b/composer.json
@@ -16,7 +16,7 @@
     ],
     "require": {
         "php": "^7.1",
-        "silverstripe/framework": "^4",
+        "silverstripe/framework": "^4.7",
         "silverstripe/admin": "^1",
         "asyncphp/doorman": "^3.0"
     },
@@ -29,7 +29,10 @@
     "extra": {
         "branch-alias": {
             "dev-master": "4.x-dev"
-        }
+        },
+        "expose": [
+            "client/styles"
+        ]
     },
     "replace": {
         "silverstripe/queuedjobs": "self.version"
diff --git a/src/Controllers/QueuedTaskRunner.php b/src/Controllers/QueuedTaskRunner.php
index 6d548b1a..76269284 100644
--- a/src/Controllers/QueuedTaskRunner.php
+++ b/src/Controllers/QueuedTaskRunner.php
@@ -10,6 +10,9 @@
 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;
@@ -39,6 +42,13 @@ class QueuedTaskRunner extends TaskRunner
         'queueTask',
     ];
 
+    /**
+     * @var array
+     */
+    private static $css = [
+        'symbiote/silverstripe-queuedjobs:client/styles/task-runner.css',
+    ];
+
     /**
      * Tasks on this list will be available to be run only via browser
      *
@@ -62,6 +72,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 +85,65 @@ 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;
-                }
+        $taskList = ArrayList::create();
 
-                if (in_array($task['class'], $queuedOnlyList)) {
-                    $queuedOnlyTasks[] = $task;
+        // universal tasks
+        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";
-            }
-            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";
+                continue;
             }
-            echo "</ul></div>";
 
-            echo $renderer->renderFooter();
+            $taskList->push(ArrayData::create([
+                'QueueLink' => $baseUrl . 'dev/tasks/queue/' . $task['segment'],
+                'TaskLink' => $baseUrl . 'dev/tasks/' . $task['segment'],
+                'Title' => $task['title'],
+                'Description' => $task['description'],
+                'Type' => 'universal',
+            ]));
+        }
 
-            // CLI mode - revert to default behaviour
-        } else {
-            return parent::index();
+        // Non-queueable tasks
+        foreach ($backlistedTasks as $task) {
+            $taskList->push(ArrayData::create([
+                'TaskLink' => $baseUrl . 'dev/tasks/' . $task['segment'],
+                'Title' => $task['title'],
+                'Description' => $task['description'],
+                'Type' => 'immediate',
+            ]));
         }
+
+        // Queue only tasks
+        $queueOnlyTaskList = ArrayList::create();
+
+        foreach ($queuedOnlyTasks as $task) {
+            $taskList->push(ArrayData::create([
+                'QueueLink' => $baseUrl . 'dev/tasks/queue/' . $task['segment'],
+                'Title' => $task['title'],
+                'Description' => $task['description'],
+                'Type' => 'queue-only',
+            ]));
+        }
+
+        $renderer = DebugView::create();
+        $header = $renderer->renderHeader();
+        $header = $this->addCssToHeader($header);
+
+        $data = [
+            'Tasks' => $taskList,
+            '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..fb11b192
--- /dev/null
+++ b/templates/Symbiote/QueuedJobs/Controllers/QueuedTaskRunner.ss
@@ -0,0 +1,50 @@
+$Header.RAW
+$Info.RAW
+
+<div class="task">
+    <input type="radio" id="tab-all-tasks" class="task__selector task__selector--all" name="task__selector" checked="checked" />
+    <label class="task__label task__label--all" for="tab-all-tasks">
+        <span class="task__label-inner">All tasks</span>
+    </label>
+
+    <input type="radio" id="tab-universal-tasks" class="task__selector task__selector--universal" name="task__selector" />
+    <label class="task__label task__label--universal" for="tab-universal-tasks">
+        <span class="task__label-inner">Queueable task</span>
+    </label>
+
+    <input type="radio" id="tab-immediate-tasks" class="task__selector task__selector--immediate" name="task__selector" />
+    <label class="task__label task__label--immediate" for="tab-immediate-tasks">
+        <span class="task__label-inner">Non-queueable tasks</span>
+    </label>
+
+    <input type="radio" id="tab-queue-only-tasks" class="task__selector task__selector--queue-only" name="task__selector" />
+    <label class="task__label task__label--queue-only" for="tab-queue-only-tasks">
+        <span class="task__label-inner">Queueable only tasks</span>
+    </label>
+
+    <div class="task__panel">
+        <% if $Tasks.Count > 0 %>
+            <div class="task__list">
+                <% loop $Tasks %>
+                    <div class="task__item task__item--{$Type}">
+                        <div>
+                            <h3 class="task__title">$Title</h3>
+                            <div class="task__description">$Description</div>
+                        </div>
+                        <div>
+                            <% if $TaskLink %>
+                                <a href="{$TaskLink.ATT}" class="task__button">Run task</a>
+                            <% end_if %>
+
+                            <% if $QueueLink %>
+                                <a href="{$QueueLink.ATT}" class="task__button">Queue job</a>
+                            <% end_if %>
+                        </div>
+                    </div>
+                <% end_loop %>
+            </div>
+        <% end_if %>
+    </div>
+</div>
+
+$Footer.RAW