diff --git a/src/views/Bookmarks/bookmarksAgent.js b/src/agents/bookmarksAgent.js
similarity index 100%
rename from src/views/Bookmarks/bookmarksAgent.js
rename to src/agents/bookmarksAgent.js
diff --git a/src/views/Chronology/chronologyAgent.js b/src/agents/chronologyAgent.js
similarity index 100%
rename from src/views/Chronology/chronologyAgent.js
rename to src/agents/chronologyAgent.js
diff --git a/src/views/Comments/commentsAgent.js b/src/agents/commentsAgent.js
similarity index 100%
rename from src/views/Comments/commentsAgent.js
rename to src/agents/commentsAgent.js
diff --git a/src/agents/index.js b/src/agents/index.js
new file mode 100644
index 0000000..81da3d4
--- /dev/null
+++ b/src/agents/index.js
@@ -0,0 +1,29 @@
+import workItems from "./workItemsAgent";
+import tasks from "./tasksAgent";
+import phases from "./phasesAgent";
+import matters from "./mattersAgent";
+import bookmarks from "./bookmarksAgent";
+import chronology from "./chronologyAgent";
+import comments from "./commentsAgent";
+import notifications from "./notificationsAgent";
+import participants from "./participantsAgent";
+import profile from "./profileAgent";
+import relatedDocuments from "./relatedDocumentsAgent";
+import search from "./searchAgent";
+import time from "./timeAgent";
+
+export {
+  tasks,
+  workItems,
+  phases,
+  matters,
+  bookmarks,
+  chronology,
+  comments,
+  notifications,
+  participants,
+  profile,
+  relatedDocuments,
+  search,
+  time
+}
\ No newline at end of file
diff --git a/src/views/Matters/mattersAgent.js b/src/agents/mattersAgent.js
similarity index 87%
rename from src/views/Matters/mattersAgent.js
rename to src/agents/mattersAgent.js
index a296953..22accf7 100644
--- a/src/views/Matters/mattersAgent.js
+++ b/src/agents/mattersAgent.js
@@ -35,6 +35,9 @@ const list = (page, pageSize) => {
       { path: "type.name" },
       { path: "type.iconClass" },
       { path: "phase.name" },
+      { path: "roles.primary-owner.ods.name" },
+      { path: "roles.primary-owner.participantType.iconClass" },
+      { path: "documents!1.title" },
     ]
   };
 
