diff --git a/static/js/groupsDialog.js b/static/js/groupsDialog.js
new file mode 100644
index 000000000..14c2e7da0
--- /dev/null
+++ b/static/js/groupsDialog.js
@@ -0,0 +1,217 @@
+'use strict';
+
+pandora.ui.groupsDialog = function(options) {
+
+    var that = Ox.Dialog({
+            buttons: [
+                Ox.Button({
+                    title: Ox._('Done')
+                })
+                .bindEvent({
+                    click: function() {
+                        that.close();
+                    }
+                })
+            ],
+            closeButton: true,
+            content: Ox.LoadingScreen().start(),
+            height: 256,
+            removeOnClose: true,
+            title: Ox._('Manage Groups'),
+            width: 584 + Ox.UI.SCROLLBAR_SIZE
+        }),
+
+        isItem = options.type == 'item',
+
+        $content,
+        $label,
+        $groups = [],
+        $checkboxes = [],
+        $inputs = [],
+        $labels = [],
+        $removeButtons = [],
+        $addButton,
+
+        groups,
+        selectedGroups;
+
+    pandora.api[isItem ? 'get' : 'getUser']({
+        id: options.id,
+        keys: ['groups']
+    }, function(result) {
+        selectedGroups = result.data.groups;
+        renderGroups();
+    });
+
+    function addGroup() {
+        // disableElements();
+        pandora.api.addGroup({name: Ox._('Untitled')}, function(result) {
+            renderGroups(result.data.id);
+        });
+    }
+
+    function disableElements() {
+        $checkboxes.concat($inputs).concat($removeButtons).concat($addButton)
+            .forEach(function($element) {
+                $element.options({disabled: true});
+            });
+    }
+
+    function edit(id) {
+        selectedGroups = groups.filter(function(group, index) {
+            return $checkboxes[index].value();
+        }).map(function(group) {
+            return group.name;
+        });
+        // disableElements();
+        Ox.Request.clearCache(isItem ? 'get' : 'getUser');
+        pandora.api[isItem ? 'edit' : 'editUser']({
+            id: options.id,
+            groups: selectedGroups
+        }, function(result) {
+            // enableElements();
+            updateLabel(id);
+            that.triggerEvent('groups', {groups: selectedGroups});
+        });
+    }
+
+    function editGroup(id, name) {
+        // disableElements();
+        pandora.api.editGroup({id: id, name: name}, function(result) {
+            renderGroups();
+        });
+    }
+
+    function enableElements() {
+        $checkboxes.concat($inputs).concat($removeButtons).concat($addButton)
+            .forEach(function($element) {
+                $element.options({disabled: false});
+            });
+    }
+
+    function getLabelTitle(group) {
+        return (group.items ? Ox.formatNumber(group.items) : Ox._('No'))
+            + ' ' + Ox._(group.items == 1 ? 'item' : 'items') + ', '
+            + (group.users ? Ox.formatNumber(group.users) : Ox._('No'))
+            + ' ' + Ox._(group.users == 1 ? 'user' : 'users');
+    }
+
+    function removeGroup(id) {
+        // disableElements();
+        pandora.api.removeGroup({id: id}, function(result) {
+            var index = Ox.getIndexById(groups, id),
+                name = groups[index].name;
+            groups.splice(index, 1);
+            index = selectedGroups.indexOf(name);
+            if (index > -1) {
+                selectedGroups.splice(index, 1);
+                that.triggerEvent('groups', {groups: selectedGroups});
+            }
+            renderGroups();
+        });
+    }
+
+    function renderGroup(group, index) {
+        var $group = $groups[index] = Ox.$('<div>')
+            .appendTo($content);
+        $checkboxes[index] = Ox.Checkbox({
+                value: Ox.contains(selectedGroups, group.name)
+            })
+            .css({
+                float: 'left',
+                margin: '4px'
+            })
+            .bindEvent({
+                change: function() {
+                    edit(group.id);
+                }
+            })
+            .appendTo($group);
+        $inputs[index] = Ox.Input({
+                value: group.name,
+                width: 192
+            })
+            .css({
+                float: 'left',
+                margin: '4px'
+            })
+            .bindEvent({
+                change: function(data) {
+                    editGroup(group.id, data.value);
+                }
+            })
+            .appendTo($group);
+        $labels[index] = Ox.Label({
+                title: getLabelTitle(group),
+                width: 192
+            })
+            .css({
+                float: 'left',
+                margin: '4px'
+            })
+            .appendTo($group),
+        $removeButtons[index] = Ox.Button({
+                title: Ox._('Remove Group'),
+                width: 128
+            })
+            .css({
+                float: 'left',
+                margin: '4px'
+            })
+            .bindEvent({
+                click: function() {
+                    removeGroup(group.id);
+                }
+            })
+            .appendTo($group);
+    }
+
+    function renderGroups(focusInput) {
+        Ox.Request.clearCache('getGroups');
+        pandora.api.getGroups(function(result) {
+            groups = Ox.sortBy(result.data.groups, 'name');
+            $content = Ox.Element().css({margin: '12px'});
+            $label = Ox.Label({
+                    textAlign: 'center',
+                    title: Ox._(
+                        isItem ? pandora.site.itemName.singular : 'User'
+                    ) + ': ' + options.name,
+                    width: 552
+                })
+                .css({
+                    margin: '4px'
+                })
+                .appendTo($content);
+            groups.forEach(renderGroup);
+            $addButton = Ox.Button({
+                    title: Ox._('Add Group'),
+                    width: 128
+                })
+                .css({
+                    float: 'left',
+                    margin: '4px 4px 4px 428px'
+                })
+                .bindEvent({
+                    click: addGroup
+                })
+                .appendTo($content);
+            that.options({content: $content});
+            if (focusInput) {
+                $inputs[Ox.getIndexById(groups, focusInput)].focusInput(true);
+            }
+        });
+    }
+
+    function updateLabel(id) {
+        Ox.Request.clearCache('getGroup');
+        pandora.api.getGroup({id: id}, function(result) {
+            Ox.print('GROUP', result.data, Ox.getIndexById(groups, id));
+            $labels[Ox.getIndexById(groups, id)].options({
+                title: getLabelTitle(result.data)
+            });
+        });
+    }
+
+    return that;
+
+};