diff --git a/src/components/IndicatorCell.vue b/src/components/IndicatorCell.vue
index 3e4a723..73f664a 100644
--- a/src/components/IndicatorCell.vue
+++ b/src/components/IndicatorCell.vue
@@ -5,7 +5,7 @@
         <v-icon class="mx-1" color="red" v-on="on">{{  mdiEngineOff,
         }}</v-icon>
       </template>
-      <span>Disabled</span>
+      <span>{{ disableLabel }}</span>
     </v-tooltip>
 
     <v-tooltip v-if="value.is_hidden === true" bottom>
@@ -27,6 +27,7 @@
 <script>
 export default {
   props: {
+    disableLabel: { default: 'Disabled', type: String },
     hideDescription: { default: false, type: Boolean },
     value: { type: Object, required: true }
   }
diff --git a/src/components/MainNavigationDrawer.vue b/src/components/MainNavigationDrawer.vue
index 175f8d2..c773c17 100644
--- a/src/components/MainNavigationDrawer.vue
+++ b/src/components/MainNavigationDrawer.vue
@@ -66,7 +66,8 @@ import {
   mdiNoteOutline,
   mdiTag,
   mdiOfficeBuilding,
-  mdiViewGrid
+  mdiViewGrid,
+  mdiAccountGroup
 } from '@mdi/js'
 
 export default {
@@ -190,6 +191,18 @@ export default {
             //   title: 'Teams'
             // }
           ]
+        },
+        {
+          header: 'Admin',
+          items: [
+            {
+              can: ['create', 'users'],
+              icon: mdiAccountGroup,
+              title: 'Users',
+              to: '/users',
+              org: false
+            }
+          ]
         }
       ]
     }
diff --git a/src/components/UserAccountEdit.vue b/src/components/UserAccountEdit.vue
index e88d835..a31838b 100644
--- a/src/components/UserAccountEdit.vue
+++ b/src/components/UserAccountEdit.vue
@@ -7,13 +7,13 @@
         <v-card-text>
           <ValidationProvider
             v-slot="{ errors }"
-            name="name"
+            name="preferred name"
             rules="required|max:100"
           >
             <v-text-field
               v-model="name"
               :error-messages="errors"
-              label="Name"
+              label="Preferred Name"
               required
             ></v-text-field>
           </ValidationProvider>
