diff --git a/api/proto/api.pb.gw.go b/api/proto/api.pb.gw.go
index 71c348300db..f26e639d023 100644
--- a/api/proto/api.pb.gw.go
+++ b/api/proto/api.pb.gw.go
@@ -22,8 +22,8 @@ import (
 	"google.golang.org/grpc/status"
 	"google.golang.org/protobuf/proto"
 	"google.golang.org/protobuf/types/known/emptypb"
-	proto_6 "www.velocidex.com/golang/velociraptor/artifacts/proto"
-	proto_5 "www.velocidex.com/golang/velociraptor/flows/proto"
+	proto_5 "www.velocidex.com/golang/velociraptor/artifacts/proto"
+	proto_2 "www.velocidex.com/golang/velociraptor/flows/proto"
 )
 
 // Suppress "imported and not used" errors
@@ -1293,7 +1293,7 @@ func local_request_API_GetTable_0(ctx context.Context, marshaler runtime.Marshal
 }
 
 func request_API_CollectArtifact_0(ctx context.Context, marshaler runtime.Marshaler, client APIClient, req *http.Request, pathParams map[string]string) (proto.Message, runtime.ServerMetadata, error) {
-	var protoReq proto_5.ArtifactCollectorArgs
+	var protoReq proto_2.ArtifactCollectorArgs
 	var metadata runtime.ServerMetadata
 
 	newReader, berr := utilities.IOReaderFactory(req.Body)
@@ -1310,7 +1310,7 @@ func request_API_CollectArtifact_0(ctx context.Context, marshaler runtime.Marsha
 }
 
 func local_request_API_CollectArtifact_0(ctx context.Context, marshaler runtime.Marshaler, server APIServer, req *http.Request, pathParams map[string]string) (proto.Message, runtime.ServerMetadata, error) {
-	var protoReq proto_5.ArtifactCollectorArgs
+	var protoReq proto_2.ArtifactCollectorArgs
 	var metadata runtime.ServerMetadata
 
 	newReader, berr := utilities.IOReaderFactory(req.Body)
@@ -1593,7 +1593,7 @@ var (
 )
 
 func request_API_GetToolInfo_0(ctx context.Context, marshaler runtime.Marshaler, client APIClient, req *http.Request, pathParams map[string]string) (proto.Message, runtime.ServerMetadata, error) {
-	var protoReq proto_6.Tool
+	var protoReq proto_5.Tool
 	var metadata runtime.ServerMetadata
 
 	if err := req.ParseForm(); err != nil {
@@ -1609,7 +1609,7 @@ func request_API_GetToolInfo_0(ctx context.Context, marshaler runtime.Marshaler,
 }
 
 func local_request_API_GetToolInfo_0(ctx context.Context, marshaler runtime.Marshaler, server APIServer, req *http.Request, pathParams map[string]string) (proto.Message, runtime.ServerMetadata, error) {
-	var protoReq proto_6.Tool
+	var protoReq proto_5.Tool
 	var metadata runtime.ServerMetadata
 
 	if err := req.ParseForm(); err != nil {
@@ -1625,7 +1625,7 @@ func local_request_API_GetToolInfo_0(ctx context.Context, marshaler runtime.Mars
 }
 
 func request_API_SetToolInfo_0(ctx context.Context, marshaler runtime.Marshaler, client APIClient, req *http.Request, pathParams map[string]string) (proto.Message, runtime.ServerMetadata, error) {
-	var protoReq proto_6.Tool
+	var protoReq proto_5.Tool
 	var metadata runtime.ServerMetadata
 
 	newReader, berr := utilities.IOReaderFactory(req.Body)
@@ -1642,7 +1642,7 @@ func request_API_SetToolInfo_0(ctx context.Context, marshaler runtime.Marshaler,
 }
 
 func local_request_API_SetToolInfo_0(ctx context.Context, marshaler runtime.Marshaler, server APIServer, req *http.Request, pathParams map[string]string) (proto.Message, runtime.ServerMetadata, error) {
-	var protoReq proto_6.Tool
+	var protoReq proto_5.Tool
 	var metadata runtime.ServerMetadata
 
 	newReader, berr := utilities.IOReaderFactory(req.Body)
@@ -1711,7 +1711,7 @@ func local_request_API_GetServerMonitoringState_0(ctx context.Context, marshaler
 }
 
 func request_API_SetServerMonitoringState_0(ctx context.Context, marshaler runtime.Marshaler, client APIClient, req *http.Request, pathParams map[string]string) (proto.Message, runtime.ServerMetadata, error) {
-	var protoReq proto_5.ArtifactCollectorArgs
+	var protoReq proto_2.ArtifactCollectorArgs
 	var metadata runtime.ServerMetadata
 
 	newReader, berr := utilities.IOReaderFactory(req.Body)
@@ -1728,7 +1728,7 @@ func request_API_SetServerMonitoringState_0(ctx context.Context, marshaler runti
 }
 
 func local_request_API_SetServerMonitoringState_0(ctx context.Context, marshaler runtime.Marshaler, server APIServer, req *http.Request, pathParams map[string]string) (proto.Message, runtime.ServerMetadata, error) {
-	var protoReq proto_5.ArtifactCollectorArgs
+	var protoReq proto_2.ArtifactCollectorArgs
 	var metadata runtime.ServerMetadata
 
 	newReader, berr := utilities.IOReaderFactory(req.Body)
@@ -1749,7 +1749,7 @@ var (
 )
 
 func request_API_GetClientMonitoringState_0(ctx context.Context, marshaler runtime.Marshaler, client APIClient, req *http.Request, pathParams map[string]string) (proto.Message, runtime.ServerMetadata, error) {
-	var protoReq proto_5.GetClientMonitoringStateRequest
+	var protoReq proto_2.GetClientMonitoringStateRequest
 	var metadata runtime.ServerMetadata
 
 	if err := req.ParseForm(); err != nil {
@@ -1765,7 +1765,7 @@ func request_API_GetClientMonitoringState_0(ctx context.Context, marshaler runti
 }
 
 func local_request_API_GetClientMonitoringState_0(ctx context.Context, marshaler runtime.Marshaler, server APIServer, req *http.Request, pathParams map[string]string) (proto.Message, runtime.ServerMetadata, error) {
-	var protoReq proto_5.GetClientMonitoringStateRequest
+	var protoReq proto_2.GetClientMonitoringStateRequest
 	var metadata runtime.ServerMetadata
 
 	if err := req.ParseForm(); err != nil {
@@ -1781,7 +1781,7 @@ func local_request_API_GetClientMonitoringState_0(ctx context.Context, marshaler
 }
 
 func request_API_SetClientMonitoringState_0(ctx context.Context, marshaler runtime.Marshaler, client APIClient, req *http.Request, pathParams map[string]string) (proto.Message, runtime.ServerMetadata, error) {
-	var protoReq proto_5.ClientEventTable
+	var protoReq proto_2.ClientEventTable
 	var metadata runtime.ServerMetadata
 
 	newReader, berr := utilities.IOReaderFactory(req.Body)
@@ -1798,7 +1798,7 @@ func request_API_SetClientMonitoringState_0(ctx context.Context, marshaler runti
 }
 
 func local_request_API_SetClientMonitoringState_0(ctx context.Context, marshaler runtime.Marshaler, server APIServer, req *http.Request, pathParams map[string]string) (proto.Message, runtime.ServerMetadata, error) {
-	var protoReq proto_5.ClientEventTable
+	var protoReq proto_2.ClientEventTable
 	var metadata runtime.ServerMetadata
 
 	newReader, berr := utilities.IOReaderFactory(req.Body)
diff --git a/gui/velociraptor/src/App.js b/gui/velociraptor/src/App.js
index b2ca46fe44c..6c751949647 100644
--- a/gui/velociraptor/src/App.js
+++ b/gui/velociraptor/src/App.js
@@ -17,6 +17,7 @@ import FullScreenNotebook from './components/notebooks/full_notebook.js';
 import FullScreenHuntNotebook from './components/hunts/hunt-full-notebook.js';
 import FullScreenFlowNotebook from './components/flows/flow-full-notebook.js';
 import ArtifactInspector from './components/artifacts/artifacts.js';
+import Users from './components/users/users.js';
 import VeloHunts from './components/hunts/hunts.js';
 import UserDashboard from './components/sidebar/user-dashboard.js';
 import Form from 'react-bootstrap/Form';
@@ -144,6 +145,7 @@ class App extends Component {
                      <Route path="/artifacts/:artifact?">
                        <ArtifactInspector client={this.state.client}/>
                      </Route>
+                     <Route path="/users/:user?" component={Users}/>
                      <Route path="/hunts/:hunt_id?/:tab?">
                        <VeloHunts/>
                      </Route>
diff --git a/gui/velociraptor/src/components/i8n/en.js b/gui/velociraptor/src/components/i8n/en.js
index c89fc919674..b5361d92dfb 100644
--- a/gui/velociraptor/src/components/i8n/en.js
+++ b/gui/velociraptor/src/components/i8n/en.js
@@ -166,7 +166,84 @@ const English = {
     "_ts": "Server Time",
     "TablePagination": (from, to, size)=>
     <>Showing { from } to { to } of { size }</>,
-
+    "Verified Email" : "Verified Email",
+    "Account Locked" : "Account Locked",
+    "Role_administrator" : "Server Administrator",
+    "Role_org_admin" : "Organization Administrator",
+    "Role_reader" : "Read-Only User",
+    "Role_analyst" : "Analyst",
+    "Role_investigator" : "Investigator",
+    "Role_artifact_writer" : "Artifact Writer",
+    "Role_api" : "Read-Only API Client",
+    "ToolRole_administrator" :
+    <>
+    Like any system, Velociraptor needs an administrator which is all powerful. This account can run arbitrary VQL on the server, reconfigure the server, etc.  The ability to add/create/edit/remove users is dependent on the organizations to which this account belongs.
+    </>,
+    "ToolRole_org_admin" :
+    <>
+    This role provides the ability to manage organizations.  It would typically be used together with another role.
+    </>,
+    "ToolRole_reader" :
+    <>
+    This role provides the ability to read previously collected results but does not allow the user to actually make any changes.  This role is useful to give unpriviledged users visibility into what information is being collected without giving them access to modify anything.
+    </>,
+    "ToolRole_analyst" :
+    <>
+    This role provides the ability to read existing collected data and also run some server side VQL in order to do post processing of this data or annotate it. Analysts typically use the notebook or download collected data offline for post processing existing hunt data. Analysts may not actually start new collections or hunts themselves.
+    </>,
+    "ToolRole_investigator" :
+    <>
+    This role provides the ability to read existing collected data and also run some server side VQL in order to do post processing of this data or annotate it. Investigators typically use the notebook or download collected data offline for post processing existing hunt data. Investigators may start new collections or hunts themselves.
+    </>,
+    "ToolRole_artifact_writer" :
+    <>
+    This role allows a user to create or modify new client side artifacts (They are not able to modify server side artifacts). This user typically has sufficient understanding and training in VQL to write flexible artifacts. Artifact writers are very powerful as they can easily write a malicious artifact and collect it on the endpoint. Therefore they are equivalent to domain admins on endpoints. You should restrict this role to very few people.
+    </>,
+    "ToolRole_api" :
+    <>
+    This role provides the ability to read previously collected results but does not allow the user to actually make any changes.
+    </>,
+    "ToolPerm_all_query" : "Issue all queries without restriction",
+    "ToolPerm_any_query" : "Issue any query at all (AllQuery implies AnyQuery)",
+    "ToolPerm_pubish" : "Publish events to server side queues (typically not needed)",
+    "ToolPerm_read_results" : "Read results from already run hunts, flows, or notebooks",
+    "ToolPerm_label_clients" : "Can manipulate client labels and metadata",
+    "ToolPerm_collect_client" : "Schedule or cancel new collections on clients",
+    "ToolPerm_collect_server" : "Schedule new artifact collections on Velociraptor servers",
+    "ToolPerm_artifact_writer" : "Add or edit custom artifacts that run on the server",
+    "ToolPerm_server_artifact_writer" : "Add or edit custom artifacts that run on the server",
+    "ToolPerm_execve" : "Allowed to execute arbitrary commands on clients",
+    "ToolPerm_notebook_editor" : "Allowed to change notebooks and cells",
+    "ToolPerm_server_admin" : "Allowed to manage server configuration",
+    "ToolPerm_org_admin" : "Allowed to manage organizations",
+    "ToolPerm_impersonation" : "Allows the user to specify a different username for the query() plugin",
+    "ToolPerm_filesystem_read" : "Allowed to read arbitrary files from the filesystem",
+    "ToolPerm_filesystem_write" : "Allowed to create files on the filesystem",
+    "ToolPerm_machine_state" : "Allowed to collect state information from machines (e.g. pslist())",
+    "ToolPerm_prepare_results" : "Allowed to create zip files",
+    "ToolPerm_datastore_access" : " Allowed raw datastore access",
+    "ToolUser_verified_email" : "The email address for this user has been verified",
+    "ToolUser_locked" : "This account is locked.",
+    "ToolUsernamePasswordless" :
+    <>
+        This server is configured to authenticate users using an external authentication host.  This account must exist on the authentication system for login to be successful.
+    </>,
+    "Add User" : "Add User",
+    "Update User" : "Update User",
+    "ToolRoleBasedPermissions" :
+    <>
+    Role-Based Permissions allow the administrator to grant sets of permissions for common activities.  A user may have multiple roles assigned.
+    </>,
+    "ToolEffectivePermissions" :
+    <>
+    Roles are defined as sets of fine-grained permissions.  This is the current set of permissions defined by the roles for this user.
+    </>,
+    "ToolOrganizations" :
+    <>
+    Organizations allow multiple tenants to use this Velociraptor server.  If a user is not assigned to an organization, it is a member of the Organizational Root, which implies membership in all organizations.
+    </>,
+    "User does not exist": (username)=><>User {username} does not exist.</>,
+    "Do you want to delete?": (username)=>"Do you want to delete " + username + "?",
 };
 
 export default English;
diff --git a/gui/velociraptor/src/components/sidebar/navigator.js b/gui/velociraptor/src/components/sidebar/navigator.js
index db2f32916e6..5341de69fbc 100644
--- a/gui/velociraptor/src/components/sidebar/navigator.js
+++ b/gui/velociraptor/src/components/sidebar/navigator.js
@@ -151,6 +151,18 @@ class VeloNavigator extends Component {
                         </ul>
                       </NavLink>
 
+                      <NavLink to="/users">
+                        <ul className="nav nav-pills navigator">
+                          <li className="nav-link" state="users" >
+                            <span>
+                              <i className="navicon">
+                                <FontAwesomeIcon icon="user"/></i>
+                            </span>
+                            {T("Users")}
+                          </li>
+                        </ul>
+                      </NavLink>
+
                       { disabled ?
                         <>
                           <ul className="nav nav-pills navigator">
diff --git a/gui/velociraptor/src/components/users/user.css b/gui/velociraptor/src/components/users/user.css
new file mode 100644
index 00000000000..2419730cccf
--- /dev/null
+++ b/gui/velociraptor/src/components/users/user.css
@@ -0,0 +1,12 @@
+.card.panel {
+    border-radius: 5px;
+    position: relative;
+    margin: 20px;
+    margin-bottom: 24px;
+    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
+    border: #f0f0f0;
+    border-top-width: 2px;
+    border-top-style: solid;
+    height: 100%;
+    overflow-y: scroll;
+}
diff --git a/gui/velociraptor/src/components/users/user.js b/gui/velociraptor/src/components/users/user.js
new file mode 100644
index 00000000000..0d675d0b068
--- /dev/null
+++ b/gui/velociraptor/src/components/users/user.js
@@ -0,0 +1,634 @@
+import React, { Component } from 'react';
+import api from '../core/api-service.js';
+import _ from 'lodash';
+import axios from 'axios';
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
+import Col from 'react-bootstrap/Row';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Tooltip from 'react-bootstrap/Tooltip';
+import T from '../i8n/i8n.js';
+import Card  from 'react-bootstrap/Card';
+import UserConfig from '../core/user.js';
+import { withSnackbar } from 'react-simple-snackbar';
+import "./user.css";
+
+
+const roleList = [
+    "administrator",
+    "org_admin",
+    "artifact_writer",
+    "investigator",
+    "analyst",
+    "reader",
+    "api",
+];
+
+const permissionsByRole = {
+    administrator : [ "all_query", "any_query", "read_results", "label_clients",
+                      "collect_client", "collect_server", "artifact_writer",
+                      "server_artifact_writer", "execve", "notebook_editor", "impersonation",
+                      "server_admin", "filesystem_read", "filesystem_write", "machine_state",
+                      "prepare_results" ],
+    org_admin : [ "org_admin" ],
+    reader : [ "read_results" ],
+    api : [ "any_query", "read_results" ],
+    analyst : [ "read_results", "notebook_editor", "label_clients", "any_query",
+                "prepare_results" ],
+    investigator : [ "read_results", "notebook_editor", "collect_client", "label_clients",
+                     "any_query", "prepare_results" ],
+    artifact_writer : [ "artifact_writer" ]
+};
+
+const permissionNames = {
+    "all_query" : "AllQuery",
+    "any_query" : "AnyQuery",
+    "read_results" : "ReadResults",
+    "collect_client" : "CollectClient",
+    "collect_server" : "CollectServer",
+    "artifact_writer" : "ArtifactWriter",
+    "execve" : "Execve",
+    "notebook_editor" : "NotebookEditor",
+    "label_clients" : "LabelClients", // Permission to apply labels to clients
+    "server_admin" : "ServerAdmin",
+    "filesystem_read" : "FilesystemRead",
+    "filesystem_write" : "FilesystemWrite",
+    "server_artifact_writer" : "ServerArtifactWriter",
+    "machine_state" : "MachineState",
+    "prepare_results" : "PrepareResults",
+    "datastore_access" : "DatastoreAccess",
+    "org_admin" : "OrgAdmin",
+};
+
+class UserState {
+    constructor () {
+        this.roles = [];
+        this.permissions = {};
+
+        this.fields = {
+            'name': '',
+            'email': '',
+            'picture': '',
+            'verified_email': false,
+            // read_only exists but is unused
+            'locked': false,
+            'orgs': [],
+            'currentOrg': '',
+            'failed' : false,
+        }
+
+        this.password = '';
+    }
+
+    as_dict() {
+        let user = Object.assign({}, this.fields);
+        user['Permissions'] = { 'roles' : [...this.roles]};
+        return user;
+    }
+
+    hasPermission(perm) {
+        return perm in this.permissions && this.permissions[perm]
+    }
+
+    hasRole(role) {
+        return this.roles.indexOf(role) !== -1;
+    }
+
+    updateImpliedPermissions() {
+        this.permissions = {};
+        this.roles.forEach((role) => {
+            permissionsByRole[role].forEach((perm) => {
+                this.permissions[perm] = true;
+            });
+        });
+    }
+
+    modifyRoles(role, present) {
+        if (present) {
+            this.roles.push(role);
+        } else if (!present) {
+            this.roles = this.roles.filter((elem) => { return elem !== role });
+        }
+
+        this.updateImpliedPermissions();
+    }
+
+    modifyPermissionValue(perm, value) {
+        this.permissions[perm] = value;
+    }
+
+    isMemberOf(org_id) {
+        for (let i = 0; i < this.fields.orgs.length; i++) {
+            if (org_id === this.fields.orgs[i].id) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    setRootOrg() {
+        this.fields.orgs = [ { "id" : "root", "name" : "<root>" } ];
+    }
+
+    modifyOrgs(org, present, allOrgs) {
+        console.log("org " + org.id + " present " + present);
+        if (!present) {
+            if (org.id === "root") {
+                this.fields.orgs = allOrgs.filter((elem) => {
+                    return elem.id !== "root";
+                });
+            } else {
+                this.fields.orgs = this.fields.orgs.filter((elem) => {
+                    return elem.id !== org.id;
+                });
+                if (this.fields.orgs.length === 0) {
+                    this.setRootOrg();
+                    return false;
+                }
+            }
+        } else if (present) {
+            if (org.id === "root") {
+                this.setRootOrg();
+            } else {
+                this.fields.orgs.push({id: org.id, name: org.name});
+            }
+        }
+
+        return true;
+    }
+
+    clone() {
+        let user = new UserState();
+        user.permissions = { ...this.permissions };
+        user.roles = [ ...this.roles ];
+        user.fields = { ...this.fields };
+        user.password = this.password;
+        return user
+    }
+
+    static permissionList() {
+        let perms = Object.keys(permissionNames);
+        return perms.sort();
+    }
+
+};
+
+const renderToolTip = (props, value) => (
+    <Tooltip show={T(value)} {...props}>
+        {T(value)}
+    </Tooltip>
+);
+
+export class User extends Component {
+    static contextType = UserConfig;
+
+    state = {
+        user : new UserState(),
+        dirty: false,
+        mode: undefined,
+    }
+
+    componentDidMount = () => {
+        this.source = axios.CancelToken.source();
+
+        if (this.props.user) {
+            this.maybeUpdateUser();
+        }
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        if (prevProps.mode === this.props.mode && prevProps.user === this.props.user) {
+            return;
+        }
+
+        this.maybeUpdateUser();
+    }
+
+    componentWillUnmount() {
+      this.source.cancel("unmounted");
+    }
+
+    maybeUpdateUser() {
+        if (this.props.mode === "edit" || this.props.mode === "view") {
+            this.loadUser(this.props.user);
+        } else {
+            let user = new UserState();
+            user.setRootOrg();
+            this.setState({'user' : user });
+        }
+    }
+
+    handleCreate(e) {
+        e.preventDefault();
+
+        this.source.cancel();
+        this.source = axios.CancelToken.source();
+
+        let user = this.state.user.as_dict();
+
+        let endpoint = "";
+
+        if (this.props.mode === 'create') {
+            endpoint = "v1/CreateUser";
+        } else {
+            endpoint = "v1/UpdateUser";
+        }
+
+        api.post(endpoint, { 'User': user, 'password': this.state.user.password, },
+                 this.source.token).then((response) => {
+            if (!response.cancel) {
+                this.setState({ 'dirty' : false });
+                this.props.userCreatedCallback(this.state.user.fields.name, this.state.user.roles,
+                                               this.state.user.fields.orgs);
+                this.props.openSnackbar(T("User updated."));
+                this.passwordInput.value = '';
+            }
+        }, (reason) => {}); // Just to silence uncaught exceptions.  api will report the error.
+    }
+
+    loadUser(user) {
+        this.source.cancel();
+        this.source = axios.CancelToken.source();
+
+        api.get("v1/GetUser/" + user, {}, this.source.token).then((response) => {
+            if (response.cancel) {
+                return;
+            }
+            let new_user_state = new UserState();
+
+            for (const [data_key, data_value] of Object.entries(response.data)) {
+                if (data_key === "Permissions") {
+                    for (const [perm_key, perm_value] of Object.entries(data_value)) {
+                        if (perm_key === "roles") {
+                            perm_value.forEach((e) => { new_user_state.modifyRoles(e, true); });
+                        } else if (perm_key !== "publish_queues") {
+                            new_user_state.modifyPermissionValue(perm_key, perm_value);
+                        }
+                    }
+                } else {
+                    new_user_state.fields[data_key] = data_value;
+                }
+            }
+
+            if (new_user_state.fields.orgs.length === 0) {
+                new_user_state.setRootOrg();
+            }
+
+            this.setState({'user' : new_user_state});
+            this.passwordInput = '';
+        }, (reason) => {
+            let new_user_state = new UserState();
+            new_user_state.setRootOrg();
+            new_user_state.name = user;
+            new_user_state.failed = true;
+            this.setState({'user' : new_user_state});
+        });
+    };
+
+    changeRole(role, e) {
+        let value = e.currentTarget.checked;
+        this.setState((state) => {
+            let user_state = state.user.clone();
+            user_state.modifyRoles(role, value);
+            return { 'user' : user_state, 'dirty' : true }
+        })
+    }
+
+    changePermission(perm, e) {
+        let value = e.currentTarget.checked;
+        this.setState((state) => {
+            let user_state = state.user.clone();
+            user_state.modifyPermissionValue(perm, value);
+            return { 'user' : user_state, 'dirty' : true }
+        })
+    }
+
+    changeOrg(org, e) {
+        let value = e.currentTarget.checked;
+        console.log("changeOrg org " + org.id + " present " + value);
+        this.setState((state) => {
+            let user_state = state.user.clone();
+            if (user_state.modifyOrgs(org, value, this.props.orgs) === false) {
+                    this.props.openSnackbar(T("A user without an organization defaults to membership in the root organization."));
+            }
+            return { 'user' : user_state, 'dirty' : true };
+        });
+    }
+
+    setUserState(name, value) {
+        this.setState((state) => {
+            let user_state = state.user.clone();
+            user_state.fields[name] = value;
+            return { 'user' : user_state, 'dirty' : true };
+        });
+    }
+
+    setUserPassword(name, value) {
+        this.setState((state) => {
+            let user_state = state.user.clone();
+            user_state.password = value;
+            return { 'user' : user_state, 'dirty' : true };
+        });
+    }
+
+    wrapToolTipOverlay(wrapped, toolTipName) {
+      return (
+        <OverlayTrigger
+          delay={{show: 250, hide: 400}} placement="right"
+          overlay={(props)=>renderToolTip(props, toolTipName)}>
+            <div>
+            {wrapped}
+            </div>
+         </OverlayTrigger>
+      );
+    }
+
+    renderUsernameForm() {
+        let newUser = this.props.mode === 'create';
+        let placeholder = T("Username");
+        if (!newUser) {
+            placeholder = this.props.user;
+        }
+        return (
+          <Form.Group as={Col}>
+            <Form.Label>{T("Username")}</Form.Label>
+            <Form.Control placeholder={placeholder} readOnly={!newUser}
+                          onChange={(e) => this.setUserState('name', e.target.value)}/>
+          </Form.Group>
+        );
+    }
+
+    renderUsernameField() {
+        if (this.props.password_less) {
+            return this.wrapToolTipOverlay(this.renderUsernameForm(), "ToolUsernamePasswordless")
+        }
+        return this.renderUsernameForm();
+    }
+
+    renderPasswordForm() {
+        let disabled = false;
+        let placeholder = T("Password");
+        if (this.props.password_less) {
+            disabled = true;
+            placeholder = T("Password must be changed with authentication provider");
+        }
+
+        return (
+          <Form.Group as={Col}>
+            <Form.Label>{T("Password")}</Form.Label>
+            <Form.Control type="password" placeholder={placeholder} disabled={disabled}
+                          ref={(input) => { this.passwordInput = input; }}
+                          autocomplete="new-password"
+                          onChange={(e) => this.setUserPassword('password', e.target.value)}/>
+          </Form.Group>
+        );
+    }
+
+    renderEmailAddress() {
+        return (
+          <Form.Group as={Col}>
+            <Form.Label>{T("Email Address")}</Form.Label>
+            <Form.Control placeholder="Email" disabled={!this.props.admin}
+                         onChange={(e) => this.setUserState('email', e.target.value)}
+                         value={this.state.user.fields.email}/>
+          </Form.Group>
+        );
+    }
+
+    renderUserInfo() {
+        return (
+          <div className="col-sm-4">
+           <Card>
+            <Card.Header>
+             User Information
+            </Card.Header>
+            <Card.Body>
+             { this.renderUsernameField() }
+             { this.renderPasswordForm() }
+             { this.renderEmailAddress() }
+             { this.renderVerifiedEmail() }
+             { this.renderUserLocked() }
+            </Card.Body>
+           </Card>
+          </div>
+        )
+    }
+
+    renderRoleCard() {
+        let disabled = !this.props.admin;
+        return (
+          <Card>
+           <Card.Header>
+            <OverlayTrigger delay={{show: 250, hide: 400}}
+                            overlay={(props)=>renderToolTip(props, "ToolRoleBasedPermissions")}>
+             <div>
+               {T("Roles")}
+             </div>
+            </OverlayTrigger>
+           </Card.Header>
+           <Card.Body>
+             { _.map(roleList, (role, idx) => {
+                 return (
+                   <OverlayTrigger key={role} delay={{show: 250, hide: 400}}
+                                   overlay={(props)=>renderToolTip(props, "ToolRole_" + role)}>
+                    <div>
+                     <Form.Switch label={T("Role_" + role)} id={role} disabled={disabled}
+                                  checked={this.state.user.hasRole(role)}
+                                  onChange={(e) => {this.changeRole(role, e)}} />
+                    </div>
+                   </OverlayTrigger>
+                 );
+             })}
+           </Card.Body>
+          </Card>
+        );
+    }
+
+    renderEffectivePermissionsCard() {
+        return (
+          <Card>
+          <Card.Header>
+            <OverlayTrigger delay={{show: 250, hide: 400}}
+                            overlay={(props)=>renderToolTip(props, "ToolEffectivePermissions")}>
+              <div>
+                {T("Effective Permissions")}
+              </div>
+             </OverlayTrigger>
+          </Card.Header>
+            <Card.Body>
+              { _.map(UserState.permissionList(), (perm, idx) => {
+                    return (
+                      <OverlayTrigger key={perm} delay={{show: 250, hide: 400}}
+                                      overlay={(props)=>renderToolTip(props, "ToolPerm_" + perm)}>
+                       <div>
+                        <Form.Switch disabled={true} label={permissionNames[perm]}
+                                     id={perm} checked={this.state.user.hasPermission(perm)}
+                                     onChange={(e) => {this.changePermission(perm, e)}} />
+                       </div>
+                      </OverlayTrigger>
+                    );
+              })}
+            </Card.Body>
+          </Card>
+        );
+    }
+
+    renderPermissions() {
+        return (
+          <>
+           <div className="col-sm-4">
+            { this.renderRoleCard() }
+            { this.renderEffectivePermissionsCard() }
+           </div>
+          </>
+        );
+    }
+
+    renderOrganizationsCard() {
+        let disabled = !this.context.traits.Permissions.org_admin;
+        let root_org = this.state.user.isMemberOf("root");
+        return (
+          <Card>
+            <Card.Header>
+              <OverlayTrigger delay={{show: 250, hide: 400}}
+                              overlay={(props)=>renderToolTip(props, "ToolOrganizations")}>
+                <div>
+                  {T("Organizations")}
+                </div>
+              </OverlayTrigger>
+            </Card.Header>
+            <Card.Body>
+              { _.map(this.props.orgs, (org, idx) => {
+                    let name = org.name;
+                    let checked = root_org || this.state.user.isMemberOf(org.id);
+                    let key = org.id;
+                    if (org.id === "root") {
+                        // We can't have an id of 'root'
+                        key = "Org_" + org.id;
+                        name = T("Organizational Root");
+                    } else if (root_org) {
+                        disabled = true;
+                    }
+                    return (
+                       <Form.Switch label={name} id={key} disabled={disabled} key={key}
+                                    checked={checked}
+                                    onChange={(e) => {this.changeOrg(org, e)}} />
+                    );
+              })}
+            </Card.Body>
+          </Card>
+
+        );
+    }
+
+    renderOrganizations() {
+        return (
+          <>
+           <div className="col-sm-4">
+            { this.renderOrganizationsCard() }
+           </div>
+          </>
+        );
+    }
+
+    renderVerifiedEmail() {
+        let disabled = this.state.user.fields.email === '' || !this.props.admin;
+        let checked = this.state.user.fields.verified_email;
+
+        return (
+          <Form.Group>
+            <OverlayTrigger
+             delay={{show:250, hide: 400}}
+             overlay={(props)=>renderToolTip(props, "ToolUser_verified_email")}>
+             <div>
+              <Form.Switch label={T("Verified Email")} id="verified-email"
+                           disabled={disabled} checked={checked}
+                           onChange={(e) => { this.setUserState('verified_email',
+                                                                e.currentTarget.checked)}} />
+             </div>
+            </OverlayTrigger>
+          </Form.Group>
+        );
+    }
+
+    renderUserLocked() {
+        let disabled = !this.props.admin;
+        let checked = this.state.user.fields.locked;
+        return (
+          <Form.Group>
+            <OverlayTrigger
+             delay={{show:250, hide: 400}}
+             overlay={(props)=>renderToolTip(props, "ToolUser_locked")}>
+             <div>
+              <Form.Switch label={T("Account Locked")} id="locked"
+                           disabled={disabled} checked={checked}
+                           onChange={(e) => {this.setUserState('locked',
+                                                               e.currentTarget.checked)}} />
+             </div>
+            </OverlayTrigger>
+          </Form.Group>
+        );
+    }
+
+    renderUserFlags() {
+        return (
+          <div className="col-sm-4">
+           { this.renderVerifiedEmail() }
+           { this.renderUserLocked() }
+          </div>
+        );
+    }
+
+    renderSubmitButton() {
+        if (!this.props.admin) {
+            return;
+        }
+
+        return (
+          <div className="col-sm-4">
+           <Button onClick={(e) => this.handleCreate(e)} disabled={!this.state.dirty}
+                   variant="default" type="button">
+             {this.props.mode === "create" ? "Add User" : "Update User"}
+           </Button>
+          </div>
+        );
+    }
+
+    render() {
+        if (!this.context.traits.username) {
+            return null;
+        }
+        let header = "";
+        if (this.props.mode === "create") {
+            if (!this.props.admin) {
+                return null;
+            }
+            header = T("Create a new user");
+        } else {
+            if (!this.props.admin) {
+                header = T("User Information");
+            } else {
+                header = T("Edit User");
+            }
+        }
+
+        return(
+          <div className="user">
+           <h2 className="mx-1">{header}</h2>
+           <Form onSubmit={(e) => e.preventDefault()} ref={ form => this.userForm = form }>
+            <div className="row ml-3">
+             { this.renderUserInfo() }
+             { this.renderPermissions() }
+             { this.renderOrganizations() }
+            </div>
+            <div className="row ml-3">
+             { this.renderSubmitButton() }
+            </div>
+           </Form>
+          </div>
+        );
+    }
+};
+
+export default withSnackbar(User);
diff --git a/gui/velociraptor/src/components/users/users.css b/gui/velociraptor/src/components/users/users.css
new file mode 100644
index 00000000000..45d9f4debd7
--- /dev/null
+++ b/gui/velociraptor/src/components/users/users.css
@@ -0,0 +1,48 @@
+.users {
+    max-height: calc(100vh - 145px);
+    max-width: calc(100vw - 45px);
+    overflow-y: scroll;
+}
+
+.users-search-table  {
+    padding-right: 0;
+    padding-left: 0;
+    margin-right: 15px;
+    max-height: calc(100vh - 150px);
+    overflow-y: auto;
+    position: fixed;
+    overflow-x: hidden;
+    direction: rtl;
+}
+
+.users-search-table a {
+    color: black;
+}
+
+.users-search-table a:hover {
+    text-decoration: none;
+}
+
+.users-search-table thead {
+    display: none;
+}
+
+.users-search-results {
+    padding-left: 20px;
+    padding-right: 20px;
+    height: calc(100vh - 150px);
+    box-sizing: border-box;
+    overflow-y: auto;
+}
+
+.users-search-results .results-viewer {
+    margin-bottom: 150px;
+    overflow: none;
+}
+
+.users-search-panel {
+    position: static;
+    width: 100%;
+    overflow-x: auto;
+    height: -webkit-fill-available;
+}
diff --git a/gui/velociraptor/src/components/users/users.js b/gui/velociraptor/src/components/users/users.js
new file mode 100644
index 00000000000..420c37aec7e
--- /dev/null
+++ b/gui/velociraptor/src/components/users/users.js
@@ -0,0 +1,485 @@
+import React, { Component } from 'react';
+import api from '../core/api-service.js';
+import Alert from 'react-bootstrap/Alert';
+import axios from 'axios';
+import Button from 'react-bootstrap/Button';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import User from './user.js';
+import T from '../i8n/i8n.js';
+import Dropdown from 'react-bootstrap/Dropdown';
+import DropdownButton from 'react-bootstrap/DropdownButton';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import InputGroup from 'react-bootstrap/InputGroup';
+import _ from 'lodash';
+import SplitPane from 'react-split-pane';
+import Navbar from 'react-bootstrap/Navbar';
+import Table  from 'react-bootstrap/Table';
+import Form from 'react-bootstrap/Form';
+import FormControl from 'react-bootstrap/FormControl';
+import Container from  'react-bootstrap/Container';
+import VeloTable from '../core/table.js';
+import UserConfig from '../core/user.js';
+import Spinner from '../utils/spinner.js';
+
+import './users.css';
+
+const roles = {
+    "administrator" : T("Server Administrator"),
+    "org_admin" : T("Organization Administrator"),
+    "reader" : T("Read-Only User"),
+    "analyst" : T("Analyst"),
+    "investigator" : T("Investigator"),
+    "artifact_writer" : T("Artifact Writer"),
+    "api" : T("Read-Only API Client"),
+};
+
+export default class Users extends Component {
+    static contextType = UserConfig;
+
+    state = {
+        fullSelecteddescriptor: {},
+        matchingDescriptors: [],
+        timeout: 0,
+        current_filter: "",
+        nameFilter: "",
+        roleFilter: "",
+        filteredUsers: [],
+        allUsers: {},
+        explicitFilter: true,
+        updatePending: false,
+        showUserTable: false,
+
+        users_initialized: false,
+        loading: false,
+        orgs_initialized: false,
+        context_found: false,
+    }
+
+    constructor(props, context) {
+        super(props, context);
+        let username = props.match && props.match.params && props.match.params.user;
+        if (username) {
+            this.state.explicitFilter = false;
+        }
+    }
+
+    componentDidMount = () => {
+        this.usersSource = axios.CancelToken.source();
+        this.orgsSource = axios.CancelToken.source();
+        if (this.nameInput) {
+            this.nameInput.focus();
+        }
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        if (prevProps === this.props && prevState === this.state && this.state.initialized) {
+            return;
+        }
+
+        if (this.state.users_initialized && this.state.orgs_initialized) {
+            return;
+        }
+
+        if (this.state.loading) {
+            return;
+        }
+
+        if (!prevState.loading && this.context.traits.username) {
+            this.loadUsersAndOrgs();
+        }
+    }
+
+    filterUsers(allUsers, nameFilter, roleFilter) {
+        let users = [];
+
+        for (const [username, user] of Object.entries(allUsers)) {
+            if (!username.startsWith(nameFilter)) {
+                continue;
+            }
+            if (roleFilter !== "" && !user.Roles.includes(roleFilter)) {
+                continue;
+            }
+            users.push(username);
+        }
+
+        return users.sort();
+    }
+
+    clearFilter(e) {
+        let users = this.filterUsers(this.state.allUsers, "", "");
+        this.setState({nameFilter: "", roleFilter: "", filteredUsers: users});
+    }
+
+    updateNameFilter(e, value) {
+        e.preventDefault();
+        if (value !== this.state.nameFilter) {
+            let users = this.filterUsers(this.state.allUsers, value, this.state.roleFilter);
+            this.setState({nameFilter: value, filteredUsers: users, explicitFilter: true});
+        }
+    }
+
+    updateRoleFilter(value) {
+        if (value !== this.state.roleFilter) {
+            let users = this.filterUsers(this.state.allUsers, this.state.nameFilter, value);
+            this.setState({roleFilter: value, filteredUsers: users});
+        }
+    }
+
+    isAdminUser() {
+        let perms = this.context.traits.Permissions;
+        return perms && (perms.server_admin || perms.super_user);
+    }
+
+    handleDelete(e, user) {
+        e.preventDefault();
+
+        if (!window.confirm(T("Do you want to delete?", user))) {
+            return;
+        }
+
+        api.delete_req("v1/DeleteUser/" + user, {}, this.usersSource.token).then((response) => {;
+            let names = {...this.state.allUsers};
+            delete names[user]
+
+            let filtered = this.state.filteredUsers.filter((elem) => { return user !== elem; });
+
+            this.setState({allUsers: names, filteredUsers: filtered});
+            this.props.history.push("/users/");
+        });
+    }
+
+    loadUsers() {
+        if (!this.isAdminUser() || this.state.users_initialized) {
+            return;
+        }
+
+        this.usersSource.cancel();
+        this.usersSource = axios.CancelToken.source();
+
+        api.post("v1/GetUsers", {with_roles: true},
+                 this.usersSource.token).then((response) => {
+            let names = {}
+            if (response.cancel) {
+                return;
+            }
+            response.data.users.forEach((user) => {
+                let roles = [];
+                if (user.Permissions && user.Permissions.roles) {
+                    roles = user.Permissions.roles;
+                }
+                names[user.name] = { Username: user.name, Roles: roles, Orgs: user.orgs }
+            });
+
+            let tableData = {
+                columns: [ "name", "Permissions", "orgs" ],
+                rows: response.data.users,
+            };
+
+            let headers = [ T("Username"), T("Permissions"), T("Organizations") ];
+
+            let filtered = Object.keys(names).sort()
+
+            this.setState({allUsers: names, filteredUsers: filtered,
+                           users_initialized: true,
+                           tableHeaders: headers, tableData: tableData});
+        });
+    }
+
+      loadOrgs() {
+        if (this.context.traits.Permissions.org_admin) {
+            if (this.state.orgs_initialized) {
+                return;
+            }
+
+            this.orgsSource.cancel();
+            this.orgsSource = axios.CancelToken.source();
+
+            api.get("v1/GetOrganizations", {}, this.orgsSource.token).then((response) => {
+                if (response.cancel) {
+                    return;
+                }
+
+                let orgs = response.data.orgs.map((elem) =>
+                        ({ id: elem.org_id, name: elem.name})
+                );
+                this.setState({orgs_initialized: true, orgs: orgs});
+              });
+          } else {
+              this.setState({orgs_initialized: true});
+          }
+    };
+
+    async loadUsersAndOrgs() {
+        this.setState({loading: true});
+        await Promise.all([this.loadUsers(), this.loadOrgs()]);
+        this.setState({loading: false});
+    }
+
+    onSelect(username, e) {
+        this.setState({ createUser: false });
+        this.props.history.push("/users/" + username);
+        e.preventDefault();
+        e.stopPropagation();
+
+        return false;
+    }
+
+    clickNewUser(e) {
+        this.setState({createUser: true, updatePending: true});
+        this.props.history.push("/users/");
+        e.preventDefault();
+        e.stopPropagation();
+
+        return false;
+    }
+
+    userCreatedCallback(username, roles) {
+        let newState = { allUsers : {...this.state.allUsers } };
+        newState.allUsers[username] = { Username: username, Roles: roles };
+        newState.filteredUsers = this.filterUsers(newState.allUsers,
+                                                  this.state.roleFilter,
+                                                  this.state.nameFilter);
+        this.setState(newState);
+        this.props.history.push("/users/" + username);
+    }
+
+    renderUserPanel() {
+        let mode = undefined;
+        let username = this.props.match && this.props.match.params && this.props.match.params.user;
+        let password_less = this.context.traits.password_less;
+
+        if (!this.state.users_initialized) {
+            return null;
+        }
+
+        if (username && !this.state.allUsers[username]) {
+            return <Alert variant="warning">{T("User does not exist", username)}</Alert>;
+        }
+
+        if (this.state.createUser) {
+            mode = "create";
+        } else if (username) {
+            mode = "edit"
+        }
+
+        if (mode) {
+            return (
+              <User mode={mode} user={username} admin={this.isAdminUser()}
+                    password_less={password_less} orgs={this.state.orgs}
+                    userCreatedCallback={(username, roles) => {this.userCreatedCallback(username, roles)}}/>);
+        } else {
+            return (<h2 className="no-content">{T("Select a user to view it")}</h2>);
+        }
+    }
+
+    renderUserRow(user) {
+        let selected = user === this.props.match.params.user;
+
+        return (
+          <tr key={user} className={ selected ? "row-selected" : undefined }>
+             <td onClick={(e) => this.onSelect(user, e)}>
+               {/* eslint jsx-a11y/anchor-is-valid: "off" */}
+               <a href="#" onClick={(e) => this.onSelect(user, e)}>{user}</a>
+             </td>
+          </tr>
+        );
+    }
+
+    renderUserSelector() {
+        let users = this.state.filteredUsers;
+        return (
+          <>
+            <Table bordered hover size="sm">
+              <tbody>
+                { users.map((username, idx) => {
+                    return this.renderUserRow(username);
+                })}
+              </tbody>
+            </Table>
+          </>
+        );
+    }
+
+    renderCreate() {
+        return (
+          <>
+            <Button title={T("Add New User")}
+                    onClick={(e) => this.clickNewUser(e)} variant="default">
+              <FontAwesomeIcon icon="plus"/>
+            </Button>
+          </>
+        );
+    }
+
+    renderDelete() {
+        if (this.props.match.params.user && !this.state.createUser) {
+            return (
+              <>
+                <Button title={T("Delete")}
+                            onClick={(e) => this.handleDelete(e, this.props.match.params.user)}
+                            variant="default">
+                  <FontAwesomeIcon icon="window-close"/>
+                </Button>
+              </>
+            );
+        }
+    }
+
+    renderLoadingSpinner() {
+        if (this.state.loading) {
+            return <FontAwesomeIcon icon="spinner" spin/>
+        } else {
+            return <FontAwesomeIcon icon="broom"/>
+        }
+    }
+
+    renderSearchNavbar() {
+        if (this.state.showUserTable || !this.isAdminUser()) {
+            return;
+        }
+        return (
+          <Form inline className="">
+            <InputGroup >
+              <InputGroup.Prepend>
+                <Button variant="outline-default"
+                        onClick={() => this.clearFilter()}
+                        size="sm">
+                  { this.renderLoadingSpinner() }
+                </Button>
+              </InputGroup.Prepend>
+              <FormControl size="sm"
+                           ref={(input) => { this.nameInput = input; }}
+                           value={this.state.explicitFilter ? this.state.nameFilter : ""}
+                           onChange={(e) => this.updateNameFilter(e, e.currentTarget.value)}
+                           placeholder={T("Search for user")}
+                           spellCheck="false"/>
+              <DropdownButton title={T(roles[this.state.roleFilter]) ||
+                              T("All roles")} variant="default"
+                              menuAlign="right">
+                  <Dropdown.Item title={T("All roles")}
+                           active={this.state.roleFilter === ""}
+                           onClick={() => {
+                               this.updateRoleFilter("");
+                           }}>
+                           {T("All roles")}
+                  </Dropdown.Item>
+
+                  { _.map(Object.keys(roles), (key, idx) => {
+                      return <Dropdown.Item
+                               key={key}
+                               title={roles[key]}
+                               active={key === this.state.roleFilter}
+                               onClick={() => {
+                                   this.updateRoleFilter(key);
+                               }}>
+                               {roles[key]}
+                             </Dropdown.Item>;
+                  })}
+              </DropdownButton>
+            </InputGroup>
+          </Form>
+        );
+    }
+
+    renderTableToggle() {
+        if (this.state.showUserTable) {
+            return (
+              <Button title={T("Show user selector")}
+                          onClick={() => this.setState({showUserTable: false})}
+                          variant="default">
+                <FontAwesomeIcon icon="list"/>
+              </Button>
+            );
+      }
+      return (
+        <Button title={T("Show user tables")}
+                    onClick={() => this.setState({showUserTable: true})}
+                    variant="default">
+          <FontAwesomeIcon icon="binoculars"/>
+        </Button>
+      );
+    }
+
+    renderUnprivilegedNavbar() {
+        return (
+          <Navbar className="justify-content-between">
+            <ButtonGroup>
+              { this.renderTableToggle() }
+            </ButtonGroup>
+          </Navbar>
+        );
+    }
+
+
+    renderAdminNavbar() {
+        return (
+          <Navbar className="justify-content-between">
+            <ButtonGroup>
+              { this.renderCreate() }
+              { this.renderTableToggle() }
+              { this.renderDelete() }
+            </ButtonGroup>
+            { this.renderSearchNavbar() }
+          </Navbar>
+        );
+    }
+
+    renderNavbar() {
+        if (this.isAdminUser()) {
+            return this.renderAdminNavbar();
+        }
+
+        return this.renderUnprivilegedNavbar();
+    }
+
+    renderOneUser() {
+        return (
+          <>
+            { this.renderUnprivilegedNavbar() }
+            <User mode={"view"} user={this.context.traits.username}
+                  password_less={this.context.traits.password_less} />
+          </>
+        );
+    }
+
+    render() {
+        if (!this.context.traits.username) {
+            return <Spinner loading={!(this.state.users_initialized && this.state.orgs_initialized)} />;
+        }
+        if (this.state.showUserTable) {
+            return (
+              <>
+                { this.renderNavbar() }
+                <div className="users-user-table">
+                <VeloTable
+                  className="col-12"
+                  rows={this.state.tableData.rows}
+                  headers={this.state.tableHeaders}
+                  columns={this.state.tableData.columns} />
+                </div>
+              </>
+            );
+        }
+
+        if (!this.isAdminUser()) {
+            return this.renderOneUser();
+        }
+
+        return (
+          <>
+            { this.renderNavbar() }
+            <div className="users-search-panel">
+              <Spinner loading={!(this.state.users_initialized && this.state.orgs_initialized)} />
+              <SplitPane split="vertical" defaultSize="70%">
+                <div className="users-search-results">
+                  { this.renderUserPanel() }
+                </div>
+                <Container className="user-search-table selectable">
+                  { this.renderUserSelector() }
+                </Container>
+                </SplitPane>
+            </div>
+          </>
+        );
+    }
+};
diff --git a/gui/velociraptor/src/index.js b/gui/velociraptor/src/index.js
index 896354f1a27..618f22a4f79 100644
--- a/gui/velociraptor/src/index.js
+++ b/gui/velociraptor/src/index.js
@@ -23,7 +23,7 @@ import { faHome, faCrosshairs, faWrench, faEye, faServer, faBook, faLaptop,
          faCompressAlt, faBackward, faMedkit, faVirusSlash, faBookmark, faHeart,
          faFileCode, faFlag, faTrashAlt, faClock, faLock, faLockOpen, faCloud,
          faCloudDownloadAlt, faUserEdit, faFilter, faSortAlphaUp, faSortAlphaDown,
-         faInfo, faBug
+         faInfo, faBug, faUser, faList
        } from '@fortawesome/free-solid-svg-icons';
 
 library.add(faHome, faCrosshairs, faWrench, faEye, faServer, faBook, faLaptop,
@@ -38,7 +38,7 @@ library.add(faHome, faCrosshairs, faWrench, faEye, faServer, faBook, faLaptop,
             faForward, faCalendarAlt, faCompressAlt, faBackward, faMedkit, faVirusSlash,
             faBookmark, faHeart, faFileCode, faFlag, faTrashAlt, faClock, faLock, faLockOpen,
             faCloud, faCloudDownloadAlt, faUserEdit, faFilter, faBug,
-            faSortAlphaUp, faSortAlphaDown, faInfo,
+            faSortAlphaUp, faSortAlphaDown, faInfo, faUser, faList,
            );
 
 ReactDOM.render(