diff --git a/src/components/TaskLog.vue b/src/components/TaskLog.vue
index e236ec9..37f1862 100644
--- a/src/components/TaskLog.vue
+++ b/src/components/TaskLog.vue
@@ -5,23 +5,8 @@
     </div>
     <div>
       <ul class="list-reset bg-white">
-        <li v-for="item in items" :key="item.text" class="px-3 py-4 border-b border-grey-light flex">
-          <div class="flex-none mr-3">
-            <svg v-if="item.loading" class="h-5 w-5 text-grey fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg>
-            <svg v-if="!item.loading && item.success" class="h-5 w-5 text-green fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__success-circle"></use></svg>
-            <svg v-if="!item.loading && !item.success" class="h-5 w-5 text-red-dark fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__warning"></use></svg>
-          </div>
-
-          <div class="flex-1">
-            <div class="text-sm font-bold mb-2">{{ item.text }}</div>
-            <div class="text-grey-darker text-2xs">{{ item.date }}</div>
-          </div>
-
-          <div>
-            <button type="button">
-              <svg class="h-5 w-5 text-grey-darker fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
-            </button>
-          </div>
+        <li v-for="task in reversedTasks" :key="task.text">
+          <task-log-item :task="task"></task-log-item>
         </li>
       </ul>
     </div>
@@ -29,65 +14,23 @@
 </template>
 
 <script>
+import _ from 'lodash'
+import TaskLogItem from '@/components/TaskLogItem'
+
 export default {
-  data() {
-    return {
-      items: [
-        {
-          text: 'Commit: 8056d51 Add production URLs as settings refs/heads/master',
-          date: 'Dec 21, 2018 1:34:13 PM UTC +0000',
-          loading: true,
-          success: false,
-        },
-        {
-          text: 'Commit: 96ac151 Fix syntax refs/heads/master',
-          date: 'Dec 21, 2018 1:23:43 PM UTC +0000',
-          loading: false,
-          success: true,
-        },
-        {
-          text: 'Commit: 716e178 Configure stage_file_proxy refs/heads/master',
-          date: 'Dec 21, 2018 1:18:25 PM UTC +0000',
-          loading: false,
-          success: true,
-        },
-        {
-          text: 'Commit: 398945c Ensure stage_file_proxy is enabled refs/heads/master',
-          date: 'Dec 21, 2018 1:09:19 PM UTC +0000',
-          loading: false,
-          success: true,
-        },
-        {
-          text: 'Commit: e75c4a3 Merge branch \'voucher-code-bug-34\' refs/heads/master',
-          date: 'Dec 21, 2018 12:55:49 PM UTC +0000',
-          success: false,
-        },
-        {
-          text: 'Deploy the code reference tags/2018-12-19 to test',
-          date: 'Dec 20, 2018 10:25:07 PM UTC +0000',
-          success: true,
-        },
-        {
-          text: 'Deploy the code reference master to dev',
-          date: 'Dec 20, 2018 10:13:48 PM UTC +0000',
-          success: true,
-        },
-        {
-          text: 'Deploy code from test to prod',
-          date: 'Dec 19, 2018 3:55:29 PM UTC +0000',
-          success: true,
-        },
-        {
-          text: 'Commit: 9688c41 Update IP address refs/heads/master',
-          date: 'Dec 19, 2018 3:50:31 PM UTC +0000',
-          success: true,
-        },
-        {
-          text: 'Commit: fdac923 Merge branch \'update-password-policy\' refs/heads/master',
-          date: 'Dec 19, 2018 3:48:29 PM UTC +0000',
-          success: true,
-        },
-      ],
+  components: {
+    TaskLogItem,
+  },
+
+  props: {
+    tasks: Array,
+  },
+
+  computed: {
+    reversedTasks: function () {
+      let tasks = this.tasks
+
+      return _.reverse(tasks)
     }
   }
 }
diff --git a/src/components/TaskLogItem.vue b/src/components/TaskLogItem.vue
new file mode 100644
index 0000000..057c318
--- /dev/null
+++ b/src/components/TaskLogItem.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="px-3 py-4 border-b border-grey-light flex" :class="{'bg-yellow-lightest': open}">
+      <div class="flex-none mr-3">
+        <svg v-if="task.loading" class="h-5 w-5 text-grey fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg>
+        <svg v-if="!task.loading && task.success" class="h-5 w-5 text-green fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__success-circle"></use></svg>
+        <svg v-if="!task.loading && !task.success" class="h-5 w-5 text-red-dark fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__warning"></use></svg>
+      </div>
+
+      <div class="flex-1">
+        <div class="text-sm font-bold mb-2">{{ task.text }}</div>
+        <div class="text-grey-darker text-2xs">{{ task.times.display }}</div>
+      </div>
+
+      <div>
+        <button type="button" @click="open = !open">
+          <svg v-if="!open" class="h-5 w-5 text-grey-darker fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
+          <svg v-else class="h-5 w-5 text-grey-darker fill-current" style="transform: rotate(180deg)" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
+        </button>
+      </div>
+    </div>
+
+    <div class="p-4 bg-grey-darker text-white antialiased" v-show="open">
+      <div class="flex flex-wrap -mx-4">
+        <div class="px-4">
+          <div class="text-xs uppercase mb-1">Task ID</div>
+          <div class="text-sm font-bold">12345678</div>
+        </div>
+
+        <div class="px-4 w-1/6 flex-none">
+          <div class="text-xs uppercase mb-1">User</div>
+          <div class="text-sm font-bold truncate">{{ task.user }}</div>
+        </div>
+
+        <div class="px-4 w-1/4 flex-none">
+          <div class="text-xs uppercase mb-1">Started</div>
+          <div class="text-sm font-bold truncate">{{ task.times.started }}</div>
+        </div>
+
+        <div class="px-4 w-1/4 flex-none">
+          <div class="text-xs uppercase mb-1">Completed</div>
+          <div class="text-sm font-bold truncate">{{ task.times.completed }}</div>
+        </div>
+
+        <div class="px-4">
+          <div class="text-xs uppercase mb-1">Status</div>
+          <div class="text-sm font-bold">{{ status }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    task: Object,
+  },
+
+  data() {
+    return {
+      open: false,
+    }
+  },
+
+  computed: {
+    status: function () {
+      if (this.task.loading) {
+        return 'In progress'
+      }
+
+      return this.task.success ? 'Completed' : 'Failed'
+    }
+  }
+}
+</script>
diff --git a/src/data.json b/src/data.json
index 44adf0a..41305ec 100644
--- a/src/data.json
+++ b/src/data.json
@@ -21,7 +21,110 @@
           "url": "rebuilding-acquia.com",
           "label": "tags/2018-12-21"
         }