diff --git a/src/components/UserDetail.vue b/src/components/UserDetail.vue
new file mode 100644
index 0000000..deefab1
--- /dev/null
+++ b/src/components/UserDetail.vue
@@ -0,0 +1,150 @@
+<template>
+  <v-row>
+    <v-col>
+      <v-row>
+        <v-col>
+          <v-card>
+            <v-container fluid>
+              <v-row>
+                <v-col>
+                  <ValidationProvider
+                    v-slot="{ errors }"
+                    name="email"
+                    rules="required|email"
+                  >
+                    <v-text-field
+                      v-model.trim="value.email"
+                      :error-messages="errors"
+                      :readonly="!editing"
+                      label="Email"
+                      required
+                    ></v-text-field>
+                  </ValidationProvider>
+
+                  <ValidationProvider
+                    v-slot="{ errors }"
+                    name="preferred name"
+                    rules="required|min:1|max:100"
+                  >
+                    <v-text-field
+                      v-model.trim="value.name"
+                      :error-messages="errors"
+                      :readonly="!editing"
+                      label="Preferred name"
+                      required
+                    ></v-text-field>
+                  </ValidationProvider>
+
+                  <ValidationProvider v-slot="{ errors }" name="full_name">
+                    <v-text-field
+                      v-model.trim="value.full_name"
+                      :error-messages="errors"
+                      :readonly="!editing"
+                      label="Full name"
+                    ></v-text-field>
+                  </ValidationProvider>
+
+                  <ValidationProvider
+                    v-if="create"
+                    v-slot="{ errors }"
+                    name="password"
+                    rules="required|min:10|max:100"
+                    vid="password"
+                  >
+                    <v-text-field
+                      v-model.trim="value.password"
+                      :error-messages="errors"
+                      :readonly="!editing"
+                      label="Password"
+                      required
+                      type="password"
+                    ></v-text-field>
+                  </ValidationProvider>
+
+                  <ValidationProvider
+                    v-if="create"
+                    v-slot="{ errors }"
+                    name="confirmation"
+                    rules="required|confirmed:password"
+                  >
+                    <v-text-field
+                      v-model="value.password_confirm"
+                      :error-messages="errors"
+                      label="Password confirmation"
+                      required
+                      type="password"
+                    ></v-text-field>
+                  </ValidationProvider>
+
+                  <ValidationProvider
+                    v-slot="{ errors }"
+                    name="roles"
+                    rules="required"
+                  >
+                    <v-select
+                      v-model="value.roles"
+                      class="pt-3"
+                      :items="roles"
+                      :error-messages="errors"
+                      chips
+                      deletable-chips
+                      dense
+                      label="Role"
+                      hide-details
+                      small-chips
+                      variant="solo"
+                      :readonly="!editing"
+                    ></v-select>
+                  </ValidationProvider>
+                </v-col>
+              </v-row>
+
+              <standard-options :editing="editing" :value="value" as="users" />
+
+              <standard-audit v-if="!editing" :value="value" />
+
+              <standard-identifier v-if="!editing" :value="value" />
+            </v-container>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import { ValidationProvider } from 'vee-validate'
+import StandardAudit from '@/components/StandardAudit'
+import StandardIdentifier from '@/components/StandardIdentifier'
+import StandardOptions from '@/components/StandardOptions'
+
+export default {
+  components: {
+    StandardAudit,
+    StandardIdentifier,
+    StandardOptions,
+    ValidationProvider
+  },
+
+  props: {
+    create: { default: false, type: Boolean },
+    editing: { default: false, type: Boolean },
+    value: { type: Object, required: true }
+  },
+
+  computed: {
+    roles() {
+      const roles = ['user', 'manager']
+      if (
+        this.$cannotPatch('users', {
+          _id: this.value._id
+        })
+      ) {
+        return roles.filter(role => role === this.value.roles)
+      }
+
+      return roles
+    }
+  }
+}
+</script>
diff --git a/src/components/UserPasswordEdit.vue b/src/components/UserPasswordEdit.vue
index 67f2937..88cf02a 100644
--- a/src/components/UserPasswordEdit.vue
+++ b/src/components/UserPasswordEdit.vue
@@ -5,24 +5,26 @@
         <v-card-title class="headline"> Change password </v-card-title>
 
         <v-card-text>
-          <ValidationProvider
-            v-slot="{ errors }"
-            name="current password"
-            rules="required|min:6|max:100"
-          >
-            <v-text-field
-              v-model="current_password"
-              :error-messages="errors"
-              label="Current password"
-              required
-              type="password"
-            ></v-text-field>
-          </ValidationProvider>
+          <template v-if="currentPasswordRequired">
+            <ValidationProvider
+              v-slot="{ errors }"
+              name="current password"
+              rules="required|min:10|max:100"
+            >
+              <v-text-field
+                v-model="current_password"
+                :error-messages="errors"
+                label="Current password"
+                required
+                type="password"
+              ></v-text-field>
+            </ValidationProvider>
+          </template>
 
           <ValidationProvider
             v-slot="{ errors }"
             name="new password"
-            rules="required|min:6|max:100"
+            rules="required|min:10|max:100"
             vid="new_password"
           >
             <v-text-field
@@ -75,6 +77,8 @@ export default {
   },
 
   props: {
+    currentPasswordRequired: { default: true, type: Boolean },
+    editStatus: { default: false, type: Boolean },
     user: { default: null, type: Object }
   },
 
