diff --git a/packages/hydrooj/package.json b/packages/hydrooj/package.json
index 564beec59..3f63420f4 100644
--- a/packages/hydrooj/package.json
+++ b/packages/hydrooj/package.json
@@ -1,6 +1,6 @@
 {
     "name": "hydrooj",
-    "version": "4.2.5",
+    "version": "4.2.6",
     "bin": "bin/hydrooj.js",
     "main": "src/plugin-api",
     "module": "src/plugin-api",
diff --git a/packages/hydrooj/src/interface.ts b/packages/hydrooj/src/interface.ts
index 376b3fc05..81fffa2d7 100644
--- a/packages/hydrooj/src/interface.ts
+++ b/packages/hydrooj/src/interface.ts
@@ -695,7 +695,7 @@ export interface Lib extends Record<string, any> {
     problemSearch: ProblemSearch;
 }
 
-export type UIInjectableFields = 'ProblemAdd' | 'Nav' | 'UserDropdown';
+export type UIInjectableFields = 'ProblemAdd' | 'Nav' | 'UserDropdown' | 'DomainManage' | 'ControlPanel';
 export interface UI {
     template: Record<string, string>,
     nodes: Record<UIInjectableFields, any[]>,
diff --git a/packages/hydrooj/src/lib/ui.ts b/packages/hydrooj/src/lib/ui.ts
index c2f6277cc..f4f8a0057 100644
--- a/packages/hydrooj/src/lib/ui.ts
+++ b/packages/hydrooj/src/lib/ui.ts
@@ -63,6 +63,19 @@ inject('Nav', 'ranking', { prefix: 'ranking' }, PERM.PERM_VIEW_RANKING);
 inject('Nav', 'domain_dashboard', { prefix: 'domain' }, PERM.PERM_EDIT_DOMAIN);
 inject('Nav', 'manage_dashboard', { prefix: 'manage' }, PRIV.PRIV_EDIT_SYSTEM);
 inject('ProblemAdd', 'problem_create', { icon: 'add', text: 'Create Problem' });
+inject('ControlPanel', 'manage_dashboard');
+inject('ControlPanel', 'manage_script');
+inject('ControlPanel', 'manage_user_import');
+inject('ControlPanel', 'manage_user_priv');
+inject('ControlPanel', 'manage_setting');
+inject('ControlPanel', 'manage_config');
+inject('DomainManage', 'domain_dashboard', { family: 'Properties', icon: 'info' });
+inject('DomainManage', 'domain_edit', { family: 'Properties', icon: 'info' });
+inject('DomainManage', 'domain_join_applications', { family: 'Properties', icon: 'info' });
+inject('DomainManage', 'domain_role', { family: 'Access Control', icon: 'user' });
+inject('DomainManage', 'domain_user', { family: 'Access Control', icon: 'user' });
+inject('DomainManage', 'domain_permission', { family: 'Access Control', icon: 'user' });
+inject('DomainManage', 'domain_group', { family: 'Access Control', icon: 'user' });
 
 global.Hydro.ui.inject = inject;
 global.Hydro.ui.nodes = nodes as any;
diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json
index 933871009..1b5ac969e 100644
--- a/packages/ui-default/package.json
+++ b/packages/ui-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.42.1",
+  "version": "4.42.2",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "index.ts",
diff --git a/packages/ui-default/templates/domain_base.html b/packages/ui-default/templates/domain_base.html
index f85cf31c1..44aa601a5 100644
--- a/packages/ui-default/templates/domain_base.html
+++ b/packages/ui-default/templates/domain_base.html
@@ -7,27 +7,18 @@
   <div class="medium-3 columns"><div data-sticky="large">
     <div class="section side">
       <ol class="menu">
-        <li class="menu__item">
-          <div class="menu__link expandable">
-            <span class="icon icon-info"></span> {{ _('Properties') }}
-          </div>
-          <ol class="menu collapsed">
-            {{ sidemenu.render_item(null, 'domain_dashboard') }}
-            {{ sidemenu.render_item(null, 'domain_edit') }}
-            {{ sidemenu.render_item(null, 'domain_join_applications') }}
-          </ol>
-        </li>
-        <li class="menu__item">
-          <div class="menu__link expandable">
-            <span class="icon icon-user"></span> {{ _('Access Control') }}
-          </div>
-          <ol class="menu collapsed">
-            {{ sidemenu.render_item(null, 'domain_role') }}
-            {{ sidemenu.render_item(null, 'domain_user') }}
-            {{ sidemenu.render_item(null, 'domain_permission') }}
-            {{ sidemenu.render_item(null, 'domain_group') }}
-          </ol>
-        </li>
+        {%- for family, items in ui.getNodes('DomainManage')|groupby('args.family') -%}
+          <li class="menu__item">
+            <div class="menu__link expandable">
+              <span class="icon icon-{{ items[0].args.icon }}"></span> {{ _(family) }}
+            </div>
+            <ol class="menu collapsed">
+              {%- for item in items -%}
+                {{ sidemenu.render_item(null, item.name) }}
+              {%- endfor -%}
+            </ol>
+          </li>
+        {% endfor %}
       </ol>
     </div>
   </div></div>
diff --git a/packages/ui-default/templates/manage_base.html b/packages/ui-default/templates/manage_base.html
index 3a662f781..8434cb956 100644
--- a/packages/ui-default/templates/manage_base.html
+++ b/packages/ui-default/templates/manage_base.html
@@ -12,12 +12,9 @@
             <span class="icon icon-info"></span> {{ _('Properties') }}
           </div>
           <ol class="menu collapsed">
-            {{ sidemenu.render_item(null, 'manage_dashboard') }}
-            {{ sidemenu.render_item(null, 'manage_script') }}
-            {{ sidemenu.render_item(null, 'manage_user_import') }}
-            {{ sidemenu.render_item(null, 'manage_user_priv') }}
-            {{ sidemenu.render_item(null, 'manage_setting') }}
-            {{ sidemenu.render_item(null, 'manage_config') }}
+            {%- for item in ui.getNodes('ControlPanel') -%}
+              {{ sidemenu.render_item(item.icon, item.name) }}
+            {%- endfor -%}
           </ol>
         </li>
       </ol>