-      }
+      },
+      "tasks": [
+        {
+          "text": "Commit: fdac923 Merge branch 'update-password-policy' refs/heads/master",
+          "user": "system",
+          "times": {
+            "display": "Dec 19, 2018 3:48:29 PM UTC +0000",
+            "started": "Dec 19, 2018 3:48:29 PM UTC +0000",
+            "completed": "Dec 19, 2018 3:48:29 PM UTC +0000"
+          },
+          "loading": false,
+          "success": true
+        },
+        {
+          "text": "Commit: 9688c41 Update IP address refs/heads/master",
+          "user": "system",
+          "times": {
+            "display": "Dec 19, 2018 3:50:31 PM UTC +0000",
+            "started": "Dec 19, 2018 3:50:31 PM UTC +0000",
+            "completed": "Dec 19, 2018 3:50:31 PM UTC +0000"
+          },
+          "loading": false,
+          "success": true
+        },
+        {
+          "text": "Deploy code from test to prod",
+          "user": "system",
+          "times": {
+            "display": "Dec 19, 2018 3:55:29 PM UTC +0000",
+            "started": "Dec 19, 2018 3:55:29 PM UTC +0000",
+            "completed": "Dec 19, 2018 3:55:29 PM UTC +0000"
+          },
+          "loading": false,
+          "success": true
+        },
+        {
+          "text": "Deploy the code reference master to dev",
+          "user": "system",
+          "times": {
+            "display": "Dec 20, 2018 10:13:48 PM UTC +0000",
+            "started": "Dec 20, 2018 10:13:48 PM UTC +0000",
+            "completed": "Dec 20, 2018 10:13:48 PM UTC +0000"
+          },
+          "loading": false,
+          "success": true
+        },
+        {
+          "text": "Deploy the code reference tags/2018-12-19 to test",
+          "user": "system",
+          "times": {
+            "display": "Dec 20, 2018 10:25:07 PM UTC +0000",
+            "started": "Dec 20, 2018 10:25:07 PM UTC +0000",
+            "completed": "Dec 20, 2018 10:25:07 PM UTC +0000"
+          },
+          "loading": false,
+          "success": true
+        },
+        {
+          "text": "Commit: e75c4a3 Merge branch 'voucher-code-bug-34' refs/heads/master",
+          "user": "system",
+          "times": {
+            "display": "Dec 21, 2018 12:55:49 PM UTC +0000",
+            "started": "Dec 21, 2018 12:55:49 PM UTC +0000",
+            "completed": "Dec 21, 2018 12:55:49 PM UTC +0000"
+          },
+          "status": "Failed",
+          "loading": false,
+          "success": false
+        },
+        {
+          "text": "Commit: 398945c Ensure stage_file_proxy is enabled refs/heads/master",
+          "user": "system",
+          "times": {
+            "display": "Dec 21, 2018 1:09:19 PM UTC +0000",
+            "started": "Dec 21, 2018 1:09:19 PM UTC +0000",
+            "completed": "Dec 21, 2018 1:09:19 PM UTC +0000"
+          },
+          "loading": false,
+          "success": true
+        },
+        {
+          "text": "Commit: 96ac151 Fix syntax refs/heads/master",
+          "user": "system",
+          "times": {
+            "display": "Dec 21, 2018 1:23:43 PM UTC +0000",
+            "started": "Dec 21, 2018 1:23:43 PM UTC +0000",
+            "completed": "Dec 21, 2018 1:23:43 PM UTC +0000"
+          },
+          "loading": false,
+          "success": true
+        },
+        {
+          "text": "Commit: 8056d51 Add production URLs as settings refs/heads/master",
+          "user": "system",
+          "times": {
+            "display": "Dec 21, 2018 1:34:13 PM UTC +0000",
+            "started": "Dec 21, 2018 1:34:13 PM UTC +0000",
+            "completed": "Dec 21, 2018 1:34:13 PM UTC +0000"
+          },
+          "status": "In progress",
+          "loading": true,
+          "success": true
+        }
+      ]
     },
     "2": {
       "id": 2,
@@ -44,7 +147,64 @@
           "url": "www.oliverdavies.uk",
           "label": "tags/2018-12-23"
         }