@@ -105,13 +109,16 @@ export default {
 
       return this.patch([this.id, { $set }, {}])
         .then(() =>
-          this.$bus.$emit('status', {
+          this.$bus.$emit(this.editStatus ? 'edit-status' : 'status', {
             type: 'success',
             message: 'Password changed.' // TODO: Localize
           })
         )
         .catch(({ message }) =>
-          this.$bus.$emit('status', { type: 'error', message })
+          this.$bus.$emit(this.editStatus ? 'edit-status' : 'status', {
+            type: 'error',
+            message
+          })
         )
     }
   }
diff --git a/src/components/UsersSearch.vue b/src/components/UsersSearch.vue
new file mode 100644
index 0000000..65b40b1
--- /dev/null
+++ b/src/components/UsersSearch.vue
@@ -0,0 +1,275 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col cols="12" md="6">
+        <v-select
+          v-model="selectedRoles"
+          :items="rolesOption"
+          chips
+          deletable-chips
+          dense
+          label="Roles"
+          filled
+          flat
+          hide-details
+          multiple
+          small-chips
+        ></v-select>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-select
+          v-model="selectedOptions"
+          :items="optionItems"
+          chips
+          deletable-chips
+          dense
+          label="Options"
+          filled
+          flat
+          hide-details
+          multiple
+          small-chips
+        ></v-select>
+      </v-col>
+    </v-row>
+
+    <v-row dense>
+      <v-col>
+        <v-text-field
+          v-model.trim="searchDebounce"
+          :append-icon="mdiMagnify"
+          filled
+          flat
+          label="Filter users"
+        ></v-text-field>
+      </v-col>
+    </v-row>
+
+    <v-row dense>
+      <v-col>
+        <feathers-vuex-find
+          v-slot="{ isFindPending: loading, items: users, pagination }"
+          :fetch-query="usersFetchQuery"
+          :query="usersQuery"
+          :watch="['fetchQuery.$and', 'fetchQuery.$limit', 'fetchQuery.$skip']"
+          qid="search"
+          service="users"
+        >
+          <v-data-table
+            :footer-props="{ itemsPerPageOptions: [10, 50, 100] }"
+            :headers="headers"
+            :hide-default-header="$vuetify.breakpoint.xsOnly"
+            :items="users"
+            :loading="loading"
+            :options.sync="tableOptions"
+            :server-items-length="pagination ? pagination.total : 0"
+            disable-sort
+            item-key="_id"
+          >
+            <template #item.name="{ item }">
+              <nuxt-link
+                v-if="showLink && item.name"
+                :to="{
+                  name: 'users-userId',
+                  params: {
+                    userId: item._id
+                  }
+                }"
+                >{{ item.name }}</nuxt-link
+              ><span v-else>{{ item.name || '--' }}</span>
+            </template>
+
+            <template #item.roles="{ item }">
+              <span>{{
+                (item.roles && item.roles.length && item.roles[0]) || '--'
+              }}</span>
+            </template>
+
+            <template #item.indicators="{ item }">
+              <indicator-cell disable-label="Deactivated" :value="item" />
+            </template>
+
+            <template #item.icons="{ item }">
+              <span v-if="$scopedSlots.actions" class="text-no-wrap">
+                <slot name="actions" :item="item" />
+              </span>
+            </template>
+          </v-data-table>
+        </feathers-vuex-find>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import _debounce from 'lodash/debounce'
+import IndicatorCell from '@/components/IndicatorCell'
+import { escapeRegExp } from '@/lib/utils'
+
+export default {
+  components: {
+    IndicatorCell
+  },
+
+  props: {
+    showLink: { default: false, type: Boolean }
+  },
+
+  data: () => ({
+    headers: [
+      {
+        align: 'center',
+        value: 'select',
+        width: '50px'
+      },
+      {
+        align: 'left',
+        text: 'Preferred name',
+        value: 'name'
+      },
+      {
+        align: 'left',
+        text: 'Email',
+        value: 'email'
+      },
+      {
+        align: 'left',
+        text: 'Role',
+        value: 'roles'
+      },
+      {
+        align: 'right',
+        value: 'indicators',
+        width: '5%'
+      },
+      {
+        align: 'right',
+        value: 'icons',
+        width: '5%'
+      }
+    ],
+
+    optionItems: ['Active', 'Deactivated'],
+    rolesOption: ['manager', 'user'],
+
+    queryUserIds: [],
+
+    search: null,
+    searchDebounce: null,
+
+    selectedOptions: null,
+    selectedRoles: null,
+
+    tableOptions: {
+      descending: false,
+      page: 1,
+      itemsPerPage: 100,
+      totalItems: null
+    }
+  }),
+
+  computed: {
+    usersFetchQuery() {
+      const { search, selectedOptions, selectedRoles, tableOptions } = this
+      const { page, itemsPerPage } = tableOptions
+
+      const query = {
+        $limit: itemsPerPage,
+        $skip: (page - 1) * itemsPerPage,
+        $sort: { email: 1, _id: 1 },
+        $select: ['_id', 'email', 'full_name', 'is_enabled', 'name', 'roles']
+      }
+
+      const ands = []
+
+      if (
+        selectedOptions &&
+        selectedOptions.length &&
+        this.optionItems.length !== selectedOptions.length
+      ) {
+        ands.push({
+          is_enabled:
+            selectedOptions.includes('Active') &&
+            !selectedOptions.includes('Deactivated')
+        })
+      }
+
+      if (selectedRoles && selectedRoles.length) {
+        ands.push({ roles: { $in: selectedRoles } })
+      }
+
+      if (search && search.length) {
+        // TODO: Implement n-grams for partial full-text search! https://en.wikipedia.org/wiki/N-gram
+        ands.push({
+          $or: [
+            {
+              name: {
+                $regex: `^${escapeRegExp(search)}`,
+                $options: 'i'
+              }
+            },
+            {
+              full_name: {
+                $regex: `^${escapeRegExp(search)}`,
+                $options: 'i'
+              }
+            },
+            {
+              email: {
+                $regex: `^${escapeRegExp(search)}`,
+                $options: 'i'
+              }
+            }
+          ]
+        })
+      }
+
+      if (ands.length) query.$and = ands
+
+      return query
+    },
+
+    paginationSearch() {
+      return this.$store.state.users.pagination.search
+    },
+
+    usersQuery() {
+      return {
+        _id: { $in: this.queryUserIds },
+        $sort: { name: 1, _id: 1 }
+      }
+    }
+  },
+
+  watch: {
+    paginationSearch(newValue) {
+      this.queryUserIds = (newValue && newValue.ids) || []
+    },
+
+    searchDebounce(newValue) {
+      this.debouncedSearch(newValue)
+    }
+  },
+
+  created() {
+    this.debouncedSearch = _debounce(value => {
+      this.search = value
+    }, 400)
+  },
+
+  mounted() {
+    let { headers } = this
+
+    if (!this.$scopedSlots.select) headers = headers.slice(1)
+    if (!this.$scopedSlots.actions) headers = headers.slice(0, -1)
+
+    this.headers = headers
+  },
+
+  beforeDestroy() {
+    this.debouncedSearch.cancel()
+    this.debouncedSearch = null
+  }
+}
+</script>
diff --git a/src/layouts/editor.vue b/src/layouts/editor.vue
index de387e4..7098fc7 100644
--- a/src/layouts/editor.vue
+++ b/src/layouts/editor.vue
@@ -19,12 +19,13 @@
 
       <v-toolbar-items>
         <v-btn
