diff --git a/packages/hydrooj/src/handler/training.ts b/packages/hydrooj/src/handler/training.ts
index ef021706..78fcda2b 100644
--- a/packages/hydrooj/src/handler/training.ts
+++ b/packages/hydrooj/src/handler/training.ts
@@ -150,8 +150,10 @@ class TrainingDetailHandler extends Handler {
             donePids: Array.from(donePids),
             done: doneNids.size === tdoc.dag.length,
         });
+        const groups = this.user.hasPerm(PERM.PERM_EDIT_DOMAIN)
+            ? await user.listGroup(domainId) : [];
         this.response.body = {
-            tdoc, tsdoc, pids, pdict, psdict, ndict, nsdict, udoc, udict, selfPsdict,
+            tdoc, tsdoc, pids, pdict, psdict, ndict, nsdict, udoc, udict, selfPsdict, groups,
         };
         this.response.body.tdoc.description = this.response.body.tdoc.description
             .replace(/\(file:\/\//g, `(./${tdoc.docId}/file/`)
diff --git a/packages/ui-default/pages/training_detail.page.ts b/packages/ui-default/pages/training_detail.page.ts
index 5cd44f4c..4eb28155 100644
--- a/packages/ui-default/pages/training_detail.page.ts
+++ b/packages/ui-default/pages/training_detail.page.ts
@@ -32,11 +32,12 @@ async function handleSection(ev: JQuery.ClickEvent<Document>, type: SectionActio
 
 function searchUser() {
   const val = $('input[name=uid]').val().toString().toLowerCase();
+  const group = $('select[name=group]').val().toString().toLowerCase();
   $('.enroll_user_menu_item').each((i, e) => {
     const $item = $(e);
     const $username = $item.data('uname').toString().toLowerCase();
     const $uid = $item.data('uid').toString();
-    $item.toggle($username.includes(val) || $uid === val);
+    $item.toggle(($username.includes(val) && (group === 'all' || group.split(',').includes($uid))) || $uid === val);
   });
 }
 
@@ -70,6 +71,7 @@ async function handleHashChange() {
 
 const page = new NamedPage('training_detail', () => {
   $('.search__input').on('input', _.debounce(searchUser, 500));
+  $('select[name=group]').on('change', searchUser);
   $('#searchForm').on('submit', selectUser);
   $(document).on('click', '[name="training__section__expand"]', (ev) => handleSection(ev, 'expand'));
   $(document).on('click', '[name="training__section__collapse"]', (ev) => handleSection(ev, 'collapse'));
diff --git a/packages/ui-default/templates/training_detail.html b/packages/ui-default/templates/training_detail.html
index c24b99f5..60b77c78 100644
--- a/packages/ui-default/templates/training_detail.html
+++ b/packages/ui-default/templates/training_detail.html
@@ -7,6 +7,12 @@
       <ol class="menu">
         <li class="menu__item nojs--hide">
           <form method="get" id="searchForm">
+            <select name="group" class="select"{% if not groups.length %} style="display:none"{% endif %}>
+              <option value="all" selected>{{ _('All') }}</option>
+              {% for group in groups %}
+                <option value="{{ group.uids.join(',') }}">{{ group.name }}</option>
+              {% endfor %}
+            </select>
             <input name="uid" type="text" class="search__input textbox" placeholder="{{ _('Select User') }}">
           </form>
         </li>