-      }
+      },
+      "tasks": [
+        {
+          "text": "Create database opdaviestest in Dev.",
+          "user": "system",
+          "times": {
+            "display": "Dec 23, 2018 11:26:48 PM UTC +0000",
+            "started": "Dec 23, 2018 11:26:50 PM UTC +0000",
+            "completed": "Dec 23, 2018 11:26:52 PM UTC +0000"
+          },
+          "loading": false,
+          "success": true
+        },
+        {
+          "text": "Create database opdaviestest in Stage.",
+          "user": "system",
+          "times": {
+            "display": "Dec 23, 2018 11:26:48 PM UTC +0000",
+            "started": "Dec 23, 2018 11:26:50 PM UTC +0000",
+            "completed": "Dec 23, 2018 11:26:52 PM UTC +0000"
+          },
+          "loading": false,
+          "success": true
+        },
+        {
+          "text": "Install Drupal 8 to Dev.",
+          "user": "oliver@oliverdavies.uk (oliver@oliverdavies.uk)",
+          "times": {
+            "display": "Dec 23, 2018 11:33:52 PM UTC +0000",
+            "started": "Dec 23, 2018 11:33:53 PM UTC +0000",
+            "completed": "Dec 23, 2018 11:37:21 PM UTC +0000"
+          },
+          "loading": false,
+          "success": true
+        },
+        {
+          "text": "Commit: 9736ef5 Importing site archive refs/heads/master",
+          "user": "vcs.commit",
+          "times": {
+            "display": "Dec 23, 2018 11:36:29 PM UTC +0000",
+            "started": "Dec 23, 2018 11:36:30 PM UTC +0000",
+            "completed": "Dec 23, 2018 11:37:16 PM UTC +0000"
+          },
+          "loading": false,
+          "success": true
+        },
+        {
+          "text": "Commit: 0ab620f Initial commit to Acquia Git starter repo. refs/tags/pre-import-2018-12-23",
+          "user": "vcs.commit",
+          "times": {
+            "display": "Dec 23, 2018 11:36:30 PM UTC +0000",
+            "started": "Dec 23, 2018 11:36:32 PM UTC +0000",
+            "completed": "Dec 23, 2018 11:36:33 PM UTC +0000"
+          },
+          "loading": false,
+          "success": true
+        }
+      ]
     }
   }
 }
diff --git a/src/views/Environments.vue b/src/views/Environments.vue
index 94f9873..8e0a250 100644
--- a/src/views/Environments.vue
+++ b/src/views/Environments.vue
@@ -59,7 +59,7 @@
 
           <quick-help :hidden="help.hidden"></quick-help>
           <environment-cards :environments="application.environments"></environment-cards>
-          <task-log></task-log>
+          <task-log :tasks="application.tasks"></task-log>
         </div>
 
         <sidebar :links="[
diff --git a/tailwind.js b/tailwind.js
index b24f637..c33f44f 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -71,6 +71,8 @@ let colors = {
   'orange-light': '#FFB401',
   'orange': '#FA9903',
 
+  'yellow-lightest': '#FAF8DF'
+
 /*
   'red-darkest': '#3b0d0c',
   'red-darker': '#621b18',