-          :disabled="editorDirty < 1"
+          :disabled="editorDirty < 1 || isLoading"
           text
+          :loading="isLoading"
           @click="$bus.$emit('editor-save')"
           >Save</v-btn
         >
-        <v-btn text @click="cancel">Cancel</v-btn>
+        <v-btn text :disabled="isLoading" @click="cancel">Cancel</v-btn>
       </v-toolbar-items>
     </v-app-bar>
 
@@ -98,7 +99,13 @@ export default {
   }),
 
   computed: {
-    ...mapState('ux', ['editing', 'editorColor', 'editorDirty', 'editorTitle'])
+    ...mapState('ux', [
+      'editing',
+      'editorColor',
+      'editorDirty',
+      'editorTitle',
+      'isLoading'
+    ])
   },
 
   watch: {
diff --git a/src/lib/edit.js b/src/lib/edit.js
index e4c0f11..d4a0a61 100644
--- a/src/lib/edit.js
+++ b/src/lib/edit.js
@@ -9,7 +9,8 @@ const arrays = [
   'external_links',
   'intervals',
   'involved_parties',
-  'station_ids'
+  'station_ids',
+  'roles'
 ]
 const booleans = [
   'is_active',
@@ -23,10 +24,13 @@ const fields = [
   'derivation_description',
   'derivation_method',
   'description',
+  'email',
   'full_name',
   'model',
   'name',
   'oem_company_id',
+  'password',
+  'person_id',
   'reseller_company_id',
   'slug',
   'source_type',
@@ -133,6 +137,17 @@ export function defaultThingType() {
   }
 }
 
+export function defaultUser() {
+  return {
+    email: '',
+    full_name: '',
+    name: '',
+    roles: [],
+    is_enabled: true,
+    password: ''
+  }
+}
+
 export function setData(instance) {
   const data = _pickBy(instance, (value, key) => {
     return (
diff --git a/src/middleware/check-user.js b/src/middleware/check-user.js
new file mode 100644
index 0000000..4109fa2
--- /dev/null
+++ b/src/middleware/check-user.js
@@ -0,0 +1,26 @@
+export default async function ({ error, params, store }) {
+  const { userId } = params
+
+  try {
+    const res = await store.dispatch('users/find', {
+      query: {
+        _id: userId,
+        $limit: 1
+      }
+    })
+
+    if (!(res && res.data && res.data.length)) {
+      return error({
+        statusCode: 404,
+        message: 'User not found.'
+      })
+    }
+
+    store.commit('setUser', res.data[0])
+  } catch (err) {
+    error({
+      statusCode: err.statusCode || 500,
+      message: err.message
+    })
+  }
+}
diff --git a/src/pages/users/_userId/index.vue b/src/pages/users/_userId/index.vue
new file mode 100644
index 0000000..cc10186
--- /dev/null
+++ b/src/pages/users/_userId/index.vue
@@ -0,0 +1,179 @@
+<template>
+  <v-container v-if="instance">
+    <v-row v-if="!editing">
+      <v-col>
+        <h2 class="display-1 font-weight-regular">User details</h2>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <ValidationObserver ref="observer">
+          <User-detail v-model="instance" :editing="editing" />
+        </ValidationObserver>
+      </v-col>
+    </v-row>
+
+    <v-row v-if="!editing && $canPatch('users', instance)">
+      <v-col>
+        <user-password-edit
+          :current-password-required="
+            $cannotPatch('users', { _id: instance._id })
+          "
+          :edit-status="!editing"
+          :user="instance"
+        />
+      </v-col>
+    </v-row>
+
+    <v-btn
+      v-show="!editing && $canPatch('users', instance)"
+      color="primary"
+      dark
+      fab
+      fixed
+      right
+      style="top: 80px"
+      top
+      @click="edit"
+    >
+      <v-icon>{{ mdiPencil }}</v-icon>
+    </v-btn>
+  </v-container>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'
+import { ValidationObserver } from 'vee-validate'
+import _merge from 'lodash/merge'
+import _omit from 'lodash/omit'
+import { defaultUser, patchData } from '@/lib/edit'
+import UserDetail from '@/components/UserDetail'
+import UserPasswordEdit from '@/components/UserPasswordEdit'
+export default {
+  components: {
+    UserDetail,
+    UserPasswordEdit,
+    ValidationObserver
+  },
+
+  beforeRouteLeave(_to, _from, next) {
+    this.$bus.$emit('edit-leave', { next })
+  },
+
+  layout: 'editor',
+
+  middleware: [
+    'no-org',
+    'no-auth-redirect-home',
+    'check-user',
+    'reset-editing'
+  ],
+
+  data: () => ({
+    instance: null
+  }),
+
+  computed: {
+    ...mapGetters(['user']),
+
+    ...mapState('ux', ['editing'])
+  },
+
+  watch: {
+    instance: {
+      handler() {
+        if (this.editing) this.incEditorDirty()
+      },
+      deep: true
+    }
+  },
+
+  mounted() {
+    this.$bus.$on('editor-cancel', this.onCancel)
+    this.$bus.$on('editor-save', this.onSave)
+
+    this.setEditorColor('primary')
+    this.setEditorDirty(-1)
+    this.initInstance()
+  },
+
+  beforeDestroy() {
+    this.$bus.$off('editor-cancel', this.onCancel)
+    this.$bus.$off('editor-save', this.onSave)
+  },
+
+  methods: {
+    ...mapActions({
+      fetchUsers: 'users/find',
+      patch: 'users/patch'
+    }),
+
+    ...mapMutations({
+      setEditing: 'ux/setEditing',
+      incEditorDirty: 'ux/incEditorDirty',
+      setEditorColor: 'ux/setEditorColor',
+      setEditorDirty: 'ux/setEditorDirty',
+      setEditorTitle: 'ux/setEditorTitle',
+      setIsLoading: 'ux/setIsLoading'
+    }),
+
+    edit() {
+      this.setEditorDirty(0)
+      this.setEditorTitle('Edit user')
+      this.setEditing(true)
+    },
+
+    initInstance() {
+      this.instance = _merge(defaultUser(), {
+        ...this.user,
+        roles: this.user.roles[0] // for view user role
+      })
+    },
+
+    onCancel() {
+      this.setEditing(false)
+      this.setEditorDirty(-1)
+      this.initInstance()
+    },
+
+    async onSave() {
+      if (!(await this.$refs.observer.validate())) return
+
+      const { instance } = this
+      const value = _omit(instance, ['password'])
+      const data = patchData({
+        ...value,
+        roles: [instance.roles]
+      })
+
+      this.setIsLoading(true)
+
+      try {
+        // HACK: Ensure that we have a fresh model afterwards
+        this.$store.commit('users/removeItem', instance._id)
+
+        await this.patch([instance._id, data, {}])
+        await this.fetchUsers({ query: { _id: instance._id } })
+
+        this.setEditing(false)
+        this.setEditorDirty(-1)
+        this.initInstance()
+        this.$bus.$emit('edit-status', {
+          type: 'success',
+          message: 'User saved.' // TODO: Localize
+        })
+      } catch (err) {
+        this.$bus.$emit('edit-status', { type: 'error', message: err.message })
+
+        // HACK: Ensure that we have a fresh model afterwards
+        this.$store.commit('users/removeItem', instance._id)
+
+        await this.fetchUsers({ query: { _id: instance._id } })
+      } finally {
+        this.setIsLoading(false)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/pages/users/create.vue b/src/pages/users/create.vue
new file mode 100644
index 0000000..02a9e72
--- /dev/null
+++ b/src/pages/users/create.vue
@@ -0,0 +1,171 @@
+<template>
+  <v-container v-if="instance">
+    <v-row>
+      <v-col>
+        <ValidationObserver ref="observer">
+          <user-detail v-model="instance" :editing="editing" :create="true" />
+        </ValidationObserver>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import { mapActions, mapState, mapMutations } from 'vuex'
+import _pick from 'lodash/pick'
+import { ValidationObserver } from 'vee-validate'
+import { createData, defaultUser } from '@/lib/edit'
+import UserDetail from '@/components/UserDetail.vue'
+
+export default {
+  components: {
+    ValidationObserver,
+    UserDetail
+  },
+
+  beforeRouteLeave(_to, _from, next) {
+    this.$bus.$emit('edit-leave', { next })
+  },
+
+  layout: 'editor',
+
+  middleware: ['no-org', 'no-auth-redirect-home', 'reset-editing'],
+
+  data: () => ({
+    instance: null
+  }),
+
+  computed: {
+    ...mapState(['auth']),
+    ...mapState('ux', ['editing'])
+  },
+
+  watch: {
+    instance: {
+      handler() {
+        if (this.editing) this.incEditorDirty()
+      },
+      deep: true
+    }
+  },
+
+  mounted() {
+    this.$bus.$on('editor-cancel', this.cancel)
+    this.$bus.$on('editor-save', this.save)
+
+    this.setEditorColor('secondary')
+    this.setEditorDirty(-1)
+    this.setEditorTitle('New user')
+    this.setEditing(true)
+    this.initInstance()
+  },
+
+  beforeDestroy() {
+    this.$bus.$off('editor-cancel', this.cancel)
+    this.$bus.$off('editor-save', this.save)
+  },
+
+  methods: {
+    ...mapActions({
+      create: 'users/create',
+      createPerson: 'persons/create',
+      fetchPersons: 'persons/find'
+    }),
+
+    ...mapMutations({
+      setEditing: 'ux/setEditing',
+      incEditorDirty: 'ux/incEditorDirty',
+      setEditorColor: 'ux/setEditorColor',
+      setEditorDirty: 'ux/setEditorDirty',
+      setEditorTitle: 'ux/setEditorTitle',
+      setIsLoading: 'ux/setIsLoading'
+    }),
+
+    cancel() {
+      this.setEditing(false)
+      this.setEditorDirty(-1)
+      this.$router.push({
+        name: 'users'
+      })
+    },
+
+    initInstance() {
+      this.instance = defaultUser()
+    },
+
+    async personCreate() {
+      const { instance } = this
+      const value = _pick(instance, ['email', 'full_name', 'name'])
+      const data = createData(value)
+      return await this.createPerson([data, {}])
+    },
+
+    async userCreate(personId) {
+      try {
+        const { instance } = this
+        const data = createData({
+          ...instance,
+          person_id: personId,
+          roles: [instance.roles]
+        })
+        const res = await this.create([data, {}])
+
+        this.setEditing(false)
+        this.setEditorDirty(-1)
+        this.$router.push(
+          {
+            name: 'users-userId',
+            params: { userId: res._id }
+          },
+          () => {
+            this.$bus.$emit('edit-status', {
+              type: 'success',
+              message: 'User created.' // TODO: Localize
+            })
+          }
+        )
+      } catch (err) {
+        this.$bus.$emit('edit-status', {
+          type: 'error',
+          message: err.message
+        })
+      } finally {
+        this.setIsLoading(false)
+      }
+    },
+
+    async save() {
+      if (!(await this.$refs.observer.validate())) return
+
+      const { instance } = this
+
+      this.setIsLoading(true)
+
+      try {
+        const person = await this.fetchPersons({
+          query: {
+            email: instance.email,
+            $limit: 1,
+            $select: ['_id']
+          }
+        })
+
+        if (person && person.data && person.data.length) {
+          const personId = person.data[0]._id
+          this.userCreate(personId)
+        } else {
+          const response = await this.personCreate()
+          const personId = response._id
+          this.userCreate(personId)
+        }
+      } catch (err) {
+        this.$bus.$emit('edit-status', {
+          type: 'error',
+          message: err.message
+        })
+        this.setIsLoading(false)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/pages/users/index.vue b/src/pages/users/index.vue
new file mode 100644
index 0000000..5ba221e
--- /dev/null
+++ b/src/pages/users/index.vue
@@ -0,0 +1,79 @@
+<template>
+  <v-container>
+    <v-row dense>
+      <v-col>
+        <v-tabs v-model="tabIndex" grow>
+          <v-tab> View </v-tab>
+
+          <v-tab-item>
+            <v-card outlined tile>
+              <v-container fluid>
+                <v-row dense>
+                  <v-col>
+                    <h2 class="headline">Users</h2>
+                  </v-col>
+                </v-row>
+              </v-container>
+
+              <users-search show-link>
+                <template #actions="{ item }">
+                  <v-icon color="tertiary" @click="open(item._id)">{{
+                    mdiOpenInNew
+                  }}</v-icon>
+                </template>
+              </users-search>
+            </v-card>
+          </v-tab-item>
+        </v-tabs>
+      </v-col>
+    </v-row>
+
+    <v-btn
+      v-show="$canCreate('users')"
+      :to="{
+        name: 'users-create'
+      }"
+      color="secondary"
+      dark
+      exact
+      fab
+      fixed
+      nuxt
+      right
+      style="top: 80px"
+      top
+    >
+      <v-icon>{{ mdiPlus }}</v-icon>
+    </v-btn>
+  </v-container>
+</template>
+
+<script>
+import UsersSearch from '@/components/UsersSearch'
+
+export default {
+  components: {
+    UsersSearch
+  },
+
+  middleware: ['no-org', 'no-auth-redirect-home'],
+
+  data: () => ({
+    tabIndex: 0
+  }),
+
+  methods: {
+    open(userId) {
+      window.open(
+        this.$router.resolve({
+          name: 'users-userId',
+          params: {
+            userId
+          }
+        }).href,
+        '_blank'
+      )
+    }
+  }
+}
+</script>
diff --git a/src/plugins/ability.js b/src/plugins/ability.js
index 9811901..133fc63 100644
--- a/src/plugins/ability.js
+++ b/src/plugins/ability.js
@@ -55,7 +55,6 @@ export default ({ store }, inject) => {
   inject('canPatch', (name, obj) =>
     store.getters.isAbilityUpdated ? ability.can('patch', as(name, obj)) : false
   )
-
   inject('cannot', (...args) =>
     store.getters.isAbilityUpdated ? ability.cannot(...args) : true
   )
@@ -74,4 +73,9 @@ export default ({ store }, inject) => {
       ? ability.cannot('graph', as(name, obj))
       : true
   )
+  inject('cannotPatch', (name, obj) =>
+    store.getters.isAbilityUpdated
+      ? ability.cannot('patch', as(name, obj))
+      : true
+  )
 }
diff --git a/src/store/index.js b/src/store/index.js
index 90d325d..510fa99 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -141,6 +141,9 @@ export const getters = {
   },
   annotationId(state) {
     return state.annotationId
+  },
+  user(state, { 'users/get': get }) {
+    return state.userId && get(state.userId)
   }
 }
 
@@ -188,5 +191,8 @@ export const mutations = {
   },
   setAnnotation(state, value) {
     state.annotationId = value && value._id
+  },
+  setUser(state, value) {
+    state.userId = value && value._id
   }
 }
diff --git a/src/store/ux.js b/src/store/ux.js
index d956db7..4fb4d6e 100644
--- a/src/store/ux.js
+++ b/src/store/ux.js
@@ -6,7 +6,8 @@ export const state = () => ({
   editing: false,
   editorColor: 'primary',
   editorDirty: 0,
-  editorTitle: ''
+  editorTitle: '',
+  isLoading: false
 })
 
 export const actions = {}
@@ -43,5 +44,8 @@ export const mutations = {
   },
   setEditorTitle(state, value) {
     state.editorTitle = value
+  },
+  setIsLoading(state, value) {
+    state.isLoading = value
   }
 }