diff --git a/src/views/Notifications/notificationsAgent.js b/src/agents/notificationsAgent.js
similarity index 100%
rename from src/views/Notifications/notificationsAgent.js
rename to src/agents/notificationsAgent.js
diff --git a/src/views/Participants/participantsAgent.js b/src/agents/participantsAgent.js
similarity index 100%
rename from src/views/Participants/participantsAgent.js
rename to src/agents/participantsAgent.js
diff --git a/src/views/Tasks/phaseAgent.js b/src/agents/phasesAgent.js
similarity index 100%
rename from src/views/Tasks/phaseAgent.js
rename to src/agents/phasesAgent.js
diff --git a/src/views/Profile/profileAgent.js b/src/agents/profileAgent.js
similarity index 100%
rename from src/views/Profile/profileAgent.js
rename to src/agents/profileAgent.js
diff --git a/src/views/RelatedDocuments/relatedDocumentsAgent.js b/src/agents/relatedDocumentsAgent.js
similarity index 100%
rename from src/views/RelatedDocuments/relatedDocumentsAgent.js
rename to src/agents/relatedDocumentsAgent.js
diff --git a/src/views/Tabs/searchAgent.js b/src/agents/searchAgent.js
similarity index 100%
rename from src/views/Tabs/searchAgent.js
rename to src/agents/searchAgent.js
diff --git a/src/views/Tasks/tasksAgent.js b/src/agents/tasksAgent.js
similarity index 100%
rename from src/views/Tasks/tasksAgent.js
rename to src/agents/tasksAgent.js
diff --git a/src/views/Time/timeAgent.js b/src/agents/timeAgent.js
similarity index 100%
rename from src/views/Time/timeAgent.js
rename to src/agents/timeAgent.js
diff --git a/src/agents/workItemsAgent.js b/src/agents/workItemsAgent.js
new file mode 100644
index 0000000..f153973
--- /dev/null
+++ b/src/agents/workItemsAgent.js
@@ -0,0 +1,18 @@
+import { SharedoFetch } from "@sharedo/mobile-core";
+
+const save = (id, workItem) => {
+  const payload = {
+    ...workItem.workItem,
+    aspectData: {}
+  };
+
+  Reflect.ownKeys(workItem.aspectData).forEach(key => {
+    payload.aspectData[key] = JSON.stringify(workItem.aspectData[key]);
+  });
+
+  return SharedoFetch.post(`/api/aspects/sharedos/${id}`, payload);  // Not using the public API as it is broken.
+}
+
+export default {
+  save
+}
\ No newline at end of file
diff --git a/src/constants/workItemTypes.js b/src/constants/workItemTypes.js
new file mode 100644
index 0000000..a82d3cf
--- /dev/null
+++ b/src/constants/workItemTypes.js
@@ -0,0 +1,12 @@
+const TASK = "TASK";
+const MATTER = "MATTER";
+
+export {
+  TASK,
+  MATTER
+}
+
+export default {
+  TASK,
+  MATTER
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index e77532f..50a5095 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,58 +15,58 @@ Vue.config.productionTip = false
 
 // Keep same signature as Vue 3's createApp()
 var createApp = function (view, opts) {
-    return new Vue({
-        ...opts,
-        render: h => h(view),
-    });
+  return new Vue({
+    ...opts,
+    render: h => h(view),
+  });
 };
 
 // This needs to be a promise, as we call Azure Functions API to get Static Web App configuration
 var l = CoreUi.loading();
 settings.get().then(function (config) {
-    l.dismiss();
+  l.dismiss();
 
-    const vuetify = useVuetify({
-        theme: {
-            options: {
-                customProperties: true,     // Generate CSS variables
-            },
-            themes: {
-                light: {
-                    primary: '#27aa5e',
-                    secondary: '#b0bec5',
-                    accent: '#8c9eff',
-                    error: '#b71c1c',
-                    grey: '#9E9E9E',
-                },
-            },
+  const vuetify = useVuetify({
+    theme: {
+      options: {
+        customProperties: true,     // Generate CSS variables
+      },
+      themes: {
+        light: {
+          primary: '#27aa5e',
+          secondary: '#b0bec5',
+          accent: '#8c9eff',
+          error: '#b71c1c',
+          grey: '#9E9E9E',
         },
-    });
+      },
+    },
+  });
 
-    useTipTapVuetify(vuetify);
+  useTipTapVuetify(vuetify);
 
-    Vue.use(SharedoMobileCore, config);
+  Vue.use(SharedoMobileCore, config);
 
-    Vue.component("AppMenu", Menu);
+  Vue.component("AppMenu", Menu);
 
-    var notLoggedIn = function () {
-        const app = createApp(NotLoggedIn, {
-            router,
-            store,
-            vuetify,
-        });
-        app.$mount("#app");
-    }
+  var notLoggedIn = function () {
+    const app = createApp(NotLoggedIn, {
+      router,
+      store,
+      vuetify,
+    });
+    app.$mount("#app");
+  }
 
-    // Catch oauth reply
-    SharedoAuth.initialise(notLoggedIn).then(() => {
-        SharedoProfile.loadProfile().then(() => {
-            createApp(Main, {
-                router,
-                store,
-                vuetify
-            }).$mount('#app');
-        }, err => { document.write("<div>" + err + "</div>"); })
+  // Catch oauth reply
+  SharedoAuth.initialise(notLoggedIn).then(() => {
+    SharedoProfile.loadProfile().then(() => {
+      createApp(Main, {
+        router,
+        store,
+        vuetify
+      }).$mount('#app');
+    }, err => { document.write("<div>" + err + "</div>"); })
 
-    });
+  });
 });
diff --git a/src/router/index.js b/src/router/index.js
index 150c935..6fb5400 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,110 +1,123 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import TaskList from "@/views/Tasks/TaskList.vue"
+import WorkItemList from "@/views/WorkItems/WorkItemList";
+import { TASK, MATTER } from "@/constants/workItemTypes";
 
 Vue.use(VueRouter);
 
 const routes = [
-    {
-        // Tab 1
-        path: '/tasks',
-        alias: '/',           // <= default page
-        name: 'tasks',
-        component: TaskList
-    },
-    {
-        path: "/profile",
-        name: "profile",
-        component: () => import("@/views/Profile/Profile.vue")
-    },
-    {
-        // Tab 1 -> Detail
-        path: "/tasks/:id",
-        name: "task-detail",
-        props: true,
-        component: () => import("@/views/Tasks/TaskDetail.vue")
-    },
-    {
-        // Tab 1 -> Detail -> Time Entries
-        path: "/tasks/:id/time",
-        name: "task-time-entries",
-        props: ({ params }) => ({
-            sharedoId: params.id
-        }),
-        component: () => import('@/views/Time/TimeEntryList.vue')
-    },
-    {
-        // Tab 1 -> Detail -> Participants
-        path: "/tasks/:id/participants",
-        name: "task-participants",
-        props: ({ params }) => ({
-            sharedoId: params.id
-        }),
-        component: () => import('@/views/Participants/ParticipantList.vue')
-    },
-    {
-        // Tab 1 -> Detail -> Chronology
-        path: "/tasks/:id/chronology",
-        name: "task-chronology",
-        props: ({ params }) => ({
-            sharedoId: params.id
-        }),
-        component: () => import('@/views/Chronology/ChronologyList.vue')
-    },
-    {
-        // Tab 1 -> Detail -> Comments
-        path: "/tasks/:id/comments",
-        name: "task-comments",
-        props: ({ params }) => ({
-            sharedoId: params.id
-        }),
-        component: () => import('@/views/Comments/CommentList.vue')
-    },
-    {
-        // Tab 1 -> Bookmarks
-        path: "/bookmarks",
-        name: "bookmarks",
-        component: () => import('@/views/Bookmarks/BookmarkList.vue')
-    },
-    {
-        // Tab 2
-        path: '/new-task',
-        name: 'new-task',
-        component: () => import("@/views/Tabs/NewTask.vue")
-    },
-    {
-        // Tab 3
-        path: '/search',
-        name: 'search',
-        component: () => import("@/views/Tabs/Search.vue")
-    },
-    {
-        path: "/work-items",
-        name: "matters",
-        component: () => import("@/views/Matters/MatterList.vue")
-    },
-    {
-        path: "/work-items/:id",
-        name: "matter-detail",
-        props: true,
-        component: () => import("@/views/Matters/MatterDetail.vue")
-    },
-    {
-        path: '/notifications',
-        name: 'notifications',
-        component: () => import('@/views/Notifications/NotificationList.vue')
-    },
-    {
-        path: "/notifications/settings",
-        name: "notification-settings",
-        component: () => import("@/views/Notifications/NotificationSettings.vue")
-    }
+  {
+    // Tab 1
+    path: '/tasks',
+    alias: '/',           // <= default page
+    name: 'tasks',
+    props: () => ({
+      type: TASK
+    }),
+    component: WorkItemList
+  },
+  {
+    path: "/profile",
+    name: "profile",
+    component: () => import("@/views/Profile/Profile.vue")
+  },
+  {
+    // Tab 1 -> Detail
+    path: "/tasks/:id",
+    name: "task-detail",
+    props: ({ params }) => ({
+      id: params.id,
+      type: TASK
+    }),
+    component: () => import("@/views/WorkItems/WorkItemDetail.vue")
+  },
+  {
+    // Tab 1 -> Detail -> Time Entries
+    path: "/tasks/:id/time",
+    name: "task-time-entries",
+    props: ({ params }) => ({
+      sharedoId: params.id
+    }),
+    component: () => import('@/views/Time/TimeEntryList.vue')
+  },
+  {
+    // Tab 1 -> Detail -> Participants
+    path: "/tasks/:id/participants",
+    name: "task-participants",
+    props: ({ params }) => ({
+      sharedoId: params.id
+    }),
+    component: () => import('@/views/Participants/ParticipantList.vue')
+  },
+  {
+    // Tab 1 -> Detail -> Chronology
+    path: "/tasks/:id/chronology",
+    name: "task-chronology",
+    props: ({ params }) => ({
+      sharedoId: params.id
+    }),
+    component: () => import('@/views/Chronology/ChronologyList.vue')
+  },
+  {
+    // Tab 1 -> Detail -> Comments
+    path: "/tasks/:id/comments",
+    name: "task-comments",
+    props: ({ params }) => ({
+      sharedoId: params.id
+    }),
+    component: () => import('@/views/Comments/CommentList.vue')
+  },
+  {
+    // Tab 1 -> Bookmarks
+    path: "/bookmarks",
+    name: "bookmarks",
+    component: () => import('@/views/Bookmarks/BookmarkList.vue')
+  },
+  {
+    // Tab 2
+    path: '/new-task',
+    name: 'new-task',
+    component: () => import("@/views/Tabs/NewTask.vue")
+  },
+  {
+    // Tab 3
+    path: '/search',
+    name: 'search',
+    component: () => import("@/views/Tabs/Search.vue")
+  },
+  {
+    path: "/work-items",
+    name: "matters",
+    props: () => ({
+      type: MATTER
+    }),
+    component: WorkItemList
+  },
+  {
+    path: "/work-items/:id",
+    name: "matter-detail",
+    props: ({ params }) => ({
+      id: params.id,
+      type: MATTER
+    }),
+    component: () => import("@/views/WorkItems/WorkItemDetail.vue")
+  },
+  {
+    path: '/notifications',
+    name: 'notifications',
+    component: () => import('@/views/Notifications/NotificationList.vue')
+  },
+  {
+    path: "/notifications/settings",
+    name: "notification-settings",
+    component: () => import("@/views/Notifications/NotificationSettings.vue")
+  }
 ]
 
 const router = new VueRouter({
-    mode: 'history',
-    base: process.env.BASE_URL,
-    routes: routes,
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes: routes,
 });
 
 export default router;
diff --git a/src/services/index.js b/src/services/index.js
new file mode 100644
index 0000000..6c90e7a
--- /dev/null
+++ b/src/services/index.js
@@ -0,0 +1,5 @@
+import pushNotifications from "./pushNotificationsService";
+
+export {
+  pushNotifications
+}
\ No newline at end of file
diff --git a/src/views/Notifications/pushNotificationsService.js b/src/services/pushNotificationsService.js
similarity index 97%
rename from src/views/Notifications/pushNotificationsService.js
rename to src/services/pushNotificationsService.js
index 91ac1ee..77cb1f6 100644
--- a/src/views/Notifications/pushNotificationsService.js
+++ b/src/services/pushNotificationsService.js
@@ -1,5 +1,5 @@
 import serviceWorker from "@/registerServiceWorker";
-import notifications from "./notificationsAgent";
+import { notifications } from "@/agents";
 
 const toBase64 = buffer => {
   let binary = '';
diff --git a/src/views/Bookmarks/BookmarkList.vue b/src/views/Bookmarks/BookmarkList.vue
index 6d58df9..14176f0 100644
--- a/src/views/Bookmarks/BookmarkList.vue
+++ b/src/views/Bookmarks/BookmarkList.vue
@@ -31,7 +31,7 @@
   </v-container>
 </template>
 <script>
-import bookmarks from "./bookmarksAgent";
+import { bookmarks } from "@/agents";
 
 export default {
   data: function () {
diff --git a/src/views/Chronology/ChronologyList.vue b/src/views/Chronology/ChronologyList.vue
index 3ca50f8..b1ee8c7 100644
--- a/src/views/Chronology/ChronologyList.vue
+++ b/src/views/Chronology/ChronologyList.vue
@@ -35,7 +35,7 @@
 </template>
 <script>
 import moment from "moment";
-import chronologyAgent from "./chronologyAgent.js";
+import { chronology } from "@/agents";
 import { toChronologyListItems } from "@/util/mappers";
 
 const PAGE_SIZE = 10;
@@ -61,7 +61,7 @@ export default {
       try {
         this.lastPageLoaded++;
 
-        const result = await chronologyAgent.get(this.sharedoId, this.lastPageLoaded, PAGE_SIZE);
+        const result = await chronology.get(this.sharedoId, this.lastPageLoaded, PAGE_SIZE);
         const models = toChronologyListItems(result.rows);
         const totalPages = Math.ceil(result.totalRows / PAGE_SIZE);
         const hasMore = totalPages > this.lastPageLoaded;
diff --git a/src/views/Comments/CommentList.vue b/src/views/Comments/CommentList.vue
index 0e1882c..45b7882 100644
--- a/src/views/Comments/CommentList.vue
+++ b/src/views/Comments/CommentList.vue
@@ -52,8 +52,7 @@
 </template>
 <script>
 import moment from "moment";
-import comments from "./commentsAgent";
-import profile from "@/views/Profile/profileAgent";
+import { comments, profile } from "@/agents";
 import settings from "@/app/settings";
 
 const PAGE_SIZE = 10;
diff --git a/src/views/Main.vue b/src/views/Main.vue
index 248f4ee..b801477 100644
--- a/src/views/Main.vue
+++ b/src/views/Main.vue
@@ -1,95 +1,83 @@
 <template>
-    <v-app>
-
-        <v-main class="has-bottom-nav">
-            <router-view></router-view>
-
-            <VBottomNav>
-
-                <template slot="contents">
-                    <v-btn :to="{ path: '/tasks' }">
-                        <span>Tasks</span>
-                        <v-icon>mdi-checkbox-multiple-marked-circle-outline</v-icon>
-                    </v-btn>
-
-                    <v-btn :to="{ name: 'matters' }">
-                        <span>Work Items</span>
-                        <v-icon>mdi-rocket-launch</v-icon>
-                    </v-btn>
-
-                    <v-btn class="primary-action" @click.stop="showNewTaskForm()">
-                        <span>New Task</span>
-                        <v-icon>mdi-plus-circle-outline</v-icon>
-                    </v-btn>
-
-                    <v-btn :to="{ name: 'notifications' }">
-                        <span>Alerts</span>
-                        <v-badge :value="unreadNotifications > 0" :content="unreadNotifications" color="error lighten-1"
-                            offset-x="12" offset-y="14">
-                            <v-icon>mdi-bell-outline</v-icon>
-                        </v-badge>
-                    </v-btn>
-
-                    <v-btn :to="{ name: 'search' }">
-                        <span>Search</span>
-                        <v-icon>mdi-magnify</v-icon>
-                    </v-btn>
-                </template>
-
-            </VBottomNav>
-        </v-main>
-    </v-app>
+  <v-app>
+
+    <v-main class="has-bottom-nav">
+      <router-view></router-view>
+
+      <VBottomNav>
+
+        <template slot="contents">
+          <v-btn :to="{ path: '/tasks' }">
+            <span>Tasks</span>
+            <v-icon>mdi-checkbox-multiple-marked-circle-outline</v-icon>
+          </v-btn>
+
+          <v-btn :to="{ name: 'matters' }">
+            <span>Work Items</span>
+            <v-icon>mdi-rocket-launch</v-icon>
+          </v-btn>
+
+          <v-btn class="primary-action" @click.stop="showNewTaskForm()">
+            <span>New Task</span>
+            <v-icon>mdi-plus-circle-outline</v-icon>
+          </v-btn>
+
+          <v-btn :to="{ name: 'notifications' }">
+            <span>Alerts</span>
+            <v-badge :value="unreadNotifications > 0" :content="unreadNotifications" color="error lighten-1" offset-x="12"
+              offset-y="14">
+              <v-icon>mdi-bell-outline</v-icon>
+            </v-badge>
+          </v-btn>
+
+          <v-btn :to="{ name: 'search' }">
+            <span>Search</span>
+            <v-icon>mdi-magnify</v-icon>
+          </v-btn>
+        </template>
+
+      </VBottomNav>
+    </v-main>
+  </v-app>
 </template>
 
 <script>
 import { mapState, mapActions } from "vuex";
-import TaskDetailForm from "./Tasks/TaskDetailForm.vue";
 import { InstallPrompt, SharedoProfile } from '@sharedo/mobile-core';
+import { notifications } from "@/agents";
 import serviceWorkerBridge from "@/mixins/serviceWorkerBridge";
-import notifications from "@/views/Notifications/notificationsAgent";
 
 export default {
-    name: "Main",
-
-    mixins: [serviceWorkerBridge],
-
-    components: {
-        TaskDetailForm,
-    },
-
-    data: function () {
-        return {
-        };
-    },
-
-    computed: {
-        ...mapState({
-            unreadNotifications: state => state.notifications.unread,
-        }),
+  name: "Main",
+  mixins: [serviceWorkerBridge],
+  data: function () {
+    return {
+    };
+  },
+  computed: {
+    ...mapState({
+      unreadNotifications: state => state.notifications.unread,
+    }),
+  },
+  mounted: async function () {
+    InstallPrompt.init();
+    await this.getNotificationCount();
+  },
+  methods: {
+    ...mapActions({
+      setUnreadNotifications: "setUnreadNotifications",
+    }),
+    async getNotificationCount() {
+      try {
+        const notificationsResponse = await notifications.getFor(SharedoProfile.profile.userId);
+
+        this.setUnreadNotifications(notificationsResponse.numberOfNewItems);
+      } catch (error) {
+        console.error(error);
+      }
     },
-
-    mounted: async function () {
-        InstallPrompt.init();
-        await this.getNotificationCount();
-    },
-
-    methods: {
-        ...mapActions({
-            setUnreadNotifications: "setUnreadNotifications",
-        }),
-        async getNotificationCount() {
-            try {
-                const notificationsResponse = await notifications.getFor(SharedoProfile.profile.userId);
-
-                this.setUnreadNotifications(notificationsResponse.numberOfNewItems);
-            } catch (error) {
-                console.error(error);
-            }
-        },
-        showNewTaskForm: function () {
-            var self = this;
-            self.$coreUi.dialog(TaskDetailForm, { title: "New task" });
-        },
+    showNewTaskForm: function () {
     },
+  },
 };
 </script>
\ No newline at end of file
diff --git a/src/views/Matters/MatterDetail.vue b/src/views/Matters/MatterDetail.vue
deleted file mode 100644
index 331f359..0000000
--- a/src/views/Matters/MatterDetail.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <v-container>
-    <v-top-toolbar title="Work Item" show-back>
-      <template v-slot:menu>
-        <app-menu />
-      </template>
-      <template slot="right">
-        <v-icon>
-          mdi-dots-horizontal
-        </v-icon>
-      </template>
-    </v-top-toolbar>
-    <div v-show="loading">
-      <v-skeleton-loader type="paragraph"></v-skeleton-loader>
-    </div>
-    <div v-if="!loading && matter">
-      <h3>{{ matter.title }}</h3>
-      <div class="mb-2">
-        <span><strong>Reference:</strong></span>
-        <div>{{ matter.reference || "[No reference]" }}</div>
-      </div>
-      <div class="mb-2">
-        <span><strong>Title:</strong></span>
-        <div>{{ matter.title }}</div>
-      </div>
-      <v-divider class="mb-3" />
-      <div>
-        <span><strong>Description:</strong></span>
-        <div v-html="matter.description"></div>
-      </div>
-    </div>
-  </v-container>
-</template>
-<script>
-import matters from "./mattersAgent";
-
-export default {
-  props: {
-    id: {
-      type: String,
-      required: true
-    }
-  },
-  data: function () {
-    return {
-      loading: true,
-      matter: null,
-    }
-  },
-  methods: {
-    loadMatter: async function () {
-      const response = await matters.get(this.id);
-
-      this.matter = response.workItem;
-      this.loading = false;
-    }
-  },
-  mounted: async function () {
-    try {
-      await this.loadMatter();
-    } catch (error) {
-      console.error(error);
-    }
-  }
-}
-</script>
\ No newline at end of file
diff --git a/src/views/Matters/MatterList.vue b/src/views/Matters/MatterList.vue
deleted file mode 100644
index 28ba388..0000000
--- a/src/views/Matters/MatterList.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <v-container style='background: #f1f5f8'>
-    <v-top-toolbar title="Work item list">
-      <template v-slot:menu>
-        <app-menu />
-      </template>
-      <template slot="right">
-        <v-icon v-visible="!loading" @click="loadPage(true)">
-          mdi-cached
-        </v-icon>
-      </template>
-    </v-top-toolbar>
-    <div v-show="loading">
-      <v-skeleton-loader type="card, card, card" />
-    </div>
-    <v-card class="mx-auto mb-3" v-show="!loading" v-for="matter in matters" :key="matter.id" outlined>
-      <div class="d-flex" @click.stop="$router.push({ name: 'matter-detail', params: { id: matter.id } })">
-        <div class="flex-grow-1">
-          <v-card-title class="align-start flex-nowrap mb-3">
-            <div class="flex-grow-0">
-              <v-icon left>{{ matter.icon }}</v-icon>
-            </div>
-            <div class="flex-grow-1" style="word-break: break-word;">
-              <span class="font-weight-bold blue-grey--text">{{ matter.title }}</span>
-            </div>
-          </v-card-title>
-          <v-card-subtitle class="font-weight-bold pb-1">
-            {{ matter.type }} - {{ matter.phase }}
-          </v-card-subtitle>
-          <v-card-text class="grey--text text--darken-1">
-            <div class="text-truncate">{{ matter.reference || "No reference" }}</div>
-          </v-card-text>
-        </div>
-        <div class="flex-grow-0 d-flex">
-          <v-icon large color="grey lighten-2">mdi-chevron-right</v-icon>
-        </div>
-      </div>
-    </v-card>
-  </v-container>
-</template> 
-<script>
-import matters from "./mattersAgent";
-
-const PAGE_SIZE = 20;
-
-export default {
-  data: function () {
-    return {
-      loading: true,
-      loadingMore: false,
-      matters: [],
-      lastPageLoaded: 0,
-      hasMore: true
-    }
-  },
-  methods: {
-    loadPage: async function (refresh) {
-      if (refresh) {
-        this.lastPageLoaded = 0;
-        this.matters = [];
-        this.loading = true;
-      }
-
-      this.lastPageLoaded++;
-
-      const response = await matters.list(this.lastPageLoaded, PAGE_SIZE);
-
-      this.loading = false;
-      this.matters = response.results.map(item => ({
-        id: item.id,
-        reference: item.data.reference,
-        title: item.data.title,
-        description: item.data["description.html"],
-        icon: item.data["type.iconClass"],
-        type: item.data["type.name"],
-        phase: item.data["phase.name"],
-      }));
-
-      const totalPages = Math.ceil(response.totalCount / PAGE_SIZE);
-      const hasMore = totalPages > this.lastPageLoaded;
-
-      return hasMore;
-    }
-  },
-  mounted: async function () {
-    try {
-      this.hasMore = await this.loadPage();
-    } catch (error) {
-      console.error(error);
-    }
-  }
-}
-</script>
\ No newline at end of file
diff --git a/src/views/Notifications/NotificationList.vue b/src/views/Notifications/NotificationList.vue
index a574384..3ca0679 100644
--- a/src/views/Notifications/NotificationList.vue
+++ b/src/views/Notifications/NotificationList.vue
@@ -59,7 +59,7 @@
 import moment from "moment";
 import { mapState, mapActions } from "vuex";
 import { SharedoProfile, SharedoTypesTree } from "@sharedo/mobile-core";
-import notifications from "./notificationsAgent"
+import { notifications } from "@/agents"
 
 export default {
   data: function () {
diff --git a/src/views/Notifications/NotificationSettings.vue b/src/views/Notifications/NotificationSettings.vue
index cfd65f6..9eadbb9 100644
--- a/src/views/Notifications/NotificationSettings.vue
+++ b/src/views/Notifications/NotificationSettings.vue
@@ -37,8 +37,8 @@
   </v-container>
 </template>
 <script>
-import notifications from "./notificationsAgent";
-import pushNotifications from "./pushNotificationsService";
+import { notifications } from "@/agents";
+import { pushNotifications } from "@/services";
 
 export default {
   data: function () {
diff --git a/src/views/Participants/Participants.vue b/src/views/Participants/Participants.vue
index c0016e2..840f176 100644
--- a/src/views/Participants/Participants.vue
+++ b/src/views/Participants/Participants.vue
@@ -24,7 +24,7 @@
 </template>
 <script>
 import { MapUrlGenerator, ContactUrlGenerator } from "@sharedo/mobile-core";
-import participants from "./participantsAgent";
+import { participants } from "@/agents";
 import { toOdsEntityType } from "@/util/mappers/participantTypeMapper";
 import { fromParticipantLocation } from "@/util/mappers/locationMapper";
 
diff --git a/src/views/Profile/Profile.vue b/src/views/Profile/Profile.vue
index 10b8383..7b3f4fc 100644
--- a/src/views/Profile/Profile.vue
+++ b/src/views/Profile/Profile.vue
@@ -50,7 +50,7 @@
 </template>
 <script>
 import { SharedoProfile } from "@sharedo/mobile-core";
-import profiles from "./profileAgent"
+import { profile } from "@/agents";
 import { DEFAULT_AVATAR } from "@/constants/urls";
 
 const FALLBACK_CONTACT_ICON = "mdi-access-point";
@@ -88,10 +88,10 @@ export default {
       this.name = SharedoProfile.profile.name;
       this.profileImageDefault = DEFAULT_AVATAR;
 
-      const profile = await profiles.get();
+      const myProfile = await profile.get();
 
-      this.availability = this.availabilityOptions[profile.availabilitySystemName] || {};
-      this.contactDetails = profile.aspectData.contactDetails
+      this.availability = this.availabilityOptions[myProfile.availabilitySystemName] || {};
+      this.contactDetails = myProfile.aspectData.contactDetails
         .map(item => {
           let icon = FALLBACK_CONTACT_ICON;
 
@@ -107,7 +107,7 @@ export default {
         .filter(item => item.icon);
     },
     loadAvatar: async function () {
-      const avatar = await profiles.getAvatar();
+      const avatar = await profile.getAvatar();
 
       this.profileImageBase64 = avatar ? `data:${avatar.mimeType};base64,${avatar.content}` : null;
     },
diff --git a/src/views/RelatedDocuments/DocumentViewer.vue b/src/views/RelatedDocuments/DocumentViewer.vue
index 136752b..a7f7e81 100644
--- a/src/views/RelatedDocuments/DocumentViewer.vue
+++ b/src/views/RelatedDocuments/DocumentViewer.vue
@@ -32,7 +32,7 @@
   </v-card>
 </template>
 <script>
-import relatedDocuments from "./relatedDocumentsAgent";
+import { relatedDocuments } from "@/agents";
 import { isImage, isVideo, getExtension } from "@/util/files";
 
 export default {
diff --git a/src/views/RelatedDocuments/RelatedDocumentList.vue b/src/views/RelatedDocuments/RelatedDocumentList.vue
index 29fe7ac..1a3e82e 100644
--- a/src/views/RelatedDocuments/RelatedDocumentList.vue
+++ b/src/views/RelatedDocuments/RelatedDocumentList.vue
@@ -43,7 +43,7 @@
 <script>
 import { VBtnSection } from "@sharedo/mobile-core"
 import DocumentViewer from "./DocumentViewer"
-import relatedDocuments from "./relatedDocumentsAgent";
+import { relatedDocuments } from "@/agents";
 import { makeUnique, isImage, isVideo, getExtension } from "@/util/files"
 
 export default {
diff --git a/src/views/Tabs/Search.vue b/src/views/Tabs/Search.vue
index 432c2ca..e997bb8 100644
--- a/src/views/Tabs/Search.vue
+++ b/src/views/Tabs/Search.vue
@@ -68,7 +68,7 @@
 <script>
 import { mapState, mapActions } from "vuex";
 import { SharedoProfile, SharedoTypesTree, debounce } from "@sharedo/mobile-core";
-import search from "./searchAgent";
+import { search } from "@/agents";
 
 export default {
   data: function () {
diff --git a/src/views/Tasks/TaskDetailForm.vue b/src/views/Tasks/TaskDetailForm.vue
deleted file mode 100644
index 34d1434..0000000
--- a/src/views/Tasks/TaskDetailForm.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-    <v-card>
-        <v-toolbar flat outlined>
-            <v-icon @click="close()">mdi-close</v-icon>
-
-            <v-spacer />
-
-            <v-toolbar-title>{{title || "Edit"}}</v-toolbar-title>
-
-            <v-spacer />
-            
-            <v-btn @click="save()" small text>Save</v-btn>
-        </v-toolbar>
-
-        <!-- <v-card-title>
-        </v-card-title>-->
-
-        <v-card-text>
-            <v-container>
-                <v-row>
-                    <v-text-field
-                        label="Reference"
-                        v-model="reference"
-                        required
-                    ></v-text-field>
-                </v-row>
-                <v-row>
-                    <v-text-field
-                        label="Title"
-                        v-model="title"
-                        required
-                    ></v-text-field>
-                </v-row>
-                <v-row>
-                    <v-text-field
-                        label="Due"
-                        required
-                        placeholder="dd/mm/yyyy"
-                    ></v-text-field>
-                </v-row>
-            </v-container>
-        </v-card-text>
-    </v-card>
-</template>
-
-<script>
-export default {
-    props: {
-        reference: String,
-        title: String,
-    },
-    data: function () {
-        return {
-        };
-    },
-    methods: {
-        save: function() {
-            var self = this;
-
-            // TODO save
-            var l = this.$coreUi.loading();
-            setTimeout(function() {
-                l.dismiss();
-                self.close("my-result");
-            }, 1000)
-        },
-        close: function(result) {
-            this.$emit("close", result);
-        }
-    },
-};
-</script>
-
-<style scoped>
-</style>
\ No newline at end of file
diff --git a/src/views/Tasks/TaskList.vue b/src/views/Tasks/TaskList.vue
deleted file mode 100644
index 71863e5..0000000
--- a/src/views/Tasks/TaskList.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<template>
-    <v-container style='background: #f1f5f8'>
-
-        <VTopToolbar title="Task list">
-            <template v-slot:menu>
-                <app-menu />
-            </template>
-            <!-- Override right nav button -->
-            <template slot="right">
-                <v-icon v-if="bookmarksEnabled" @click="$router.push({ name: 'bookmarks' })">
-                    mdi-star-box-outline
-                </v-icon>
-                <v-icon v-visible="!loading" @click="loadPage(true)">
-                    mdi-cached
-                </v-icon>
-            </template>
-        </VTopToolbar>
-
-        <div v-show="loading">
-
-            <v-skeleton-loader type="card, card, card"></v-skeleton-loader>
-
-        </div>
-
-        <v-card class="mx-auto mb-3" outlined v-show="!loading" v-for="task in tasks" :key="task.id">
-            <div class="d-flex" @click.stop="$router.push({ name: 'task-detail', params: { id: task.id } })">
-                <div class="flex-grow-1">
-
-                    <v-card-title class="align-start flex-nowrap mb-3">
-                        <div class="flex-grow-0">
-                            <v-icon left>{{ task.icon }}</v-icon>
-                        </div>
-                        <div class="flex-grow-1" style="word-break: break-word;">
-                            <span class="font-weight-bold blue-grey--text">{{ task.title }}</span>
-                        </div>
-                    </v-card-title>
-
-                    <v-card-subtitle class="font-weight-bold pb-1">
-                        {{ task.type }} - {{ task.phase }}
-                    </v-card-subtitle>
-
-                    <v-card-text class="grey--text text--darken-1">
-                        <div class="text-truncate">{{ task.reference || "No reference" }}</div>
-                        <div class="text-truncate">
-                            <v-icon left small style="vertical-align: inherit;">{{ task.primaryOwnerIcon }}</v-icon>
-                            <span>{{ task.primaryOwner }}</span>
-                        </div>
-                    </v-card-text>
-                </div>
-
-                <div class="flex-grow-0 d-flex">
-                    <v-icon large color="grey lighten-2">mdi-chevron-right</v-icon>
-                </div>
-            </div>
-            <v-divider></v-divider>
-
-            <v-card-actions class="my-1">
-                <span class="card-text-small ml-2 task-lag" v-lag="task.due"></span>
-                <v-spacer></v-spacer>
-                <v-icon small color="grey" v-if="task.anyDocs" class="mr-2">mdi-paperclip</v-icon>
-                <v-icon small color="grey" class="mr-1" @click.stop="showOptions(task)">mdi-dots-horizontal</v-icon>
-            </v-card-actions>
-        </v-card>
-
-        <v-btn outlined rounded text block color="primary" v-show="!loading && hasMore" :loading="loadingMore"
-            @click.stop="loadNextPage()">
-            More
-        </v-btn>
-
-    </v-container>
-</template>
-
-  
-<script>
-import tasksAgent from "./tasksAgent";
-import bookmarks from "@/views/Bookmarks/bookmarksAgent";
-
-const rpp = 20;
-
-export default {
-    components: {
-    },
-    data() {
-        return {
-            loading: true,
-            loadingMore: false,
-            tasks: [],
-            lastPageLoaded: 0,
-            hasMore: true,
-            bookmarksEnabled: false
-        };
-    },
-    mounted: async function () {
-        try {
-            var results = await Promise.all([bookmarks.enabled(), this.loadPage()]);
-
-            this.bookmarksEnabled = results[0].enabled;
-            this.hasMore = results[1].hasMore;
-        } catch (error) {
-            console.error(error);
-        }
-    },
-    methods:
-    {
-        loadPage(refresh) {
-            if (refresh) {
-                // TODO scroll to top
-                // TODO hasMore not working?
-                //this.hasMore = false;
-                this.lastPageLoaded = 0;
-                this.tasks.splice(0, this.tasks.length);
-                this.loading = true;
-            }
-
-            return new Promise((resolve, reject) => {
-                this.lastPageLoaded++;
-
-                tasksAgent.getMyTasks(rpp, this.lastPageLoaded).then(data => {
-                    this.loading = false;
-                    var models = data.results.map(t =>
-                    ({
-                        id: t.id,
-                        reference: t.data.reference,
-                        title: t.data.title,
-                        description: t.data["description.html"],
-                        due: new Date(t.data["taskDueDate.date.local.value"]),
-                        icon: t.data["type.iconClass"],
-                        type: t.data["type.name"],
-                        phase: t.data["phase.name"],
-                        primaryOwner: t.data["roles.primary-owner.ods.name"],
-                        primaryOwnerIcon: t.data["roles.primary-owner.participantType.iconClass"],
-                        anyDocs: !!t.data["documents!1.title"],
-                        link: "/tasks/" + t.id
-                    }));
-
-                    models.forEach(m => { this.tasks.push(m); });
-
-                    var totalPages = Math.ceil(data.totalCount / rpp);
-                    var hasMore = totalPages > this.lastPageLoaded;
-
-                    resolve({ hasMore: hasMore });
-                }).catch(console.error);
-            });
-        },
-
-        loadNextPage() {
-            this.loadingMore = true;
-            this.loadPage().then(result => {
-                this.loadingMore = false;
-                if (!result.hasMore) {
-                    this.hasMore = false;
-                }
-            }).catch(console.error);
-        },
-
-        navTo(task) {
-            var self = this;
-            self.$router.push({ path: task.link });
-        },
-
-        showOptions(task) {
-            var self = this;
-
-            self.$coreUi.actionSheet({
-                items: [
-                    { text: "Open", color: "primary", icon: "mdi-arrow-right-circle", handler: self.navTo.bind(self, task) },
-                ]
-            });
-        },
-    }
-};
-</script>
-
-<style scoped>
-.v-card__title {
-    font-size: 1.1rem;
-    line-height: 1.5rem;
-}
-
-.v-card__title .v-icon.v-icon {
-    font-size: 22px;
-}
-
-.v-card__text,
-.card-text-small {
-    font-size: .775rem;
-}
-
-/* Purposefully unspecific CSS so red--text overrides us */
-.task-lag {
-    color: var(--v-secondary-darken1);
-}
-</style>
\ No newline at end of file
diff --git a/src/views/Time/TimeEntryForm.vue b/src/views/Time/TimeEntryForm.vue
index 225277a..1d7d88e 100644
--- a/src/views/Time/TimeEntryForm.vue
+++ b/src/views/Time/TimeEntryForm.vue
@@ -68,7 +68,7 @@
 import { SharedoProfile } from "@sharedo/mobile-core";
 import moment from "moment";
 import SegmentSelector from "./SegmentSelector";
-import time from "./timeAgent.js";
+import { time } from "@/agents";
 
 export default {
   components: { SegmentSelector },
diff --git a/src/views/Time/TimeEntryList.vue b/src/views/Time/TimeEntryList.vue
index 76a0e2d..86372d9 100644
--- a/src/views/Time/TimeEntryList.vue
+++ b/src/views/Time/TimeEntryList.vue
@@ -61,7 +61,7 @@
 <script>
 import moment from "moment";
 import { SharedoProfile } from "@sharedo/mobile-core";
-import time from "./timeAgent";
+import { time } from "@/agents";
 import TimeEntryForm from "./TimeEntryForm"
 
 const PAGE_SZE = 99;
diff --git a/src/views/WorkItems/EditWorkItem.vue b/src/views/WorkItems/EditWorkItem.vue
new file mode 100644
index 0000000..7a53ae2
--- /dev/null
+++ b/src/views/WorkItems/EditWorkItem.vue
@@ -0,0 +1,114 @@
+<template>
+  <v-card>
+    <v-toolbar flat outlined>
+      <v-icon @click="close()">mdi-close</v-icon>
+
+      <v-spacer />
+
+      <v-toolbar-title>{{ title || "Edit" }}</v-toolbar-title>
+
+      <v-spacer />
+
+      <v-btn @click="save()" small text>Save</v-btn>
+    </v-toolbar>
+
+    <!-- <v-card-title>
+      </v-card-title>-->
+
+    <v-card-text>
+      <v-container>
+        <v-row>
+          <v-text-field label="Reference" v-model="reference" required
+            :disabled="!workItem.referenceIsUserProvided"></v-text-field>
+        </v-row>
+        <v-row>
+          <v-text-field label="Title" v-model="title" required :disabled="!workItem.titleIsUserProvided"></v-text-field>
+        </v-row>
+        <v-row v-if="isTask">
+          <v-text-field type="datetime-local" label="Due" v-model="taskDueDateInput" required
+            placeholder="dd/mm/yyyy"></v-text-field>
+        </v-row>
+      </v-container>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import moment from "moment";
+import { tasks, matters } from "@/agents"
+import workitems from "@/agents/workItemsAgent";
+import { TASK, MATTER } from "@/constants/workItemTypes";
+
+export default {
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: TASK
+    },
+    id: {
+      type: String,
+      required: true
+    },
+    workItem: {
+      type: Object,
+      required: true,
+    }
+  },
+  data: function () {
+    return {
+      reference: this.workItem.reference,
+      title: this.workItem.title,
+      taskDueDate: this.workItem.taskDueDate
+    };
+  },
+  computed: {
+    isTask: function () {
+      return this.type === TASK;
+    },
+    taskDueDateInput: {
+      get: function () {
+        return moment(this.taskDueDate).format("YYYY-MM-DDTHH:mm");
+      },
+      set: function (value) {
+        if (value) {
+          this.taskDueDate = moment(value).utc().format();
+        } else {
+          this.taskDueDate = "";
+        }
+      }
+    }
+  },
+  methods: {
+    save: async function () {
+      const l = this.$coreUi.loading();
+
+      let workItem;
+      if (this.type === TASK) {
+        workItem = await tasks.getTask(this.id);
+      } else if (this.type === MATTER) {
+        workItem = await matters.get(this.id);
+      } else {
+        throw "Unsupported work item type.";
+      }
+
+      workItem.workItem.reference = this.reference;
+      workItem.workItem.title = this.title;
+
+      if (this.type === TASK) {
+        workItem.aspectData.task.dueDateTime = this.taskDueDate;
+      }
+
+      await workitems.save(this.id, workItem);
+
+      l.dismiss();
+      this.close(true);
+    },
+    close: function (result) {
+      this.$emit("close", result);
+    }
+  },
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/Tasks/TaskDetail.vue b/src/views/WorkItems/WorkItemDetail.vue
similarity index 81%
rename from src/views/Tasks/TaskDetail.vue
rename to src/views/WorkItems/WorkItemDetail.vue
index ab8b4f1..a757ca2 100644
--- a/src/views/Tasks/TaskDetail.vue
+++ b/src/views/WorkItems/WorkItemDetail.vue
@@ -70,23 +70,26 @@
 
 <script>
 import { SharedoProfile } from "@sharedo/mobile-core";
-import TaskDetailForm from "./TaskDetailForm.vue";
-import tasksAgent from "./tasksAgent";
-import bookmarks from "@/views/Bookmarks/bookmarksAgent";
-import comments from "@/views/Comments/commentsAgent";
-import phases from "./phaseAgent";
+import { tasks, matters, comments, bookmarks, phases } from "@/agents";
+import { MATTER, TASK } from "@/constants/workItemTypes";
 
+const EditWorkItem = () => import("./EditWorkItem");
 const RelatedDocumentList = () => import("@/views/RelatedDocuments/RelatedDocumentList");
 
 export default {
   components: {
-    TaskDetailForm,
+    EditWorkItem,
     RelatedDocumentList
   },
   props: {
     id: {
       type: String,
       required: true
+    },
+    type: {
+      type: String,
+      required: false,
+      default: TASK
     }
   },
   data: function () {
@@ -95,6 +98,7 @@ export default {
       reference: null,
       title: "hello",
       description: null,
+      taskDueDate: "",
       bookmarkingEnabled: false,
       bookmarked: false,
       commentCount: 0,
@@ -102,7 +106,9 @@ export default {
       phases: [],
       permissions: [],
       owner: "",
-      actions: null
+      actions: null,
+      titleIsUserProvided: false,
+      referenceIsUserProvided: false
     };
   },
   computed: {
@@ -135,7 +141,7 @@ export default {
     await Promise.all([
       this.loadPermissions(),
       this.loadPhases(),
-      this.loadTask(),
+      this.loadWorkItem(),
       this.loadBookmarkingConfig(),
       this.loadCommentCount()
     ]);
@@ -155,14 +161,26 @@ export default {
         console.error(error);
       }
     },
+    loadWorkItem: function () {
+      if (this.type === TASK) {
+        return this.loadTask();
+      } else if (this.type === MATTER) {
+        return this.loadMatter();
+      }
+    },
     loadTask: async function () {
       try {
-        const task = await tasksAgent.getTask(this.id);
+        const task = await tasks.getTask(this.id);
 
         this.reference = task.workItem.reference;
         this.title = task.workItem.title;
         this.description = task.workItem.description;
+        this.taskDueDate = task.aspectData.task.dueDateTime;
         this.owner = task.aspectData.taskAssignedTo.primaryOwner;
+
+        this.titleIsUserProvided = task.workItem.titleIsUserProvided;
+        this.referenceIsUserProvided = task.workItem.referenceIsUserProvided;
+
         this.loading = false;
 
         if (this.canTakeOwnership) {
@@ -179,6 +197,21 @@ export default {
         console.error(error);
       }
     },
+    loadMatter: async function () {
+      try {
+        const matter = await matters.get(this.id);
+        this.reference = matter.workItem.reference;
+        this.title = matter.workItem.title;
+        this.description = matter.workItem.description;
+
+        this.titleIsUserProvided = matter.workItem.titleIsUserProvided;
+        this.referenceIsUserProvided = matter.workItem.referenceIsUserProvided;
+
+        this.loading = false;
+      } catch (error) {
+        console.error(error);
+      }
+    },
     loadCommentCount: async function () {
       try {
         const { totalRows } = await comments.get(this.id, 1, 1);
@@ -198,7 +231,7 @@ export default {
     },
     loadPermissions: async function () {
       try {
-        this.permissions = await tasksAgent.getPermissions(this.id);
+        this.permissions = await tasks.getPermissions(this.id);
       } catch (error) {
         console.error(error);
       }
@@ -212,7 +245,7 @@ export default {
     },
     loadActions: async function () {
       try {
-        this.actions = await tasksAgent.getActions(this.id);
+        this.actions = await tasks.getActions(this.id);
       } catch (error) {
         console.error(error);
       }
@@ -271,7 +304,7 @@ export default {
       try {
         const loading = this.$coreUi.loading();
 
-        await tasksAgent.takeOwnership(this.id);
+        await tasks.takeOwnership(this.id);
 
         this.owner = SharedoProfile.profile.userId;
         loading.dismiss();
@@ -280,7 +313,25 @@ export default {
       }
     },
     showTaskDetailForm: function () {
-      this.$coreUi.dialog(TaskDetailForm, {});
+      const vm = this;
+
+      this.$coreUi.dialog(EditWorkItem, {
+        id: vm.id,
+        type: vm.type,
+        workItem: {
+          title: vm.title,
+          reference: vm.reference,
+          taskDueDate: vm.taskDueDate,
+          titleIsUserProvided: vm.titleIsUserProvided,
+          referenceIsUserProvided: vm.referenceIsUserProvided
+        }
+      }, {
+        closing: saved => {
+          if (saved) {
+            vm.loadWorkItem();
+          }
+        }
+      });
     },
     confirmTransitionTo: function (phase) {
       const self = this;
diff --git a/src/views/WorkItems/WorkItemList.vue b/src/views/WorkItems/WorkItemList.vue
new file mode 100644
index 0000000..812e268
--- /dev/null
+++ b/src/views/WorkItems/WorkItemList.vue
@@ -0,0 +1,227 @@
+<template>
+  <v-container style='background: #f1f5f8'>
+
+    <VTopToolbar title="Task list">
+      <template v-slot:menu>
+        <app-menu />
+      </template>
+      <!-- Override right nav button -->
+      <template slot="right">
+        <v-icon v-if="bookmarksEnabled" @click="$router.push({ name: 'bookmarks' })">
+          mdi-star-box-outline
+        </v-icon>
+        <v-icon v-visible="!loading" @click="loadPage(true)">
+          mdi-cached
+        </v-icon>
+      </template>
+    </VTopToolbar>
+
+    <div v-show="loading">
+
+      <v-skeleton-loader type="card, card, card"></v-skeleton-loader>
+
+    </div>
+
+    <v-card class="mx-auto mb-3" outlined v-show="!loading" v-for="task in tasks" :key="task.id">
+      <div class="d-flex" @click.stop="navigate(task)">
+        <div class="flex-grow-1">
+
+          <v-card-title class="align-start flex-nowrap mb-3">
+            <div class="flex-grow-0">
+              <v-icon left>{{ task.icon }}</v-icon>
+            </div>
+            <div class="flex-grow-1" style="word-break: break-word;">
+              <span class="font-weight-bold blue-grey--text">{{ task.title }}</span>
+            </div>
+          </v-card-title>
+
+          <v-card-subtitle class="font-weight-bold pb-1">
+            {{ task.type }} - {{ task.phase }}
+          </v-card-subtitle>
+
+          <v-card-text class="grey--text text--darken-1">
+            <div class="text-truncate">{{ task.reference || "No reference" }}</div>
+            <div class="text-truncate">
+              <v-icon left small style="vertical-align: inherit;">{{ task.primaryOwnerIcon }}</v-icon>
+              <span>{{ task.primaryOwner }}</span>
+            </div>
+          </v-card-text>
+        </div>
+
+        <div class="flex-grow-0 d-flex">
+          <v-icon large color="grey lighten-2">mdi-chevron-right</v-icon>
+        </div>
+      </div>
+      <v-divider></v-divider>
+
+      <v-card-actions class="my-1">
+        <span v-if="isTask" class="card-text-small ml-2 task-lag" v-lag="task.due"></span>
+        <v-spacer></v-spacer>
+        <v-icon small color="grey" v-if="task.anyDocs" class="mr-2">mdi-paperclip</v-icon>
+        <v-icon small color="grey" class="mr-1" @click.stop="showOptions(task)">mdi-dots-horizontal</v-icon>
+      </v-card-actions>
+    </v-card>
+
+    <v-btn outlined rounded text block color="primary" v-show="!loading && hasMore" :loading="loadingMore"
+      @click.stop="loadNextPage()">
+      More
+    </v-btn>
+
+  </v-container>
+</template>
+
+
+<script>
+import { tasks, matters, bookmarks } from "@/agents";
+import { TASK, MATTER } from "@/constants/workItemTypes";
+
+const rpp = 20;
+
+export default {
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: TASK
+    }
+  },
+  data: function () {
+    return {
+      loading: true,
+      loadingMore: false,
+      tasks: [],
+      lastPageLoaded: 0,
+      hasMore: true,
+      bookmarksEnabled: false
+    };
+  },
+  computed: {
+    isTask: function () {
+      return this.type === TASK;
+    }
+  },
+  watch: {
+    type: async function () {
+      await this.load();
+    }
+  },
+  methods: {
+    load: async function () {
+      try {
+        var results = await Promise.all([bookmarks.enabled(), this.loadPage(true)]);
+
+        this.bookmarksEnabled = results[0].enabled;
+        this.hasMore = results[1].hasMore;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    loadPage: async function (refresh) {
+      if (refresh) {
+        // TODO scroll to top
+        // TODO hasMore not working?
+        //this.hasMore = false;
+        this.lastPageLoaded = 0;
+        this.tasks.splice(0, this.tasks.length);
+        this.loading = true;
+      }
+
+      if (this.type === TASK) {
+        return await this.loadTasks();
+      } else if (this.type === MATTER) {
+        return await this.loadMatters();
+      }
+    },
+    loadItems: async function (loader) {
+      try {
+        this.lastPageLoaded++;
+        const response = await loader();
+
+        this.tasks = response.results.map(t => ({
+          id: t.id,
+          reference: t.data.reference,
+          title: t.data.title,
+          description: t.data["description.html"],
+          due: new Date(t.data["taskDueDate.date.local.value"]),
+          icon: t.data["type.iconClass"],
+          type: t.data["type.name"],
+          phase: t.data["phase.name"],
+          primaryOwner: t.data["roles.primary-owner.ods.name"],
+          primaryOwnerIcon: t.data["roles.primary-owner.participantType.iconClass"],
+          anyDocs: !!t.data["documents!1.title"],
+          link: "/tasks/" + t.id
+        }));
+
+        const totalPages = Math.ceil(response.totalCount / rpp);
+        this.loading = false;
+        return { hasMore: totalPages > this.lastPageLoaded };
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    loadTasks: async function () {
+      return await this.loadItems(() => tasks.getMyTasks(rpp, this.lastPageLoaded));
+    },
+    loadMatters: async function () {
+      return await this.loadItems(() => matters.list(this.lastPageLoaded, rpp));
+    },
+    loadNextPage: async function () {
+      try {
+        this.loadingMore = true;
+
+        const result = await this.loadPage();
+
+        this.loadingMore = false;
+
+        if (!result.hasMore) {
+          this.hasMore = false;
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    navigate: function (workItem) {
+      if (this.type === TASK) {
+        this.$router.push({ name: "task-detail", params: { id: workItem.id } });
+      } else if (this.type === MATTER) {
+        this.$router.push({ name: "matter-detail", params: { id: workItem.id } });
+      }
+    },
+    showOptions: function (workItem) {
+      const vm = this;
+
+      if (this.type === TASK) {
+        vm.$coreUi.actionSheet({
+          items: [
+            { text: "Open", color: "primary", icon: "mdi-arrow-right-circle", handler: () => vm.navTo(workItem) },
+          ]
+        });
+      }
+    },
+  },
+  mounted: async function () {
+    await this.load();
+  },
+};
+</script>
+
+<style scoped>
+.v-card__title {
+  font-size: 1.1rem;
+  line-height: 1.5rem;
+}
+
+.v-card__title .v-icon.v-icon {
+  font-size: 22px;
+}
+
+.v-card__text,
+.card-text-small {
+  font-size: .775rem;
+}
+
+/* Purposefully unspecific CSS so red--text overrides us */
+.task-lag {
+  color: var(--v-secondary-darken1);
+}
+</style>
\ No newline at end of file